Merge pull request #28 from 9elements/feature/angular-15

Update to Angular 15

README.md

@@ -9,7 +9,7 @@ The application is fully tested with unit and end-to-end tests.
 
 Unit tests are written in plain Angular using `TestBed` and additionally using [Spectator](https://github.com/ngneat/spectator).
 
-End-to-end tests are written with [Cypress](https://www.cypress.io/) and also with [Protractor](http://www.protractortest.org/).
+End-to-end tests are written with [Cypress](https://www.cypress.io/).
 
 **[App structure plan (React version)](https://github.com/molily/learning-react/tree/main/5-flickr-search)**
 
@@ -35,18 +35,16 @@ Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app w
 
 Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
 
-## Running unit & integration tests
+## Running the unit & integration tests
 
 Run `ng test` to execute the unit & integration tests with Karma and Jasmine.
 
-## Running end-to-end tests
-
-### Cypress
+## Running the end-to-end tests with Cypress
 
 Run `ng run flickr-search:cypress-run` to execute the Cypress end-to-end tests. (This starts the development server automatically.)
 
 Run `ng run flickr-search:cypress-open` to start the interactive Cypress test runner.
 
-### Protractor
+## Deployment
 
-Run `ng e2e` to execute the Protractor end-to-end tests. (This starts the development server automatically.)
+Run `npm run deploy` to the deploy the code to [https://9elements.github.io/angular-flickr-search/].

angular.json

@@ -20,15 +20,10 @@
             "outputPath": "dist/flickr-search",
             "index": "src/index.html",
             "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.css"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/styles.css"],
             "scripts": []
           },
           "configurations": {
@@ -85,39 +80,18 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": ["zone.js", "zone.js/testing"],
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
-            "styles": [
-              "src/styles.css"
-            ],
+            "styles": ["src/styles.css"],
             "scripts": [],
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ]
+            "assets": ["src/favicon.ico", "src/assets"]
           }
         },
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": [
-              "src/**/*.ts",
-              "src/**/*.html"
-            ]
-          }
-        },
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "flickr-search:serve"
-          },
-          "configurations": {
-            "production": {
-              "devServerTarget": "flickr-search:serve:production"
-            }
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
           }
         },
         "deploy": {
@@ -141,11 +115,33 @@
             "watch": true,
             "headless": false
           }
+        },
+        "e2e": {
+          "builder": "@cypress/schematic:cypress",
+          "options": {
+            "devServerTarget": "flickr-search:serve",
+            "watch": true,
+            "headless": false
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "flickr-search:serve:production"
+            }
+          }
         }
       }
     }
   },
   "cli": {
-    "analytics": false
+    "analytics": false,
+    "schematicCollections": ["@cypress/schematic", "@schematics/angular"]
+  },
+  "schematics": {
+    "@angular-eslint/schematics:application": {
+      "setParserOptionsProject": true
+    },
+    "@angular-eslint/schematics:library": {
+      "setParserOptionsProject": true
+    }
   }
 }

cypress.config.ts

@@ -1,8 +1,9 @@
-import { defineConfig } from 'cypress'
+import { defineConfig } from 'cypress';
 
 export default defineConfig({
   e2e: {
     baseUrl: 'http://localhost:4200',
-    video: false
+    video: false,
+    experimentalRunAllSpecs: true,
   },
-})
+});

cypress/e2e/flickr-search-stub-network.cy.ts

@@ -16,13 +16,11 @@ describe('Flickr search (with network stubbing)', () => {
   };
 
   beforeEach(() => {
-    cy.server();
-    cy.route({
-      url: expectedUrl,
-      response: flickrResponse,
+    cy.intercept('GET', expectedUrl, {
       headers: {
         'Access-Control-Allow-Origin': '*',
       },
+      body: flickrResponse,
     }).as('flickrSearchRequest');
 
     cy.visit('/');