Testing Typescript Applications (WIP)

Introduction

What does it mean to test your code?

What is testing?

The feedback loop

• Unit tests: focus on testing individual units or components of the application in isolation from the rest of the application. This is useful for ensuring that each component is working correctly on its own.

• Integration tests: focus on testing how different components of the application work together. This is useful for ensuring that the application functions correctly as a whole.

• End-to-end tests: focus on testing the application from the user's perspective, simulating how a user would interact with the application. This is useful for ensuring that the application functions correctly from end to end and that all necessary features are implemented.

Unit Testing

Unit Testing Tools: Jest

yarn add -D jest

Integration Testing

1. Network requests (using MSW)

2. Components responsible for animation (because who wants to wait for that in your tests?)

End-to-end (E2E) Testing

Benefits of E2E tests

Considerations for E2E tests

Common scenarios for end-to-end tests:

• Validating critical workflows for use cases

• Ensuring data is persisted and displayed through multiple screens

• Running Smoke Tests and System Checks before deployment

Best practices for end-to-end-tests

Page Objects Pattern

export class InventoryPageTester {
  static visit() {                                                         
    cy.visit("http://localhost:3000/blo");
  }

	static getSubmitButton() {
		return cy.get('button[type="submit"]')
      .contains("Add to inventory");
	}
 
	static addItem(itemName, quantity) {                                     
    cy.get('input[placeholder="Item name"]')
      .clear()
      .type(itemName);
    cy.get('button[type="submit"]')
      .contains("Add to inventory")
      .click();
  }
 
	static findItem(itemName, quantity) {                               
    return cy.contains("li", `${itemName} - Quantity: ${quantity}`);
  }
}

import { InventoryPageTester } from "../pages/inventoryPageTester";
 
describe("item submission", () => {
  it("can add items through the form", () => {
		InventoryManagement.visit();
		InventoryManagement.addItem("cheesecake", "10");
		InventoryManagement.findItemEntry("cheesecake", "10");
  });

  // ...
});

Avoiding waiting for fixed amounts of time

E2E Testing Tools: Cypress

Installation

yarn add cypress --dev

NPM Scripts

"scripts": {
		"cypress:open": "cypress open",
		"cypress:run": "cypress run"
}

Configuration

import { loadEnvConfig } from '@next/env'
import { defineConfig } from 'cypress'

const { combinedEnv } = loadEnvConfig(process.cwd())

export default defineConfig({
  env: combinedEnv,
  e2e: {
    baseUrl: 'http://localhost:3000',
    retries: {
      runMode: 3
    },
    viewportHeight: 1080,
    viewportWidth: 1920,
    video: false,
    screenshotOnRunFailure: false
  }
})

{
	"extends": "../tsconfig.json",
  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress", "node"]
  },
  "include": ["**/*.ts"]
}

Github actions

name: E2E Tests
on: [push]

jobs:
  e2e-tests:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@master

      - name: Install dependencies
        run: npm install

      - name: Cypress run
        uses: cypress-io/github-action@master
        env: 
					// Remember to add any env variables
					// access to gh action secrets via "secrets.***"
          NOTION_EXTENSION_TOKEN: ${{ secrets.MY_ENV_VAR }}
        with:
          build: npm run build
          start: npm run start

Common Testing Mistakes

1. Testing Implementation Details

1. I can break the code and not the test (eg: I could make a typo in my button's onClick assignment)

2. I can refactor the code and break the test (eg: I could rename increment to updateCount)

2. 100% code coverage

• This code was run when your tests were run.

• This code will work according to the business requirements.

• This code works with all the other code in the application.

• The application cannot get into a bad state

3. Repeat Testing

Best practices

The rule of 3

1. What is being tested?

2. Under what circumstances would it be tested?

3. What is the expected result?

//1. unit under test
describe('Products Service', function() {
  describe('Add new product', function() {
    //2. scenario and 3. expectation
    it('When no price is specified, then the product status is pending approval', ()=> {
      const newProduct = new ProductService().add(...);
      expect(newProduct.status).to.equal('pendingApproval');
    });
  });
});

AAA pattern

• Arrange: Here, you would set up the system being tested to reach the scenario that the test aims to simulate. This could involve anything from setting up variables to working with mocks and stubs.

• Act: In this part, you would run the unit under the test. So, you would do all of the steps and whatever needs to be done in order to get to the test’s result state.

• Assert: This part is relatively self-explanatory. You would simply make your assertions and checks in this last part.

describe('Context menu', () => {
    it('should open the context menu on click', () => {
        // Arrange
        const contextButtonSelector = 'sw-context-button';
        const contextMenuSelector = '.sw-context-menu';

        // Assert state before test
        let contextMenu = wrapper.find(contextMenuSelector);
        expect(contextMenu.isVisible()).toBe(false);

        // Act
        const contextButton =
             wrapper.find(contextButtonSelector);
        await contextButton.trigger('click');

        // Assert
        contextMenu = wrapper.find(contextMenuSelector);
        expect(contextMenu.isVisible()).toBe(true);  
    });
});

// Jest
describe('Context menu', () => {
    it('should open the context menu on click', () => {
        // Given
        const contextButtonSelector = 'sw-context-button';
        const contextMenuSelector = '.sw-context-menu';

        // When
        let contextMenu = wrapper.find(contextMenuSelector);
        expect(contextMenu.isVisible()).toBe(false);
        const contextButton =
             wrapper.find(contextButtonSelector);
        await contextButton.trigger('click');

        // Then
        contextMenu = wrapper.find(contextMenuSelector);
        expect(contextMenu.isVisible()).toBe(true);  
    });
});