refactor: convert tests to ts

cypress/integration/auth.spec.js → cypress/integration/auth.spec.ts

@@ -1,5 +1,3 @@
-/// <reference types="Cypress" />
-
 import * as faker from 'faker';
 
 describe(`auth`, () => {

cypress/integration/canary.spec.js → cypress/integration/canary.spec.ts

@@ -1,5 +1,3 @@
-/// <reference types="Cypress" />
-
 describe(`canary`, () => {
   it(`able to load`, () => {
     cy.visit('/');

cypress/integration/career.spec.js → cypress/integration/career.spec.ts

@@ -1,9 +1,7 @@
-/// <reference types="Cypress" />
-/// <reference types="../support" />
-
-describe(`product`, () => {
+describe(`career`, () => {
   it(`can view job details`, () => {
     cy.visit('/');
+
     cy.findByText('Careers').click();
 
     cy.findByText('Web Designer').click();

cypress/integration/chat.spec.js → cypress/integration/chat.spec.ts

@@ -1,6 +1,3 @@
-/// <reference types="Cypress" />
-/// <reference types="../support" />
-
 describe(`chat`, () => {
   it(`can launch chat for logged in user`, () => {
     cy.createUser({

cypress/integration/product.spec.js → cypress/integration/product.spec.ts

@@ -1,6 +1,3 @@
-/// <reference types="Cypress" />
-/// <reference types="../support" />
-
 describe(`product`, () => {
   it(`can view product details`, () => {
     cy.visit('/');
@@ -66,11 +63,7 @@ describe(`product`, () => {
 
       cy.findByText(`You're already login!`).should('be.visible');
 
-      cy.findByAltText('Shopit', {
-        selector: 'a',
-      })
-        .first()
-        .click();
+      cy.findAllByAltText('Shopit').first().click();
 
       cy.findAllByTestId('productBox').last().click();
 

cypress/integration/support.spec.js → cypress/integration/support.spec.ts

@@ -1,6 +1,3 @@
-/// <reference types="Cypress" />
-/// <reference types="../support" />
-
 describe(`support`, () => {
   it(`can load all support pages`, () => {
     cy.visit('/help');

cypress/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "baseUrl": "../node_modules",
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": [
+      "cypress",
+      "@types/testing-library__cypress",
+      "cypress-file-upload"
+    ]
+  },
+  "include": ["**/*.ts"]
+}

src/App.test.js → src/App.spec.tsx

@@ -1,4 +1,5 @@
 import { cleanup, screen } from '@testing-library/react';
+import { Job } from 'modules/career/career.type';
 import * as React from 'react';
 import xhrMock from 'xhr-mock';
 import App from './App';
@@ -20,11 +21,15 @@ function loadApp({ url = '/' } = {}) {
     waitForProductPageFinishLoading: () => screen.findByText(addToCartBtnLabel),
     addQty: () => user.click(screen.getByTestId('add-qty-btn')),
     minusQty: () => user.click(screen.getByTestId('reduce-qty-btn')),
-    getCartItemQty: (id) => screen.getByTestId(`qty-for-${id}`).innerHTML,
-    queryCartItem: (id) => screen.queryByTestId(`qty-for-${id}`),
-    addMoreCartItem: (id) => user.click(screen.getByTestId(`add-${id}`)),
-    reduceCartItem: (id) => user.click(screen.getByTestId(`reduce-${id}`)),
-    removeCartItem: (id) => user.click(screen.getByTestId(`remove-${id}`)),
+    getCartItemQty: (id: string) =>
+      screen.getByTestId(`qty-for-${id}`).innerHTML,
+    queryCartItem: (id: string) => screen.queryByTestId(`qty-for-${id}`),
+    addMoreCartItem: (id: string) =>
+      user.click(screen.getByTestId(`add-${id}`)),
+    reduceCartItem: (id: string) =>
+      user.click(screen.getByTestId(`reduce-${id}`)),
+    removeCartItem: (id: string) =>
+      user.click(screen.getByTestId(`remove-${id}`)),
   };
 }
 
@@ -114,12 +119,14 @@ describe('<App />', () => {
   });
 
   it(`shows careers page`, async () => {
-    xhrMock.get(process.env.REACT_APP_CAREER_BASE_URL, {
+    xhrMock.get(process.env.REACT_APP_CAREER_BASE_URL as string, {
       status: 200,
       body: JSON.stringify(careers),
     });
 
-    const webDesignerData = careers.find((job) => job.title === 'Web Designer');
+    const webDesignerData = careers.find(
+      (job) => job.title === 'Web Designer'
+    ) as Job;
 
     xhrMock.get(
       `${process.env.REACT_APP_CAREER_BASE_URL}/${webDesignerData._id}`,
@@ -214,15 +221,15 @@ describe('<App />', () => {
     await screen.findByLabelText('Email');
 
     await user.type(screen.getByLabelText('Email'), 'mk@test.com');
-    user.click(container.querySelector('button[type="submit"]'));
+    user.click(container.querySelector('button[type="submit"]') as HTMLElement);
 
     await screen.findByText("You're already login!");
 
     navigate('/product/1');
 
     await waitForProductPageFinishLoading();
 
-    expect(screen.getByLabelText('Your Name').value).not.toBe('');
+    expect(screen.getByLabelText('Your Name')).not.toHaveValue('');
 
     user.click(screen.getByText('Logout'));
 
@@ -239,7 +246,7 @@ describe('<App />', () => {
     await user.type(screen.getByLabelText('Name'), 'Malcolm Kee');
     await user.type(screen.getByLabelText('Email'), 'mk@test.com');
     await user.type(screen.getByLabelText('Password'), '12345678');
-    user.click(container.querySelector('button[type="submit"]'));
+    user.click(container.querySelector('button[type="submit"]') as HTMLElement);
 
     await screen.findByTestId('login-form');
     await user.type(screen.getByLabelText('Email'), 'mk@test.com');

src/pages/main-page.spec.jsx → src/pages/main-page.spec.tsx

@@ -7,34 +7,23 @@ import { MainPage } from './main-page';
 
 jest.mock('../modules/marketing/marketing.service');
 
-const PRODUCT_BASE_URL = process.env.REACT_APP_PRODUCT_BASE_URL;
-
-function loadMainPage() {
-  return {
-    ...renderWithStateMgmtAndRouter(<MainPage />),
-    scrollWindow: () =>
-      fireEvent(
-        window,
-        new UIEvent('scroll', { bubbles: false, cancelable: false })
-      ),
-    getNumberOfProducts: () => screen.getAllByTestId('productBox').length,
-  };
-}
+const PRODUCT_BASE_URL = process.env.REACT_APP_PRODUCT_BASE_URL as string;
 
 describe('<MainPage />', () => {
   beforeEach(() => xhrMock.setup());
 
-  afterEach(() => {
-    xhrMock.teardown();
-  });
+  afterEach(() => xhrMock.teardown());
 
   it('renders without crashing', () => {
     xhrMock.get(new RegExp(PRODUCT_BASE_URL, 'u'), {
       status: 200,
       body: JSON.stringify(PRODUCT_DB.slice(0, 2)),
     });
-    loadMainPage();
+
+    renderWithStateMgmtAndRouter(<MainPage />);
+
     expect(screen.getByText('Shopit')).not.toBeNull();
+
     cleanup();
   });
 
@@ -44,11 +33,12 @@ describe('<MainPage />', () => {
       body: JSON.stringify(PRODUCT_DB.slice(0, 2)),
     });
 
-    loadMainPage();
+    renderWithStateMgmtAndRouter(<MainPage />);
 
     const iPhoneXBox = await screen.findByText('iPhone X');
 
     expect(iPhoneXBox).not.toBeNull();
+
     cleanup();
   });
 
@@ -67,16 +57,19 @@ describe('<MainPage />', () => {
       ])
     );
 
-    const { findByText, scrollWindow, getNumberOfProducts } = loadMainPage();
+    renderWithStateMgmtAndRouter(<MainPage />);
 
-    await findByText('iPhone X');
+    await screen.findByText('iPhone X');
+    expect(screen.getAllByTestId('productBox')).toHaveLength(2);
 
-    expect(getNumberOfProducts()).toBe(2);
+    fireEvent(
+      window,
+      new UIEvent('scroll', { bubbles: false, cancelable: false })
+    );
 
-    scrollWindow();
+    await screen.findByText('dodo');
+    expect(screen.getAllByTestId('productBox')).toHaveLength(4);
 
-    await findByText('dodo');
-    expect(getNumberOfProducts()).toBe(4);
     cleanup();
   });
 });

src/pages/product-page.spec.tsx

@@ -0,0 +1,31 @@
+import { screen, wait } from '@testing-library/react';
+import * as React from 'react';
+import { renderWithStateMgmtAndRouter, user } from '../lib/test-util';
+import { ProductPage } from './product-page';
+
+jest.mock('../modules/products/product.service');
+
+describe('<ProductPage />', () => {
+  it('allows customer to add product to cart', async () => {
+    renderWithStateMgmtAndRouter(<ProductPage productId="1" />);
+
+    const addToCartBtn = await screen.findByText('Add To Cart');
+
+    user.click(addToCartBtn);
+
+    await wait(); // to suppress act() warning
+  });
+
+  it('allows customer to add comment', async () => {
+    renderWithStateMgmtAndRouter(<ProductPage productId="1" />);
+
+    await screen.findByLabelText('Your Name');
+
+    await user.type(screen.getByLabelText('Your Name'), 'Malcolm Kee');
+    await user.type(screen.getByLabelText('Your Review'), 'I like it.');
+
+    user.click(screen.getByTestId('product-comment-submit-btn'));
+
+    await wait(); // to suppress act() warning
+  });
+});