jscutlery / devkit Goto Github PK

View Code? Open in Web Editor NEW

228.0 8.0 13.0 31.97 MB

Tools that make Angular developer's life easier.

License: MIT License

JavaScript 2.50% TypeScript 74.90% CSS 0.06% HTML 0.75% Shell 0.03% Rust 21.76%

testing e2e cypress angular playwright rxjs

devkit's People

Contributors

Stargazers

Watchers

Forkers

debroo jefiozie marcosellys srleecode juristr laohuw dianjuar mikelgo sikado nartc smargoli2 dbk-anick abaran30

devkit's Issues

Slow load time for test suite

Using the test harness code causes the test suite to take 4 seconds on my machine before it starts running. Is this because of all the cdk testing code that is required?

With test harness
https://user-images.githubusercontent.com/13536934/103714352-971fa900-5012-11eb-89e6-d31cdce80be6.mp4

With default cypress
https://user-images.githubusercontent.com/13536934/103714928-55dbc900-5013-11eb-9acc-766d71f03bfb.mp4

To reproduce the issue:

Clone https://github.com/srlee309/component-commands-example
Run: ng run storybook-example-form:storybook-e2e

How to use this in storybook or E2E tests

I am getting the below error when I try to run this with a storybook test.

"Error: zone-testing.js is needed for the async() test helper but could not be found. Please make sure that your environment includes zone.js/dist/zone-testing.js".

If it cannot be used in storybook/E2E tests, can you please update the documentation to say this or if it can can you please add some information to describe how to get it working.

To reproduce the error:

Clone https://github.com/srlee309/component-commands-example
Run: ng run storybook-example-form:storybook-e2e

This is the spec that is failing.
https://github.com/srlee309/component-commands-example/blob/master/libs/example/form/.cypress/src/integration/storybook/form-component-test-harness.spec.ts

import '@jscutlery/cypress-harness/support'; is in the index.
https://github.com/srlee309/component-commands-example/blob/master/libs/example/form/.cypress/src/support/index.ts

Use `@cypress/mount-utils`

Use @cypress/mount-utils cypress-io/cypress#15903 (comment)

Error: Cannot find module '@angular-devkit/build-angular/src/webpack/configs

Hello,

I am attempting to get started using your @jscutlery/cypress-angular package with an angular component library project I am working with (using ng9 by the way)

Anyway, following the setup guide, the necessary cypress directory and config files have been added to the particular project I want to test with.

When I attempt to open the component test runner against the project, I get the following error:

robert.parker@AL-CAR-09637 nepal-ng-common-components % npx cypress open-ct --project projects/ng-generic-components
Error: The plugins file is missing or invalid.

Your `pluginsFile` is set to `/Users/robert.parker/Documents/Github/nepal-ng-common-components/projects/ng-generic-components/cypress/plugins/index.ts`, but either the file is missing, it contains a syntax error, or threw an error when required. The `pluginsFile` must be a `.js`, `.ts`, or `.coffee` file.

Or you might have renamed the extension of your `pluginsFile`. If that's the case, restart the test runner.

Please fix this, or set `pluginsFile` to `false` if a plugins file is not necessary for your project.
    at Object.get (/Users/robert.parker/Library/Caches/Cypress/7.3.0/Cypress.app/Contents/Resources/app/packages/server/lib/errors.js:988:15)
    at EventEmitter.<anonymous> (/Users/robert.parker/Library/Caches/Cypress/7.3.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/index.js:154:21)
    at EventEmitter.emit (events.js:315:20)
    at ChildProcess.<anonymous> (/Users/robert.parker/Library/Caches/Cypress/7.3.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/util.js:19:22)
    at ChildProcess.emit (events.js:315:20)
    at emit (internal/child_process.js:903:12)
    at processTicksAndRejections (internal/process/task_queues.js:81:21)
 {
  isCypressErr: true,
  type: 'PLUGINS_FILE_ERROR',
  details: "Error: Cannot find module '@angular-devkit/build-angular/src/webpack/configs'\n" +
    'Require stack:\n' +
    '- /Users/robert.parker/Documents/Github/nepal-ng-common-components/node_modules/@jscutlery/cypress-angular-dev-server/src/lib/create-angular-webpack-config.js\n' +
    '- /Users/robert.parker/Documents/Github/nepal-ng-common-components/node_modules/@jscutlery/cypress-angular-dev-server/src/lib/start-angular-dev-server.js\n' +
    '- /Users/robert.parker/Documents/Github/nepal-ng-common-components/node_modules/@jscutlery/cypress-angular-dev-server/src/index.js\n' +
    '- /Users/robert.parker/Documents/Github/nepal-ng-common-components/node_modules/@jscutlery/cypress-angular/src/index.js\n' +
    '- /Users/robert.parker/Documents/Github/nepal-ng-common-components/projects/ng-generic-components/cypress/plugins/index.ts\n' +
    '- /Users/robert.parker/Library/Caches/Cypress/7.3.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/run_plugins.js\n' +
    '- /Users/robert.parker/Library/Caches/Cypress/7.3.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/index.js\n' +
    '    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:887:15)\n' +
    '    at Function.Module._resolveFilename (/Users/robert.parker/Library/Caches/Cypress/7.3.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/tsconfig-paths/lib/register.js:75:40)\n' +
    '    at Module._load (internal/modules/cjs/loader.js:732:27)\n' +
    '    at Function.f._load (electron/js2c/asar_bundle.js:5:12789)\n' +
    '    at Module.require (internal/modules/cjs/loader.js:959:19)\n' +
    '    at require (internal/modules/cjs/helpers.js:88:18)\n' +
    '    at Object.<anonymous> (/Users/robert.parker/Documents/Github/nepal-ng-common-components/packages/cypress-angular-dev-server/src/lib/create-angular-webpack-config.ts:4:1)\n' +
    '    at Module._compile (internal/modules/cjs/loader.js:1078:30)\n' +
    '    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1108:10)\n' +
    '    at Module.load (internal/modules/cjs/loader.js:935:32)\n' +
    '    at Module._load (internal/modules/cjs/loader.js:776:14)\n' +
    '    at Function.f._load (electron/js2c/asar_bundle.js:5:12789)\n' +
    '    at Module.require (internal/modules/cjs/loader.js:959:19)\n' +
    '    at require (internal/modules/cjs/helpers.js:88:18)\n' +
    '    at Object.<anonymous> (/Users/robert.parker/Documents/Github/nepal-ng-common-components/packages/cypress-angular-dev-server/src/lib/start-angular-dev-server.ts:4:1)\n' +
    '    at Module._compile (internal/modules/cjs/loader.js:1078:30)\n' +
    '    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1108:10)\n' +
    '    at Module.load (internal/modules/cjs/loader.js:935:32)\n' +
    '    at Module._load (internal/modules/cjs/loader.js:776:14)\n' +
    '    at Function.f._load (electron/js2c/asar_bundle.js:5:12789)\n' +
    '    at Module.require (internal/modules/cjs/loader.js:959:19)\n' +
    '    at require (internal/modules/cjs/helpers.js:88:18)'
}
Error: The plugins file is missing or invalid.

Your `pluginsFile` is set to `/Users/robert.parker/Documents/Github/nepal-ng-common-components/projects/ng-generic-components/cypress/plugins/index.ts`, but either the file is missing, it contains a syntax error, or threw an error when required. The `pluginsFile` must be a `.js`, `.ts`, or `.coffee` file.

Or you might have renamed the extension of your `pluginsFile`. If that's the case, restart the test runner.

Please fix this, or set `pluginsFile` to `false` if a plugins file is not necessary for your project.
    at Object.get (/Users/robert.parker/Library/Caches/Cypress/7.3.0/Cypress.app/Contents/Resources/app/packages/server/lib/errors.js:988:15)
    at EventEmitter.<anonymous> (/Users/robert.parker/Library/Caches/Cypress/7.3.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/index.js:154:21)
    at EventEmitter.emit (events.js:315:20)
    at ChildProcess.<anonymous> (/Users/robert.parker/Library/Caches/Cypress/7.3.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/util.js:19:22)
    at ChildProcess.emit (events.js:315:20)
    at emit (internal/child_process.js:903:12)
    at processTicksAndRejections (internal/process/task_queues.js:81:21)

robert.parker@AL-CAR-09637 nepal-ng-common-components %

I can see this path indeed does not exist in my node_modules, so no webpack subdirectory at @angular-devkit/build-angular/src:

Is this to do with the Angular version we are using perhaps? (v9)

I am guessing it is, as the latest branch of angular_devkit/build_angular does contain the webpack src - https://github.com/angular/angular-cli/tree/11.2.x/packages/angular_devkit/build_angular/src

Can I get this to work with Angular 9?

Align Webpack config with Angular CLI

Angular CLI changed the way it builds Webpack. It would be great to align the close as possible with this implementation.

Cypress 7 and beyond & Angular 13 support

@yjaaidi Hey How are you ?
I would like to know if you are going to support angular 13 & cypress 7+ and beyond
in the future ?
is it a long term support ? Can we rely on this package for our internal tests in the company ?

Angular component is not loading and displays error "Type DynamicModule does not have 'ɵmod' property." in both Angular 11 and Angular 12 application

Followed instructions as in @jscutlery/cypress-angular -
https://github.com/jscutlery/test-utils/tree/main/packages/cypress-angular

ng add @jscutlery/cypress-angular
ng g @jscutlery/cypress-angular:setup-ct --project cypress-angular

It did all setup required to execute test.

