chore(repo): split slow e2e tests - ng-add, cypress, eslint linter, a…

.nx/workflows/dynamic-changesets.yaml

@@ -25,17 +25,11 @@ assignment-rules:
       - e2e-next
       - e2e-web
       - e2e-eslint
+      - e2e-remix
+      - e2e-cypress
+      - e2e-docker
     targets:
-      - e2e-ci**react-package**
-      - e2e-ci**react.test**
-      - e2e-ci**react-router-ts-solution**
-      - e2e-ci**next-e2e-and-snapshots**
-      - e2e-ci**next-generation**
-      - e2e-ci**next-ts-solutions**
-      - e2e-ci**next-webpack**
-      - e2e-ci**web**
-      - e2e-ci**remix-ts-solution**
-      - e2e-ci**linter**
+      - e2e-ci**
     run-on:
       - agent: linux-large
         parallelism: 1

e2e/cypress/src/cypress-ct-angular.test.ts

@@ -0,0 +1,40 @@
+import { killPort, runCLI, runE2ETests, uniq } from '@nx/e2e-utils';
+import { setupCypressTest, cleanupCypressTest } from './cypress-setup';
+
+const TEN_MINS_MS = 600_000;
+
+describe('Cypress E2E Test runner', () => {
+  beforeAll(() => {
+    setupCypressTest();
+  });
+
+  afterAll(() => cleanupCypressTest());
+
+  it(
+    `should allow CT and e2e in same project for an angular project`,
+    async () => {
+      let appName = uniq(`angular-cy-app`);
+      runCLI(
+        `generate @nx/angular:app apps/${appName} --e2eTestRunner=none --no-interactive --bundler=webpack`
+      );
+      runCLI(
+        `generate @nx/angular:component apps/${appName}/src/app/btn/btn --no-interactive`
+      );
+      runCLI(
+        `generate @nx/angular:cypress-component-configuration --project=${appName} --generate-tests --no-interactive`
+      );
+      runCLI(
+        `generate @nx/cypress:e2e --project=${appName} --baseUrl=http://localhost:4200 --no-interactive`
+      );
+
+      if (runE2ETests('cypress')) {
+        expect(runCLI(`run ${appName}:component-test`)).toContain(
+          'All specs passed!'
+        );
+        expect(runCLI(`run ${appName}:e2e`)).toContain('All specs passed!');
+      }
+      expect(await killPort(4200)).toBeTruthy();
+    },
+    TEN_MINS_MS
+  );
+});

e2e/cypress/src/cypress-ct-next.test.ts

@@ -0,0 +1,40 @@
+import { killPort, runCLI, runE2ETests, uniq } from '@nx/e2e-utils';
+import { setupCypressTest, cleanupCypressTest } from './cypress-setup';
+
+const TEN_MINS_MS = 600_000;
+
+describe('Cypress E2E Test runner', () => {
+  beforeAll(() => {
+    setupCypressTest();
+  });
+
+  afterAll(() => cleanupCypressTest());
+
+  it(
+    `should allow CT and e2e in same project for a next project`,
+    async () => {
+      const appName = uniq('next-cy-app');
+      runCLI(
+        `generate @nx/next:app apps/${appName} --e2eTestRunner=none --no-interactive `
+      );
+      runCLI(
+        `generate @nx/next:component apps/${appName}/components/btn --no-interactive`
+      );
+      runCLI(
+        `generate @nx/next:cypress-component-configuration --project=${appName} --generate-tests --no-interactive`
+      );
+      runCLI(
+        `generate @nx/cypress:configuration --project=${appName} --devServerTarget=${appName}:dev --baseUrl=http://localhost:3000 --no-interactive`
+      );
+
+      if (runE2ETests('cypress')) {
+        expect(runCLI(`run ${appName}:component-test`)).toContain(
+          'All specs passed!'
+        );
+        expect(runCLI(`run ${appName}:e2e`)).toContain('All specs passed!');
+      }
+      expect(await killPort(3000)).toBeTruthy();
+    },
+    TEN_MINS_MS
+  );
+});

e2e/cypress/src/cypress-execute-e2e.test.ts

