update 05

Author: nasdan

05-testing/03-e2e/05-custom-commands/.babelrc

@@ -12,9 +12,9 @@ We will start from `04-wait-requests`.
 npm install
 ```
 
-- If we look into our code, we will notice that there some steps that we're going to want to repeat over the tests:
+If we look into our code, we will notice that there some steps that we're going to want to repeat over the tests:
 
-### ./cypress/support/commands.ts
+_./cypress/support/commands.ts_
 
 ```javascript
 Cypress.Commands.add('loadAndVisit', () => {
@@ -27,37 +27,16 @@ Cypress.Commands.add('loadAndVisit', () => {
 ```
 > Note: we will fix typings errors adding a d.ts file
 
-### ./cypress/support/e2e.ts
+_./cypress/support/e2e.ts_
 
 ```diff
 import '@testing-library/cypress/add-commands';
 + import './commands';
 ```
 
-- Use it:
+We will need add `d.ts` file to support new method:
 
-### ./cypress/e2e/hotel-collection.spec.ts
-
-```diff
-...
-  it('should fetch hotel list and show it in screen when visit /hotel-collection url', () => {
-    // Arrange
--   cy.intercept('GET', '/api/hotels').as('fetchHotels');
-
-    // Act
--   cy.visit('/hotel-collection');
-+   cy.loadAndVisit();
-
-    // Assert
--   cy.wait('@fetchHotels');
-    cy.findAllByRole('listitem').should('have.length', 10);
-  });
-...
-```
-
-- We will need add `d.ts` file to support new method:
-
-### ./cypress/support/index.d.ts
+_./cypress/support/index.d.ts_
 
 ```typescript
 declare namespace Cypress {
@@ -67,18 +46,13 @@ declare namespace Cypress {
 }
 ```
 
-### ./cypress/tsconfig.json
+_./cypress/tsconfig.json_
 
 ```diff
 {
   "compilerOptions": {
-    "strict": true,
-    "baseUrl": "../node_modules",
     "target": "es5",
     "lib": ["es5", "dom"],
-    "esModuleInterop": true,
-    "noImplicitAny": false,
-    "allowJs": true,
 -   "types": ["cypress", "@testing-library/cypress"]
 +   "types": ["cypress", "@testing-library/cypress", "./support"]
   },
@@ -90,9 +64,30 @@ declare namespace Cypress {
 
 > More info [here](https://docs.cypress.io/guides/tooling/typescript-support.html#Types-for-custom-assertions)
 
-- Update specs:
+Use it:
+
+_./cypress/e2e/hotel-collection.spec.ts_
+
+```diff
+...
+  it('should fetch hotel list and show it in screen when visit /hotel-collection url', () => {
+    // Arrange
+-   cy.intercept('GET', '/api/hotels').as('fetchHotels');
+
+    // Act
+-   cy.visit('/hotel-collection');
++   cy.loadAndVisit();
+
+    // Assert
+-   cy.wait('@fetchHotels');
+    cy.findAllByRole('listitem').should('have.length', 10);
+  });
+...
+```
+
+Update specs:
 
-### ./cypress/e2e/hotel-collection.spec.ts
+_./cypress/e2e/hotel-collection.spec.ts_
 
 ```diff
 ...
@@ -110,9 +105,9 @@ it('should fetch hotel list greater than 0 when visit /hotel-collection url', ()
   });
 ```
 
-- Even, we could pass parameters if we want to be more generic:
+Even, we could pass parameters if we want to be more generic:
 
-### ./cypress/support/commands.ts
+_./cypress/support/commands.ts_
 
 ```diff
 - Cypress.Commands.add('loadAndVisit', () => {
@@ -132,9 +127,9 @@ it('should fetch hotel list greater than 0 when visit /hotel-collection url', ()
 
 ```
 
-- Update typings:
+Update typings:
 
-### ./cypress/support/index.d.ts
+_./cypress/support/index.d.ts_
 
 ```diff
 declare namespace Cypress {
@@ -150,9 +145,9 @@ declare namespace Cypress {
 
 ```
 
-- Update it:
+Update it:
 
-### ./cypress/e2e/hotel-collection.spec.ts
+_./cypress/e2e/hotel-collection.spec.ts_
 
 ```diff
 ...
@@ -180,13 +175,11 @@ declare namespace Cypress {
 
   it('should fetch two hotels when visit /hotel-collection url', () => {
     // Arrange
--   cy.intercept('GET', '/api/hotels', {
--     fixture: 'hotels.json',
--   }).as('fetchHotels');
+-   cy.intercept('GET', '/api/hotels', { fixture: 'hotels' }).as('fetchHotels');
 
     // Act
 -   cy.visit('/hotel-collection');
-+   cy.loadAndVisit('/api/hotels', '/hotel-collection', 'hotels.json');
++   cy.loadAndVisit('/api/hotels', '/hotel-collection', 'hotels');
 
     // Assert
 -   cy.wait('@fetchHotels');

05-testing/03-e2e/05-custom-commands/README.md

@@ -1,7 +1,6 @@
 describe('Hotel collection specs', () => {
   it('should fetch hotel list and show it in screen when visit /hotel-collection url', () => {
     // Arrange
-
     // Act
     cy.loadAndVisit('/api/hotels', '/hotel-collection');
 
@@ -23,7 +22,7 @@ describe('Hotel collection specs', () => {
     // Arrange
 
     // Act
-    cy.loadAndVisit('/api/hotels', '/hotel-collection', 'hotels.json');
+    cy.loadAndVisit('/api/hotels', '/hotel-collection', 'hotels');
 
     // Assert
     cy.findAllByRole('listitem').should('have.length', 2);

05-testing/03-e2e/05-custom-commands/config/webpack/base.js

@@ -8,10 +8,10 @@ describe('Login specs', () => {
 
     // Act
     cy.visit('/');
-    cy.findByLabelText('Name').click();
+    cy.findByRole('textbox').click();
 
     // Assert
-    cy.findByLabelText('Name').should('have.focus');
+    cy.findByRole('textbox').should('have.focus');
   });
 
   it('should show an alert with a message when type invalid credentials', () => {
@@ -22,7 +22,7 @@ describe('Login specs', () => {
 
     // Act
     cy.visit('/');
-    cy.findByLabelText('Name').as('userInput');
+    cy.findByRole('textbox').as('userInput');
     cy.findByLabelText('Password').as('passwordInput');
 
     cy.get('@userInput').type(user);
@@ -53,6 +53,6 @@ describe('Login specs', () => {
     cy.findByRole('button', { name: 'Login' }).click();
 
     // Assert
-    cy.url().should('eq', 'http://localhost:8080/#/hotel-collection');
+    cy.url().should('equal', 'http://localhost:8080/#/hotel-collection');
   });
 });

05-testing/03-e2e/05-custom-commands/config/webpack/dev.js

@@ -5,7 +5,6 @@ Cypress.Commands.add(
       ? cy.intercept('GET', apiPath, { fixture }).as('load')
       : cy.intercept('GET', apiPath).as('load');
     cy.visit(routePath);
-
     cy.wait('@load');
   }
 );