test: add more tests from master branch

malcolm-kee · May 17, 2020 · 238a840 · 238a840
1 parent ab1a4dd
commit 238a840
Show file tree

Hide file tree

Showing 27 changed files with 446 additions and 127 deletions.
diff --git a/cypress/fixtures/mk-icon.png b/cypress/fixtures/mk-icon.png
diff --git a/cypress/integration/auth.spec.js b/cypress/integration/auth.spec.js
@@ -50,7 +50,7 @@ describe(`auth`, () => {
     cy.findAllByText('Signup').last().click();
 
     cy.findByText('Network Error', {
-      timeout: 6000,
+      timeout: 10000,
     }).should('be.visible');
   });
 });
diff --git a/cypress/integration/canary.spec.js b/cypress/integration/canary.spec.js
@@ -4,4 +4,14 @@ describe(`canary`, () => {
   it(`able to load`, () => {
     cy.visit('/');
   });
+
+  it(`able to click carousel`, () => {
+    cy.visit('/');
+
+    cy.findAllByTestId('carousel-indicator', {
+      timeout: 6000,
+    })
+      .eq(3)
+      .click();
+  });
 });
diff --git a/cypress/integration/chat.spec.js b/cypress/integration/chat.spec.js
@@ -6,7 +6,7 @@ describe(`chat`, () => {
     cy.createUser({
       name: 'Malcolm Tee',
     }).then((user) => {
-      cy.visit('/');
+      cy.visit('/help');
       cy.findByText('Chat').click();
 
       cy.findAllByText('Login').last().click();
@@ -29,7 +29,7 @@ describe(`chat`, () => {
         cy.connectSocket({
           url: 'wss://ecomm-db.herokuapp.com/chat',
         }).then((chatSocket) => {
-          cy.visit('/');
+          cy.visit('/help');
           cy.findByText('Chat').click();
 
           cy.findAllByText('Login').last().click();
@@ -68,7 +68,7 @@ describe(`chat`, () => {
     cy.createUser({
       name: 'Malcolm Noisy',
     }).then((user) => {
-      cy.visit('/');
+      cy.visit('/help');
       cy.findByText('Chat').click();
 
       cy.findAllByText('Login').last().click();
@@ -89,7 +89,14 @@ describe(`chat`, () => {
         .type('J{enter}')
         .type('K{enter}')
         .type('L{enter}')
-        .type('M{enter}');
+        .type('E{shift}{enter}e{enter}')
+        .type('F{enter}')
+        .type('G{enter}')
+        .type('H{enter}')
+        .type('I{enter}')
+        .type('J{enter}')
+        .type('K{enter}')
+        .type('L{enter}');
 
       cy.findByTestId('chat-history').scrollTo('top');
 

diff --git a/cypress/integration/product.spec.js b/cypress/integration/product.spec.js
@@ -0,0 +1,86 @@
+/// <reference types="Cypress" />
+/// <reference types="../support" />
+
+describe(`product`, () => {
+  it(`can view product details`, () => {
+    cy.visit('/');
+
+    cy.findAllByTestId('productBox').first().click();
+
+    cy.findByText('Share').click();
+
+    cy.findByTestId('add-qty-btn').click().click();
+    cy.findByTestId('reduce-qty-btn').click();
+    cy.findByText('Add To Cart').click();
+
+    cy.findByTestId('reduce-qty-btn').click();
+    cy.findByText('Add To Cart').click();
+
+    cy.findByText('Cart').click();
+
+    cy.findByLabelText('Increase Quantity', {
+      timeout: 6000,
+    })
+      .click()
+      .click();
+    cy.findByLabelText('Reduce Quantity').click();
+
+    cy.findAllByLabelText('Remove', { exact: false }).first().click();
+  });
+
+  it(`can checkout cart`, () => {
+    cy.visit('/');
+
+    cy.findAllByTestId('productBox').last().click();
+
+    cy.findByTestId('add-qty-btn').click().click();
+    cy.findByText('Add To Cart').click();
+
+    cy.findByAltText('Shopit').click();
+
+    cy.findAllByTestId('productBox').eq(3).click();
+    cy.findByText('Add To Cart').click();
+
+    cy.findByText('Cart').click();
+    cy.findByText('Check Out').click();
+
+    cy.findByLabelText('Card Number').type('5555555555554444');
+    cy.findByLabelText('Name').type('Malcolm Kee');
+    cy.findByLabelText('Valid Thru').type('1225');
+    cy.findByLabelText('CVC').type('123');
+    cy.findByText('Pay').click();
+    cy.findByText('Back to Home').click();
+  });
+
+  it(`focus on content input when user name is default`, () => {
+    cy.createUser({
+      name: 'Winnie The Pooth',
+    }).then((user) => {
+      cy.visit('/');
+      cy.findByText('Login').click();
+      cy.findByLabelText('Email')
+        .type(user.email)
+        .get('form')
+        .within((subject) => {
+          cy.findByText('Login', {
+            container: subject,
+            selector: 'button',
+          }).click();
+        });
+
+      cy.findByAltText('Shopit', {
+        selector: 'a',
+      })
+        .first()
+        .click();
+
+      cy.findAllByTestId('productBox').eq(5).click();
+
+      cy.findByLabelText('Your Review', {
+        timeout: 6000,
+      }).type('I love honey{enter}do you?');
+      cy.findByText('Add').click();
+      cy.findByLabelText('Your Review').should('be.focused');
+    });
+  });
+});
diff --git a/cypress/integration/support.spec.js b/cypress/integration/support.spec.js
@@ -0,0 +1,108 @@
+/// <reference types="Cypress" />
+/// <reference types="../support" />
+
+describe(`support`, () => {
+  it(`can load all support pages`, () => {
+    cy.visit('/help');
+
+    cy.findByText('Account').click();
+
+    cy.findByText('If you forget password, just create another one.', {
+      exact: false,
+    }).should('be.visible');
+
+    cy.findByText('Payment').click();
+    cy.findByText("when you can't even pay?", { exact: false }).should(
+      'be.visible'
+    );
+
+    cy.findByText('Shipping').click();
+    cy.findByText('3-5 years', { exact: false }).should('be.visible');
+
+    cy.findByText('Complaint').click();
+    cy.findByText('Category').should('be.visible');
+  });
+
+  it(`can submit complain`, () => {
+    cy.visit('/');
+    cy.findAllByText('Help').first().click();
+
+    cy.findByText('Complaint').click();
+
+    cy.findByLabelText('I want to make complain about').select('deliver');
+    cy.findByText('Next').click();
+
+    cy.findByLabelText('Date of incident')
+      .click()
+      .get('.datepick-popup')
+      .within(() => {
+        cy.findByText('2').click();
+      });
+    cy.findByLabelText('Details about the incident').type(
+      'I say hi{enter}Then he say goodbye.'
+    );
+
+    cy.findByLabelText('Upload File').attachFile('mk-icon.png', {
+      subjectType: 'drag-n-drop',
+      force: true,
+    });
+    cy.findByText('Next').click();
+
+    cy.findByLabelText('Your Full Name').type('Mashi Maro');
+    cy.findByLabelText('Your Phone Number').type('12345678');
+    cy.findByText('Submit').click();
+
+    cy.findByText('Shipping').click();
+  });
+
+  it(`cancel while upload`, () => {
+    cy.server();
+
+    cy.route({
+      url: /upload$/,
+      method: 'PUT',
+      delay: 2000,
+    });
+
+    cy.visit('/');
+    cy.findAllByText('Help').first().click();
+
+    cy.findByText('Complaint').click();
+
+    cy.findByLabelText('I want to make complain about').select('deliver');
+    cy.findByText('Next').click();
+
+    cy.findByLabelText('Upload File').attachFile('mk-icon.png', {
+      subjectType: 'drag-n-drop',
+      force: true,
+    });
+
+    cy.findByLabelText('Remove').click();
+  });
+
+  it(`shows error when upload fails`, () => {
+    cy.visit('/help');
+
+    cy.server();
+
+    cy.route({
+      url: /upload$/,
+      method: 'PUT',
+      status: 500,
+      response: 'Internal Server Error',
+      delay: 200,
+    });
+
+    cy.findByText('Complaint').click();
+
+    cy.findByLabelText('I want to make complain about').select('deliver');
+    cy.findByText('Next').click();
+
+    cy.findByLabelText('Upload File').attachFile('mk-icon.png', {
+      subjectType: 'drag-n-drop',
+      force: true,
+    });
+
+    cy.findByText('Failed to Upload').should('be.visible');
+  });
+});
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
@@ -1,4 +1,5 @@
 import '@testing-library/cypress/add-commands';
+import 'cypress-file-upload';
 import { getRandomEmail } from '../test-helper';
 
 Cypress.Commands.add('createUser', ({ name, email = getRandomEmail() }) => {
@@ -10,14 +11,14 @@ Cypress.Commands.add('createUser', ({ name, email = getRandomEmail() }) => {
       email,
       joinedDate: Date.now(),
     },
-  }).then(response => response.body);
+  }).then((response) => response.body);
 });
 
 Cypress.Commands.add('connectSocket', ({ url }) => {
   const ws = new WebSocket(url);
 
   return new Cypress.Promise((fulfill, reject) => {
-    ws.onopen = function() {
+    ws.onopen = function () {
       fulfill(ws);
     };
     ws.onerror = reject;

diff --git a/jsconfig.json b/jsconfig.json
@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src"
+  },
+  "include": ["src"]
+}
diff --git a/package.json b/package.json
@@ -20,7 +20,8 @@
     "react-toastify": "^5.4.0",
     "react-transition-group": "^4.0.0",
     "redux": "^4.0.1",
-    "unfetch": "^4.1.0"
+    "unfetch": "^4.1.0",
+    "xhfetch": "^1.0.2"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -58,6 +59,7 @@
     "@testing-library/user-event": "^10.0.0",
     "@types/jest": "^24.0.11",
     "cross-env": "^7.0.0",
+    "cypress-file-upload": "^4.0.6",
     "http-server": "^0.12.1",
     "istanbul-lib-coverage": "^3.0.0",
     "jest-junit": "^10.0.0",
@@ -75,4 +77,4 @@
   "nyc": {
     "report-dir": "cypress-coverage"
   }
-}
+}
diff --git a/src/App.test.js b/src/App.test.js
@@ -167,7 +167,7 @@ describe('<App />', () => {
     expect(queryCartItem('1')).toBeNull();
     expect(queryCartItem('2')).not.toBeNull();
 
-    user.click(getByText('Pay'));
+    user.click(getByText('Check Out'));
 
     await user.type(getByLabelText('Card Number'), '5521783746553547');
     await user.type(getByLabelText('Name'), 'Malcolm Kee');

diff --git a/src/components/alert.spec.jsx b/src/components/alert.spec.jsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { user } from 'lib/test-util';
+import { Alert } from './alert';
+
+describe(`<Alert />`, () => {
+  it(`renders and dismissed`, () => {
+    const msg = 'Hello';
+    render(
+      <Alert color="danger" dismissible>
+        <p>{msg}</p>
+      </Alert>
+    );
+
+    expect(screen.getByText(msg)).toBeVisible();
+
+    user.click(screen.getByLabelText('Close'));
+    expect(screen.queryByText(msg)).toBeNull();
+  });
+});
diff --git a/src/components/list-group.jsx b/src/components/list-group.jsx
@@ -1,9 +1,10 @@
-import { NavLink } from 'react-router-dom';
 import cx from 'classnames';
+import { callAll } from 'lib/fn-lib';
+import { omit } from 'lib/object';
+import { isDefined } from 'lib/typecheck';
 import PropTypes from 'prop-types';
 import * as React from 'react';
-import { omit } from '../lib/object';
-import { isDefined } from '../lib/typecheck';
+import { NavLink } from 'react-router-dom';
 
 /**
  * `ListGroup` renders a list of items.
@@ -19,7 +20,15 @@ export const ListGroup = (props) => {
     >
       {props.items.map(
         (
-          { label, active, disabled, variant, className, ...linkProps },
+          {
+            label,
+            active,
+            disabled,
+            variant,
+            className,
+            onClick,
+            ...linkProps
+          },
           index,
           allItems
         ) => (
@@ -40,6 +49,10 @@ export const ListGroup = (props) => {
                 : 'bg-blue-500 text-gray-100'
             }
             isActive={(match) => (isDefined(active) ? active : !!match)}
+            onClick={callAll(
+              onClick,
+              disabled ? (ev) => ev.preventDefault() : undefined
+            )}
             {...linkProps}
             key={index}
           >