Nikolay Tatarinov
8bf92bd4a1
- Revised comments in DayIndicators component and test files to better describe the functionality of colored segments and rounding behavior. - Updated test descriptions to reflect changes in rendering logic for single and multiple segments. - Adjusted class names in the component and tests to ensure correct application of rounded styles based on segment positions.
72 lines
2.3 KiB
TypeScript
72 lines
2.3 KiB
TypeScript
/**
|
|
* Unit tests for DayIndicators: rounding is position-based (first / last segment),
|
|
* not by indicator type, so one or multiple segments form one pill.
|
|
*/
|
|
|
|
import { describe, it, expect } from "vitest";
|
|
import { render } from "@testing-library/react";
|
|
import { DayIndicators } from "./DayIndicators";
|
|
|
|
const baseProps = {
|
|
dutyCount: 0,
|
|
unavailableCount: 0,
|
|
vacationCount: 0,
|
|
hasEvents: false,
|
|
};
|
|
|
|
describe("DayIndicators", () => {
|
|
it("renders nothing when no indicators", () => {
|
|
const { container } = render(<DayIndicators {...baseProps} />);
|
|
expect(container.firstChild).toBeNull();
|
|
});
|
|
|
|
it("renders one segment as pill (e.g. vacation only)", () => {
|
|
const { container } = render(
|
|
<DayIndicators {...baseProps} vacationCount={1} />
|
|
);
|
|
const wrapper = container.querySelector("[aria-hidden]");
|
|
expect(wrapper).toBeInTheDocument();
|
|
expect(wrapper?.className).toContain("[&>:first-child]:rounded-l-[3px]");
|
|
expect(wrapper?.className).toContain("[&>:last-child]:rounded-r-[3px]");
|
|
const spans = wrapper?.querySelectorAll("span");
|
|
expect(spans).toHaveLength(1);
|
|
});
|
|
|
|
it("renders two segments with positional rounding (duty + vacation)", () => {
|
|
const { container } = render(
|
|
<DayIndicators {...baseProps} dutyCount={1} vacationCount={1} />
|
|
);
|
|
const wrapper = container.querySelector("[aria-hidden]");
|
|
expect(wrapper).toBeInTheDocument();
|
|
expect(wrapper?.className).toContain(
|
|
"[&>:first-child]:rounded-l-[3px]"
|
|
);
|
|
expect(wrapper?.className).toContain(
|
|
"[&>:last-child]:rounded-r-[3px]"
|
|
);
|
|
const spans = wrapper?.querySelectorAll("span");
|
|
expect(spans).toHaveLength(2);
|
|
});
|
|
|
|
it("renders three segments with first left-rounded, last right-rounded (duty + unavailable + vacation)", () => {
|
|
const { container } = render(
|
|
<DayIndicators
|
|
{...baseProps}
|
|
dutyCount={1}
|
|
unavailableCount={1}
|
|
vacationCount={1}
|
|
/>
|
|
);
|
|
const wrapper = container.querySelector("[aria-hidden]");
|
|
expect(wrapper).toBeInTheDocument();
|
|
expect(wrapper?.className).toContain(
|
|
"[&>:first-child]:rounded-l-[3px]"
|
|
);
|
|
expect(wrapper?.className).toContain(
|
|
"[&>:last-child]:rounded-r-[3px]"
|
|
);
|
|
const spans = wrapper?.querySelectorAll("span");
|
|
expect(spans).toHaveLength(3);
|
|
});
|
|
});
|