Back to Repositories

Testing SVG FlexLayout Implementation in github-readme-stats

This test suite validates the flexLayout utility function in github-readme-stats, which handles SVG element positioning in both row and column layouts with configurable gaps and sizes. The tests ensure proper transformation calculations and element positioning.

Test Coverage Overview

The test suite provides comprehensive coverage of the flexLayout utility function’s core capabilities.

Key areas tested include:

Row-based layouts with gap spacing
Column-based layouts with vertical spacing
Custom size configurations for elements
Transform attribute generation for SVG elements

Implementation Analysis

The testing approach utilizes Jest’s describe/it blocks for organized test structure. The implementation focuses on validating SVG transform attributes and element positioning logic.

Key patterns include:

Declarative test cases with explicit input/output pairs
Use of toStrictEqual for precise assertion matching
Isolated test cases for different layout configurations

Technical Details

Testing infrastructure includes:

Jest testing framework
ES6 module imports
SVG string manipulation
Transform coordinate validation

Configuration highlights:

Jest globals for test functions
Modular test organization
Direct utility function testing

Best Practices Demonstrated

The test suite exemplifies several testing best practices for layout utility functions.

Notable practices include:

Clear test case separation
Comprehensive edge case coverage
Explicit expected values
Focused test scenarios
Maintainable test structure

anuraghazra/github-readme-stats

tests/flexLayout.test.js

            
import { flexLayout } from "../src/common/utils.js";
import { expect, it, describe } from "@jest/globals";

describe("flexLayout", () => {
  it("should work with row & col layouts", () => {
    const layout = flexLayout({
      items: ["<text>1</text>", "<text>2</text>"],
      gap: 60,
    });

    expect(layout).toStrictEqual([
      `<g transform="translate(0, 0)"><text>1</text></g>`,
      `<g transform="translate(60, 0)"><text>2</text></g>`,
    ]);

    const columns = flexLayout({
      items: ["<text>1</text>", "<text>2</text>"],
      gap: 60,
      direction: "column",
    });

    expect(columns).toStrictEqual([
      `<g transform="translate(0, 0)"><text>1</text></g>`,
      `<g transform="translate(0, 60)"><text>2</text></g>`,
    ]);
  });

  it("should work with sizes", () => {
    const layout = flexLayout({
      items: [
        "<text>1</text>",
        "<text>2</text>",
        "<text>3</text>",
        "<text>4</text>",
      ],
      gap: 20,
      sizes: [200, 100, 55, 25],
    });

    expect(layout).toStrictEqual([
      `<g transform="translate(0, 0)"><text>1</text></g>`,
      `<g transform="translate(220, 0)"><text>2</text></g>`,
      `<g transform="translate(340, 0)"><text>3</text></g>`,
      `<g transform="translate(415, 0)"><text>4</text></g>`,
    ]);
  });
});