[#35] [Chore] UI Integration Test - Sign In page

cypress/e2e/SignIn/index.spec.ts

@@ -1,10 +1,85 @@
-describe('Cypress', () => {
-  it('is working', () => {
-    expect(true).to.equal(true);
+import { api } from '../../support/constants';
+
+const signInScreenTestIds = {
+  nimbleLogo: 'sign-in__nimble-logo',
+  signInForm: 'sign-in-form',
+  emailLabel: 'sign-in-form__email',
+  emailField: 'sign-in-form__input-email',
+  passwordLabel: 'sign-in-form__password',
+  passwordField: 'sign-in-form__input-password',
+  forgotButton: 'sign-in-form__forgot-button',
+  signInButton: 'sign-in-form__button',
+  errorAlert: 'sign-in__error-alert',
+  loadingDialog: 'sign-in__loading-dialog',
+};
+
+describe('SignIn screen', () => {
+  context('given a valid form submission', () => {
+    beforeEach(() => {
+      cy.interceptWithDelay('GET', '**/api/v1/surveys*', api.delay.short, {
+        statusCode: api.status.success,
+        fixture: 'Survey/List/valid.json',
+      });
+
+      cy.interceptWithDelay('GET', '**/api/v1/me', api.delay.short, {
+        statusCode: api.status.success,
+        fixture: 'User/valid.json',
+      });
+    });
+
+    it('shows the loading dialog and navigates to Dashboard screen', () => {
+      cy.interceptWithDelay('POST', '**/api/v1/oauth/token', api.delay.short, {
+        statusCode: api.status.success,
+        fixture: 'Authentication/SignIn/valid.json',
+      });
+
+      cy.visit('/');
+      cy.location().should((location) => {
+        expect(location.pathname).to.equal('/sign-in');
+      });
+
+      cy.findByTestId(signInScreenTestIds.emailField).type('[email protected]');
+      cy.findByTestId(signInScreenTestIds.passwordField).type('12345678');
+      cy.findByTestId(signInScreenTestIds.signInButton).click();
+
+      cy.findByTestId(signInScreenTestIds.loadingDialog).should('be.visible');
+
+      cy.location().should((location) => {
+        expect(location.pathname).to.equal('/');
+      });
+    });
   });
 
-  it('visits the app', () => {
-    cy.visit('/');
-    // TODO Write UI test in integration task
+  context('given the invalid form submission', () => {
+    it('shows the error dialog', () => {
+      cy.interceptWithDelay('POST', '**/api/v1/oauth/token', api.delay.short, {
+        statusCode: api.status.badRequest,
+        fixture: 'Authentication/SignIn/invalid.json',
+      });
+
+      cy.visit('/');
+      cy.findByTestId(signInScreenTestIds.emailField).type('[email protected]');
+      cy.findByTestId(signInScreenTestIds.passwordField).type('12345678');
+      cy.findByTestId(signInScreenTestIds.signInButton).click();
+
+      cy.findByTestId(signInScreenTestIds.loadingDialog).should('be.visible');
+
+      cy.findByTestId(signInScreenTestIds.errorAlert).should('be.visible');
+      cy.findByTestId(signInScreenTestIds.errorAlert).should(
+        'contain.text',
+        'Your email or password is incorrect. Please try again.'
+      );
+    });
+  });
+
+  context('given the failed validation form', () => {
+    it('shows the error popup', () => {
+      cy.visit('/');
+      cy.findByTestId(signInScreenTestIds.emailField).type('invalid email');
+      cy.findByTestId(signInScreenTestIds.passwordField).type('12345678');
+      cy.findByTestId(signInScreenTestIds.signInButton).click();
+
+      cy.get('input:invalid').should('have.length', 1);
+    });
   });
 });

cypress/fixtures/Authentication/SignIn/invalid.json

@@ -0,0 +1,8 @@
+{
+  "errors": [
+    {
+      "detail": "Your email or password is incorrect. Please try again.",
+      "code": "invalid_email_or_password"
+    }
+  ]
+}

cypress/fixtures/Authentication/SignIn/valid.json

@@ -0,0 +1,13 @@
+{
+  "data": {
+    "id": "10",
+    "type": "token",
+    "attributes": {
+      "access_token": "lbxD2K2BjbYtNzz8xjvh2FvSKx838KBCf79q773kq2c",
+      "token_type": "Bearer",
+      "expires_in": 7200,
+      "refresh_token": "3zJz2oW0njxlj_I3ghyUBF7ZfdQKYXd2n0ODlMkAjHc",
+      "created_at": 1597169495
+    }
+  }
+}

cypress/fixtures/Survey/List/valid.json

@@ -0,0 +1,150 @@
+{
+  "data": [
+    {
+      "id": "d5de6a8f8f5f1cfe51bc",
+      "type": "survey",
+      "attributes": {
+        "title": "Scarlett Bangkok",
+        "description": "We'd love ot hear from you!",
+        "thank_email_above_threshold": "<span style=\"font-family:arial,helvetica,sans-serif\"><span style=\"font-size:14px\">Dear {name},<br /><br />Thank you for visiting Scarlett Wine Bar &amp; Restaurant at Pullman Bangkok Hotel G &nbsp;and for taking the time to complete our guest feedback survey!<br /><br />Your feedback is very important to us and each survey is read individually by the management and owners shortly after it is sent. We discuss comments and suggestions at our daily meetings and use them to constantly improve our services.<br /><br />We would very much appreciate it if you could take a few more moments and review us on TripAdvisor regarding your recent visit. By <a href=\"https://www.tripadvisor.com/Restaurant_Review-g293916-d2629404-Reviews-Scarlett_Wine_Bar_Restaurant-Bangkok.html\">clicking here</a> you will be directed to our page.&nbsp;<br /><br />Thank you once again and we look forward to seeing you soon!<br /><br />The Team at Scarlett Wine Bar &amp; Restaurant&nbsp;</span></span><span style=\"font-family:arial,helvetica,sans-serif; font-size:14px\">Pullman Bangkok Hotel G</span>",
+        "thank_email_below_threshold": "<span style=\"font-size:14px\"><span style=\"font-family:arial,helvetica,sans-serif\">Dear {name},<br /><br />Thank you for visiting&nbsp;</span></span><span style=\"font-family:arial,helvetica,sans-serif; font-size:14px\">Uno Mas at Centara Central World&nbsp;</span><span style=\"font-size:14px\"><span style=\"font-family:arial,helvetica,sans-serif\">&nbsp;and for taking the time to complete our customer&nbsp;feedback survey.</span></span><br /><br /><span style=\"font-family:arial,helvetica,sans-serif; font-size:14px\">The Team at&nbsp;</span><span style=\"font-family:arial,helvetica,sans-serif\"><span style=\"font-size:14px\">Scarlett Wine Bar &amp; Restaurant&nbsp;</span></span><span style=\"font-family:arial,helvetica,sans-serif; font-size:14px\">Pullman Bangkok Hotel G</span>",
+        "is_active": true,
+        "cover_image_url": "https://dhdbhh0jsld0o.cloudfront.net/m/1ea51560991bcb7d00d0_",
+        "created_at": "2017-01-23T07:48:12.991Z",
+        "active_at": "2015-10-08T07:04:00.000Z",
+        "inactive_at": null,
+        "survey_type": "Restaurant"
+      },
+      "relationships": {
+        "questions": {
+          "data": [
+            {
+              "id": "d3afbcf2b1d60af845dc",
+              "type": "question"
+            },
+            {
+              "id": "940d229e4cd87cd1e202",
+              "type": "question"
+            },
+            {
+              "id": "ea0555f328b3b0124127",
+              "type": "question"
+            },
+            {
+              "id": "16e68f5610ef0e0fa4db",
+              "type": "question"
+            },
+            {
+              "id": "bab38ad82eaf22afcdfe",
+              "type": "question"
+            },
+            {
+              "id": "85275a0bf28a6f3b1e63",
+              "type": "question"
+            },
+            {
+              "id": "642770376f7cd0c87d3c",
+              "type": "question"
+            },
+            {
+              "id": "b093a6ad9a6a466fa787",
+              "type": "question"
+            },
+            {
+              "id": "e593b2fa2f81891a2b1e",
+              "type": "question"
+            },
+            {
+              "id": "c3a9b8ce5c2356010703",
+              "type": "question"
+            },
+            {
+              "id": "fbf5d260de1ee6195473",
+              "type": "question"
+            },
+            {
+              "id": "4372463ce56db58c0983",
+              "type": "question"
+            }
+          ]
+        }
+      }
+    },
+    {
+      "id": "ed1d4f0ff19a56073a14",
+      "type": "survey",
+      "attributes": {
+        "title": "ibis Bangkok Riverside",
+        "description": "We'd love to hear from you!",
+        "thank_email_above_threshold": "Dear {name},<br /><br />Thank you for visiting Beach Republic and for taking the time to complete our brief survey. We are thrilled that you enjoyed your time with us! If you have a moment, we would be greatly appreciate it if you could leave a short review on <a href=\"http://www.tripadvisor.com/Hotel_Review-g1188000-d624070-Reviews-Beach_Republic_The_Residences-Lamai_Beach_Maret_Ko_Samui_Surat_Thani_Province.html\">TripAdvisor</a>. It helps to spread the word and let others know about the Beach Republic Revolution!<br /><br />Thank you again and we look forward to welcoming you back soon.<br /><br />Sincerely,<br /><br />Beach Republic Team",
+        "thank_email_below_threshold": "Dear {name},<br /><br />Thank you for visiting Beach Republic and for taking the time to complete our brief survey. We are constantly striving to improve and your feedback allows us to help improve the experience for you on your next visit. Each survey is read individually by senior staff and discussed with the team in daily meetings.&nbsp;<br /><br />Thank you again and we look forward to welcoming you back soon.<br /><br />Sincerely,<br /><br />Beach Republic Team",
+        "is_active": true,
+        "cover_image_url": "https://dhdbhh0jsld0o.cloudfront.net/m/287db81c5e4242412cc0_",
+        "created_at": "2017-01-23T03:32:24.585Z",
+        "active_at": "2016-01-22T04:12:00.000Z",
+        "inactive_at": null,
+        "survey_type": "Hotel"
+      },
+      "relationships": {
+        "questions": {
+          "data": [
+            {
+              "id": "fa385b75617d98e069a3",
+              "type": "question"
+            },
+            {
+              "id": "1b03688d4af8a5c6b1e0",
+              "type": "question"
+            },
+            {
+              "id": "6e2b6ee71d3011cc0ac1",
+              "type": "question"
+            },
+            {
+              "id": "29272d3bac5725b4c2cf",
+              "type": "question"
+            },
+            {
+              "id": "7f164dd6150e6113f8ad",
+              "type": "question"
+            },
+            {
+              "id": "1d13ef20807de4f752c7",
+              "type": "question"
+            },
+            {
+              "id": "d06378d7ab2925282ecd",
+              "type": "question"
+            },
+            {
+              "id": "4c1e9486cf95ba54dac8",
+              "type": "question"
+            },
+            {
+              "id": "b8f06895134eb1da2d13",
+              "type": "question"
+            },
+            {
+              "id": "e9e2518333211ee2e5c8",
+              "type": "question"
+            },
+            {
+              "id": "81c9ae82f32f93c2967d",
+              "type": "question"
+            },
+            {
+              "id": "2ecd2926eb02e7a58024",
+              "type": "question"
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "meta": {
+    "page": 1,
+    "pages": 10,
+    "page_size": 2,
+    "records": 20
+  }
+}

cypress/fixtures/User/valid.json

@@ -0,0 +1,11 @@
+{
+  "data": {
+    "id": "1",
+    "type": "user",
+    "attributes": {
+      "email": "[email protected]",
+      "name": "Team Nimble",
+      "avatar_url": "https://secure.gravatar.com/avatar/6733d09432e89459dba795de8312ac2d"
+    }
+  }
+}

cypress/support/commands.ts

@@ -1,3 +1,4 @@
 import '@testing-library/cypress/add-commands';
 
 // Import commands from the commands folder.
+import './commands/adapters/interceptWithDelay';

cypress/support/commands/adapters/interceptWithDelay.ts

@@ -0,0 +1,10 @@
+import { Method as HttpMethod } from 'axios';
+import { RouteHandler, RouteMatcher } from 'cypress/types/net-stubbing';
+
+const interceptWithDelay = (method: HttpMethod, url: RouteMatcher, delayTime: number, response?: RouteHandler): void => {
+  cy.intercept(method, url, (req) => {
+    return Cypress.Promise.delay(delayTime, response).then(req.reply);
+  });
+};
+
+Cypress.Commands.add('interceptWithDelay', interceptWithDelay);

cypress/support/constants.ts

@@ -0,0 +1,6 @@
+export const api = {
+  status: { success: 200, badRequest: 400 },
+  delay: {
+    short: 200,
+  },
+};

cypress/support/index.d.ts

@@ -1,7 +1,10 @@
 /* eslint-disable */
+import { RouteHandler, RouteMatcher } from 'cypress/types/net-stubbing';
 
 declare global {
   namespace Cypress {
-    interface Chainable {}
+    interface Chainable {
+      interceptWithDelay(method: HttpMethod, url: RouteMatcher, delayTime: number, response?: RouteHandler): void;
+    }
   }
 }

package.json

@@ -30,9 +30,9 @@
     "stylelint:fix": "stylelint '**/*.scss' --fix",
     "codebase:lint": "npm run lint && npm run stylelint",
     "codebase:fix": "npm run lint:fix && npm run stylelint:fix",
-    "cypress": "start-server-and-test start 3000 cypress:run",
     "cypress:run": "cypress run",
-    "cypress:open": "cypress open"
+    "cypress:open": "cypress open",
+    "cypress": "start-server-and-test start 3000 cypress:run"
   },
   "browserslist": {
     "production": [