adilallo
99 lines
3.6 KiB
React
99 lines
3.6 KiB
React
import React from "react";
|
|
import { render, screen, fireEvent } from "@testing-library/react";
|
|
import { describe, it, expect, vi } from "vitest";
|
|
import { axe, toHaveNoViolations } from "jest-axe";
|
|
import Switch from "../../app/components/Switch";
|
|
|
|
expect.extend(toHaveNoViolations);
|
|
|
|
describe("Switch Accessibility", () => {
|
|
it("has proper ARIA attributes", () => {
|
|
render(<Switch checked={false} label="Test Switch" />);
|
|
const switchButton = screen.getByRole("switch");
|
|
|
|
expect(switchButton).toHaveAttribute("role", "switch");
|
|
expect(switchButton).toHaveAttribute("aria-checked", "false");
|
|
expect(switchButton).toHaveAttribute("aria-label", "Test Switch");
|
|
});
|
|
|
|
it("has proper ARIA attributes when checked", () => {
|
|
render(<Switch checked={true} label="Test Switch" />);
|
|
const switchButton = screen.getByRole("switch");
|
|
|
|
expect(switchButton).toHaveAttribute("aria-checked", "true");
|
|
});
|
|
|
|
it("has proper ARIA attributes when focused", () => {
|
|
render(<Switch state="focus" label="Test Switch" />);
|
|
const switchButton = screen.getByRole("switch");
|
|
|
|
expect(switchButton).toHaveAttribute("aria-checked", "false");
|
|
expect(switchButton).toHaveClass("shadow-[0_0_5px_3px_#3281F8]");
|
|
expect(switchButton).toHaveClass("rounded-full");
|
|
expect(switchButton).toHaveAttribute("aria-label", "Test Switch");
|
|
});
|
|
|
|
it("handles keyboard navigation", () => {
|
|
const handleChange = vi.fn();
|
|
render(<Switch onChange={handleChange} label="Test Switch" />);
|
|
const switchButton = screen.getByRole("switch");
|
|
|
|
// Test Enter key
|
|
fireEvent.keyDown(switchButton, { key: "Enter" });
|
|
expect(handleChange).toHaveBeenCalledTimes(1);
|
|
|
|
// Test Space key
|
|
fireEvent.keyDown(switchButton, { key: " " });
|
|
expect(handleChange).toHaveBeenCalledTimes(2);
|
|
});
|
|
|
|
it("handles focus state accessibility", () => {
|
|
const handleFocus = vi.fn();
|
|
render(<Switch onFocus={handleFocus} label="Test Switch" />);
|
|
const switchButton = screen.getByRole("switch");
|
|
|
|
fireEvent.focus(switchButton);
|
|
expect(handleFocus).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
it("handles checked state accessibility", () => {
|
|
const { rerender } = render(<Switch checked={false} label="Test Switch" />);
|
|
let switchButton = screen.getByRole("switch");
|
|
expect(switchButton).toHaveAttribute("aria-checked", "false");
|
|
|
|
rerender(<Switch checked={true} label="Test Switch" />);
|
|
switchButton = screen.getByRole("switch");
|
|
expect(switchButton).toHaveAttribute("aria-checked", "true");
|
|
});
|
|
|
|
it("has no accessibility violations", async () => {
|
|
const { container } = render(<Switch label="Test Switch" />);
|
|
const results = await axe(container);
|
|
expect(results).toHaveNoViolations();
|
|
});
|
|
|
|
it("has no accessibility violations when checked", async () => {
|
|
const { container } = render(<Switch checked={true} label="Test Switch" />);
|
|
const results = await axe(container);
|
|
expect(results).toHaveNoViolations();
|
|
});
|
|
|
|
it("has no accessibility violations when focused", async () => {
|
|
const { container } = render(<Switch state="focus" label="Test Switch" />);
|
|
const results = await axe(container);
|
|
expect(results).toHaveNoViolations();
|
|
});
|
|
|
|
it("has no accessibility violations with text", async () => {
|
|
const { container } = render(<Switch label="Enable notifications" />);
|
|
const results = await axe(container);
|
|
expect(results).toHaveNoViolations();
|
|
});
|
|
|
|
it("has no accessibility violations without text", async () => {
|
|
const { container } = render(<Switch />);
|
|
const results = await axe(container);
|
|
expect(results).toHaveNoViolations();
|
|
});
|
|
});
|