Back to Repositories

Testing WakaTime Stats Card Rendering in github-readme-stats

This test suite validates the WakaTime stats card rendering functionality in github-readme-stats, ensuring accurate display of coding activity statistics and various customization options. The tests cover essential rendering scenarios, layout options, and localization features.

Test Coverage Overview

The test suite provides comprehensive coverage of the WakaTime card rendering functionality.

Key areas tested include:

Basic card rendering with default settings
Compact layout rendering
Language count limitations
Language hiding functionality
Localization support
Border radius customization
Empty state handling

Implementation Analysis

The testing approach utilizes Jest’s describe/it blocks for organized test structure, combined with DOM querying and snapshot testing. The implementation leverages @testing-library/dom for DOM manipulation and assertions, with particular focus on component rendering validation.

Key patterns include snapshot matching for layout verification, DOM querying for element presence, and attribute testing for styling options.

Technical Details

Testing tools and configuration:

Jest as the primary testing framework
@testing-library/dom for DOM manipulation
@testing-library/jest-dom for extended DOM assertions
Custom test data from fetchWakatime.test.js
Snapshot testing for layout verification
DOM-based assertions for specific element testing

Best Practices Demonstrated

The test suite exemplifies several testing best practices including isolation of test cases, comprehensive edge case coverage, and clear test organization.

Notable practices include:

Separate test cases for different functionality aspects
Consistent use of snapshot testing for layout verification
Explicit testing of customization options
Proper handling of empty states
Internationalization testing

anuraghazra/github-readme-stats

tests/renderWakatimeCard.test.js

            
import { queryByTestId } from "@testing-library/dom";
import "@testing-library/jest-dom";
import { renderWakatimeCard } from "../src/cards/wakatime-card.js";
import { getCardColors } from "../src/common/utils.js";
import { wakaTimeData } from "./fetchWakatime.test.js";
import { expect, it, describe } from "@jest/globals";

describe("Test Render WakaTime Card", () => {
  it("should render correctly", () => {
    // const card = renderWakatimeCard(wakaTimeData.data);
    expect(getCardColors).toMatchSnapshot();
  });

  it("should render correctly with compact layout", () => {
    const card = renderWakatimeCard(wakaTimeData.data, { layout: "compact" });

    expect(card).toMatchSnapshot();
  });

  it("should render correctly with compact layout when langs_count is set", () => {
    const card = renderWakatimeCard(wakaTimeData.data, {
      layout: "compact",
      langs_count: 2,
    });

    expect(card).toMatchSnapshot();
  });

  it("should hide languages when hide is passed", () => {
    document.body.innerHTML = renderWakatimeCard(wakaTimeData.data, {
      hide: ["YAML", "Other"],
    });

    expect(queryByTestId(document.body, /YAML/i)).toBeNull();
    expect(queryByTestId(document.body, /Other/i)).toBeNull();
    expect(queryByTestId(document.body, /TypeScript/i)).not.toBeNull();
  });

  it("should render translations", () => {
    document.body.innerHTML = renderWakatimeCard({}, { locale: "cn" });
    expect(document.getElementsByClassName("header")[0].textContent).toBe(
      "WakaTime 周统计",
    );
    expect(
      document.querySelector('g[transform="translate(0, 0)"]>text.stat.bold')
        .textContent,
    ).toBe("WakaTime 用户个人资料未公开");
  });

  it("should render without rounding", () => {
    document.body.innerHTML = renderWakatimeCard(wakaTimeData.data, {
      border_radius: "0",
    });
    expect(document.querySelector("rect")).toHaveAttribute("rx", "0");
    document.body.innerHTML = renderWakatimeCard(wakaTimeData.data, {});
    expect(document.querySelector("rect")).toHaveAttribute("rx", "4.5");
  });

  it('should show "no coding activity this week" message when there has not been activity', () => {
    document.body.innerHTML = renderWakatimeCard(
      {
        ...wakaTimeData.data,
        languages: undefined,
      },
      {},
    );
    expect(document.querySelector(".stat").textContent).toBe(
      "No coding activity this week",
    );
  });

  it('should show "no coding activity this week" message when using compact layout and there has not been activity', () => {
    document.body.innerHTML = renderWakatimeCard(
      {
        ...wakaTimeData.data,
        languages: undefined,
      },
      {
        layout: "compact",
      },
    );
    expect(document.querySelector(".stat").textContent).toBe(
      "No coding activity this week",
    );
  });
});