then,
npx cypress open-ct - it was throwing an error -
Error: Error: ENOENT: no such file or directory, lstat 'C:/C/Users/smunirathinam/cyp12-angular/tsconfig.cypress.json'

I see path is not properly parsed. It should not have "C:/C/" in the path instead "C:/Users"

As a temporary fix, I updated tsConfig path in Index.ts file in cypress directory. Then it started to launch Cypress component Test runner (npx cypress open-ct -b electron)

import { startAngularDevServer } from '@jscutlery/cypress-angular';


module.exports = (on: any, config: any) => {
  on('dev-server:start', (options: any) =>
    startAngularDevServer({ options, tsConfig: "/Users/smunirathinam/cyp12-angular/tsconfig.cypress.json" })
  );
  return config;
};

When I tried to run sample.cy-spec.ts file in test runner, it displays error as in the screenshot

Package.json

{
  "name": "cyp12-angular",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~12.0.0",
    "@angular/common": "~12.0.0",
    "@angular/compiler": "~12.0.0",
    "@angular/core": "~12.0.0",
    "@angular/forms": "~12.0.0",
    "@angular/platform-browser": "~12.0.0",
    "@angular/platform-browser-dynamic": "~12.0.0",
    "@angular/router": "~12.0.0",
    "@jscutlery/cypress-angular": "^0.3.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.1.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.0.0",
    "@angular/cli": "~12.0.0",
    "@angular/compiler-cli": "~12.0.0",
    "@jscutlery/cypress-mount": "^0.9.1",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "cypress": "^7.3.0",
    "jasmine-core": "~3.7.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "typescript": "~4.2.3"
  }
}

app.module.ts


import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
    
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

angular-cypress: No ct option generated for project

