[#21] [#8] As a user, I can login with an email and password

.env.example

@@ -0,0 +1,4 @@
+REACT_APP_DEFAULT_LANGUAGE=en
+REACT_APP_API_ENDPOINT=
+REACT_APP_API_CLIENT_ID=
+REACT_APP_API_CLIENT_SECRET=

.github/workflows/test.yml

@@ -2,6 +2,11 @@ name: Test
 
 on: pull_request
 
+env:
+  REACT_APP_API_ENDPOINT: ${{ secrets.API_ENDPOINT }}
+  REACT_APP_API_CLIENT_ID: ${{ secrets.API_CLIENT_ID }}
+  REACT_APP_API_CLIENT_SECRET: ${{ secrets.API_CLIENT_SECRET }}
+
 jobs:
   test:
     name: Run linters and tests
@@ -33,6 +38,14 @@ jobs:
       - name: Run integration tests
         run: npm run cypress
 
+      - name: Upload any cypress failures
+        uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          name: cypress-output
+          path: cypress/videos
+          retention-days: 5
+
       - name: Merge code coverage reports
         run: npm run test:merge-coverage
 

.gitignore

@@ -16,6 +16,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

cypress/fixtures/Authentication/invalid-credentials.json

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

cypress/fixtures/Authentication/valid-credentials.json

@@ -0,0 +1,13 @@
+{
+  "data": {
+    "id": "18422",
+    "type": "token",
+    "attributes": {
+      "access_token": "3XwBqiXrM-xhHCc-0QCKsOuE0Xp9AYdYTiZwTSqo4M4",
+      "token_type": "Bearer",
+      "expires_in": 7200,
+      "refresh_token": "QOiwCsTV7Wn4mO56Kz-4rj8nGCWfVMcIwSbKo4yicEk",
+      "created_at": 1677124678
+    }
+  }
+}

cypress/integration/Authentication/login.spec.ts

@@ -0,0 +1,72 @@
+describe('User Authentication', () => {
+  context('upon navigation to /login', () => {
+    it('displays login page', () => {
+      cy.visit('/login');
+
+      cy.findByTestId('login-header').should('be.visible');
+    });
+  });
+
+  // TODO: The below test fail on CI/CD with the use of Intercept
+
+  context('given valid credentials', () => {
+    it('redirects to the home page', () => {
+      cy.intercept('POST', '/oauth/token/', {
+        statusCode: 200,
+        fixture: 'Authentication/valid-credentials.json',
+      });
+
+      cy.visit('/login');
+
+      cy.get('input[name=email]').type('[email protected]');
+      cy.get('input[name=password]').type('12345678');
+      cy.get('button[type="submit"]').click();
+
+      cy.location().should((location) => {
+        expect(location.pathname).to.eq('/');
+      });
+    });
+  });
+
+  context('given NO credentials entered', () => {
+    it('shows field validation errors', () => {
+      cy.visit('/login');
+
+      cy.get('button[type="submit"]').click();
+
+      cy.get('.errors').should('be.visible');
+
+      cy.get('.errors').within(() => {
+        cy.contains('Email has invalid format');
+        cy.contains('Password should be at least');
+      });
+    });
+  });
+
+  // TODO: The below test fail on CI/CD with the use of Intercept
+
+  context('given INVALID credentials', () => {
+    it('shows login error', () => {
+      cy.intercept('POST', '/oauth/token/', {
+        statusCode: 400,
+        fixture: 'Authentication/invalid-credentials.json',
+      });
+
+      cy.visit('/login');
+
+      cy.get('input[name=email]').type('[email protected]');
+      cy.get('input[name=password]').type('password123');
+      cy.get('button[type="submit"]').click();
+
+      cy.location().should((location) => {
+        expect(location.pathname).to.eq('/login');
+      });
+
+      cy.get('.errors').should('be.visible');
+
+      cy.get('.errors').within(() => {
+        cy.findByText('Your email or password is incorrect. Please try again.').should('exist');
+      });
+    });
+  });
+});

package.json

@@ -65,15 +65,19 @@
     "danger": "10.9.0",
     "danger-plugin-istanbul-coverage": "1.6.2",
     "eslint": "8.11.0",
+    "jest-localstorage-mock": "2.4.26",
+    "nock": "13.3.0",
     "postcss": "8.4.21",
     "postcss-import": "14.1.0",
     "prettier": "2.6.0",
+    "prettier-plugin-tailwindcss": "0.2.3",
     "start-server-and-test": "1.14.0",
     "stylelint": "14.6.0",
     "tailwindcss": "3.2.6",
     "typescript": "4.6.2"
   },
   "jest": {
+    "resetMocks": false,
     "collectCoverageFrom": [
       "src/**/*.{js,jsx,ts,tsx}",
       "!src/**/*.d.ts"

public/_redirects

@@ -0,0 +1 @@
+/*    /index.html    200

public/locales/en/translation.json

@@ -1,8 +1,11 @@
 {
   "login": {
-    "sign_in": "Sign in",
+    "sign-in": "Sign in",
     "email": "Email",
     "password": "Password",
-    "forgot_password": "Forgot?"
+    "forgot-password": "Forgot?",
+    "invalid-email": "Email has invalid format",
+    "invalid-password": "Password should be at least {{passwordMinLength}}",
+    "generic-server-error": "There was a problem receiving a response from the server"
   }
 }

src/App.tsx

@@ -10,7 +10,7 @@ const App = (): JSX.Element => {
 
   return (
     <div>
-      <main className="flex flex-col p-0 m-0 h-screen items-center justify-center">{appRoutes}</main>
+      <main className="m-0 flex h-screen flex-col items-center justify-center p-0">{appRoutes}</main>
     </div>
   );
 };