Added component tests to shared ui library

jdwillmsen · Oct 27, 2023 · 4fc6248 · 4fc6248
1 parent f7d37ce
commit 4fc6248
Show file tree

Hide file tree

Showing 15 changed files with 181 additions and 1 deletion.
diff --git a/libs/shared/ui/cypress.config.ts b/libs/shared/ui/cypress.config.ts
@@ -0,0 +1,6 @@
+import { nxComponentTestingPreset } from '@nx/angular/plugins/component-testing';
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  component: nxComponentTestingPreset(__filename),
+});
diff --git a/libs/shared/ui/cypress/fixtures/example.json b/libs/shared/ui/cypress/fixtures/example.json
@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}
diff --git a/libs/shared/ui/cypress/support/commands.ts b/libs/shared/ui/cypress/support/commands.ts
@@ -0,0 +1,35 @@
+/// <reference types="cypress" />
+
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+declare namespace Cypress {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface Chainable<Subject> {
+    login(email: string, password: string): void;
+  }
+}
+
+// -- This is a parent command --
+Cypress.Commands.add('login', (email, password) => {
+  console.log('Custom command example: Login', email, password);
+});
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
diff --git a/libs/shared/ui/cypress/support/component-index.html b/libs/shared/ui/cypress/support/component-index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>shared-ui Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>
diff --git a/libs/shared/ui/cypress/support/component.ts b/libs/shared/ui/cypress/support/component.ts
@@ -0,0 +1,31 @@
+import { mount } from 'cypress/angular';
+// ***********************************************************
+// This example support/component.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.ts using ES2015 syntax:
+import './commands';
+
+// add component testing only related command here, such as mount
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  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/libs/shared/ui/cypress/tsconfig.json b/libs/shared/ui/cypress/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["cypress", "node"],
+    "sourceMap": false
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.js",
+    "../cypress.config.ts",
+    "../**/*.cy.ts",
+
+    "../**/*.cy.js",
+
+    "../**/*.d.ts"
+  ]
+}
diff --git a/libs/shared/ui/project.json b/libs/shared/ui/project.json
@@ -29,6 +29,15 @@
           "libs/shared/ui//**/*.html"
         ]
       }
+    },
+    "component-test": {
+      "executor": "@nx/cypress:cypress",
+      "options": {
+        "cypressConfig": "libs/shared/ui/cypress.config.ts",
+        "testingType": "component",
+        "skipServe": true,
+        "devServerTarget": "usersrole-nx:build"
+      }
     }
   }
 }
diff --git a/libs/shared/ui/src/index.ts b/libs/shared/ui/src/index.ts
@@ -0,0 +1 @@
+export * from './main/main.component';
diff --git a/libs/shared/ui/src/main/main.component.cy.ts b/libs/shared/ui/src/main/main.component.cy.ts
@@ -0,0 +1,19 @@
+import { TestBed } from '@angular/core/testing';
+import { MainComponent } from './main.component';
+
+describe(MainComponent.name, () => {
+
+  beforeEach(() => {
+    TestBed.overrideComponent(MainComponent, {
+      add: {
+        imports: [],
+        providers: []
+      }
+    })
+  })
+
+  it('renders', () => {
+     cy.mount(MainComponent,);
+  })
+
+})
diff --git a/libs/shared/ui/src/main/main.component.html b/libs/shared/ui/src/main/main.component.html
@@ -0,0 +1 @@
+<p>main works!</p>
diff --git a/libs/shared/ui/src/main/main.component.scss b/libs/shared/ui/src/main/main.component.scss
diff --git a/libs/shared/ui/src/main/main.component.spec.ts b/libs/shared/ui/src/main/main.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MainComponent } from './main.component';
+
+describe('MainComponent', () => {
+  let component: MainComponent;
+  let fixture: ComponentFixture<MainComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MainComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MainComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/libs/shared/ui/src/main/main.component.ts b/libs/shared/ui/src/main/main.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'usersrole-nx-main',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './main.component.html',
+  styleUrls: ['./main.component.scss'],
+})
+export class MainComponent {}
diff --git a/libs/shared/ui/tsconfig.json b/libs/shared/ui/tsconfig.json
@@ -17,6 +17,9 @@
     },
     {
       "path": "./tsconfig.spec.json"
+    },
+    {
+      "path": "./cypress/tsconfig.json"
     }
   ],
   "extends": "../../../tsconfig.base.json",

diff --git a/libs/shared/ui/tsconfig.lib.json b/libs/shared/ui/tsconfig.lib.json
@@ -11,7 +11,13 @@
     "src/**/*.spec.ts",
     "src/test-setup.ts",
     "jest.config.ts",
-    "src/**/*.test.ts"
+    "src/**/*.test.ts",
+    "cypress/**/*",
+    "cypress.config.ts",
+    "**/*.cy.ts",
+    "**/*.cy.js",
+    "**/*.cy.tsx",
+    "**/*.cy.jsx"
   ],
   "include": ["src/**/*.ts"]
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,6 +17,9 @@ @@
         },
         {
           "path": "./tsconfig.spec.json"
+        },
+        {
+          "path": "./cypress/tsconfig.json"
         }
       ],
       "extends": "../../../tsconfig.base.json",
@@ Expand Down @@