Merge branch 'testing-500-recipe-filter-material-harness-boilerplate'…

… into testing-501-recipe-filter-material-harness

.eslintignore

@@ -0,0 +1 @@
+node_modules

.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,
@@ -20,12 +20,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": {}
     }
   ]

apps/whiskmate-e2e/project.json

@@ -5,7 +5,7 @@
   "projectType": "application",
   "targets": {
     "e2e": {
-      "executor": "@nrwl/cypress:cypress",
+      "executor": "@nx/cypress:cypress",
       "options": {
         "cypressConfig": "apps/whiskmate-e2e/cypress.json",
         "tsConfig": "apps/whiskmate-e2e/tsconfig.e2e.json",
@@ -18,7 +18,7 @@
       }
     },
     "lint": {
-      "executor": "@nrwl/linter:eslint",
+      "executor": "@nx/linter:eslint",
       "options": {
         "lintFilePatterns": ["apps/whiskmate-e2e/**/*.{js,ts}"]
       },

apps/whiskmate-e2e/src/plugins/index.js

@@ -11,7 +11,7 @@
 // This function is called when a project is opened or re-opened (e.g. due to
 // the project's config changing)
 
-const { preprocessTypescript } = require('@nrwl/cypress/plugins/preprocessor');
+const { preprocessTypescript } = require('@nx/cypress/plugins/preprocessor');
 
 module.exports = (on, config) => {
   // `on` is used to hook into various events Cypress emits

apps/whiskmate/.eslintrc.json

@@ -5,7 +5,7 @@
     {
       "files": ["*.ts"],
       "extends": [
-        "plugin:@nrwl/nx/angular",
+        "plugin:@nx/angular",
         "plugin:@angular-eslint/template/process-inline-templates"
       ],
       "rules": {
@@ -29,7 +29,7 @@
     },
     {
       "files": ["*.html"],
-      "extends": ["plugin:@nrwl/nx/angular-template"],
+      "extends": ["plugin:@nx/angular-template"],
       "rules": {}
     }
   ]

apps/whiskmate/cypress.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig } from 'cypress';
-import { nxComponentTestingPreset } from '@nrwl/angular/plugins/component-testing';
+import { nxComponentTestingPreset } from '@nx/angular/plugins/component-testing';
 
 export default defineConfig({
   component: nxComponentTestingPreset(__filename),

apps/whiskmate/cypress/tsconfig.cy.json → apps/whiskmate/cypress/tsconfig.json

@@ -3,7 +3,8 @@
   "compilerOptions": {
     "outDir": "../../../dist/out-tsc",
     "module": "commonjs",
-    "types": ["cypress", "node", "@testing-library/cypress"]
+    "types": ["cypress", "node", "@testing-library/cypress"],
+    "sourceMap": false
   },
   "include": [
     "./support/**/*.ts",

apps/whiskmate/jest.config.ts

@@ -3,24 +3,21 @@ export default {
   displayName: 'whiskmate',
   preset: '../../jest.preset.js',
   setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
-  globals: {
-    'ts-jest': {
-      tsconfig: '<rootDir>/tsconfig.spec.json',
-      stringifyContentPathRegex: '\\.(html|svg)$',
-    },
-  },
-  moduleNameMapper: {
-    '!!file-loader!(.*)': '$1',
-  },
+  globals: {},
   coverageDirectory: '../../coverage/apps/whiskmate',
   snapshotSerializers: [
     'jest-preset-angular/build/serializers/no-ng-attributes',
     'jest-preset-angular/build/serializers/ng-snapshot',
     'jest-preset-angular/build/serializers/html-comment',
   ],
   transform: {
-    '^.+\\.(ts|js|mjs|html)$': 'jest-preset-angular',
-    '^.+\\.jpg$': 'jest-file-loader',
+    '^.+\\.(ts|js|mjs|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
   },
   transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
 };

apps/whiskmate/project.json

@@ -72,7 +72,7 @@
       }
     },
     "lint": {
-      "executor": "@nrwl/linter:eslint",
+      "executor": "@nx/linter:eslint",
       "options": {
         "lintFilePatterns": [
           "apps/whiskmate/src/**/*.ts",
@@ -82,15 +82,15 @@
       "outputs": ["{options.outputFile}"]
     },
     "test": {
-      "executor": "@nrwl/jest:jest",
+      "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/apps/whiskmate"],
       "options": {
         "jestConfig": "apps/whiskmate/jest.config.ts",
         "passWithNoTests": true
       }
     },
     "component-test": {
-      "executor": "@nrwl/cypress:cypress",
+      "executor": "@nx/cypress:cypress",
       "options": {
         "cypressConfig": "apps/whiskmate/cypress.config.ts",
         "testingType": "component",

apps/whiskmate/src/app/app.config.ts

@@ -0,0 +1,10 @@
+import { ApplicationConfig } from '@angular/core';
+import { enableProdMode, importProvidersFrom } from '@angular/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { HttpClientModule } from '@angular/common/http';
+export const appConfig: ApplicationConfig = {
+  providers: [
+    importProvidersFrom(BrowserAnimationsModule),
+    importProvidersFrom(HttpClientModule),
+  ],
+};

apps/whiskmate/src/main.ts

@@ -1,17 +1,14 @@
-import { enableProdMode, importProvidersFrom } from '@angular/core';
-import { environment } from './environments/environment';
+import { enableProdMode } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
+
+import { appConfig } from './app/app.config';
+import { environment } from './environments/environment';
 import { AppComponent } from './app/app.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { HttpClientModule } from '@angular/common/http';
 
 if (environment.production) {
   enableProdMode();
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    importProvidersFrom(BrowserAnimationsModule),
-    importProvidersFrom(HttpClientModule),
-  ],
-}).catch((err) => console.error(err));
+bootstrapApplication(AppComponent, appConfig).catch((err) =>
+  console.error(err)
+);

apps/whiskmate/tsconfig.json

@@ -13,7 +13,7 @@
       "path": "./tsconfig.editor.json"
     },
     {
-      "path": "./cypress/tsconfig.cy.json"
+      "path": "./cypress/tsconfig.json"
     }
   ],
   "compilerOptions": {

decorate-angular-cli.js

@@ -27,9 +27,11 @@ const cp = require('child_process');
 const isWindows = os.platform() === 'win32';
 let output;
 try {
-  output = require('@nrwl/workspace').output;
+  output = require('@nx/workspace').output;
 } catch (e) {
-  console.warn('Angular CLI could not be decorated to enable computation caching. Please ensure @nrwl/workspace is installed.');
+  console.warn(
+    'Angular CLI could not be decorated to enable computation caching. Please ensure @nx/workspace is installed.'
+  );
   process.exit(0);
 }
 
@@ -46,24 +48,32 @@ function symlinkNgCLItoNxCLI() {
        * This is the most reliable way to create symlink-like behavior on Windows.
        * Such that it works in all shells and works with npx.
        */
-      ['', '.cmd', '.ps1'].forEach(ext => {
-        if (fs.existsSync(nxPath + ext)) fs.writeFileSync(ngPath + ext, fs.readFileSync(nxPath + ext));
+      ['', '.cmd', '.ps1'].forEach((ext) => {
+        if (fs.existsSync(nxPath + ext))
+          fs.writeFileSync(ngPath + ext, fs.readFileSync(nxPath + ext));
       });
     } else {
       // If unix-based, symlink
       cp.execSync(`ln -sf ./nx ${ngPath}`);
     }
-  }
-  catch(e) {
-    output.error({ title: 'Unable to create a symlink from the Angular CLI to the Nx CLI:' + e.message });
+  } catch (e) {
+    output.error({
+      title:
+        'Unable to create a symlink from the Angular CLI to the Nx CLI:' +
+        e.message,
+    });
     throw e;
   }
 }
 
 try {
   symlinkNgCLItoNxCLI();
   require('nx/src/adapter/decorate-cli').decorateCli();
-  output.log({ title: 'Angular CLI has been decorated to enable computation caching.' });
-} catch(e) {
-  output.error({ title: 'Decoration of the Angular CLI did not complete successfully' });
+  output.log({
+    title: 'Angular CLI has been decorated to enable computation caching.',
+  });
+} catch (e) {
+  output.error({
+    title: 'Decoration of the Angular CLI did not complete successfully',
+  });
 }

docs/601-recipe-preview-cypress-component-testing.md

@@ -15,8 +15,9 @@ Let's test that `RecipeSearchComponent` is showing the recipe name properly.
 # 📝 Steps
 
 0. [✅ Already done] Set up Cypress Component Testing
+
 ```sh
-nx g @nrwl/angular:cypress-component-configuration whiskmate
+nx g @nx/angular:cypress-component-configuration whiskmate
 ```
 
 1. Run Cypress in component testing mode:
@@ -28,6 +29,7 @@ yarn ct --watch
 2. Open [`recipe-preview.component.cy.ts`](../apps/whiskmate/src/app/recipe/recipe-preview.component.cy.ts).
 
 3. `RecipePreviewComponent` needs a `recipe` input. You can create a recipe using the `recipeMother` object mother and passing along to the component using the `componentProperties` option. e.g.:
+
 ```ts
 cy.mount(GreetingsComponent, {
   componentProperties: {
@@ -37,7 +39,7 @@ cy.mount(GreetingsComponent, {
 ```
 
 4. Check that the recipe name is shown.
- 
+
 There are different ways to achieve this. We can use the `cy.get()` command to find the right element and check its text but the selector would be coupled to the implementation details.
 
 Instead, we can use the `cy.contains()` command which is more resilient to changes in the DOM but it isn't as precise as `cy.get()`.

docs/604-cypress-component-testing-with-harnesses.md

@@ -17,7 +17,7 @@ Let's clean up our `RecipeSearchComponent` tests from DOM logic and use the `Rec
 0. [✅ Already done] Set up Cypress Harness
 
 ```sh
-nx g @nrwl/angular:cypress-component-configuration whiskmate
+nx g @nx/angular:cypress-component-configuration whiskmate
 
 # Setup @jscutlery/cypress-harness
 yarn add -D  @jscutlery/cypress-harness cypress-pipe

jest.config.ts

@@ -1,3 +1,3 @@
-const { getJestProjects } = require('@nrwl/jest');
+const { getJestProjects } = require('@nx/jest');
 
 export default { projects: getJestProjects() };

jest.preset.js

@@ -1,3 +1,15 @@
-const nxPreset = require('@nrwl/jest/preset').default;
+const nxPreset = require('@nx/jest/preset').default;
 
-module.exports = { ...nxPreset };
+module.exports = {
+  ...nxPreset,
+  /* TODO: Update to latest Jest snapshotFormat
+   * By default Nx has kept the older style of Jest Snapshot formats
+   * to prevent breaking of any existing tests with snapshots.
+   * It's recommend you update to the latest format.
+   * You can do this by removing snapshotFormat property
+   * and running tests with --update-snapshot flag.
+   * Example: "nx affected --targets=test --update-snapshot"
+   * More info: https://jestjs.io/docs/upgrading-to-jest29#snapshot-format
+   */
+  snapshotFormat: { escapeString: true, printBasicPrototype: true },
+};

libs/ottolenghi-scraper/.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": [["@nrwl/web/babel", { "useBuiltIns": "usage" }]]
+  "presets": []
 }

libs/ottolenghi-scraper/jest.config.ts

@@ -2,13 +2,14 @@
 export default {
   displayName: 'ottolenghi-scraper',
   preset: '../../jest.preset.js',
-  globals: {
-    'ts-jest': {
-      tsconfig: '<rootDir>/tsconfig.spec.json',
-    },
-  },
+  globals: {},
   transform: {
-    '^.+\\.[tj]sx?$': 'ts-jest',
+    '^.+\\.[tj]sx?$': [
+      'ts-jest',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+      },
+    ],
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   coverageDirectory: '../../coverage/libs/ottolenghi-scraper',

libs/ottolenghi-scraper/project.json

@@ -5,14 +5,14 @@
   "projectType": "library",
   "targets": {
     "lint": {
-      "executor": "@nrwl/linter:eslint",
+      "executor": "@nx/linter:eslint",
       "options": {
         "lintFilePatterns": ["libs/ottolenghi-scraper/**/*.ts"]
       },
       "outputs": ["{options.outputFile}"]
     },
     "test": {
-      "executor": "@nrwl/jest:jest",
+      "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/libs/ottolenghi-scraper"],
       "options": {
         "jestConfig": "libs/ottolenghi-scraper/jest.config.ts",