Testing and Quality Assurance

This tutorial will guide you through testing and quality assurance practices in the OADA UI project. You'll learn how to implement unit tests, integration tests, and best practices for testing.

Testing Setup

1. Testing Configuration

The project uses Create React App (CRA) with CRACO for configuration. The testing setup is configured in package.json. The following script commands are used to run different testing scenarios:

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject",
    "analyze": "npm run build"
  }
}

2. Test Utilities

The project uses React Testing Library for component testing. The setup file extends Jest's expect functionality with additional DOM-specific matchers. This allows us to use assertions like toBeInTheDocument() and toHaveClass() in our tests:

// src/setupTests.ts
import "@testing-library/jest-dom/extend-expect";

Unit Testing

1. Component Testing

The FAQ component demonstrates how to test both static content and dynamic data rendering. The test suite includes:

• Verifying the presence of static text elements

• Checking the rendering of dynamic FAQ content

• Using test IDs for reliable element selection

• Testing component structure with nested elements

// src/features/Faq/__tests__/index.spec.tsx
import { render, within } from "@testing-library/react";
import Faq from "../index";

const faqContent = [
  {
    title: "Lorem ipsum dolor sit amet?",
    text: "Lorem ipsum dolor sit amet...",
    id: "1",
  },
  // ... more test data
];

describe("FAQ Component", () => {
  test("should have all static elements", () => {
    const { getByText } = render(<Faq />);

    expect(getByText("What is a pool?")).toBeTruthy();
    expect(getByText("What is a Bond?")).toBeTruthy();
    expect(getByText("What is a Borrow Offer?")).toBeTruthy();
    expect(getByText("What is an Equity Token?")).toBeTruthy();
    expect(getByText("What is a Bond NFT?")).toBeTruthy();
    expect(getByText("More Useful Links")).toBeTruthy();
  });

  test("should have all test data elements", () => {
    const { getAllByTestId } = render(<Faq />);
    const accordion = getAllByTestId("accordion");
    faqContent.map((element) =>
      expect(within(accordion[0]).getByText(element.text))
    );
  });
});

2. App Component Testing

The main App component test demonstrates how to:

• Set up the Redux store provider

• Test the basic rendering of the application

• Use regular expressions for flexible text matching

• Test components within the Redux context

// src/App.test.tsx
import React from "react";
import { render } from "@testing-library/react";
import { Provider } from "react-redux";
import { store } from "./store";
import App from "./App";

test("renders learn react link", () => {
  const { getByText } = render(
    <Provider store={store}>
      <App />
    </Provider>
  );

  expect(getByText(/learn/i)).toBeInTheDocument();
});

Integration Testing

1. Blockchain Provider Testing

The blockchain provider tests demonstrate how to:

• Test asynchronous blockchain operations

• Mock external blockchain endpoints

• Verify protocol parameter fetching

• Test UTxO (Unspent Transaction Output) handling

• Ensure proper delegation to the Blockfrost service

// Example of blockchain provider testing
describe("BlockchainProvider", () => {
  it("handles protocol parameter fetching", async () => {
    const provider = new BlockchainProvider("test-endpoint");
    const params = await provider.getProtocolParameters();
    expect(params).toBeDefined();
  });

  it("delegates to Blockfrost for standard operations", async () => {
    const provider = new BlockchainProvider("test-endpoint");
    const utxos = await provider.getUtxos("test-address");
    expect(utxos).toBeDefined();
  });
});

2. Redux Store Testing

The Redux store configuration shows how to:

• Set up multiple reducers for different features

• Configure middleware with custom services

• Handle asynchronous actions with thunk middleware

• Manage application state for wallet, OADA actions, and alerts

// src/store/index.ts
export const store = configureStore({
  reducer: {
    wallet: walletReducer,
    oadaActions: oadaReducer,
    alert: alertSlice,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      thunk: {
        extraArgument: services,
      },
    }),
});

Best Practices

1. Component Testing

   • Test component rendering

   • Test user interactions

   • Test state changes

   • Test edge cases

2. Integration Testing

   • Test blockchain interactions

   • Test Redux store integration

   • Test service layer

   • Test error handling

3. Testing Guidelines

   • Use React Testing Library for component tests

   • Mock external dependencies

   • Test both success and error cases

   • Follow the testing pyramid principle

Next Steps

Now that you understand testing and quality assurance, you can proceed to:

1. Deployment and CI/CD

2. Contributing to the Project

Additional Resources

• React Testing Library Documentation

• Redux Testing Best Practices