After support for standalone projects was added, the documentation changed a bit.
Furthermore, the component starter should be managed over Angular-Context (which is a good idea, especially when implementing #97). But in the setup-part, the ct-option is not added to angular.json.

After executing ng run my-project:ct this happened: An unhandled exception occurred: Project target does not exist.

[error] Error: Project target does not exist.
    at findProjectTarget (~/node_modules/@angular-devkit/architect/node/node-modules-architect-host.js:29:15)
    at Object.getBuilderName (~/node_modules/@angular-devkit/architect/node/node-modules-architect-host.js:42:46)
    at WorkspaceNodeModulesArchitectHost.getBuilderNameForTarget (~/node_modules/@angular-devkit/architect/node/node-modules-architect-host.js:80:35)
    at RunCommand.runSingleTarget (~/node_modules/@angular/cli/models/architect-command.js:161:55)
    at RunCommand.runArchitectTarget (~/node_modules/@angular/cli/models/architect-command.js:201:35)
    at RunCommand.run (~/node_modules/@angular/cli/commands/run-impl.js:15:25)
    at RunCommand.validateAndRun (~/juniorjob-webapp/node_modules/@angular/cli/models/command.js:136:33)
    at async Object.runCommand (~/node_modules/@angular/cli/models/command-runner.js:205:24)
    at async default_1 (~/node_modules/@angular/cli/lib/cli/index.js:70:31)

Is it possible to do cy.intercept of api call for angular application in new cypress component test runner

Is it possible to do cy.intercept of api call for angular application in new cypress component test runner.

I watched new cypress component test runner video where api call intercepted and data are mocked for React component.

Is same behaviour available for angular too?

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Repository problems

These problems occurred while renovating this repository. View logs.

WARN: Found renovate config warnings

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

ci: 📦 update angular-cli monorepo to v17.3.7 (@angular-devkit/build-angular, @angular-devkit/core, @angular-devkit/schematics, @schematics/angular)
ci: 📦 update dependency @swc/core to v1.5.5
ci: 📦 update dependency jest-preset-angular to v14.0.4
ci: 📦 update angular-eslint monorepo to v17.4.0 (@angular-eslint/eslint-plugin, @angular-eslint/eslint-plugin-template, @angular-eslint/template-parser)
ci: 📦 update dependency cypress to v13.9.0
fix: 📦 update dependency @babel/core to v7.24.5
ci: 📦 update dependency eslint to v9
🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

Detected dependencies

github-actions

.github/actions/release/action.yml

.github/actions/setup/action.yml

actions/checkout v4

actions-rust-lang/setup-rust-toolchain v1

actions/setup-node v4

.github/workflows/labeler.yml

actions/labeler v5

.github/workflows/nx-migrate.yml

actions/checkout v4

.github/workflows/test-and-release.yml

actions/checkout v4

actions/checkout v4

actions/checkout v4

actions/checkout v4

actions/upload-artifact v4

actions/checkout v4

actions/checkout v4

npm

package.json

@babel/core 7.23.9

@babel/helper-plugin-utils ^7.24.5

@types/babel__helper-plugin-utils ^7.10.3

rxjs 7.8.1

tslib 2.4.0

zone.js 0.14.4

@analogjs/vite-plugin-angular 1.2.2

@angular-devkit/build-angular 17.3.6

@angular-devkit/core 17.3.6

@angular-devkit/schematics 17.3.6

@angular-eslint/eslint-plugin 17.3.0

@angular-eslint/eslint-plugin-template 17.3.0

@angular-eslint/template-parser 17.3.0

@commitlint/cli ^19.0.0

@commitlint/config-angular ^19.0.0

@monodon/rust 1.4.0

@playwright/experimental-ct-core 1.44.0

@playwright/test 1.44.0

@schematics/angular 17.3.6

@swc-node/register 1.9.1

@swc/core 1.5.3

@swc/helpers 0.5.11

@swc/jest 0.2.36

@types/babel__core ^7.20.5

@types/jest 29.5.12

@types/node ^20.0.0

@typescript-eslint/eslint-plugin 7.8.0

@typescript-eslint/parser 7.8.0

@vitest/coverage-v8 1.5.3

@vitest/ui 1.5.3

autoprefixer ^10.4.0

babel-jest 29.7.0

cypress ^13.6.6

cypress-pipe ^2.0.0

dotenv 16.0.3

eslint 8.57.0

eslint-config-prettier 9.0.0

eslint-plugin-cypress 3.0.2

husky ^9.0.0

jest 29.7.0

jest-environment-jsdom 29.7.0

jest-preset-angular 14.0.3

mock-fs ^5.1.1

ng-packagr 17.3.0

postcss ^8.4.5

postcss-import 14.1.0

postcss-preset-env ~7.8.0

postcss-url 10.1.3

prettier 3.2.5

ts-jest 29.1.0

ts-node 10.9.1

typescript 5.4.5

unplugin-swc 1.4.5

vite 5.2.11

vitest 1.5.3

yarn 3.5.1

Check this box to trigger a request for Renovate to run again on this repository

Error "Component 'xyz' is not resolved" with `@jscutlery/cypress-harness`

Issue:

Hi - I wanted to use @jscutlery/cypress-harness and followed the instructions how to set it up. It is working for official Angular Material Harnesses (like MatButtonHarness):

import { getHarness } from '@jscutlery/cypress-harness';
import { MatButtonHarness } from '@angular/material/button/testing';

describe('cypress-harness-app', () => {
  beforeEach(() => cy.visit('/'));

  it('should get button text with MatButtonHarness', () => {
    // THIS IS WORKING 🎉
    const harness = getHarness(MatButtonHarness);
    harness.getText().should('eq', 'Demo button');
  });
});

But as soon as I want to use one of my own harnesses, it fails with the following error:

import { getHarness } from '@jscutlery/cypress-harness';
import { DemoButtonComponentHarness } from '@cypress-harness/demo';

describe('cypress-harness-app', () => {
  beforeEach(() => cy.visit('/'));

  it('should get button text with DemoButtonComponentHarness', () => {
    // THIS IS NOT WORKING 😭
    const harness = getHarness(DemoButtonComponentHarness);
    harness.getText().should('eq', 'Demo button');
  });
});

How to reproduce:

I have set up a small Nx based repository to reproduce this error here: decline/cypress-harness

Steps to reproduce:

# clone repository
git clone [email protected]:decline/cypress-harness.git

# install dependencies
cd cypress-harness && npm install

# run cypress
ng e2e cypress-harness-app-e2e --watch

The spec file is located here apps/cypress-harness-app-e2e/src/integration/app.spec.ts

Maybe I just overlooked some important thing, but I can't figure out a solution. Any help is appreciated 🙂

Does this library load angular components in Cypress Component Test Runner as like production application page

Does this library load angular components in Cypress Component Test Runner as like production application page with all styles, alignment and everything or it is just like a component load in Karma.

Thanks
Sathish

[Discussion] - future plans and your opinions on how to best use component testing

I am rewriting the @srleecode/domain generators to move from component testing using storybook to component testing using the cypress test runner through your projects. I really like the work you have done so far on these projects.

I want to start a discussion with you on the future plans you have for these projects and any ideas you have in terms of best practices in regards to component testing and how it should be used when people develop their applications.

I would also like to know what you think about the draft version of a component generator I have written. This generator can do the following:

create a SCAM library for the component. SCAM stands for Single Component Angular Module. SCAMs mean that all feature and UI libraries get their own library. I find this especially useful for component testing as each library can have its own ct target that it can run.
add the component test harness file.
add the cy-spec file. To allow things to be setup globally it imports from a global options variable in the cy-spec or story file. This global options variable could be used for example for including the core things like the Angular material css file. This means that you would only need to setup these core things once.
add a story file
create the ct target for running the component tests for the component library

Allow tsConfig path customization

Angular preprocessor should fail if tsConfig option is missing

We should make sure that cypress is started with --ts-config option. It is the default setup with Nx but not with custom configurations.

Cannot install with angular 12.1.3

Trying to install will result in the following error message:

g add @jscutlery/cypress-angular --force
ℹ Using package manager: npm
✔ Found compatible package version: @jscutlery/[email protected].
✔ Package information loaded.
 
The package @jscutlery/[email protected] will be installed and executed.
Would you like to proceed? Yes
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/core
npm ERR!   peer @angular/core@"12.1.3" from @angular/[email protected]
npm ERR!   node_modules/@angular/animations
npm ERR!     peerOptional @angular/animations@"12.1.3" from @angular/[email protected]
npm ERR!     node_modules/@angular/platform-browser
npm ERR!       peer @angular/platform-browser@"12.1.3" from @angular/[email protected]
npm ERR!       node_modules/@angular/forms
npm ERR!         @angular/forms@"~12.1.0" from the root project
npm ERR!       3 more (@angular/platform-browser-dynamic, @angular/router, the root project)
npm ERR!     @angular/animations@"~12.1.0" from the root project
npm ERR!   peer @angular/core@"12.1.3" from @angular/[email protected]
npm ERR!   node_modules/@angular/common
npm ERR!     peer @angular/common@"12.1.3" from @angular/[email protected]
npm ERR!     node_modules/@angular/forms
npm ERR!       @angular/forms@"~12.1.0" from the root project
npm ERR!     peer @angular/common@"12.1.3" from @angular/[email protected]
npm ERR!     node_modules/@angular/platform-browser
npm ERR!       peer @angular/platform-browser@"12.1.3" from @angular/[email protected]
npm ERR!       node_modules/@angular/forms
npm ERR!         @angular/forms@"~12.1.0" from the root project
npm ERR!       3 more (@angular/platform-browser-dynamic, @angular/router, the root project)
npm ERR!     3 more (@angular/platform-browser-dynamic, @angular/router, the root project)
npm ERR!   5 more (@angular/forms, @angular/platform-browser, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/core@"11.2.14" from @angular/[email protected]
npm ERR! node_modules/@jscutlery/cypress-mount/node_modules/@angular/common
npm ERR!   peer @angular/common@">=6.0.0" from @storybook/[email protected]
npm ERR!   node_modules/@jscutlery/cypress-mount/node_modules/@storybook/angular
npm ERR!     optional @storybook/angular@"^6.0.0" from @jscutlery/[email protected]
npm ERR!     node_modules/@jscutlery/cypress-mount
npm ERR!       @jscutlery/cypress-mount@"^0.x" from @jscutlery/[email protected]
npm ERR!       node_modules/@jscutlery/cypress-angular
npm ERR!   peer @angular/common@"^11.0.0" from [email protected]
npm ERR!   node_modules/@jscutlery/cypress-mount/node_modules/ng-dynamic-component
npm ERR!     ng-dynamic-component@"^8.0.1" from @jscutlery/[email protected]
npm ERR!     node_modules/@jscutlery/cypress-mount
npm ERR!       @jscutlery/cypress-mount@"^0.x" from @jscutlery/[email protected]
npm ERR!       node_modules/@jscutlery/cypress-angular
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /home/forest/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/forest/.npm/_logs/2021-07-30T09_22_01_188Z-debug.log
✖ Package install failed, see above.

As you can see, I am already trying the "--force" flag, but it has no effect. Same with --legacy-peer-deps.

angular version:

Angular CLI: 12.1.3
Node: 16.3.0 (Unsupported)
Package Manager: npm 7.20.1
OS: linux x64

Angular: 12.1.3
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1201.3
@angular-devkit/build-angular   12.1.3
@angular-devkit/core            12.1.3
@angular-devkit/schematics      12.1.3
@schematics/angular             12.1.3
rxjs                            6.6.7
typescript                      4.3.5

Issues with Cypress component testing (Angular)

I've run into some problems in my test project (branch: router-test, as linked).

1. The app is routed to `/__`

With npx nx serve, the app gets routed to /my-page, as expected. But when running app.component.cy-spec.ts, the default route is /__ for some reason. Do you know why that happens and how to get around it?

2. Assets not loaded

The app.component.cy-spec.ts shows that Cypress component tests cannot load any assets, like nx-logo.png in my example. This can get even worse when a component needs the language translation files like en.json or something like that (typically used with ngx-translate).

3. Cannot get access to component instance

One of the lines I added into app.component.cy-spec.ts is this:

cy.get('h1').contains(`Welcome to ${new AppComponent().title}`);

This is a too contrived example of course, but with Cypress, I get the impression that component testing is closer to a black-box testing approach. With TestBed, I can access component fields/methods too. But with Cypress, this is much more limited. E.g. how do I talk to component @Inputs and @Outputs? Do I need to replace the MyComponent in my mount call with <my-component ...></my-component> instead? Which I personally find a bit cumbersome, not so easy to communicate with the component this way.

Thank you for your help.

`nx run my-app:e2e --testingType component` does not work for an `@nrwl/nx`-generated project

I've got an Angular 12 project set up with @nrwl/nx version 12.3.6. It has two projects: my-app (for the Angular app itself) + my-app-e2e (for the Cypress end-to-end tests). To add Cypress component testing too, I've followed the README:

npx ng add @jscutlery/cypress-angular

By the way, this adds the package as a regular dependency, instead of a dev dependency. Bug? Anyways, I've moved it into the dev dependencies, it shouldn't matter anyway.

npx ng g @jscutlery/cypress-angular:setup-ct --project my-app
npx ngcc

The following command failed: ❌

$ npx nx run my-app:e2e --testingType component
An unhandled exception occurred: Project target does not exist.
See "/tmp/ng-Wpsu5T/angular-errors.log" for further details.

The following command worked and executed the sample tests successfully: ✔

$ npx cypress open-ct --project apps/my-app

However, if I add the following to angular.json, I can fix the nx way like this:

{
  // ...
  "projects": {
    "my-app": {
      // ...
      "architect": {
        // ...
        "ct": {
          "builder": "@nrwl/cypress:cypress",
          "options": {
            "cypressConfig": "apps/my-app/cypress.json",
            "tsConfig": "apps/my-app/tsconfig.cypress.json",
            "devServerTarget": "",
            "testingType": "component"
          }
        }
      }
    }
    // ...
  }
}

Then the command simply becomes: ✔

$ npx nx run my-app:ct

I guess it makes sense to add something like this to the documentation or to the schematic?

"TypeError: Cannot read property 'replace' of undefined" when including packages under plugins/support for cypress

Following the instructions of just including the plugin seems to throw this stack trace error:

TypeError: Cannot read property 'replace' of undefined
    at Object.forwardSlashPath (/Users/azaeng04/projects/voss-portal/node_modules/@ngtools/webpack/src/utils.js:28:17)
    at AngularCompilerPlugin._setupOptions (/Users/azaeng04/projects/voss-portal/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:90:38)
    at new AngularCompilerPlugin (/Users/azaeng04/projects/voss-portal/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:66:14)
    at /Users/azaeng04/projects/voss-portal/packages/cypress-angular-preprocessor/src/lib/angular-preprocessor.ts:57:9
    at Generator.next (<anonymous>)
    at /Users/azaeng04/projects/voss-portal/node_modules/tslib/tslib.js:117:75
    at new Promise (<anonymous>)
    at Object.__awaiter (/Users/azaeng04/projects/voss-portal/node_modules/tslib/tslib.js:113:16)
    at Object.handler (/Users/azaeng04/projects/voss-portal/packages/cypress-angular-preprocessor/src/lib/angular-preprocessor.ts:30:44)
    at invoke (/Users/azaeng04/Library/Caches/Cypress/6.9.1/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/run_plugins.js:22:16)
    at /Users/azaeng04/Library/Caches/Cypress/6.9.1/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/util.js:41:14
    at tryCatcher (/Users/azaeng04/Library/Caches/Cypress/6.9.1/Cypress.app/Contents/Resources/app/packages/server/node_modules/bluebird/js/release/util.js:16:23)
    at Function.Promise.attempt.Promise.try (/Users/azaeng04/Library/Caches/Cypress/6.9.1/Cypress.app/Contents/Resources/app/packages/server/node_modules/bluebird/js/release/method.js:39:29)
    at Object.wrapChildPromise (/Users/azaeng04/Library/Caches/Cypress/6.9.1/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/util.js:40:23)
    at Object.wrap (/Users/azaeng04/Library/Caches/Cypress/6.9.1/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/preprocessor.js:28:8)
    at execute (/Users/azaeng04/Library/Caches/Cypress/6.9.1/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/run_plugins.js:119:27)
    at EventEmitter.<anonymous> (/Users/azaeng04/Library/Caches/Cypress/6.9.1/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/run_plugins.js:202:5)
    at EventEmitter.emit (events.js:315:20)
    at process.<anonymous> (/Users/azaeng04/Library/Caches/Cypress/6.9.1/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/util.js:19:22)
    at process.emit (events.js:315:20)
    at process.emit (/Users/azaeng04/Library/Caches/Cypress/6.9.1/Cypress.app/Contents/Resources/app/packages/server/node_modules/source-map-support/source-map-support.js:495:21)
    at emit (internal/child_process.js:876:12)

Support Cypress 7 component testing

In order to support Cypress 7 component testing, we should migrate to the new dev server approach.

Here's a working spike to get inspiration from: https://github.com/jscutlery/test-utils/compare/spike-cypress-component-testing-dev-server

In order to implement this properly, we have to:

move the dev server config to a new package @jscutlery/cypress-angular-dev-server
document the new command cypress open-ct --project packages/cypress-mount-integration + cypress.json config + tsconfig.json includes. Cf. 304fb71
deprecate @cypress/angular-preprocessor for Cypress >=7

Following improvements are:

loading the webpack config from Angular once Angular exposes the webpack config. Cf. angular/angular-cli#20731

P.S. Angular compiler needs to build the whole project (including lazy loaded routes) in order to check & optimize everything. The first start might be slow. In order to improve this, we could use Vite. It works quite well for Single File Components. We might need an angular vite plugin to transform templateUrl and styleUrls when not using SFCs.

The "path" argument must be of type string. Received undefined.

Hey there,

We're using Nx in our project, and when attempting to run the command nx g @jscutlery/cypress-angular:setup-ct --project projectName, I get the following output:

The "path" argument must be of type string. Received undefined."

That is the extent of the output on my end with no additional details, so it's been challenging trying to find a root cause. Has anyone experienced this before and have insight on how to rectify this? Thanks in advance.

Versions:

Nx Version: 12.10.0
Angular version: 12.2.9
Cypress version: 8.5.0 (also attempted with 8.4.1)
@jscutlery/cypress-angular version: 0.7.0

How to use `@jscutlery/cypress-angular` with Cucumber?

When I use Cypress for E2E testing, I combine it with TheBrainFamily/cypress-cucumber-preprocessor for Cucumber support. However, I do not see a way to extend the Webpack configuration with the following lines when doing Angular component tests the BDD way:

{
	rules: [
		{
			test: /\.feature$/,
			use: [
				{
					loader: "cypress-cucumber-preprocessor/loader"
				}
			]
		},
		{
			test: /\.features$/,
			use: [
				{
					loader: "cypress-cucumber-preprocessor/lib/featuresLoader"
				}
			]
		}
	]
}

Could you please help me?

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Location: .github/renovate.json
Error type: The renovate configuration file contains some invalid settings
Message: Invalid configuration option: packageRules[0]._comment, Invalid configuration option: packageRules[1]._comment, Invalid configuration option: packageRules[2]._comment

Move setupHooks() to support.ts

Move side effects to support file in order to keep cypress-Mount side effect free. We don't want some tree shaking some day to get rid of the hooks.

Document mount options

Cannot run component tests when project uses Webpack 5

Please find the below repository with working example of the failed Angular component test.

I have Nx set up with project.json files for each project (as opposed to the global angular.json file). We are also leveraging Webpack 5, and this appears to cause an issue when firing up the component test.

Steps to reproduce:

Clone the following repository: https://github.com/kerry-afs/cypress-component
Run npm install to install dependencies
Execute ng run web-e2e:ct
You will notice the command begin to execute, and the Cypress runner icon appear. However, the runner will not fully load and the component tests will not execute.

Environment:
Nx: 12.10.0
Cypress: 8.5.1
Angular: 12.2.0
OS: macOS Big Sur 11.6

Tailwind styles support

Hi,

First of all thank you very much for you work on this package!

I'm opening this issue cause i wasn't able to make tailwind works when mounting the component inside an nx library.

I tried importing a css file with tailwind imports like that:

import { Component } from '@angular/core';
import { mount } from '@jscutlery/cypress-angular/mount';

@Component({
  template: `<h1 class="bg-red-500 text-red-500">👋 Hello!</h1>`,
})
export class GreetingsComponent {}

describe('greetings', () => {
  it('should say hello', () => {
    mount(GreetingsComponent, {
      cssFile: 'cypress/support/base-style.css',
    });
    cy.get('h1').contains('👋 Hello!');
  });
});

or importing tailwind styles using the inline style property:

import { Component } from '@angular/core';
import { mount } from '@jscutlery/cypress-angular/mount';

@Component({
  template: `<h1 class="bg-red-500 text-red-500">👋 Hello!</h1>`,
})
export class GreetingsComponent {}

describe('greetings', () => {
  it('should say hello', () => {
    mount(GreetingsComponent, {
      style: `@tailwind base;
      @tailwind components;
      @tailwind utilities;
      `,
    });
    cy.get('h1').contains('👋 Hello!');
  });
});

Is it possible to make it works?

Thank you

Abstract locatorFor logic

I have two related suggestions:

Allow the harness creation to be done with a selector object

It is often the case that you want to select not just a component, but a particular instance of that component. Some examples are:

data-cy: selecting a table component with a particular data-cy attribute
index: selecting the second table component
css: selecting a table component with a particular css class or id
text: selecting a button component with particular text in it.

It would be useful if the harness creation allowed passing an object like the below.

interface SelectorOptions {
    dataCy?: string;
    css?: string;
    index?: number;
    text?: string;
}

Abstract verbose test harness logic

The testing harness by default needs properties for the locatorFor etc. We can abstract some of this. Ideally part of that would be creating functions to take a SelectorOptions object and do all the locatorFor logic that is required. A quick draft of something it might look like is:

class CypressComponentTestHarness extends ComponentHarness {
  protected find(selectorOptions: SelectorOptions) {
    return this.locatorForOptional(`[data-cy="${selectorOptions.dataCy}"]`)();
  }
  protected findElement(selectorOptions: SelectorOptions) {
    return this.find(selectorOptions).then((e) => (e as any).element);
  }
  protected call(selectorOptions: SelectorOptions, operation: (e) => this) {
    return this.find(selectorOptions)
      .then((e) => operation(e))
      .then(() => this);
  }

  protected map(selectorOptions: SelectorOptions, operation: (e) => this) {
    return this.find(selectorOptions).then((e) => operation(e));
  }
}

See the below test harness to see how it is used.
https://github.com/srlee309/component-commands-example/blob/master/libs/example/form/.cypress/src/support/component-test-harness.ts

Video and screenshot paths are not configured

I don't know if I should open a ticket about this, but in an @nwrl/nx-generated project, the Cypress video and screenshot paths are not configured for component tests by the schematic, I had to do it myself so that the videos are automatically git ignored:

rkrisztian/cypress-jest-test-project@2f18cd4#diff-ff33022ba6f5c96693402adef8688371518e9ddcf5b5f10cfa0605833709efd6

I'm wondering if we can pick up some Nx conventions here when use of Nx is detected.

Originally posted by @rkrisztian in #63 (comment)

[Support/Proposition] Use cypress harness in page testing

We discovered this library which is really useful to test components in an isolated way. We really like it to test our components using component harness architecture but it seems to work only on Components Level. How could we use our harnesses on Pages Level?

Use Case:

<div data-cy="firstname">
    <my-text-component></my-text-component>
</div>
<div data-cy="surname">
    <my-text-component></my-text-component>
</div>

Today we are using a command to access to the parent element then we can select our component:

cy.getBySel('firstname').within(() => cy.get('my-text-component').type('truc'))
cy.getBySel('surname').within(() => cy.get('my-text-component').type('machin'))

Instead of selecting the component by tag, we would like to use our harnesses like:

cy.getBySel('firstname').getHarness(MyTextComponent).insertValue('Truc')
OR
getHarnessBySel('firstname', MyTextComponent).insertValue('Truc')
OR
...

Would it be possible to provide a custom Harness Getter function ? (like getHarness or getRootHarness or getAllHarness). Or to have access to the addHarnessMethodsToChainer to create our own function ?

We tried also the HarnessPredicate approach where we can provide an ancestor but:

we have to provide a string, we cannot provide an element directly and chain
it will not work when the selector is on the same level of the component itself <my-text-component data-cy="firstname"></my-text-component>

Map `Cypress.Chainable` to `getAllHarnesses` return type

I would like to write:

const [controlA, controlB] = await getAllHarnesses(MatInputHarness);

await controlA.setValue('value A');
await controlB.setValue('value B');

controlA.should('have.value', 'value A');
controlB.should('have.value', 'value B');

instead of:

const [controlA, controlB] = await getAllHarnesses(MatInputHarness);

await controlA.setValue('value A');
await controlB.setValue('value B');

expect(await controlA.getValue()).to.equal('value A');
expect(await controlB.getValue()).to.equal('value B');

Actually, the Cypress Chainer is usable this way:

getAllHarnesses(MatCalendarHarness).should(...)

But, which Harness does it target?

Not able to run cypress unit test in new cypress component test runner

I followed steps as given but got message failed to compile.

I just created new angular 11 and was testing app component

It would be better to share details about - compatible library versions, tsconfig and any other details as needed.

Adding Sample Cypress angular unit project with tests and configuration would be great.

Execution command:

npx cypress open-ct -b electron

Test:

import { AppComponent } from "./app.component";
import { mount} from "@jscutlery/cypress-mount";


describe('HelloCompanent', () => {
    beforeEach(() => {
      mount(AppComponent);
    })
    
    it('should show some love', () => {
      cy.get('h1').contains('Angular');
    });
})

tsconfig.json

{
  "compileOnSave": true,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false
  },
  "include": ["src/**/*.cy-spec.ts", "cypress/support/index.ts"]
}

Package.json


 "name": "cypress-angular",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~11.2.14",
    "@angular/common": "~11.2.14",
    "@angular/compiler": "~11.2.14",
    "@angular/core": "~11.2.14",
    "@angular/forms": "~11.2.14",
    "@angular/platform-browser": "~11.2.14",
    "@angular/platform-browser-dynamic": "~11.2.14",
    "@angular/router": "~11.2.14",
    "@nrwl/workspace": "^12.3.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1102.13",
    "@angular/cli": "~11.2.13",
    "@angular/compiler-cli": "~11.2.14",
    "@cypress/webpack-dev-server": "^1.3.0",
    "@jscutlery/cypress-angular-dev-server": "^0.1.0",
    "@jscutlery/cypress-mount": "^0.8.2",
    "@ngtools/webpack": "^11.2.13",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "cypress": "^7.3.0",
    "cypress-pipe": "^2.0.0",
    "html-webpack-plugin": "^4.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.1.5"
  }
}

