[#21] Add cypress tests

.env.example

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

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,68 @@
+describe('User Authentication', () => {
+  context('upon navigation to /login', () => {
+    it('displays login page', () => {
+      cy.visit('/login');
+
+      cy.findByTestId('login-header').should('be.visible');
+    });
+  });
+
+  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');
+      });
+    });
+  });
+
+  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');
+      });
+    });
+  });
+});

src/components/Button/index.tsx

@@ -10,7 +10,12 @@ type ButtonProps = {
 
 function Button({ text, type, className, disabled, onButtonClick }: ButtonProps) {
   return (
-    <button className={`${styles.button} ${className}`} disabled={disabled || false} type={type} onClick={onButtonClick}>
+    <button
+      className={`${styles.button} ${className}`}
+      disabled={disabled || false}
+      type={type || 'submit'}
+      onClick={onButtonClick}
+    >
       {text}
     </button>
   );

src/screens/Login/index.tsx

@@ -83,7 +83,7 @@ function LoginScreen() {
         {t('login.sign-in')} to Nimble
       </p>
 
-      <div>
+      <div className="errors">
         {errors.length > 0 &&
           errors.map((error) => {
             return (
@@ -112,12 +112,13 @@ function LoginScreen() {
             className="my-3 block h-14 w-80"
             onInputChange={handlePasswordChange}
           />
-          {/* Change to React Router Link when implement #17 */}
+
+          {/* TODO: Change to React Router Link when implement #17 */}
           <a href="." className="absolute left-60 top-5 my-8 text-white opacity-50">
             {t('login.forgot-password')}
           </a>
         </div>
-        <Button text={t('login.sign-in')} className="h-14 w-80" disabled={formSubmitted} />
+        <Button text={t('login.sign-in')} className="h-14 w-80" type={'submit'} disabled={formSubmitted} />
       </form>
     </>
   );