Back to Repositories

Testing DataTable Component Functionality in Apache Airflow

This test suite thoroughly validates the DataTable component in Apache Airflow’s UI, focusing on pagination, loading states, and display modes. The tests ensure proper rendering of both tabular and card-based data presentations while verifying key interactive elements and state management.

Test Coverage Overview

The test suite provides comprehensive coverage of the DataTable component’s core functionality.

Table rendering and data display verification
Pagination controls and state management
Loading state handling with skeletons
Display mode switching between table and card views
Edge cases for pagination boundary conditions

Implementation Analysis

The testing approach utilizes Jest and React Testing Library to validate component behavior.

Tests employ mock data and functions to verify rendering patterns, with particular attention to state management through the onStateChange callback. The implementation leverages Chakra UI components and custom wrapper utilities for consistent testing environment.

Technical Details

Testing Framework: Jest with Vitest
UI Testing: React Testing Library
Component Dependencies: Chakra UI, TanStack Table
Test Utilities: Custom ChakraWrapper for consistent context
Mock Implementations: vi.fn() for state change callbacks

Best Practices Demonstrated

The test suite exemplifies several testing best practices in React component testing.

Isolation of component rendering with proper wrapper context
Comprehensive state verification
Accessibility testing through DOM queries
Clear test case organization and naming
Effective use of mock data and callbacks

apache/airflow

airflow/ui/src/components/DataTable/DataTable.test.tsx

            
/*!
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
import { Text } from "@chakra-ui/react";
import type { ColumnDef, PaginationState } from "@tanstack/react-table";
import "@testing-library/jest-dom";
import { render, screen } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";

import { ChakraWrapper } from "src/utils/ChakraWrapper.tsx";

import { DataTable } from "./DataTable.tsx";
import type { CardDef } from "./types.ts";

const columns: Array<ColumnDef<{ name: string }>> = [
  {
    accessorKey: "name",
    cell: (info) => info.getValue(),
    header: "Name",
  },
];

const data = [{ name: "John Doe" }, { name: "Jane Doe" }];

const pagination: PaginationState = { pageIndex: 0, pageSize: 1 };
const onStateChange = vi.fn();

const cardDef: CardDef<{ name: string }> = {
  card: ({ row }) => <Text>My name is {row.name}.</Text>,
};

describe("DataTable", () => {
  it("renders table with data", () => {
    render(
      <DataTable
        columns={columns}
        data={data}
        initialState={{ pagination, sorting: [] }}
        onStateChange={onStateChange}
        total={2}
      />,
      {
        wrapper: ChakraWrapper,
      },
    );

    expect(screen.getByText("John Doe")).toBeInTheDocument();
    expect(screen.getByText("Jane Doe")).toBeInTheDocument();
  });

  it("disables previous page button on first page", () => {
    render(
      <DataTable
        columns={columns}
        data={data}
        initialState={{ pagination, sorting: [] }}
        onStateChange={onStateChange}
        total={2}
      />,
      {
        wrapper: ChakraWrapper,
      },
    );

    expect(screen.getByTestId("prev")).toBeDisabled();
  });

  it("disables next button when on last page", () => {
    render(
      <DataTable
        columns={columns}
        data={data}
        initialState={{
          pagination: { pageIndex: 0, pageSize: 10 },
          sorting: [],
        }}
        onStateChange={onStateChange}
        total={2}
      />,
      {
        wrapper: ChakraWrapper,
      },
    );

    expect(screen.getByTestId("next")).toBeDisabled();
  });

  it("when isLoading renders skeleton columns", () => {
    render(<DataTable columns={columns} data={data} isLoading />, {
      wrapper: ChakraWrapper,
    });

    expect(screen.getAllByTestId("skeleton")).toHaveLength(10);
  });

  it("still displays table if mode is card but there is no cardDef", () => {
    render(<DataTable columns={columns} data={data} displayMode="card" />, {
      wrapper: ChakraWrapper,
    });

    expect(screen.getByText("Name")).toBeInTheDocument();
  });

  it("displays cards if mode is card and there is cardDef", () => {
    render(
      <DataTable
        cardDef={cardDef}
        columns={columns}
        data={data}
        displayMode="card"
      />,
      {
        wrapper: ChakraWrapper,
      },
    );

    expect(screen.getByText("My name is John Doe.")).toBeInTheDocument();
  });

  it("displays skeleton for loading card list", () => {
    render(
      <DataTable
        cardDef={cardDef}
        columns={columns}
        data={data}
        displayMode="card"
        isLoading
        skeletonCount={5}
      />,
      {
        wrapper: ChakraWrapper,
      },
    );

    expect(screen.getAllByTestId("skeleton")).toHaveLength(5);
  });
});