cypress.json

{
    "component": {
      "testFiles": "**/*.cy-spec.ts",
      "componentFolder": "src"
    },
    "pluginsFile": "cypress/plugins/index.ts",
    "supportFile": "cypress/support/index.ts"
}


i ∩╜ówds∩╜ú: Project is running at http://localhost:61939/webpack-dev-server/
i ∩╜ówds∩╜ú: webpack output is served from /__cypress/src
i ∩╜ówds∩╜ú: Content not from webpack is served from C:\Users\smunirathinam\cypress-angular
GET /__/ 200 6.445 ms - -
GET /__cypress/runner/cypress_runner.css 200 3.230 ms - -
GET /__cypress/runner/cypress_runner.js 200 1.752 ms - -
GET /__cypress/runner/fonts/fa-solid-900.woff2 200 1.491 ms - 76120
├ù ∩╜ówdm∩╜ú: Hash: ac635c0408314a390863
Version: webpack 4.44.2
Time: 8899ms
Built at: 05/14/2021 9:21:36 AM
     Asset       Size  Chunks             Chunk Names
      0.js  307 bytes       0  [emitted]  
index.html  339 bytes          [emitted]  
   main.js   11.2 KiB    main  [emitted]  main
 spec-0.js  346 bytes  spec-0  [emitted]  spec-0
