Documentation

File: PipeList.test.js

Description: This file contains unit tests for the PipeList component using React Test Renderer.

Purpose: This file tests various scenarios and functionalities of the PipeList component, focusing on the initial loading state, how the component behaves based on different user status values, and the handling of websocket subscriptions.

Key Components:

  • Jest: A JavaScript testing framework used to write and run tests.
  • React Test Renderer: A library for rendering React components without a DOM, making it suitable for unit testing.
  • PipeList: The React component being tested.
  • Mock Data: Mock data is used to simulate API responses and user data.
  • Jest Mocks: Mocked functions (getPipelines, subscribePipelines) are used to isolate the component's behavior and control test scenarios.
  • expect and toHaveBeenCalledWith: Jest's assertion library is used to verify the expected outcomes of the tests.

Methods

Method: describe("First load", () => { ... })

Description: Tests the initial loading state of the PipeList component.

Parameters: None

Returns: None

Example: This test suite verifies that when the PipeList component first loads, it displays a "busy" indicator. It uses renderer.create to render the component and expect(tree).toMatchSnapshot() to assert that the rendered output matches a previously recorded snapshot.

Method: describe("Status changes", () => { ... })

Description: Tests how the PipeList component reacts to different user status values (Setup.INCOMPLETE and Setup.IN_PROGRESS).

Parameters: None

Returns: None

Example: This test suite includes two tests:

  1. "initially shows the Logo when setup is incomplete": Verifies that when the user's status is Setup.INCOMPLETE, the component renders the Logo component.
  2. "initially shows Busy when setup is in progress": Verifies that when the user's status is Setup.IN_PROGRESS, the component renders the Busy component.

Each test uses mock user data with different status values and verifies the rendered output using snapshot testing.

Method: describe("Pipelines loaded", () => { ... })

Description: Tests how the PipeList component displays pipelines when loaded, focusing on the creation of a link to a pipeline.

Parameters: None

Returns: None

Example: This test suite includes one test:

  1. "shows the user any existing pipelines": Verifies that the component renders a link (Link component) to the first pipeline in the mocked pipelines data. It uses tree.root.findAllByType("Link")[0] to find the link element and asserts its to prop matches the expected URL.

Note: This test is marked as xit (excluded from execution) and needs to be enabled for proper execution.

Method: describe("Websockets created", () => { ... })

Description: Tests whether the PipeList component subscribes to the pipelines websocket when initialized.

Parameters: None

Returns: None

Example: This test suite includes one test:

  1. "subscribes to the pipelines websocket": Verifies that the on method of the mocked socket (socketMock) is called with the "pipe" event and a function as arguments.

Method: describe("Side panel", () => { ... })

Description: Tests the functionality of the side panel in the PipeList component.

Parameters: None

Returns: None

Example: This test suite includes two tests:

  1. "opens when info button for pipelines with 'skipped' status is clicked": Verifies that clicking the info button on a pipeline with "skipped" status opens the side panel.
  2. "closes when close button is clicked": Verifies that clicking the close button on the side panel closes it.

These tests interact with the component's DOM elements using tree.root.findAllByProps and simulate click events using renderer.act. The final rendered output is compared to a snapshot to ensure the expected behavior.

Important Considerations:

  • Mocking: The use of mocks is crucial for testing the component in isolation and controlling the test environment.
  • Snapshot Testing: Snapshot testing is used to assert the rendered output of the component. This ensures that the component's visual structure and content remain consistent over time.
  • Asynchronous Operations: The tests handle asynchronous operations (like renderer.act) to ensure they complete before assertions are made.
  • DOM Interactions: The tests use methods like findAllByProps, findByType, and children to interact with the component's rendered DOM structure.

Potential Pitfalls:

  • Incomplete Tests: The test suite may need to be expanded to cover all possible scenarios and edge cases of the PipeList component.
  • Mock Data Complexity: As the mocked data becomes more complex, the tests may become harder to maintain and debug.
  • DOM Structure Changes: Changes to the component's HTML structure may break existing tests.