test-automation-in-practice · slu-it · Apr 30, 2024 · Apr 9, 2024
diff --git a/.env b/.env
@@ -0,0 +1,4 @@
+# Nx 18 enables using plugins to infer targets by default
+# This is disabled for existing workspaces to maintain compatibility
+# For more info, see: https://nx.dev/concepts/inferred-tasks
+NX_ADD_PLUGINS=false
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1 @@
+node_modules
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,12 +1,12 @@
 {
   "root": true,
   "ignorePatterns": ["**/*"],
-  "plugins": ["@nrwl/nx"],
+  "plugins": ["@nx"],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
       "rules": {
-        "@nrwl/nx/enforce-module-boundaries": [
+        "@nx/enforce-module-boundaries": [
           "error",
           {
             "enforceBuildableLibDependency": true,
@@ -23,12 +23,12 @@
     },
     {
       "files": ["*.ts", "*.tsx"],
-      "extends": ["plugin:@nrwl/nx/typescript"],
+      "extends": ["plugin:@nx/typescript"],
       "rules": {}
     },
     {
       "files": ["*.js", "*.jsx"],
-      "extends": ["plugin:@nrwl/nx/javascript"],
+      "extends": ["plugin:@nx/javascript"],
       "rules": {}
     }
   ]

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -28,7 +28,6 @@ jobs:
         with:
           main-branch-name: 'master'
       - run: npm ci
-      - run: npx nx workspace-lint
       - run: npx nx format:check --base=origin/master
       - run: npx nx affected --target=lint --base=origin/master
       - run: npx nx affected --target=test --base=origin/master --ci --code-coverage

diff --git a/.gitignore b/.gitignore
@@ -40,3 +40,4 @@ testem.log
 Thumbs.db
 
 .angular
+.nx
diff --git a/.husky/pre-push b/.husky/pre-push
@@ -0,0 +1,7 @@
+npx nx format:check --base=origin/master
+npx nx affected --target=lint --base=origin/master
+npx nx affected --target=test --base=origin/master --ci --code-coverage
+npm run server &
+npx nx affected --target=e2e --base=origin/master --max-parallel 1
+npx nx affected --target=build --base=origin/master
+kill-port 4300
diff --git a/.prettierignore b/.prettierignore
@@ -3,3 +3,7 @@
 /dist
 /coverage
 /.angular
+
+/.nx/cache
+
+/apps/basics
diff --git a/angular.json b/angular.json
diff --git a/apps/basics-e2e/cypress.config.ts b/apps/basics-e2e/cypress.config.ts
@@ -1,5 +1,5 @@
 import { defineConfig } from 'cypress';
-import { nxE2EPreset } from '@nrwl/cypress/plugins/cypress-preset';
+import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
 
 const cypressJsonConfig = {
   fileServerFolder: '.',

diff --git a/apps/basics-e2e/project.json b/apps/basics-e2e/project.json
@@ -1,4 +1,6 @@
 {
+  "name": "basics-e2e",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "apps/basics-e2e/src",
   "projectType": "application",
   "targets": {
@@ -10,19 +12,16 @@
       }
     },
     "e2e": {
-      "executor": "@nrwl/cypress:cypress",
+      "executor": "@nx/cypress:cypress",
       "options": {
         "cypressConfig": "apps/basics-e2e/cypress.config.ts",
         "devServerTarget": "basics-e2e:prepare",
         "testingType": "e2e"
       }
     },
     "lint": {
-      "executor": "@nrwl/linter:eslint",
-      "outputs": ["{options.outputFile}"],
-      "options": {
-        "lintFilePatterns": ["apps/basics-e2e/**/*.{js,ts}"]
-      }
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"]
     }
   },
   "tags": [],

diff --git a/apps/basics-e2e/src/e2e/weather-page.cy.ts b/apps/basics-e2e/src/e2e/weather-page.cy.ts
@@ -3,7 +3,7 @@ import { WeatherApp } from '../support/page-objects/weather.po';
 import { Setup } from '../support/helpers/setup';
 
 describe('Weather page', () => {
-  before(() => {
+  beforeEach(() => {
     App.navigateTo('Weather');
     Setup.database.resetMainLocation();
     Setup.database.resetLocations();

diff --git a/apps/basics-e2e/src/plugins/index.ts b/apps/basics-e2e/src/plugins/index.ts
@@ -1,7 +1,7 @@
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const webpackPreprocessor = require('@cypress/webpack-preprocessor');
 // eslint-disable-next-line @typescript-eslint/no-var-requires
-const altWebpackConfig = require('@nrwl/cypress/plugins/preprocessor');
+const altWebpackConfig = require('@nx/cypress/plugins/preprocessor');
 const publicPath = 'http://localhost:4400/';
 let outputOptions = {};
 

diff --git a/apps/basics/.browserslistrc b/apps/basics/.browserslistrc
diff --git a/apps/basics/.eslintrc.json b/apps/basics/.eslintrc.json
@@ -4,7 +4,7 @@
   "overrides": [
     {
       "files": ["*.ts"],
-      "extends": ["plugin:@nrwl/nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
+      "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
       "rules": {
         "@angular-eslint/directive-selector": [
           "error",
@@ -26,7 +26,7 @@
     },
     {
       "files": ["*.html"],
-      "extends": ["plugin:@nrwl/nx/angular-template"],
+      "extends": ["plugin:@nx/angular-template"],
       "rules": {}
     }
   ]

diff --git a/apps/basics/jest.config.ts b/apps/basics/jest.config.ts
@@ -5,15 +5,16 @@ export default {
   displayName: 'basics',
   preset: '../../jest.preset.js',
   setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
-  globals: {
-    'ts-jest': {
-      tsconfig: '<rootDir>/tsconfig.spec.json',
-      stringifyContentPathRegex: '\\.(html|svg)$',
-    },
-  },
+  globals: {},
   coverageDirectory: '../../coverage/apps/basics',
   transform: {
-    '^.+\\.(ts|mjs|js|html)$': 'jest-preset-angular',
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
   },
   globalSetup: 'jest-preset-angular/global-setup',
   transformIgnorePatterns: [`<rootDir>/node_modules/(?!.*\\.mjs$|${esModules.join('|')})`],

diff --git a/apps/basics/project.json b/apps/basics/project.json
@@ -1,4 +1,6 @@
 {
+  "name": "basics",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "sourceRoot": "apps/basics/src",
   "prefix": "cntws",
@@ -54,32 +56,28 @@
       "executor": "@angular-devkit/build-angular:dev-server",
       "configurations": {
         "production": {
-          "browserTarget": "basics:build:production"
+          "buildTarget": "basics:build:production"
         },
         "development": {
-          "browserTarget": "basics:build:development"
+          "buildTarget": "basics:build:development"
         }
       },
       "defaultConfiguration": "development"
     },
     "extract-i18n": {
       "executor": "@angular-devkit/build-angular:extract-i18n",
       "options": {
-        "browserTarget": "basics:build"
+        "buildTarget": "basics:build"
       }
     },
     "lint": {
-      "executor": "@nrwl/linter:eslint",
-      "options": {
-        "lintFilePatterns": ["apps/basics/src/**/*.ts", "apps/basics/src/**/*.html"]
-      }
+      "executor": "@nx/eslint:lint"
     },
     "test": {
-      "executor": "@nrwl/jest:jest",
-      "outputs": ["coverage/apps/basics"],
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/apps/basics"],
       "options": {
-        "jestConfig": "apps/basics/jest.config.ts",
-        "passWithNoTests": true
+        "jestConfig": "apps/basics/jest.config.ts"
       }
     }
   },

diff --git a/apps/basics/src/styles.scss b/apps/basics/src/styles.scss
@@ -1,14 +1,9 @@
 @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500;700&display=swap');
 @import 'apps/basics/src/styles/material/theming';
-@tailwind base;
+
 @tailwind components;
 @tailwind utilities;
 
-* {
-  padding: 0;
-  margin: 0;
-}
-
 ul {
   margin: 0 1rem;
 

diff --git a/apps/basics/src/styles/colors.scss b/apps/basics/src/styles/colors.scss
@@ -0,0 +1,31 @@
+:root {
+  --palette-accent-100: #f8c7ca;
+  --palette-accent-200: #f4a2a7;
+  --palette-accent-300: #f07d83;
+  --palette-accent-400: #ec6169;
+  --palette-accent-500: #e9454e;
+  --palette-accent-600: #e63e47;
+  --palette-accent-700: #e3363d;
+  --palette-accent-800: #df2e35;
+  --palette-accent-900: #d91f25;
+  --palette-accent-A100: #ffffff;
+  --palette-accent-A200: #ffddde;
+  --palette-accent-A400: #ffaaac;
+  --palette-accent-A700: #ff9093;
+  --palette-primary-50: #ebe9f3;
+  --palette-primary-100: #cec8e0;
+  --palette-primary-200: #ada4cb;
+  --palette-primary-300: #8c7fb6;
+  --palette-primary-400: #7463a7;
+  --palette-primary-500: #5b4897;
+  --palette-primary-600: #53418f;
+  --palette-primary-700: #493884;
+  --palette-primary-800: #40307a;
+  --palette-primary-900: #2f2169;
+  --palette-primary-A100: #b8a9ff;
+  --palette-primary-A200: #8e76ff;
+  --palette-primary-A400: #6443ff;
+  --palette-primary-A700: #4f2aff;
+  --palette-background-300: #424242;
+  --palette-background-500: #303030;
+}
diff --git a/apps/basics/src/styles/material/_theming.scss b/apps/basics/src/styles/material/_theming.scss
@@ -1,38 +1,35 @@
 @use '@angular/material' as mat;
 
+@import '../colors';
+
+@include mat.core();
+
 $angular-typography: mat.define-typography-config(
   $font-family: 'Roboto, "Helvetica Neue", sans-serif',
-  $display-4: mat.define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
-  $display-3: mat.define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
-  $display-2: mat.define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
-  $display-1: mat.define-typography-level(34px, 42px, 400),
-  $headline: mat.define-typography-level(24px, 38px, 400),
-  $title: mat.define-typography-level(20px, 34px, 400),
-  $subheading-2: mat.define-typography-level(20px, 34px, 400),
-  $subheading-1: mat.define-typography-level(18px, 30px, 400),
+  $headline-1: mat.define-typography-level(24px, 38px, 400),
+  $headline-2: mat.define-typography-level(20px, 34px, 400),
+  $subtitle-1: mat.define-typography-level(20px, 34px, 400),
+  $subtitle-2: mat.define-typography-level(18px, 30px, 400),
   $body-2: mat.define-typography-level(16px, 26px, 400),
   $body-1: mat.define-typography-level(16px, 26px, 400),
   $caption: mat.define-typography-level(inherit, 1.5, 400),
   $button: mat.define-typography-level(inherit, 1, 400),
-  $input: mat.define-typography-level(inherit, 1.125, 400),
 );
 
-@include mat.core($angular-typography);
-
 $ntred: (
-  100: theme('colors.accent.100'),
-  200: theme('colors.accent.200'),
-  300: theme('colors.accent.300'),
-  400: theme('colors.accent.400'),
-  500: theme('colors.accent.500'),
-  600: theme('colors.accent.600'),
-  700: theme('colors.accent.700'),
-  800: theme('colors.accent.800'),
-  900: theme('colors.accent.900'),
-  A100: theme('colors.accent.A100'),
-  A200: theme('colors.accent.A200'),
-  A400: theme('colors.accent.A400'),
-  A700: theme('colors.accent.A700'),
+  100: var(--palette-accent-100),
+  200: var(--palette-accent-200),
+  300: var(--palette-accent-300),
+  400: var(--palette-accent-400),
+  500: var(--palette-accent-500),
+  600: var(--palette-accent-600),
+  700: var(--palette-accent-700),
+  800: var(--palette-accent-800),
+  900: var(--palette-accent-900),
+  A100: var(--palette-accent-a100),
+  A200: var(--palette-accent-a200),
+  A400: var(--palette-accent-a400),
+  A700: var(--palette-accent-a700),
   contrast: (
     50: #000000,
     100: #000000,
@@ -52,19 +49,20 @@ $ntred: (
 );
 
 $ntviolette: (
-  100: theme('colors.primary.100'),
-  200: theme('colors.primary.200'),
-  300: theme('colors.primary.300'),
-  400: theme('colors.primary.400'),
-  500: theme('colors.primary.500'),
-  600: theme('colors.primary.600'),
-  700: theme('colors.primary.700'),
-  800: theme('colors.primary.800'),
-  900: theme('colors.primary.900'),
-  A100: theme('colors.primary.A100'),
-  A200: theme('colors.primary.A200'),
-  A400: theme('colors.primary.A400'),
-  A700: theme('colors.primary.A700'),
+  50: var(--palette-primary-50),
+  100: var(--palette-primary-100),
+  200: var(--palette-primary-200),
+  300: var(--palette-primary-300),
+  400: var(--palette-primary-400),
+  500: var(--palette-primary-500),
+  600: var(--palette-primary-600),
+  700: var(--palette-primary-700),
+  800: var(--palette-primary-800),
+  900: var(--palette-primary-900),
+  A100: var(--palette-primary-a100),
+  A200: var(--palette-primary-a200),
+  A400: var(--palette-primary-a400),
+  A700: var(--palette-primary-a700),
   contrast: (
     50: #000000,
     100: #000000,

diff --git a/apps/basics/tsconfig.app.json b/apps/basics/tsconfig.app.json
@@ -3,7 +3,8 @@
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
     "types": [],
-    "target": "ES2017"
+    "target": "ES2022",
+    "useDefineForClassFields": false
   },
   "files": ["src/main.ts", "src/polyfills.ts"],
   "include": ["src/**/*.d.ts"],