@@ -0,0 +1,125 @@
+import {
+  checkFilesExist,
+  createFile,
+  readJson,
+  runCLI,
+  runE2ETests,
+  updateFile,
+} from '@nx/e2e-utils';
+import { setupCypressTest, cleanupCypressTest } from './cypress-setup';
+
+const TEN_MINS_MS = 600_000;
+
+describe('Cypress E2E Test runner', () => {
+  let myapp: string;
+
+  beforeAll(() => {
+    const context = setupCypressTest();
+    myapp = context.myapp;
+    runCLI(
+      `generate @nx/react:app apps/${myapp} --e2eTestRunner=cypress --linter=eslint`
+    );
+  });
+
+  afterAll(() => cleanupCypressTest());
+
+  it(
+    'should execute e2e tests using Cypress',
+    async () => {
+      // make sure env vars work
+      createFile(
+        `apps/${myapp}-e2e/cypress.env.json`,
+        `
+{
+  "cypressEnvJson": "i am from the cypress.env.json file"
+}`
+      );
+
+      createFile(
+        `apps/${myapp}-e2e/src/e2e/env.cy.ts`,
+        `
+describe('env vars', () => {
+  it('should have cli args', () => {
+    assert.equal(Cypress.env('cliArg'), 'i am from the cli args');
+  });
+
+  it('should have cypress.env.json vars', () => {
+    assert.equal(
+      Cypress.env('cypressEnvJson'),
+      'i am from the cypress.env.json file'
+    );
+  });
+});`
+      );
+
+      if (runE2ETests('cypress')) {
+        // contains the correct output and works
+        const run1 = runCLI(
+          `e2e ${myapp}-e2e --config \\'{\\"env\\":{\\"cliArg\\":\\"i am from the cli args\\"}}\\'`
+        );
+        expect(run1).toContain('All specs passed!');
+        // tests should not fail because of a config change
+        updateFile(
+          `apps/${myapp}-e2e/cypress.config.ts`,
+          `
+import { defineConfig } from 'cypress';
+import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
+
+export default defineConfig({
+  e2e: {
+    ...nxE2EPreset(__filename, {
+      cypressDir: 'src',
+      webServerCommands: {
+        default: 'nx run ${myapp}:serve',
+        production: 'nx run ${myapp}:preview',
+      },
+      ciWebServerCommand: 'nx run ${myapp}:serve-static',
+      webServerConfig: {
+        timeout: 60_000,
+      },
+    }),
+    baseUrl: 'http://localhost:4200',
+  },
+  env: {
+    fromCyConfig: 'i am from the cypress config file'
+  }
+});`
+        );
+
+        const run2 = runCLI(
+          `e2e ${myapp}-e2e --config \\'{\\"env\\":{\\"cliArg\\":\\"i am from the cli args\\"}}\\'`
+        );
+        expect(run2).toContain('All specs passed!');
+
+        // make sure project.json env vars also work
+        checkFilesExist(`apps/${myapp}-e2e/src/e2e/env.cy.ts`);
+        updateFile(
+          `apps/${myapp}-e2e/src/e2e/env.cy.ts`,
+          `
+        describe('env vars', () => {
+          it('should not have cli args', () => {
+            assert.equal(Cypress.env('cliArg'), undefined);
+          });
+
+          it('should have cypress.env.json vars', () => {
+            assert.equal(
+              Cypress.env('cypressEnvJson'),
+              'i am from the cypress.env.json file'
+            );
+          });
+
+          it('should have cypress config vars', () => {
+            assert.equal(
+              Cypress.env('fromCyConfig'),
+              'i am from the cypress config file'
+            );
+          });
+        });`
+        );
+        const run3 = runCLI(`e2e ${myapp}-e2e`);
+        expect(run3).toContain('All specs passed!');
+      }
+    },
+    TEN_MINS_MS
+  );
+});

e2e/cypress/src/cypress-generate-app.test.ts

@@ -0,0 +1,39 @@
+import { checkFilesExist, readJson, runCLI } from '@nx/e2e-utils';
+import { setupCypressTest, cleanupCypressTest } from './cypress-setup';
+
+const TEN_MINS_MS = 600_000;
+
+describe('Cypress E2E Test runner', () => {
+  let myapp: string;
+
+  beforeAll(() => {
+    const context = setupCypressTest();
+    myapp = context.myapp;
+  });
+
+  afterAll(() => cleanupCypressTest());
+
+  it(
+    'should generate an app with the Cypress as e2e test runner',
+    () => {
+      runCLI(
+        `generate @nx/react:app apps/${myapp} --e2eTestRunner=cypress --linter=eslint`
+      );
+
+      // Making sure the package.json file contains the Cypress dependency
+      const packageJson = readJson('package.json');
+      expect(packageJson.devDependencies['cypress']).toBeTruthy();
+
+      // Making sure the cypress folders & files are created
+      checkFilesExist(`apps/${myapp}-e2e/cypress.config.ts`);
+      checkFilesExist(`apps/${myapp}-e2e/tsconfig.json`);
+
+      checkFilesExist(`apps/${myapp}-e2e/src/fixtures/example.json`);
+      checkFilesExist(`apps/${myapp}-e2e/src/e2e/app.cy.ts`);
+      checkFilesExist(`apps/${myapp}-e2e/src/support/app.po.ts`);
+      checkFilesExist(`apps/${myapp}-e2e/src/support/e2e.ts`);
+      checkFilesExist(`apps/${myapp}-e2e/src/support/commands.ts`);
+    },
+    TEN_MINS_MS
+  );
+});

e2e/cypress/src/cypress-setup.ts

@@ -0,0 +1,15 @@
+import { cleanupProject, newProject, uniq } from '@nx/e2e-utils';
+
+export interface CypressTestContext {
+  myapp: string;
+}
+
+export function setupCypressTest(): CypressTestContext {
+  const myapp = uniq('myapp');
+  newProject({ packages: ['@nx/angular', '@nx/next', '@nx/react'] });
+  return { myapp };
+}
+
+export function cleanupCypressTest() {
+  cleanupProject();
+}