update 07

Author: nasdan

05-testing/03-e2e/07-ci/.babelrc

@@ -1,4 +1,4 @@
-name: Ci workflow
+name: CI workflow
 
 on: pull_request
 
@@ -7,20 +7,20 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Install
         run: npm ci
       - name: Tests e2e
         run: npm run test:e2e:ci
       - name: Upload screenshots when specs fail
         if: ${{ failure()}}
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: screenshots
           path: ./cypress/screenshots
       - name: Upload videos when specs fail
         if: ${{ failure()}}
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: videos
           path: ./cypress/videos

05-testing/03-e2e/07-ci/.github/workflows/ci.yml

@@ -12,9 +12,9 @@ We will start from `06-edit-hotel`.
 npm install
 ```
 
-- Add script commands to run in ci process:
+Add script commands to run in ci process:
 
-### ./package.json
+_./package.json_
 
 ```diff
 ...
@@ -30,15 +30,15 @@ npm install
 >
 > We can change browser to another one, with headless version, see [commands](https://docs.cypress.io/guides/guides/command-line.html#Commands)
 
-- And run it:
+And run it:
 
 ```bash
 npm run test:e2e:ci
 ```
 
 Update config:
 
-### ./cypress.config.ts
+_./cypress.config.ts_
 
 ```diff
 import { defineConfig } from 'cypress';
@@ -54,9 +54,9 @@ export default defineConfig({
 
 ```
 
-- Notice that `cypress` has added `screenshots` and `videos` with failing specs, we should ignore these folder for git:
+Notice that `cypress` has added `screenshots` and `videos` with failing specs, we should ignore these folder for git:
 
-### ./.gitignore
+_./.gitignore_
 
 ```diff
 ...
@@ -65,50 +65,26 @@ export default defineConfig({
 
 ```
 
-- Let's make a test fail:
+Let's make a test fail:
 
-### ./cypress/e2e/hotel-edit.spec.ts
+_./cypress/e2e/hotel-edit.spec.ts_
 
 ```diff
 ...
   it('should update hotel name when it edits an hotel and click on save button', () => {
-    // Arrange
-
-    // Act
-    cy.loadAndVisit(
-      '/hotel-collection',
-      [
-        { path: '/api/hotels', alias: 'loadHotels' },
-        { path: '/api/hotels/2' },
-        { path: '/api/cities' },
-      ],
-      () => {
-        cy.findAllByRole('button', { name: 'Edit hotel' }).then((buttons) => {
-          buttons[1].click();
-        });
-      }
-    );
-
-    cy.findByLabelText('Name').should('not.have.value', '');
-
-    cy.findByLabelText('Name').clear().type('Updated hotel two');
-
-    cy.findByRole('button', { name: 'Save' }).click();
-
-    // Assert
-    cy.wait('@loadHotels');
+    ...
 -   cy.findByText('Updated hotel two');
 +   cy.findByText('Updated hotel three');
   });
 ```
 
-- And run it:
+And run it:
 
 ```bash
 npm run test:e2e:ci
 ```
 
-- We will configure [Github actions](https://github.com/features/actions) to run all tests in this app. Since Github has [free private/public repositories](https://github.com/pricing) we only need to create a github repository:
+We will configure [Github actions](https://github.com/features/actions) to run all tests in this app. Since Github has [free private/public repositories](https://github.com/pricing) we only need to create a github repository:
 
 ```bash
 git init
@@ -118,9 +94,9 @@ git commit -m "add project with tests"
 git push -u origin main
 ```
 
-- Create new branch on repository `feature/add-ci-file` and add ci config:
+Create new branch on repository `feature/add-ci-file` and add ci config:
 
-### ./.github/workflows/ci.yml
+_./.github/workflows/ci.yml_
 
 ```yml
 name: CI workflow
@@ -139,19 +115,19 @@ jobs:
         run: npm run test:e2e:ci
 ```
 
-- Commit, push:
+Commit, push:
 
 ```bash
 git add .
 git commit -m "add ci file"
 git push -u origin feature/add-ci-file
 ```
 
-- Create a pull request.
+Create a `pull request`.
 
-- We can upload `screenshots` and `videos` as `artifacts` if specs `fail`:
+We can upload `screenshots` and `videos` as `artifacts` if specs `fail`:
 
-### ./.github/workflows/ci.yml
+_./.github/workflows/ci.yml_
 
 ```diff
 name: Ci workflow
@@ -182,17 +158,17 @@ jobs:
 +         path: ./cypress/videos
 ```
 
-- Commit again:
+Commit again:
 
 ```bash
 git add .
 git commit -m "upload artifacts"
 git push
 ```
 
-- Restore specs:
+Restore specs:
 
-### ./cypress/e2e/hotel-edit.spec.ts
+_./cypress/e2e/hotel-edit.spec.ts_
 
 ```diff
   it('should update hotel name when it edits an hotel and click on save button', () => {

05-testing/03-e2e/07-ci/README.md

@@ -4,5 +4,7 @@ export default defineConfig({
   e2e: {
     baseUrl: 'http://localhost:8080/#',
     specPattern: 'cypress/e2e/**/*.spec.{js,jsx,ts,tsx}',
+    video: true,
+    screenshotOnRunFailure: true,
   },
 });

05-testing/03-e2e/07-ci/config/webpack/base.js

@@ -1,9 +1,8 @@
 describe('Hotel collection specs', () => {
   it('should fetch hotel list and show it in screen when visit /hotel-collection url', () => {
     // Arrange
-
     // Act
-    cy.loadAndVisit('/hotel-collection', [{ path: '/api/hotels' }]);
+    cy.loadAndVisit('/api/hotels', '/hotel-collection');
 
     // Assert
     cy.findAllByRole('listitem').should('have.length', 10);
@@ -13,7 +12,7 @@ describe('Hotel collection specs', () => {
     // Arrange
 
     // Act
-    cy.loadAndVisit('/hotel-collection', [{ path: '/api/hotels' }]);
+    cy.loadAndVisit('/api/hotels', '/hotel-collection');
 
     // Assert
     cy.findAllByRole('listitem').should('have.length.greaterThan', 0);
@@ -23,9 +22,7 @@ describe('Hotel collection specs', () => {
     // Arrange
 
     // Act
-    cy.loadAndVisit('/hotel-collection', [
-      { path: '/api/hotels', fixture: 'hotels.json' },
-    ]);
+    cy.loadAndVisit('/api/hotels', '/hotel-collection', 'hotels');
 
     // Assert
     cy.findAllByRole('listitem').should('have.length', 2);