Entrypoint main = main.js
[./cypress/support/index.ts] 0 bytes {0} [built]
[./node_modules/@cypress/webpack-dev-server/dist/aut-runner.js] 483 bytes {main} [built]
[./node_modules/@cypress/webpack-dev-server/dist/browser.js] 75 bytes {main} [built]
[./node_modules/@cypress/webpack-dev-server/dist/loader.js!./node_modules/@cypress/webpack-dev-server/dist/browser.js] 862 bytes {main} [built]
[./src/app/app.component.cy-spec.ts] 0 bytes {spec-0} [built]

ERROR in node_modules/cypress/types/mocha/index.d.ts:2514:13 - error TS2300: Duplicate identifier 'beforeEach'.

2514 declare var beforeEach: Mocha.HookFunction;
                 ~~~~~~~~~~

  node_modules/@types/jasmine/index.d.ts:100:18
    100 declare function beforeEach(action: jasmine.ImplementationCallback, timeout?: number): void;
                         ~~~~~~~~~~
    'beforeEach' was also declared here.
node_modules/cypress/types/mocha/index.d.ts:2532:13 - error TS2300: Duplicate identifier 'afterEach'.

2532 declare var afterEach: Mocha.HookFunction;
                 ~~~~~~~~~

  node_modules/@types/jasmine/index.d.ts:107:18
    107 declare function afterEach(action: jasmine.ImplementationCallback, timeout?: number): void;
                         ~~~~~~~~~
    'afterEach' was also declared here.
node_modules/cypress/types/mocha/index.d.ts:2548:13 - error TS2300: Duplicate identifier 'describe'.

2548 declare var describe: Mocha.SuiteFunction;
                 ~~~~~~~~

  node_modules/@types/jasmine/index.d.ts:33:18
    33 declare function describe(description: string, specDefinitions: () => void): void;
                        ~~~~~~~~
    'describe' was also declared here.
node_modules/cypress/types/mocha/index.d.ts:2569:13 - error TS2300: Duplicate identifier 'xdescribe'.

2569 declare var xdescribe: Mocha.PendingSuiteFunction;
                 ~~~~~~~~~

  node_modules/@types/jasmine/index.d.ts:47:18
    47 declare function xdescribe(description: string, specDefinitions: () => void): void;
                        ~~~~~~~~~
    'xdescribe' was also declared here.
node_modules/cypress/types/mocha/index.d.ts:2583:13 - error TS2300: Duplicate identifier 'it'.

2583 declare var it: Mocha.TestFunction;
                 ~~

  node_modules/@types/jasmine/index.d.ts:56:18
    56 declare function it(expectation: string, assertion?: jasmine.ImplementationCallback, timeout?: number): void;
                        ~~
    'it' was also declared here.
node_modules/cypress/types/mocha/index.d.ts:2604:13 - error TS2300: Duplicate identifier 'xit'.

2604 declare var xit: Mocha.PendingTestFunction;
                 ~~~

  node_modules/@types/jasmine/index.d.ts:72:18
    72 declare function xit(expectation: string, assertion?: jasmine.ImplementationCallback, timeout?: number): void;
                        ~~~
    'xit' was also declared here.
node_modules/cypress/types/cypress-expect.d.ts:2:15 - error TS2451: Cannot redeclare block-scoped variable 'expect'.

2 declare const expect: Chai.ExpectStatic
                ~~~~~~

  node_modules/@types/jasmine/index.d.ts:130:18
    130 declare function expect<T extends jasmine.Func>(spy: T | jasmine.Spy<T>): jasmine.FunctionMatchers<T>;
                         ~~~~~~
    'expect' was also declared here.
  node_modules/@types/jasmine/index.d.ts:137:18
    137 declare function expect<T>(actual: ArrayLike<T>): jasmine.ArrayLikeMatchers<T>;
                         ~~~~~~
    and here.
  node_modules/@types/jasmine/index.d.ts:144:18
    144 declare function expect<T>(actual: T): jasmine.Matchers<T>;
                         ~~~~~~
    and here.
  node_modules/@types/jasmine/index.d.ts:149:18
    149 declare function expect(): jasmine.NothingMatcher;
                         ~~~~~~
    and here.
node_modules/@storybook/api/dist/ts3.9/lib/stories.d.ts:1:8 - error TS1259: Module '"C:/Users/smunirathinam/cypress-angular/node_modules/@types/react/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag

1 import React from 'react';
         ~~~~~

  node_modules/@types/react/index.d.ts:61:1
    61 export = React;
       ~~~~~~~~~~~~~~~
    This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.
node_modules/@types/jasmine/index.d.ts:33:18 - error TS2300: Duplicate identifier 'describe'.

33 declare function describe(description: string, specDefinitions: () => void): void;
                    ~~~~~~~~

  node_modules/cypress/types/mocha/index.d.ts:2548:13
    2548 declare var describe: Mocha.SuiteFunction;
                     ~~~~~~~~
    'describe' was also declared here.
node_modules/@types/jasmine/index.d.ts:47:18 - error TS2300: Duplicate identifier 'xdescribe'.

47 declare function xdescribe(description: string, specDefinitions: () => void): void;
                    ~~~~~~~~~

  node_modules/cypress/types/mocha/index.d.ts:2569:13
    2569 declare var xdescribe: Mocha.PendingSuiteFunction;
                     ~~~~~~~~~
    'xdescribe' was also declared here.
node_modules/@types/jasmine/index.d.ts:56:18 - error TS2300: Duplicate identifier 'it'.

56 declare function it(expectation: string, assertion?: jasmine.ImplementationCallback, timeout?: number): void;
                    ~~

  node_modules/cypress/types/mocha/index.d.ts:2583:13
    2583 declare var it: Mocha.TestFunction;
                     ~~
    'it' was also declared here.
node_modules/@types/jasmine/index.d.ts:72:18 - error TS2300: Duplicate identifier 'xit'.

72 declare function xit(expectation: string, assertion?: jasmine.ImplementationCallback, timeout?: number): void;
                    ~~~

  node_modules/cypress/types/mocha/index.d.ts:2604:13
    2604 declare var xit: Mocha.PendingTestFunction;
                     ~~~
    'xit' was also declared here.
node_modules/@types/jasmine/index.d.ts:100:18 - error TS2300: Duplicate identifier 'beforeEach'.

100 declare function beforeEach(action: jasmine.ImplementationCallback, timeout?: number): void;
                     ~~~~~~~~~~

  node_modules/cypress/types/mocha/index.d.ts:2514:13
    2514 declare var beforeEach: Mocha.HookFunction;
                     ~~~~~~~~~~
    'beforeEach' was also declared here.
node_modules/@types/jasmine/index.d.ts:107:18 - error TS2300: Duplicate identifier 'afterEach'.

107 declare function afterEach(action: jasmine.ImplementationCallback, timeout?: number): void;
                     ~~~~~~~~~

  node_modules/cypress/types/mocha/index.d.ts:2532:13
    2532 declare var afterEach: Mocha.HookFunction;
                     ~~~~~~~~~
    'afterEach' was also declared here.
node_modules/@types/jasmine/index.d.ts:130:18 - error TS2451: Cannot redeclare block-scoped variable 'expect'.

130 declare function expect<T extends jasmine.Func>(spy: T | jasmine.Spy<T>): jasmine.FunctionMatchers<T>;
                     ~~~~~~

  node_modules/cypress/types/cypress-expect.d.ts:2:15
    2 declare const expect: Chai.ExpectStatic
                    ~~~~~~
    'expect' was also declared here.
node_modules/@types/jasmine/index.d.ts:137:18 - error TS2451: Cannot redeclare block-scoped variable 'expect'.

137 declare function expect<T>(actual: ArrayLike<T>): jasmine.ArrayLikeMatchers<T>;
                     ~~~~~~

  node_modules/cypress/types/cypress-expect.d.ts:2:15
    2 declare const expect: Chai.ExpectStatic
                    ~~~~~~
    'expect' was also declared here.
