react-brackets-vt/dist/tests/index.test.js

React component to render dynamic bracket UI

import '@testing-library/jest-dom';
import React from 'react';
import { SingleElimination as Bracket } from '../brackets';
import { render } from '@testing-library/react';
test('Works with empty rounds', () => {
    const rounds = [];
    const { container } = render(React.createElement(Bracket, { rounds: rounds }));
    expect(container).toBeInTheDocument();
});
test('Works with multiple rounds', () => {
    const filledRounds = [
        {
            title: 'Round 1',
            seeds: [
                {
                    id: 1,
                    teams: [{ name: 'Team 1' }, { name: 'Team 2' }],
                },
                {
                    id: 2,
                    teams: [{ name: 'Team 3' }, { name: 'Team 4' }],
                },
            ],
        },
        {
            title: 'Round 2',
            seeds: [
                {
                    id: 3,
                    teams: [{ name: 'Team 1' }, { name: 'Team 4' }],
                },
            ],
        },
    ];
    const { getByText } = render(React.createElement(Bracket, { rounds: filledRounds }));
    expect(getByText('Round 1')).toBeInTheDocument();
    expect(getByText('Round 2')).toBeInTheDocument();
});
test('Works with custom seed', () => {
    const filledRounds = [
        {
            title: 'Round 1',
            seeds: [
                {
                    id: 1,
                    teams: [{ name: 'Team 1' }, { name: 'Team 2' }],
                },
                {
                    id: 2,
                    teams: [{ name: 'Team 3' }, { name: 'Team 4' }],
                },
            ],
        },
        {
            title: 'Round 2',
            seeds: [
                {
                    id: 3,
                    teams: [{ name: 'Team 1' }, { name: 'Team 4' }],
                },
            ],
        },
    ];
    const RenderSeed = ({ seed }) => {
        var _a, _b, _c, _d;
        return (React.createElement("div", null,
            React.createElement("div", null, (_b = (_a = seed.teams) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.name),
            React.createElement("span", null, "VS"),
            React.createElement("div", null, (_d = (_c = seed.teams) === null || _c === void 0 ? void 0 : _c[1]) === null || _d === void 0 ? void 0 : _d.name)));
    };
    const { getAllByText, getByText } = render(React.createElement(Bracket, { rounds: filledRounds, renderSeedComponent: RenderSeed }));
    expect(getAllByText('VS')[0]).toBeInTheDocument();
    // checking that Team 1 was rendered twice
    expect(getAllByText('Team 1').length).toBe(2);
    expect(getByText('Team 2')).toBeInTheDocument();
});