jscutlery / devkit Goto Github PK
View Code? Open in Web Editor NEWTools that make Angular developer's life easier.
License: MIT License
Tools that make Angular developer's life easier.
License: MIT License
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?
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
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
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
.
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:
<my-text-component data-cy="firstname"></my-text-component>
Angular CLI changed the way it builds Webpack. It would be great to align the close as possible with this implementation.
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
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
We should make sure that cypress
is started with --ts-config
option. It is the default setup with Nx but not with custom configurations.
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)
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?
I've run into some problems in my test project (branch: router-test
, as linked).
/__
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?
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
).
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 @Input
s and @Output
s? 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.
I have two related suggestions:
It is often the case that you want to select not just a component, but a particular instance of that component. Some examples are:
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;
}
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
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.
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.
angular.json|workspace.json
and add a target
option to choose the app.startAngularDevServer
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>`,
});
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:
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)
@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 ?
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:
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?
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?
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
These problems occurred while renovating this repository. View logs.
These updates await pending status checks before automerging. Click on a checkbox to abort the branch automerge, and create a PR instead.
@angular-devkit/build-angular
, @angular-devkit/core
, @angular-devkit/schematics
, @schematics/angular
)@babel/core
, @babel/helper-plugin-utils
)These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.
.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
package.json
@babel/core 7.24.5
@babel/helper-plugin-utils ^7.24.5
@types/babel__helper-plugin-utils ^7.10.3
rxjs 7.8.1
tslib 2.6.3
zone.js 0.14.7
@analogjs/vite-plugin-angular 1.5.0
@angular-devkit/build-angular 18.0.3
@angular-devkit/core 18.0.3
@angular-devkit/schematics 18.0.3
@angular-eslint/eslint-plugin 18.0.1
@angular-eslint/eslint-plugin-template 18.0.1
@angular-eslint/template-parser 18.0.1
@commitlint/cli ^19.0.0
@commitlint/config-angular ^19.0.0
@monodon/rust 1.4.0
@playwright/experimental-ct-core 1.44.1
@playwright/test 1.44.1
@schematics/angular 18.0.3
@swc-node/register 1.9.2
@swc/core 1.5.29
@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.13.0
@typescript-eslint/parser 7.13.0
@vitest/coverage-v8 1.6.0
@vitest/ui 1.6.0
autoprefixer ^10.4.0
babel-jest 29.7.0
cypress 13.11.0
cypress-pipe ^2.0.0
dotenv 16.0.3
eslint 8.57.0
eslint-config-prettier 9.0.0
eslint-plugin-cypress 3.3.0
husky ^9.0.0
jest 29.7.0
jest-environment-jsdom 29.7.0
jest-preset-angular 14.1.0
mock-fs ^5.1.1
ng-packagr 18.0.0
postcss ^8.4.5
postcss-import 16.1.0
postcss-preset-env ~9.5.0
postcss-url 10.1.3
prettier 3.3.2
ts-jest 29.1.4
ts-node 10.9.1
typescript 5.4.5
unplugin-swc 1.4.5
vite 5.2.13
vitest 1.6.0
yarn 3.8.2
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)
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"
}
}
Enable strict mode in tsconfig.base.json
and fix all compilation errors.
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..
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:
npm install
to install dependenciesng run web-e2e:ct
Environment:
Nx: 12.10.0
Cypress: 8.5.1
Angular: 12.2.0
OS: macOS Big Sur 11.6
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.
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:
@jscutlery/cypress-angular-dev-server
cypress open-ct --project packages/cypress-mount-integration
+ cypress.json config + tsconfig.json includes. Cf. 304fb71@cypress/angular-preprocessor
for Cypress >=7Following improvements are:
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.
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:
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
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:
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?
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?
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:
"Fewer merge conflicts, more precise affected operations, easier to grasp."
nx generate @nrwl/workspace:convert-to-nx-project --all
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:
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
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
Use @cypress/mount-utils
cypress-io/cypress#15903 (comment)
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
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');
});
});
I have set up a small Nx based repository to reproduce this error here: decline/cypress-harness
# 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 🙂
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)
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
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:
${projectRoot}/cypress.json
at the root of the project with a minimal configuration (cf. below)${projectRoot}/cypress/plugins/index.ts
with startAngularDevServer
setuptsconfig.cypress.json
and add it to tsconfig.json
's references (cf. below)tsconfig.cypress.json
to @jscutlery/cypress-angular-dev-server
and also ng-add
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"types": ["cypress"]
},
"include": ["**/*.cy-spec.ts"]
}
{
"pluginsFile": "./cypress/plugins/index.ts",
"component": {
"testFiles": "**/*.cy-spec.{js,ts,jsx,tsx}",
"componentFolder": "./src"
}
}
cypress open-ct
(or PR to @nrwl/cypress 0555f30#r50632579)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?
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 { }
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.