Set up Jest for unit tests and Cypress for e2e tests (#401)

* Add support for Jest

* Set up cypress e2e tests

#SkipVersionBump

Author: lukasmatta

.eslintrc.js

@@ -11,10 +11,13 @@ module.exports = {
   plugins: ['@typescript-eslint', 'cypress', 'prettier'],
   rules: {
     'prettier/prettier': ['error'],
-    "@typescript-eslint/no-explicit-any": "warn",
-    "@typescript-eslint/no-unused-vars": "warn"
+    '@typescript-eslint/no-explicit-any': 'warn',
+    '@typescript-eslint/no-unused-vars': 'warn'
   },
   globals: {
     Cypress: 'readonly'
+  },
+  env: {
+    jest: true
   }
 };

.github/workflows/cps-shared-ui-checkers.yml

@@ -33,8 +33,8 @@ jobs:
       - name: Build app
         run: npm run build
 
+      - name: Run unit tests
+        run: npm run test
+
       - name: Lint app
         run: npm run lint
-
-      - name: Run Cypress component tests
-        run: npx cypress run --component

README.md

@@ -80,6 +80,11 @@ Make sure `ng build cps-ui-kit --watch` is running, so the library will be rebui
 
 Execute `npm run generate-json-api` to generate documentation for any changes in the components' API.
 
-#### Run cypress tests
+#### Run Jest unit tests
 
 `npm run test`
+
+
+#### Run Cypress e2e tests
+
+`npm run cypress:run` (headless run) or you can open Cypress tests using `npm run cypress:open`

angular.json

@@ -8,9 +8,6 @@
       "schematics": {
         "@schematics/angular:component": {
           "style": "scss"
-        },
-        "@cypress/schematic:component": {
-          "style": "scss"
         }
       },
       "root": "projects/cps-ui-kit",
@@ -33,45 +30,7 @@
           "defaultConfiguration": "production"
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "tsConfig": "projects/cps-ui-kit/tsconfig.spec.json",
-            "polyfills": ["zone.js", "zone.js/testing"]
-          }
-        },
-        "cypress-run": {
-          "builder": "@cypress/schematic:cypress",
-          "options": {
-            "devServerTarget": "cps-ui-kit:serve",
-            "configFile": "cypress.config.ts"
-          },
-          "configurations": {
-            "production": {
-              "devServerTarget": "cps-ui-kit:serve:production"
-            }
-          }
-        },
-        "cypress-open": {
-          "builder": "@cypress/schematic:cypress",
-          "options": {
-            "watch": true,
-            "headless": false,
-            "configFile": "cypress.config.ts"
-          }
-        },
-        "ct": {
-          "builder": "@cypress/schematic:cypress",
-          "options": {
-            "devServerTarget": "cps-ui-kit:serve",
-            "watch": true,
-            "headless": false,
-            "testingType": "component"
-          },
-          "configurations": {
-            "development": {
-              "devServerTarget": "cps-ui-kit:serve:development"
-            }
-          }
+          "builder": "@angular-builders/jest:run"
         }
       }
     },
@@ -80,9 +39,6 @@
       "schematics": {
         "@schematics/angular:component": {
           "style": "scss"
-        },
-        "@cypress/schematic:component": {
-          "style": "scss"
         }
       },
       "root": "projects/composition",
@@ -96,9 +52,7 @@
               "base": "dist/composition"
             },
             "index": "projects/composition/src/index.html",
-            "polyfills": [
-              "zone.js"
-            ],
+            "polyfills": ["zone.js"],
             "tsConfig": "projects/composition/tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": [
@@ -109,9 +63,7 @@
                 "output": "assets"
               }
             ],
-            "styles": [
-              "projects/composition/src/styles.scss"
-            ],
+            "styles": ["projects/composition/src/styles.scss"],
             "scripts": [],
             "browser": "projects/composition/src/main.ts"
           },
@@ -164,21 +116,13 @@
           }
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "polyfills": ["zone.js", "zone.js/testing"],
-            "tsConfig": "projects/composition/tsconfig.spec.json",
-            "inlineStyleLanguage": "scss",
-            "assets": ["projects/composition/src/assets"],
-            "styles": ["projects/composition/src/styles.scss"],
-            "scripts": []
-          }
+          "builder": "@angular-builders/jest:run"
         }
       }
     }
   },
   "cli": {
-    "schematicCollections": ["@cypress/schematic", "@schematics/angular"],
+    "schematicCollections": ["@schematics/angular"],
     "analytics": false
   }
 }

cypress.config.ts

@@ -1,21 +1,7 @@
 import { defineConfig } from 'cypress';
 
 export default defineConfig({
-  component: {
-    devServer: {
-      framework: 'angular',
-      bundler: 'webpack',
-      options: {
-        projectConfig: {
-          root: './',
-          sourceRoot: 'src',
-          buildOptions: {
-            outputPath: 'dist/composition'
-          }
-        }
-      }
-    },
-    specPattern: 'projects/cps-ui-kit/**/*.cy.ts',
-    video: false
+  e2e: {
+    baseUrl: 'http://localhost:4200'
   }
 });

cypress/e2e/cps-autocomplete.cy.ts

@@ -0,0 +1,37 @@
+describe('cps-autocomplete page', () => {
+  describe('required single autocomplete with a tooltip', () => {
+    beforeEach(() => {
+      cy.visit('/autocomplete');
+    });
+
+    it('should select items properly', () => {
+      cy.get("[data-cy='required-autocomplete']").click();
+      cy.contains('Rome').click();
+      cy.get("[data-cy='required-autocomplete'] .single-item-selection").should(
+        'have.text',
+        'Rome'
+      );
+      cy.get("[data-cy='required-autocomplete']").click();
+      cy.contains('Prague').click();
+      cy.get("[data-cy='required-autocomplete'] .single-item-selection").should(
+        'have.text',
+        'Prague'
+      );
+    });
+
+    it('should clear items', () => {
+      cy.get("[data-cy='required-autocomplete'] .single-item-selection").should(
+        'have.text',
+        'Prague'
+      );
+      cy.get(
+        "[data-cy='required-autocomplete'] .cps-autocomplete-box-clear-icon"
+      ).click();
+      cy.get('body').click(0, 0);
+      cy.contains('Field is required');
+      cy.get("[data-cy='required-autocomplete'] .single-item-selection").should(
+        'not.exist'
+      );
+    });
+  });
+});

cypress/support/component-index.html

@@ -1,5 +1,5 @@
 // ***********************************************************
-// This example support/component.ts is processed and
+// This example support/e2e.ts is processed and
 // loaded automatically before your test files.
 //
 // This is a great place to put global configuration and
@@ -16,20 +16,5 @@
 // Import commands.js using ES2015 syntax:
 import './commands';
 
-import { mount } from 'cypress/angular';
-
-// Augment the Cypress.Chainable interface to include type definitions for
-// your custom command.
-declare global {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace Cypress {
-    interface Chainable {
-      mount: typeof mount;
-    }
-  }
-}
-
-Cypress.Commands.add('mount', mount);
-
-// Example use:
-// cy.mount(MyComponent)
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

cypress/support/component.ts renamed to cypress/support/e2e.ts

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress", "node"],
+    "resolveJsonModule": true
+  },
+  "include": ["**/*.ts"]
+}

cypress/tsconfig.json

@@ -0,0 +1,7 @@
+import 'jest-preset-angular/setup-jest';
+
+window.ResizeObserver = class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};