node_modules/@types/jasmine/index.d.ts:144:18 - error TS2451: Cannot redeclare block-scoped variable 'expect'.

144 declare function expect<T>(actual: T): jasmine.Matchers<T>;
                     ~~~~~~

  node_modules/cypress/types/cypress-expect.d.ts:2:15
    2 declare const expect: Chai.ExpectStatic
                    ~~~~~~
    'expect' was also declared here.
node_modules/@types/jasmine/index.d.ts:149:18 - error TS2451: Cannot redeclare block-scoped variable 'expect'.

149 declare function expect(): jasmine.NothingMatcher;
                     ~~~~~~

  node_modules/cypress/types/cypress-expect.d.ts:2:15
    2 declare const expect: Chai.ExpectStatic
                    ~~~~~~
    'expect' was also declared here.
node_modules/@types/webpack/index.d.ts:32:3 - error TS2305: Module '"../../tapable/tapable"' has no exported member 'Tapable'.

32   Tapable,
     ~~~~~~~
node_modules/@types/webpack/index.d.ts:1062:23 - error TS2707: Generic type 'SyncWaterfallHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1062             resolver: SyncWaterfallHook;
                           ~~~~~~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1063:22 - error TS2707: Generic type 'SyncWaterfallHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1063             factory: SyncWaterfallHook;
                          ~~~~~~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1064:28 - error TS2707: Generic type 'AsyncSeriesWaterfallHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1064             beforeResolve: AsyncSeriesWaterfallHook;
                                ~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1065:27 - error TS2707: Generic type 'AsyncSeriesWaterfallHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1065             afterResolve: AsyncSeriesWaterfallHook;
                               ~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1066:27 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1066             createModule: SyncBailHook;
                               ~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1067:21 - error TS2707: Generic type 'SyncWaterfallHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1067             module: SyncWaterfallHook;
                         ~~~~~~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1068:27 - error TS2314: Generic type 'HookMap<H>' requires 1 type argument(s).

1068             createParser: HookMap;
                               ~~~~~~~
node_modules/@types/webpack/index.d.ts:1070:30 - error TS2314: Generic type 'HookMap<H>' requires 1 type argument(s).

1070             createGenerator: HookMap;
                                  ~~~~~~~
node_modules/@types/webpack/index.d.ts:1071:24 - error TS2314: Generic type 'HookMap<H>' requires 1 type argument(s).

1071             generator: HookMap;
                            ~~~~~~~
node_modules/@types/webpack/index.d.ts:1080:33 - error TS2314: Generic type 'HookMap<H>' requires 1 type argument(s).

1080                 evaluateTypeof: HookMap;
                                     ~~~~~~~
node_modules/@types/webpack/index.d.ts:1081:27 - error TS2314: Generic type 'HookMap<H>' requires 1 type argument(s).

1081                 evaluate: HookMap;
                               ~~~~~~~
node_modules/@types/webpack/index.d.ts:1082:37 - error TS2314: Generic type 'HookMap<H>' requires 1 type argument(s).

1082                 evaluateIdentifier: HookMap;
                                         ~~~~~~~
node_modules/@types/webpack/index.d.ts:1083:44 - error TS2314: Generic type 'HookMap<H>' requires 1 type argument(s).

1083                 evaluateDefinedIdentifier: HookMap;
                                                ~~~~~~~
node_modules/@types/webpack/index.d.ts:1084:47 - error TS2314: Generic type 'HookMap<H>' requires 1 type argument(s).

1084                 evaluateCallExpressionMember: HookMap;
                                                   ~~~~~~~
node_modules/@types/webpack/index.d.ts:1085:28 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1085                 statement: SyncBailHook;
                                ~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1086:30 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1086                 statementIf: SyncBailHook;
                                  ~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1087:24 - error TS2314: Generic type 'HookMap<H>' requires 1 type argument(s).

1087                 label: HookMap;
                            ~~~~~~~
node_modules/@types/webpack/index.d.ts:1088:25 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1088                 import: SyncBailHook;
                             ~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1089:34 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1089                 importSpecifier: SyncBailHook;
                                      ~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1090:25 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1090                 export: SyncBailHook;
                             ~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1091:31 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1091                 exportImport: SyncBailHook;
                                   ~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1092:36 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1092                 exportDeclaration: SyncBailHook;
                                        ~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1093:35 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1093                 exportExpression: SyncBailHook;
                                       ~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1094:34 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1094                 exportSpecifier: SyncBailHook;
                                      ~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1095:40 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1095                 exportImportSpecifier: SyncBailHook;
                                            ~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1096:33 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1096                 varDeclaration: SyncBailHook;
                                     ~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1097:36 - error TS2314: Generic type 'HookMap<H>' requires 1 type argument(s).

1097                 varDeclarationLet: HookMap;
                                        ~~~~~~~
node_modules/@types/webpack/index.d.ts:1098:38 - error TS2314: Generic type 'HookMap<H>' requires 1 type argument(s).

1098                 varDeclarationConst: HookMap;
                                          ~~~~~~~
node_modules/@types/webpack/index.d.ts:1099:36 - error TS2314: Generic type 'HookMap<H>' requires 1 type argument(s).

1099                 varDeclarationVar: HookMap;
                                        ~~~~~~~
node_modules/@types/webpack/index.d.ts:1100:28 - error TS2314: Generic type 'HookMap<H>' requires 1 type argument(s).

1100                 canRename: HookMap;
                                ~~~~~~~
node_modules/@types/webpack/index.d.ts:1101:25 - error TS2314: Generic type 'HookMap<H>' requires 1 type argument(s).

1101                 rename: HookMap;
                             ~~~~~~~
node_modules/@types/webpack/index.d.ts:1102:27 - error TS2314: Generic type 'HookMap<H>' requires 1 type argument(s).

1102                 assigned: HookMap;
                               ~~~~~~~
node_modules/@types/webpack/index.d.ts:1103:25 - error TS2314: Generic type 'HookMap<H>' requires 1 type argument(s).

1103                 typeof: HookMap;
                             ~~~~~~~
node_modules/@types/webpack/index.d.ts:1104:29 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1104                 importCall: SyncBailHook;
                                 ~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1105:23 - error TS2314: Generic type 'HookMap<H>' requires 1 type argument(s).

1105                 call: HookMap;
                           ~~~~~~~
node_modules/@types/webpack/index.d.ts:1106:32 - error TS2314: Generic type 'HookMap<H>' requires 1 type argument(s).

1106                 callAnyMember: HookMap;
                                    ~~~~~~~
node_modules/@types/webpack/index.d.ts:1107:22 - error TS2314: Generic type 'HookMap<H>' requires 1 type argument(s).

1107                 new: HookMap;
                          ~~~~~~~
node_modules/@types/webpack/index.d.ts:1108:29 - error TS2314: Generic type 'HookMap<H>' requires 1 type argument(s).

1108                 expression: HookMap;
                                 ~~~~~~~
node_modules/@types/webpack/index.d.ts:1109:38 - error TS2314: Generic type 'HookMap<H>' requires 1 type argument(s).

1109                 expressionAnyMember: HookMap;
                                          ~~~~~~~
node_modules/@types/webpack/index.d.ts:1110:48 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1110                 expressionConditionalOperator: SyncBailHook;
                                                    ~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1111:44 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1111                 expressionLogicalOperator: SyncBailHook;
                                                ~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1112:26 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1112                 program: SyncBailHook;
                              ~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1121:28 - error TS2707: Generic type 'AsyncSeriesWaterfallHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1121             beforeResolve: AsyncSeriesWaterfallHook;
                                ~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1122:27 - error TS2707: Generic type 'AsyncSeriesWaterfallHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1122             afterResolve: AsyncSeriesWaterfallHook;
                               ~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1123:33 - error TS2707: Generic type 'SyncWaterfallHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1123             contextModuleFiles: SyncWaterfallHook;
                                     ~~~~~~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1124:27 - error TS2707: Generic type 'AsyncSeriesWaterfallHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1124             alternatives: AsyncSeriesWaterfallHook;
                               ~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1144:21 - error TS2707: Generic type 'SyncHook<T, R, AdditionalOptions>' requires between 1 and 3 type arguments.

1144             unseal: SyncHook;
                         ~~~~~~~~
node_modules/@types/webpack/index.d.ts:1145:19 - error TS2707: Generic type 'SyncHook<T, R, AdditionalOptions>' requires between 1 and 3 type arguments.

1145             seal: SyncHook;
                       ~~~~~~~~
node_modules/@types/webpack/index.d.ts:1147:40 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1147             optimizeDependenciesBasic: SyncBailHook<Module[]>;
                                            ~~~~~~~~~~~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1148:35 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1148             optimizeDependencies: SyncBailHook<Module[]>;
                                       ~~~~~~~~~~~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1149:43 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1149             optimizeDependenciesAdvanced: SyncBailHook<Module[]>;
                                               ~~~~~~~~~~~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1152:23 - error TS2707: Generic type 'SyncHook<T, R, AdditionalOptions>' requires between 1 and 3 type arguments.

1152             optimize: SyncHook;
                           ~~~~~~~~
