Skip to main content

Project List Component

Overview​

This test suite verifies the UI of the ProjectList component.

Test Cases​

Test: Renders grid layout correctly​

  • Description: Verifies the layout of grid when grid button is clicked.
  • Setup: useProjectQuery hook is mocked and The ProjectList component is rendered.
  • Expectation: Users should be able to click the grid button and see the grid layout of items/skeletons.
    • Assertion : Grid layout(grid-view) is present in the rendered component.

Test: Renders grid item correctly​

  • Description: Verifies the grid item exists when grid layout is chosen.
  • Setup: useProjectQuery hook is mocked and The ProjectList component is rendered.
  • Expectation: Users should be able to see the project items in grid layout.
    • Assertion : Every grid items(grid-card-${project.id}) are present in the rendered component.

Test: Renders grid skeleton correctly​

  • Description: Verifies the skeleton for grid layout exists.
  • Setup: useProjectQuery hook is mocked with isLoading = True and the ProjectList component is rendered.
  • Expectation: Users should be able to see the skeletons in grid layout.
    • Assertion : Grid skeletons(project-grid-skeleton) are present in the rendered component.

Test: Renders list layout correctly​

  • Description: Verifies the layout of list when list button is clicked.
  • Setup: useProjectQuery hook is mocked and The ProjectList component is rendered.
  • Expectation: Users should be able to click the list button and see the list layout of items/skeletons.
    • Assertion : List layout(list-view) is present in the rendered component.

Test: Renders list item correctly​

  • Description: Verifies the list item exists when list layout is chosen.
  • Setup: useProjectQuery hook is mocked and The ProjectList component is rendered.
  • Expectation: Users should be able to see the project items in list layout.
    • Assertion : Every list items(list-${project.id}) are present in the rendered component.

Test: Renders list skeleton correctly​

  • Description: Verifies the skeleton for list layout exists.
  • Setup: useProjectQuery hook is mocked with isLoading = True and the ProjectList component is rendered.
  • Expectation: Users should be able to see the skeletons in list layout.
    • Assertion : List skeletons(project-list-skeleton) are present in the rendered component.

Test: Open project form modal when clicking add project​

  • Description: Verifies that project form modal is opened when clicking add project button.
  • Setup: useProjectQuery hook is mocked and the ProjectList component is rendered.
  • Expectation: Users should be able to see a project form modal popup after clicking the add project button.
    • Assertion : Project Form Modal(project-form-modal) is present in the rendered component.