feat(angular): angular mount #22858

jordanpowell88 · 2022-07-19T22:27:11Z

User facing changelog

Adds @cypress/angular mount

Additional details

This is necessary to enable component testing in Angular.
It is based upon https://github.com/jordanpowell88/angular-ct

Steps to test

We can use system tests from #22314 to validate this work

How has the user experience changed?

Nothing changes from a user experience as this is a new feature

PR Tasks

[ na] Have tests been added/updated?
Has the original issue (or this PR, if no issue exists) been tagged with a release in ZenHub? (user-facing changes only)
Has a PR for user-facing changes been opened in cypress-documentation?
[ na] Have API changes been updated in the type definitions?

cypress-bot · 2022-07-19T22:27:13Z

Thanks for taking the time to open a PR!

Create a Draft Pull Request if your PR is not ready for review. Mark the PR as Ready for Review when you're ready for a Cypress team member to review the PR.
Become familiar with the Code Review Checklist for guidelines on coding standards and what needs to be done before a PR can be merged.

cypress · 2022-07-20T16:14:47Z

Test summary

4379 • 0 • 51 • 0 • 1

Run details


Project	cypress
Status	Passed
Commit	`b54eac5`
Started	Jul 26, 2022 10:32 PM
Ended	Jul 26, 2022 10:43 PM
Duration	11:15 💡
OS	Linux Debian - 11.3
Browser	Firefox 99

View run in Cypress Dashboard ➡️

Flakiness

	cypress/e2e/commands/net_stubbing.cy.ts		1
1	network stubbing > waiting and aliasing > should handle aborted requests

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

lmiller1990

Couple of small questions! Excited for this.

cli/angular/README.md

lmiller1990 · 2022-07-21T06:49:10Z

npm/angular/src/mount.ts

+  component: Type<T>,
+  config: TestBedConfig<T> = {},
+  autoDetectChanges = true,
+): Cypress.Chainable<MountResponse<T>> {


Our other adapters (react, vue) both accept some additional args that let you inject some stylesheets. I wonder if this is something that would also be useful for angular?

This is implemented using @cypress/mount-utils.

React example:

cypress/npm/react/src/mount.ts

Lines 4 to 10 in 7b58800

import {

injectStylesBeforeElement,

StyleOptions,

getContainerEl,

ROOT_SELECTOR,

setupHooks,

} from '@cypress/mount-utils'

This is a behavior that you cannot do in Angular. You cannot just import a stylesheet at the component level. You have global stylesheets which will be brought in and added to the webpack compilation via the users angular.json file, and the component's stylesheet itself

lmiller1990 · 2022-07-21T06:51:12Z

npm/angular/src/mount.ts

+
+  return component
+}
+


How do we actually mount the component? React/Vue use a data-cy-root selector which they import https://github.com/cypress-io/cypress/blob/develop/npm/react/src/mount.ts#L8

I don't see how we go from component -> mount to DOM here. Am I missing it, or is that implemented in another PR?

https://github.com/cypress-io/cypress/pull/22858/files#diff-617e9faa6b88ce75b6ca3135c54ae7000965719cc2d6c9ae9813178d9da19170

By default Angular mounts the component for you to the DOM using the angular.json build.options.index property. In THIS PR we change this value from what the user has to cypress/support/component-index.html. It is then in that file (that we will need to generate as part of the migration work) that angular will mount the component

lmiller1990

My questions were answered 👍

Did not try locally yet but code is 💯

lmiller1990 · 2022-07-24T23:49:21Z

Seems linting and a few other steps are failing, might be good to get those green before any other reviews.

ZachJW34 · 2022-07-25T22:08:02Z

circle.yml

@@ -1791,14 +1791,6 @@ jobs:
      - run:
          name: Build
          command: yarn workspace @cypress/angular build
-      - run:


No tests for npm/angular. To test this, we would need to install all of the webpack deps for Angular so all of the mounting tests are found in the system-tests/project-fixtures/angular/src/app/mount.cy.ts which are run in npm-webpack-dev-server e2e tests.

ZachJW34 · 2022-07-25T22:09:16Z

npm/angular/README.md

@@ -1,221 +1,154 @@
-# @cypress/angular


Should clean this up to be a minimal README like the other mount packages since most of this information will be in the official docs.

ZachJW34 · 2022-07-25T22:10:46Z

npm/angular/package.json

-    "@cypress/mount-utils": "0.0.0-development",
-    "debug": "^4.3.2"
+    "prebuild": "rimraf dist",
+    "build": "tsc || echo 'built, with type errors'",


Realized that rollup is overkill for this package. The versions of Angular we support expect esm packages so we only need to publish one entrypoint, so using tsc directly is sufficient.

ZachJW34 · 2022-07-25T22:12:04Z

npm/angular/src/mount.ts

@@ -0,0 +1,225 @@
+import 'zone.js'


Might want to move side-effects into a separate file, though this would increase the complexity of scaffolding during launchpad setup.

I think this illustrates the problem of trying to have no side effects - this import makes perfect sense here, it's required for Angular mounting, so it should be as near the mount code as possible.

An alternative would be scaffold it in component.ts, but then we increase the complexity of component.js for... not much benefit. imo. Also, is there a downside to having people import/bundle zone.js in E2E? (If they don't want to, they just shouldn't mix their E2E and CT support code).

There shouldn't be any issues for importing zone.js in e2e tests. I was harping on not having side effects a while ago but now I would rather have side-effects if it means for a cleaner support file and less complexity during project setup.

ZachJW34 · 2022-07-25T22:15:40Z

cli/types/tslint.json