node_modules/@types/webpack/index.d.ts:1154:35 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1154             optimizeModulesBasic: SyncBailHook<Module[]>;
                                       ~~~~~~~~~~~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1155:30 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1155             optimizeModules: SyncBailHook<Module[]>;
                                  ~~~~~~~~~~~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1156:38 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1156             optimizeModulesAdvanced: SyncBailHook<Module[]>;
                                          ~~~~~~~~~~~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1171:27 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1171             shouldRecord: SyncBailHook;
                               ~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1190:25 - error TS2707: Generic type 'SyncHook<T, R, AdditionalOptions>' requires between 1 and 3 type arguments.

1190             beforeHash: SyncHook;
                             ~~~~~~~~
node_modules/@types/webpack/index.d.ts:1191:24 - error TS2707: Generic type 'SyncHook<T, R, AdditionalOptions>' requires between 1 and 3 type arguments.

1191             afterHash: SyncHook;
                            ~~~~~~~~
node_modules/@types/webpack/index.d.ts:1197:33 - error TS2707: Generic type 'SyncHook<T, R, AdditionalOptions>' requires between 1 and 3 type arguments.

1197             beforeModuleAssets: SyncHook;
                                     ~~~~~~~~
node_modules/@types/webpack/index.d.ts:1198:40 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1198             shouldGenerateChunkAssets: SyncBailHook;
                                            ~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1199:32 - error TS2707: Generic type 'SyncHook<T, R, AdditionalOptions>' requires between 1 and 3 type arguments.

1199             beforeChunkAssets: SyncHook;
                                    ~~~~~~~~
node_modules/@types/webpack/index.d.ts:1204:31 - error TS2707: Generic type 'AsyncSeriesHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1204             additionalAssets: AsyncSeriesHook;
                                   ~~~~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1210:33 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1210             needAdditionalSeal: SyncBailHook;
                                     ~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1211:24 - error TS2707: Generic type 'AsyncSeriesHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1211             afterSeal: AsyncSeriesHook;
                            ~~~~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1219:33 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1219             needAdditionalPass: SyncBailHook;
                                     ~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1220:28 - error TS2707: Generic type 'SyncHook<T, R, AdditionalOptions>' requires between 1 and 3 type arguments.

1220             childCompiler: SyncHook;
                                ~~~~~~~~
node_modules/@types/webpack/index.d.ts:1224:43 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1224             optimizeExtractedChunksBasic: SyncBailHook<Chunk[]>;
                                               ~~~~~~~~~~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1225:38 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1225             optimizeExtractedChunks: SyncBailHook<Chunk[]>;
                                          ~~~~~~~~~~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1226:46 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1226             optimizeExtractedChunksAdvanced: SyncBailHook<Chunk[]>;
                                                  ~~~~~~~~~~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1239:27 - error TS2707: Generic type 'SyncWaterfallHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1239             jsonpScript?: SyncWaterfallHook<string, Chunk, string>;
                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1240:22 - error TS2707: Generic type 'SyncWaterfallHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1240             require: SyncWaterfallHook<string, Chunk, string>;
                          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1241:32 - error TS2707: Generic type 'SyncWaterfallHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1241             requireExtensions: SyncWaterfallHook<string, Chunk, string>;
                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1242:28 - error TS2707: Generic type 'SyncWaterfallHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1242             requireEnsure: SyncWaterfallHook<string, Chunk, string>;
                                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1243:24 - error TS2707: Generic type 'SyncWaterfallHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1243             localVars: SyncWaterfallHook<string, Chunk, string>;
                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1244:27 - error TS2707: Generic type 'SyncWaterfallHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1244             afterStartup: SyncWaterfallHook<string, Chunk, string>;
                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1258:22 - error TS2707: Generic type 'SyncWaterfallHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1258             content: SyncWaterfallHook;
                          ~~~~~~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1259:21 - error TS2707: Generic type 'SyncWaterfallHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1259             module: SyncWaterfallHook;
                         ~~~~~~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1260:21 - error TS2707: Generic type 'SyncWaterfallHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1260             render: SyncWaterfallHook;
                         ~~~~~~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1261:22 - error TS2707: Generic type 'SyncWaterfallHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1261             package: SyncWaterfallHook;
                          ~~~~~~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1262:19 - error TS2707: Generic type 'SyncHook<T, R, AdditionalOptions>' requires between 1 and 3 type arguments.

1262             hash: SyncHook;
                       ~~~~~~~~
node_modules/@types/webpack/index.d.ts:1356:25 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1356             shouldEmit: SyncBailHook<Compilation>;
                             ~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1358:29 - error TS2707: Generic type 'AsyncSeriesHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1358             additionalPass: AsyncSeriesHook;
                                 ~~~~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1374:25 - error TS2707: Generic type 'SyncHook<T, R, AdditionalOptions>' requires between 1 and 3 type arguments.

1374             watchClose: SyncHook;
                             ~~~~~~~~
node_modules/@types/webpack/index.d.ts:1375:26 - error TS2707: Generic type 'SyncHook<T, R, AdditionalOptions>' requires between 1 and 3 type arguments.

1375             environment: SyncHook;
                              ~~~~~~~~
node_modules/@types/webpack/index.d.ts:1376:31 - error TS2707: Generic type 'SyncHook<T, R, AdditionalOptions>' requires between 1 and 3 type arguments.

1376             afterEnvironment: SyncHook;
                                   ~~~~~~~~
node_modules/@types/webpack/index.d.ts:1379:26 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1379             entryOption: SyncBailHook;
                              ~~~~~~~~~~~~
node_modules/@types/webpack/index.d.ts:1399:25 - error TS2707: Generic type 'SyncHook<T, R, AdditionalOptions>' requires between 1 and 3 type arguments.

1399             watchClose: SyncHook;
                             ~~~~~~~~
node_modules/@types/webpack/index.d.ts:1466:24 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1466         _pluginCompat: SyncBailHook<compilation.Compilation>;
                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Child HtmlWebpackCompiler:
                          Asset      Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  4.76 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@cypress/webpack-dev-server/index-template.html] 555 bytes {HtmlWebpackPlugin_0} [built]
i ∩╜ówdm∩╜ú: Failed to compile.

Make `getHarness(MyHarness)` re-usable between invocations and expectations

We can call our self getHarness() or getAllHarnesses() on each invocations or expectations.

should
invoke

It would simplify the test and make it more understandable for new comers by hiding apparent complexity.

cypress-harness: typing issues with strict mode in Angular

Package: @jscutlery/cypress-harness
Version: 0.3.4

Using the datepicker example now gives the following ts errors:

Property 'invoke' does not exist on type 'Promise<MatCalendarHarness>'.
Property 'selectCell' does not exist on type 'Promise<MatCalendarHarness>'.
Property 'should' does not exist on type 'MatCalendarHarness'.

The first two are due to the fact that some material components methods have optional parameters.
Ex : getCalendar(filter?: CalendarHarnessFilters): Promise<MatCalendarHarness>;
They can be solved by replacing (...args: unknown[]) => unknown with (...args: any[]) => unknown in internals.ts#L7

I have not investigated further for the third one..

Typing issue with `getAllHarnesses`

Hello @edbzn, thanks for the fix !

I can confirm that all the typing issues related to "getHarness" are fixed.

However, the one related to "getAllHarnesses" still exists :

describe('datepicker', () => {
    const calendars = getAllHarnesses(MatCalendarHarness);
    it('should set date', () => {
        calendars.should('be.empty'); <-- Property 'should' does not exist on type 'Promise<MatCalendarHarness[]>'.
    });
});

To fix this : get-all-harnesses.ts#L8 -> replace Promise<HARNESS[]> with ChainableHarness<HARNESS[]>

Originally posted by @Badisi in #66 (comment)

Is there any plan to include 'declarations' as part of BaseMountOptions?

It seems that currently one can mount only single component without e.g. its children. Are there any plans to add support for the latter?

Add schematic to setup component testing on existing projects

Cypress component testing is more similar to unit-testing than e2e testing so it should have the same setup as jest in an Angular or Nx monorepo. This means that we should not create a new project in the workspace but add cypress config to each project we want to test with cypress component testing. Another important reason for this is that some components could be tested using cypress without being exported by the package.

The plugin should have the following dependencies @jscutlery/cypress-mount @jscutlery/cypress-angular-dev-server @cypress/webpack-dev-server html-webpack-plugin and would have a setup-ct generator:

ng g @jscutlery/cypress-angular:setup-ct --project my-lib should:

add ${projectRoot}/cypress.json at the root of the project with a minimal configuration (cf. below)
add ${projectRoot}/cypress/plugins/index.ts with startAngularDevServer setup
generate tsconfig.cypress.json and add it to tsconfig.json's references (cf. below)
pass tsconfig path tsconfig.cypress.json to @jscutlery/cypress-angular-dev-server
update docs

and also ng-add

add cypress as dev dep

tsconfig.json

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "types": ["cypress"]
  },
  "include": ["**/*.cy-spec.ts"]
}

cypress.json

{
  "pluginsFile": "./cypress/plugins/index.ts",
  "component": {
    "testFiles": "**/*.cy-spec.{js,ts,jsx,tsx}",
    "componentFolder": "./src"
  }
}

Convert libs to standalone projects

"Fewer merge conflicts, more precise affected operations, easier to grasp."

nx generate @nrwl/workspace:convert-to-nx-project --all

Enable Strict mode

Enable strict mode in tsconfig.base.json and fix all compilation errors.

Setup-cr should setup component testing builder

Implement a builder that runs cypress open-ct (or PR to @nrwl/cypress 0555f30#r50632579)
Setup-ct should add the builder target
We should document the minimum version of Nx... the one that will introduce the testing type option.

@jscutlery/cypress-angular-dev-server is incompatible with angular-devkit/build-angular v12.1

browser_1.getCompilerConfig is not a function
TypeError: browser_1.getCompilerConfig is not a function
    at .../packages/cypress-angular-dev-server/src/lib/create-angular-webpack-config.ts:53:7
    at Object.generateWebpackConfig (.../node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:59:49)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)

