sand4rt / playwright-ct-angular Goto Github PK
View Code? Open in Web Editor NEWPlaywright Angular component testing.
Home Page: https://www.npmjs.com/package/@sand4rt/experimental-ct-angular
License: MIT License
Playwright Angular component testing.
Home Page: https://www.npmjs.com/package/@sand4rt/experimental-ct-angular
License: MIT License
When I upgrade to Angular 16 and install the dependencies of the example app via npm, playwright test
fails with the following error message:
TypeError: plugin.default is not a function
You can take a look at it here: https://github.com/rainerhahnekamp/playwright-ct-angular/tree/ng-16.2
Version: 1.41.2
Components should be compiled before they are mounted.
Error: Error: Component 'AppComponent' is not resolved:
- templateUrl: ./app.component.html
- styleUrls: ["./app.component.css"]
Did you run and wait for 'resolveComponentResources()'?
at AppComponent.get (http://localhost:3100/assets/index-9fa00b93.js:33829:27)
at getComponentDef$2 (http://localhost:3100/assets/index-9fa00b93.js:9986:16)
at reflectComponentType (http://localhost:3100/assets/index-9fa00b93.js:39701:26)
at __pwRenderComponent (http://localhost:3100/assets/index-9fa00b93.js:117317:29)
at window.playwrightMount (http://localhost:3100/assets/index-9fa00b93.js:117356:25)
at eval (eval at evaluate (:226:30), <anonymous>:12:18)
at async <anonymous>:252:30
at AppComponent.get (<omitted>/web-component-harness/WebComponentHarness/http:/localhost:3100/assets/index-9fa00b93.js:33829:27)
at getComponentDef$2 (<omitted>/web-component-harness/WebComponentHarness/http:/localhost:3100/assets/index-9fa00b93.js:9986:16)
at reflectComponentType (<omitted>/web-component-harness/WebComponentHarness/http:/localhost:3100/assets/index-9fa00b93.js:39701:26)
at __pwRenderComponent (<omitted>/web-component-harness/WebComponentHarness/http:/localhost:3100/assets/index-9fa00b93.js:117317:29)
at window.playwrightMount (<omitted>/web-component-harness/WebComponentHarness/http:/localhost:3100/assets/index-9fa00b93.js:117356:25)
at eval (<omitted>/web-component-harness/WebComponentHarness/eval at evaluate (:226:30), <anonymous>:12:18)
at <omitted>/web-component-harness/WebComponentHarness/async <anonymous>:252:30
at mount (<omitted>/web-component-harness/WebComponentHarness/node_modules/@playwright/experimental-ct-core/lib/mount.js:50:35)
at <omitted>/web-component-harness/WebComponentHarness/src/app/harness.spec.ts:33:24
Minimal reproduction
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
standalone: true,
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {}
// app.component.spec.ts
import {test} from "@sand4rt/experimental-ct-angular";
import {AppComponent} from "./app.component";
test.describe('harness', () => {
test('it should work', async ({ mount }) => {
const spec = await mount(AppComponent)
})
})
When building Playwright component tests i see a lot of sourcemap warnings. See pipeline: https://github.com/sand4rt/playwright-ct-angular/actions/runs/5036859856/jobs/9033313003#step:8:18
related to: analogjs/analog#410
Version: 1.41.2
Tests that use beforeMount
to configure TestBed
fail to run.
npm run test-ct
> [email protected] test-ct
> playwright test -c playwright-ct.config.ts
JIT compilation failed for injectable [class PlatformLocation]
Error: The injectable 'PlatformLocation' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available.
The injectable is part of a library that has been partially compiled.
However, the Angular Linker has not processed the library such that JIT compilation is used as fallback.
Ideally, the library is processed using the Angular Linker to become fully AOT compiled.
Alternatively, the JIT compiler should be loaded by bootstrapping using '@angular/platform-browser-dynamic' or '@angular/platform-server',
or manually provide the compiler with 'import "@angular/compiler";' before bootstrapping.
at getCompilerFacade (<omitted>/packages/core/src/compiler/compiler_facade.ts:52:11)
at Module.ɵɵngDeclareFactory (<omitted>/packages/core/src/render3/jit/partial.ts:58:20)
at Function.<static_initializer> (<omitted>/node_modules/@angular/common/fesm2022/common.mjs:64:29)
at <omitted>/packages/common/src/dom_tokens.ts:18:25
Minimal reproduction
import {test} from "@sand4rt/experimental-ct-angular";
import {beforeMount} from "@sand4rt/experimental-ct-angular/hooks";
import {NoopAnimationsModule} from "@angular/platform-browser/animations";
test.describe('harness', () => {
beforeMount(async ({ TestBed }) => {
TestBed.configureTestingModule({
imports: [NoopAnimationsModule]
})
})
})
Hi @sand4rt
I am trying to understand how and if we can use this for non standalone angular components. Can you please help.
Thanks in advance!
Version: 1.41.2
I'm testing out this library and ran into this error when using beforeMount
in my component test.
npm run test-ct
> [email protected] test-ct
> playwright test -c playwright-ct.config.ts
ReferenceError: window is not defined
at node_modules/@sand4rt/experimental-ct-angular/hooks.mjs:20:1
Minimal reproduction:
import {test} from "@sand4rt/experimental-ct-angular";
import {AppComponent} from "./app.component";
import {beforeMount} from "@sand4rt/experimental-ct-angular/hooks";
test.describe('harness', () => {
beforeMount(async ({ TestBed }) => {
TestBed.configureTestingModule({
imports: []
})
})
test('it should work', async ({ mount }) => {
const spec = await mount(AppComponent)
})
})
Consider changing window
to globalThis
?
Use JIT mode for testing faster compilation. Related to: analogjs/analog#409
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.