chore(demo-integrations): add Cypress Component Testing (#838)

taiga-family · Dec 28, 2023 · 9539991 · 9539991
1 parent 1e9e680
commit 9539991
Show file tree

Hide file tree

Showing 9 changed files with 109 additions and 12 deletions.
diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
@@ -115,9 +115,21 @@ jobs:
           npm run cy:run -- --spec "**/(angular|react|ssr|addons|others)/**/*.cy.ts" --config baseUrl="${{
           env.UNIVERSAL_SERVER }}"
 
+  component-testing:
+    if: ${{ !contains(github.head_ref, 'release/') }}
+    runs-on: ubuntu-latest
+    name: Component Testing
+    steps:
+      - uses: taiga-family/ci/actions/setup/[email protected]
+      - uses: taiga-family/ci/actions/setup/[email protected]
+      - uses: taiga-family/ci/actions/setup/[email protected]
+
+      - name: Run Cypress tests
+        run: npx nx component-test demo-integrations --browser=chrome
+
   result:
     if: ${{ !contains(github.head_ref, 'release/') }}
-    needs: [build-demo, e2e-kit, e2e-recipes, e2e-others]
+    needs: [build-demo, e2e-kit, e2e-recipes, e2e-others, component-testing]
     runs-on: ubuntu-latest
     name: E2E result
     steps:

diff --git a/nx.json b/nx.json
@@ -64,7 +64,9 @@
             "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
             "!{projectRoot}/tsconfig.spec.json",
             "!{projectRoot}/jest.config.[jt]s",
-            "!{projectRoot}/src/test-setup.[jt]s"
+            "!{projectRoot}/src/test-setup.[jt]s",
+            "!{projectRoot}/**/*.cy.[jt]s?(x)",
+            "!{projectRoot}/cypress.config.[jt]s"
         ]
     },
     "targetDefaults": {
@@ -87,6 +89,10 @@
                     "codeCoverage": true
                 }
             }
+        },
+        "component-test": {
+            "cache": true,
+            "inputs": ["default", "^production"]
         }
     },
     "parallel": 3

diff --git a/package-lock.json b/package-lock.json
diff --git a/projects/demo-integrations/cypress.config.ts b/projects/demo-integrations/cypress.config.ts
@@ -1,3 +1,4 @@
+import {nxComponentTestingPreset} from '@nx/angular/plugins/component-testing';
 import {nxE2EPreset} from '@nx/cypress/plugins/cypress-preset';
 import {defineConfig} from 'cypress';
 
@@ -17,7 +18,13 @@ export const CYPRESS_CONFIG: Cypress.ConfigOptions = {
             return require('./src/plugins/index.js')(on, config);
         },
         baseUrl: 'http://localhost:3333',
-        specPattern: 'src/tests/**/*.cy.ts',
+        specPattern: 'src/tests/!(component-testing)/**/*.cy.ts',
+    },
+    component: {
+        ...nxComponentTestingPreset(__filename),
+        supportFile: 'src/support/component.ts',
+        indexHtmlFile: 'src/support/component-index.html',
+        specPattern: 'src/tests/component-testing/*.cy.ts',
     },
 };
 

diff --git a/projects/demo-integrations/project.json b/projects/demo-integrations/project.json
@@ -11,6 +11,15 @@
                 "testingType": "e2e",
                 "devServerTarget": "demo:serve:development"
             }
+        },
+        "component-test": {
+            "executor": "@nx/cypress:cypress",
+            "options": {
+                "cypressConfig": "projects/demo-integrations/cypress.config.ts",
+                "testingType": "component",
+                "skipServe": true,
+                "devServerTarget": "demo:build"
+            }
         }
     },
     "implicitDependencies": ["demo"]

diff --git a/projects/demo-integrations/src/support/commands/smart-tick.ts b/projects/demo-integrations/src/support/commands/smart-tick.ts
@@ -1,8 +1,8 @@
-export function smartTick(
-    $subject: Cypress.PrevSubjectMap<void>[Cypress.PrevSubject],
+export function smartTick<T extends Cypress.PrevSubjectMap<void>[Cypress.PrevSubject]>(
+    $subject: T,
     durationMs: number, // ms
     frequencyMs = 100, // ms
-): Cypress.Chainable<unknown> {
+): Cypress.Chainable<T> {
     const iterations = Math.ceil(durationMs / frequencyMs);
     const lastIterationMs = durationMs % frequencyMs || frequencyMs;
 

diff --git a/projects/demo-integrations/src/support/component-index.html b/projects/demo-integrations/src/support/component-index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta
+            content="IE=edge"
+            http-equiv="X-UA-Compatible"
+        />
+        <meta
+            content="width=device-width,initial-scale=1.0"
+            name="viewport"
+        />
+        <title>demo-integrations Components App</title>
+    </head>
+    <body>
+        <div data-cy-root></div>
+    </body>
+</html>
diff --git a/projects/demo-integrations/src/support/component.ts b/projects/demo-integrations/src/support/component.ts
@@ -0,0 +1,14 @@
+import './commands';
+
+import {mount} from 'cypress/angular';
+
+declare global {
+    namespace Cypress {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        interface Chainable<Subject> {
+            mount: typeof mount;
+        }
+    }
+}
+
+Cypress.Commands.add('mount', mount);
diff --git a/projects/demo-integrations/src/tests/component-testing/test.cy.ts b/projects/demo-integrations/src/tests/component-testing/test.cy.ts
@@ -0,0 +1,31 @@
+import {Component, Input} from '@angular/core';
+import {MaskitoDirective} from '@maskito/angular';
+import {MaskitoOptions} from '@maskito/core';
+
+@Component({
+    standalone: true,
+    imports: [MaskitoDirective],
+    template: `
+        <input [maskito]="maskitoOptions" />
+    `,
+})
+class TestInput {
+    @Input()
+    maskitoOptions: MaskitoOptions | null = null;
+}
+
+describe('Component testing demo', () => {
+    it('Test #1', () => {
+        const maskitoOptions: MaskitoOptions = {mask: /^\d+$/};
+
+        cy.mount(TestInput, {componentProperties: {maskitoOptions}});
+        cy.get('input').type('123abc!!!!!567').should('have.value', '123567');
+    });
+
+    it('Test #2', () => {
+        const maskitoOptions: MaskitoOptions = {mask: [/\d/, /\d/, ':', /\d/, /\d/]};
+
+        cy.mount(TestInput, {componentProperties: {maskitoOptions}});
+        cy.get('input').type('1234').should('have.value', '12:34');
+    });
+});