+      "./sinon-chai/*",
+      // Copied from net-stubbing and renamed to a declaration file. Since it's not originally
+      // a declaration file, we need to exclude it from linting.
+      "./net-stubbing.d.ts"


Fixed #22417 as a part of this work. Angular crawls all of the imported types and emits warnings due to this file not being included in the compilation. .d.ts files are fine and it's what this file should be anyway. I had to ignore this file in the tslint.json as dtslint complains. Since this file is originally a normal ts file, fixing the dtslint warnings causes ts warnings, so ignoring seemed best.

jordanpowell88 · 2022-07-26T14:07:16Z

2 things I am noticing after doing some additional testing with the binary is that we don't have a good way to support the following 2 scenarios:

content project (ie: <ng-content></ng-content>
Outputs: (we need a way to spy on the emitted events)

jordanpowell88 changed the title ~~Angular mount~~ feat(angular): angular mount Jul 19, 2022

jordanpowell88 marked this pull request as ready for review July 20, 2022 15:19

jordanpowell88 requested review from a team as code owners July 20, 2022 15:19

jordanpowell88 requested review from ryanthemanuel and removed request for a team July 20, 2022 15:19

jordanpowell88 force-pushed the angular-mount branch from 21a03cb to 019476e Compare July 20, 2022 15:43

lmiller1990 reviewed Jul 21, 2022

View reviewed changes

jordanpowell88 force-pushed the angular-mount branch from 019476e to 7ecf3f8 Compare July 21, 2022 11:03

jordanpowell88 requested review from ZachJW34 and a team July 21, 2022 13:48

lmiller1990 approved these changes Jul 22, 2022

View reviewed changes

jordanpowell88 added 5 commits July 22, 2022 14:53

chore(angular): remove angular lib

1bec790

feat(angular): create mount lib

7f5c67a

fix: typescript hoisting issue

4951e9b

task(cli): remove files that should be ignored

ca7c8fa

build(angular): fix test script to just return ok until we get tests

255c5d6

jordanpowell88 force-pushed the angular-mount branch from 7ecf3f8 to 255c5d6 Compare July 22, 2022 19:06

ZachJW34 added 2 commits July 22, 2022 15:07

rename net-stubbing types to declaration format

1bff85d

log mount, remove local mount, add to postbuild

8224cdf

ZachJW34 added 4 commits July 25, 2022 16:11

add mount tests and fix dtslint

ebbea48

remove yarn test script, revert root package.json changes

9fc4850

Merge remote-tracking branch 'origin/develop' into angular-mount

25dbdad

fix dtslint again

c7a3dfe

ZachJW34 reviewed Jul 25, 2022

View reviewed changes

build binaries

814791b

ryanthemanuel approved these changes Jul 26, 2022

View reviewed changes

ZachJW34 and others added 3 commits July 26, 2022 14:56

Merge remote-tracking branch 'origin/develop' into angular-mount

86e8e83

revert circle.yml

c42c939

ref(angular): rename config inputs to componentProperties

b54eac5

ZachJW34 merged commit 4131b1f into develop Jul 26, 2022

ZachJW34 deleted the angular-mount branch July 26, 2022 22:44

This was referenced Jul 26, 2022

Add Angular mount package #22813

Closed

node_modules/cypress/types/net-stubbing.ts should be a .d.ts file #22417

Closed

ZachJW34 mentioned this pull request Aug 5, 2022

Angular CT Support #22819

Closed

ZachJW34 mentioned this pull request Nov 15, 2022

net-stubbing.ts breaks some TS tooling, should be .d.ts #15644

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(angular): angular mount #22858

feat(angular): angular mount #22858

jordanpowell88 commented Jul 19, 2022 •

edited by ZachJW34

cypress-bot bot commented Jul 19, 2022

cypress bot commented Jul 20, 2022 •

edited

lmiller1990 left a comment

lmiller1990 Jul 21, 2022

jordanpowell88 Jul 21, 2022 •

edited

lmiller1990 Jul 21, 2022

jordanpowell88 Jul 21, 2022

lmiller1990 left a comment

lmiller1990 commented Jul 24, 2022

ZachJW34 Jul 25, 2022

ZachJW34 Jul 25, 2022

ZachJW34 Jul 25, 2022 •

edited

ZachJW34 Jul 25, 2022

lmiller1990 Jul 25, 2022 •

edited

ZachJW34 Jul 25, 2022

ZachJW34 Jul 25, 2022

jordanpowell88 commented Jul 26, 2022

	import {
	injectStylesBeforeElement,
	StyleOptions,
	getContainerEl,
	ROOT_SELECTOR,
	setupHooks,
	} from '@cypress/mount-utils'

feat(angular): angular mount #22858

feat(angular): angular mount #22858

Conversation

jordanpowell88 commented Jul 19, 2022 • edited by ZachJW34

User facing changelog

Additional details

Steps to test

How has the user experience changed?

PR Tasks

cypress-bot bot commented Jul 19, 2022

cypress bot commented Jul 20, 2022 • edited

Test summary

Run details

Flakiness

lmiller1990 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jordanpowell88 Jul 21, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lmiller1990 left a comment

Choose a reason for hiding this comment

lmiller1990 commented Jul 24, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ZachJW34 Jul 25, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lmiller1990 Jul 25, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jordanpowell88 commented Jul 26, 2022

jordanpowell88 commented Jul 19, 2022 •

edited by ZachJW34

cypress bot commented Jul 20, 2022 •

edited

jordanpowell88 Jul 21, 2022 •

edited

ZachJW34 Jul 25, 2022 •

edited

lmiller1990 Jul 25, 2022 •

edited