Back to Repositories

Testing Time Component Timezone Management in Apache Airflow

This test suite validates the Time component and TimezoneProvider functionality in Apache Airflow’s web interface. It ensures proper handling of timezone conversions and date formatting across different user contexts. The tests verify both static time display and dynamic timezone updates.

Test Coverage Overview

The test suite provides comprehensive coverage of the Time component’s core functionality:

UTC time display validation
Custom timezone rendering
Dynamic timezone change handling
Title attribute management for timezone information

Implementation Analysis

The testing approach utilizes React Testing Library for component interaction and assertion verification. It implements moment.js timezone manipulation and custom event handling to simulate real-world usage scenarios. The tests demonstrate proper integration with Airflow’s timezone management system.

Technical Details

Testing Framework: Jest with React Testing Library
Key Dependencies: moment.js for timezone handling
Custom Utilities: TimezoneEvent, defaultFormatWithTZ
Test Environment: Custom Wrapper component for context provision

Best Practices Demonstrated

The test suite exemplifies several testing best practices:

Isolated component testing
Event handling verification
State change validation
Proper cleanup and setup between tests
Clear test case organization

apache/airflow

airflow/www/static/js/components/Time.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.
 */

/* global moment, describe, test, expect, document, CustomEvent */

import React from "react";
import { render, fireEvent, act } from "@testing-library/react";
import { defaultFormatWithTZ, TimezoneEvent } from "src/datetime_utils";
import { Wrapper } from "src/utils/testUtils";

import Time from "./Time";

describe("Test Time and TimezoneProvider", () => {
  test("Displays a UTC time correctly", () => {
    const now = new Date();
    const { getByText } = render(<Time dateTime={now.toISOString()} />, {
      wrapper: Wrapper,
    });

    // @ts-ignore
    const utcTime = getByText(moment.utc(now).format(defaultFormatWithTZ));
    expect(utcTime).toBeDefined();
    expect(utcTime.title).toBeFalsy();
  });

  test("Displays moment default tz, includes UTC date in title", () => {
    const now = new Date();
    const tz = "US/Samoa";
    // @ts-ignore
    moment.tz.setDefault(tz);

    const { getByText } = render(<Time dateTime={now.toISOString()} />, {
      wrapper: Wrapper,
    });

    // @ts-ignore
    const samoaTime = getByText(moment(now).tz(tz).format(defaultFormatWithTZ));
    expect(samoaTime).toBeDefined();
    expect(samoaTime.title).toEqual(
      // @ts-ignore
      moment.utc(now).format(defaultFormatWithTZ)
    );
  });

  test("Updates based on timezone change", async () => {
    const now = new Date();
    const { getByText, queryByText } = render(
      <Time dateTime={now.toISOString()} />,
      { wrapper: Wrapper }
    );

    // @ts-ignore
    const utcTime = queryByText(moment.utc(now).format(defaultFormatWithTZ));
    expect(utcTime).toBeDefined();

    // Fire a custom timezone change event
    const event = new CustomEvent(TimezoneEvent, {
      detail: "EST",
    });
    await act(async () => {
      fireEvent(document, event);
    });

    expect(utcTime).toBeNull();
    const estTime = getByText(
      // @ts-ignore
      moment(now).tz("EST").format(defaultFormatWithTZ)
    );
    expect(estTime).toBeDefined();
    // @ts-ignore
    expect(estTime.title).toEqual(moment.utc(now).format(defaultFormatWithTZ));
  });
});