cypress-angular-dev-server depends on getCompilerConfig from @angular-devkit/build-angular/src/browser

https://github.com/jscutlery/test-utils/blob/cae9aeb440638509407e28c5b93948ebc6935a48/packages/cypress-angular-dev-server/src/lib/create-angular-webpack-config.ts#L1

That function is no longer exported from there. Angular v12.1 did refactoring around it.

angular/angular-cli@528b7f1#diff-5b54a4601b5d50cc0617712190a902a19f4ea2d044c836e98d5cf8e9e6c4a6f3

So, @jscutlery/cypress-angular is incompatible with Angular CLI v12.1

[cypress-mount] `mountStory` cannot handle a story with `template`

https://github.com/jscutlery/test-utils/blob/main/packages/cypress-mount/src/lib/cypress-mount.ts#L25-L30

export function mountStory(
  story: Story,
  options: MountStoryOptions = {}
): Cypress.Chainable<void> {
  const args = story.args;

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const { component, moduleMetadata } = story({ args }, { args } as any);
  return mount(component, {
    ...moduleMetadata,
    ...options,
    inputs: args,
  });
}

Component Story Format for Angular supports component and template. But the current implementation of mountStory cannot handle a story with template.

https://storybook.js.org/docs/angular/writing-stories/introduction

// Always an empty list, not super interesting
export const Empty: Story<List> = (args: List) => ({
  props: args,
  template: `<app-list></<app-list>`,
});

export const OneItem: Story<List> = (args) => ({
  props: args,
  template: `
    <app-list>
      <app-listitem></app-listitem>
    </<app-list>`,
});

can not find root element!

Hey,
Im trying to use the library and do a unit-test for my project components.
It asked me to require the ('Zone.js') on my tests code and I did.
But, now it logs this error to the cypress dashboard:
"The selector "#root" did not match any elements"

Not sure what is the reasons for the two issues, Any ideas?

`@jscutlery/cypress-angular` is not Angular 12 compatible

I am unsure if this was already reported, but the following did not work for me in an Angular 12 project:

$ npx ng add @jscutlery/cypress-angular
ℹ Using package manager: npm
✔ Found compatible package version: @jscutlery/[email protected].
✔ Package information loaded.
 
The package @jscutlery/[email protected] will be installed and executed.
Would you like to proceed? Yes
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/core
npm ERR!   peer @angular/core@"12.0.5" from @angular/[email protected]
npm ERR!   node_modules/@angular/animations
npm ERR!     peerOptional @angular/animations@"12.0.5" from @angular/[email protected]
npm ERR!     node_modules/@angular/platform-browser
npm ERR!       peer @angular/platform-browser@"12.0.5" from @angular/[email protected]
npm ERR!       node_modules/@angular/forms
npm ERR!         @angular/forms@"^12.0.0" from the root project
npm ERR!       3 more (@angular/platform-browser-dynamic, @angular/router, the root project)
npm ERR!     @angular/animations@"^12.0.0" from the root project
npm ERR!   peer @angular/core@"12.0.5" from @angular/[email protected]
npm ERR!   node_modules/@angular/common
npm ERR!     peer @angular/common@"12.0.5" from @angular/[email protected]
npm ERR!     node_modules/@angular/forms
npm ERR!       @angular/forms@"^12.0.0" from the root project
npm ERR!     peer @angular/common@"12.0.5" from @angular/[email protected]
npm ERR!     node_modules/@angular/platform-browser
npm ERR!       peer @angular/platform-browser@"12.0.5" from @angular/[email protected]
npm ERR!       node_modules/@angular/forms
npm ERR!         @angular/forms@"^12.0.0" from the root project
npm ERR!       3 more (@angular/platform-browser-dynamic, @angular/router, the root project)
npm ERR!     3 more (@angular/platform-browser-dynamic, @angular/router, the root project)
npm ERR!   6 more (@angular/forms, @angular/platform-browser, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/core@"11.2.14" from @angular/[email protected]
npm ERR! node_modules/@jscutlery/cypress-mount/node_modules/@angular/common
npm ERR!   peer @angular/common@">=6.0.0" from @storybook/[email protected]
npm ERR!   node_modules/@jscutlery/cypress-mount/node_modules/@storybook/angular
npm ERR!     optional @storybook/angular@"^6.0.0" from @jscutlery/[email protected]
npm ERR!     node_modules/@jscutlery/cypress-mount
npm ERR!       @jscutlery/cypress-mount@"^0.x" from @jscutlery/[email protected]
npm ERR!       node_modules/@jscutlery/cypress-angular
npm ERR!   peer @angular/common@"^11.0.0" from [email protected]
npm ERR!   node_modules/@jscutlery/cypress-mount/node_modules/ng-dynamic-component
npm ERR!     ng-dynamic-component@"^8.0.1" from @jscutlery/[email protected]
npm ERR!     node_modules/@jscutlery/cypress-mount
npm ERR!       @jscutlery/cypress-mount@"^0.x" from @jscutlery/[email protected]
npm ERR!       node_modules/@jscutlery/cypress-angular
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /home/rkrisztian/.npm/eresolve-report.txt for a full report.

I ended up doing this instead:

npm i -D @jscutlery/cypress-angular --legacy-peer-deps
npx ng g @jscutlery/cypress-angular:setup-ct --project test-project

Example test project: rkrisztian/cypress-jest-test-project@ced502d

Is installing NX (ng add @nrwl/workspace) mandatory for these library to work

Looks like adding @nrwl/workspace completely changes the project structure which I cannot afford. Already our application is very complex and cannot afford to restructure and peers would not accept it.

Let me know whether this cypress unit test library works without adding @nrwl/workspace

Thanks
Sathish

export 'XhrFactory' was not found in '@angular/common' in Angular 11 application

In angular 11.2.8 version,
Followed instructions as in @jscutlery/cypress-angular -
https://github.com/jscutlery/test-utils/tree/main/packages/cypress-angular

ng add @jscutlery/cypress-angular
ng g @jscutlery/cypress-angular:setup-ct --project cypress-angular

It did all setup required to execute test.

then,
npx cypress open-ct - it was throwing an error -

ERROR in ./node_modules/@jscutlery/cypress-mount/node_modules/@angular/platform-browser/fesm2015/platform-browser.js 1448:15-25
"export 'XhrFactory' was not found in '@angular/common'
 @ ./node_modules/@jscutlery/cypress-mount/src/lib/cypress-mount.js
 @ ./node_modules/@jscutlery/cypress-mount/src/index.js
 @ ./src/sample.cy-spec.ts
 @ ./node_modules/@cypress/webpack-dev-server/dist/loader.js!./node_modules/@cypress/webpack-dev-server/dist/browser.js
 @ ./node_modules/@cypress/webpack-dev-server/dist/browser.js

Package.json


{
  "name": "ang2-conduit",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod  --base-href ./ && cp CNAME dist/CNAME",
    "test": "ng test",
    "lint": "ng lint --force",
    "e2e": "ng e2e",
    "postinstall": "ngcc"
  },
  "pre-commit": [
    "lint"
  ],
  "private": true,
  "dependencies": {
    "@angular/animations": "11.2.8",
    "@angular/common": "^11.2.8",
    "@angular/compiler": "11.2.8",
    "@angular/core": "11.2.8",
    "@angular/forms": "11.2.8",
    "@angular/platform-browser": "11.2.8",
    "@angular/platform-browser-dynamic": "11.2.8",
    "@angular/router": "11.2.8",
    "@jscutlery/cypress-angular": "^0.3.0",
    "core-js": "^2.4.1",
    "marked": "^0.3.9",
    "rxjs": "^6.4.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1102.7",
    "@angular/cli": "^11.2.7",
    "@angular/compiler-cli": "11.2.8",
    "@angular/language-service": "11.2.8",
    "@jscutlery/cypress-mount": "^0.9.1",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.1",
    "cypress": "^7.3.0",
    "html-webpack-plugin": "^4.5.2",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "pre-commit": "^1.2.2",
    "ts-node": "~4.1.0",
    "tslint": "~6.1.0",
    "typescript": "4.1.5"
  }
}

🧤 Gloves: provide an easier alternative to writing harnesses

As discussed here #4 and here angular/components#20871, component harnesses are easy to use but hard to implement.

It would be nice to provide another approach with the following constraints:

It should be easier than writing a harness,
It should be easier than hacking the DOM,
It should be framework agnostic,
🤔 Should it be able to interact with the state?

use workspace configuration build options

Load Angular build options from angular.json|workspace.json and add a target option to choose the app.
Update the generator to pass the target to startAngularDevServer

Fork ng-dynamic-component

Due to this issue and no activity for many months, we should fork ng-dynamic-component within this monorepo and use our own local copy in @jscutery/cypress-mount.

jscutlery / devkit Goto Github PK

devkit's People

Contributors

Stargazers

Watchers

Forkers

devkit's Issues

Repository problems

Rate-Limited

Open

Ignored or Blocked

Detected dependencies

Issue:

How to reproduce:

Steps to reproduce:

1. The app is routed to /__

2. Assets not loaded

3. Cannot get access to component instance

Allow the harness creation to be done with a selector object

Abstract verbose test harness logic

tsconfig.json

cypress.json

Recommend Projects

Recommend Topics

Recommend Org

1. The app is routed to `/__`