Comments (18)
Internal for this project to validate against those test runners, but I'd like to eventually generate one with a new project also.
I don't personally have a strong preference over what the default would be but I do know that Vite integration opens up the possibility of better integration with Playwright
from analog.
Okay, so this issue is about end-to-end test suites for the analog-app
project π
from analog.
As we don't have a custom executor/builder for Vite yet, which I'm intentionally holding off on, my preference for the given options would be the second one using start-server-and-test
from analog.
I can pick up the Playwright tests if you want.
I just don't know how much value these will have because these will test the same thing as the Cypress tests? Which is that the app is running correctly.
from analog.
I agree, a full Vitest + Playwright example would be a good start. I did some testing with the experimental component tests using Playwright and the Vite plugin also and it works as expected with standalone components.
from analog.
Here's the link to the docs
https://playwright.dev/docs/test-components
from analog.
@LayZeeDK first it used the @playwright/test runner/assertions.
This does most of the heavy lifting for you, and can be configured to your needs.
E.g. which browsers to run the test in, retries, recording, servers to run, ...
Now, it uses vitest to run the tests, and the assertions by vitest.
This seems faster, but we have to create the browsers manually in the before/after hooks.
from analog.
Do you mean when consumers use the create-analog
package to generate an Analog workspace or end-to-end tests internal to this workspace?
from analog.
I've been setting up Cypress end-to-end tests and here is what I found.
Targets in project.json
Ideal setup
Ideally, we would configure our analog-app-e2e:e2e
target like so:
{
"targets": {
"e2e": {
"executor": "@nrwl/cypress:cypress",
"options": {
"cypressConfig": "apps/analog-app-e2e/cypress.json",
"devServerTarget": "analog-app:serve"
}
}
}
}
where the analog-app:serve
target is:
{
"targets": {
"serve": {
"executor": "nx:run-commands",
"options": {
"cwd": "apps/analog-app",
"command": "vite --strict-port"
}
}
}
}
However, Nx and/or @nrwl/cypress:cypress
doesn't seem to be able to detect:
- When the Vite development server is running
- The port the development server is exposed on
Both of these are detected when using @angular-devkit/build-angular:dev-server
with @nrwl/cypress:cypress
in regular Angular workspaces.
start-server-and-test
The start-server-and-test
package is created exactly for this scenario.
We can configure a analog-app-e2e:cypress
target that uses the @nrwl/cypress:cypress
executor but expects the development server to already be running. We then use start-server-and-test
in the analog-app-e2e:e2e
target to start the analog-app:serve
target and wait for it to respond on port 3000 before starting the analog-app-e2e:cypress
target.
{
"targets": {
"e2e": {
"executor": "nx:run-commands",
"options": {
"cwd": "",
"command": "start-server-and-test 'nx serve analog-app' 3000 'nx cypress analog-app-e2e'"
}
},
"cypress": {
"executor": "@nrwl/cypress:cypress",
"options": {
"cypressConfig": "apps/analog-app-e2e/cypress.json",
"baseUrl": "http://localhost:3000"
}
}
}
}
where the analog-app:serve
target is:
{
"targets": {
"serve": {
"executor": "nx:run-commands",
"options": {
"cwd": "apps/analog-app",
"command": "vite --strict-port"
}
}
}
}
start-server-and-test
kills both processes both on success and failure.
Using a separate serve target
Without the start-server-and-test
package, we can specify the baseUrl
option for the @nrwl/cypress:cypress
executor and use a separate analog-app:serve-e2e
target instead of analog-app:serve
:
{
"targets": {
"e2e": {
"executor": "@nrwl/cypress:cypress",
"options": {
"cypressConfig": "apps/analog-app-e2e/cypress.json",
"devServerTarget": "analog-app:serve-e2e",
"baseUrl": "http://localhost:3000"
}
}
}
}
where the analog-app:serve-e2e
target is:
{
"targets": {
"serve-e2e": {
"executor": "nx:run-commands",
"options": {
"color": true,
"commands": ["vite --strict-port"],
"cwd": "apps/analog-app",
"parallel": true,
"readyWhen": "ready in"
}
}
}
}
The tests run but the development server isn't killed after success or failure.
from analog.
As we don't have a custom executor/builder for Vite yet, which I'm intentionally holding off on
Why is that? π
Is it not something that a feature request could be opened for that could be tagged with help wanted?
from analog.
As we don't have a custom executor/builder for Vite yet, which I'm intentionally holding off on
Why is that? π
Is it not something that a feature request could be opened for that could be tagged with help wanted?
I put some thoughts up here https://twitter.com/brandontroberts/status/1555598666278359042
I'm not opposed to have an executor/builder for Vite/Vitest but it would be very thin as I don't want to cover up the Vite config behind a wall of JSON config
from analog.
Seems like Nxext has Vite and Vitest executors π
from analog.
@brandonroberts
Reopen to include Playwright.
from analog.
Vite integration opens up the possibility of better integration with Playwright
According to @brandonroberts
from analog.
Yea, that's correct. Playwright can be used with any test runner, also Vitest.
The downside is that you have to do the setup to launch/close the browser manually, this is done for you with @playwright/test
. The latter is used in #51 , but we can swap it out if we want to add these tests.
from analog.
The downside is that you have to do the setup to launch/close the browser manually, this is done for you with
@playwright/test
.
I used start-server-and-test
for the Cypress end-to-end test suites.
from analog.
@timdeschryver
Which test runner is currently used in #51?
I think it would be a noteworthy novelty to showcase a full Vitest + Playwright + Angular setup.
from analog.
Cypress Component Tests which support Angular as of Cypress version 10.5 also use Vite as test runner/development server as far as I'm aware.
What are the experimental component tests you are referring to, @brandonroberts?
from analog.
Related Issues (20)
- Feature: Support for Netlify preset in Nitro configuration HOT 1
- feature: top level layout support HOT 2
- Files in folder assets are moved at the root folder HOT 2
- Can't load Transloco i18n files HOT 2
- Loading data as JSON files gzipped by the server crashes while server rendering
- Build: Remove support for Node 16
- RFC: Introduce .analog build directory to simplify deployments
- Bug: zone.js import not found in versions greater than 0.13.1 HOT 1
- Build: Add MDX example to astro-app
- Provide a way to generate a RSS xml HOT 1
- AnalogJS + Astro: "NullInjectorError: No provider for HttpClient!" HOT 2
- The content renderer should be able to provide the TOC HOT 2
- ts file containing global in its filename is renamed globalThis while SSR HOT 2
- Add @angular/platform-server/init to main.server.ts file HOT 1
- Nx 16.9.x errors with Cannot read properties of undefined (reading 'executor') HOT 23
- Contributing: Document changes needed when updating a package version
- Docs: Add guide on using post render hooks with static site generation HOT 1
- Angular template files not found while creating a new project with create-analog v.0.2.49 HOT 1
- docs: adding turkish language HOT 4
- Interceptor doesnΒ΄t seem to be supported in Analog HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from analog.