import { render } from "@testing-library/react";
import { axe } from "vitest-axe";
import { Image } from "../";
/**
* Conformance testy pre Image komponentu
*
* Testy pokrývajú:
*
* **Individuálne test cases (9 scenárov):**
* • Jednoduchý obrázok s string src a zmysluplným alt textom
* • Dekoratívny obrázok s prázdnym alt atribútom
* • Responzívny obrázok so všetkými breakpointmi (xxxl až xs)
* • Responzívny obrázok s čiastočnými breakpointmi (xl, lg)
* • Responzívny obrázok s len default breakpointom
* • Obrázok s vlastnou CSS triedou
* • Obrázok s dodatočnými atribútmi (data-testid, id, loading)
* • Responzívny obrázok s vlastnými breakpoint kľúčmi
* • Responzívny obrázok s prázdnym objektom
*
* **Viacero obrázkov spolu:**
* • HTML validácia pre kombináciu všetkých scenárov
* • Accessibility test pre kombináciu všetkých scenárov
* • Overenie správneho počtu vyrenderovaných obrázkov
*
* **Accessibility specific testy:**
* • Obrázky so zmysluplným alt textom sú accessible
* • Dekoratívne obrázky s prázdnym alt sú accessible
* • Responzívne obrázky zachovávajú accessibility
*
* **HTML validácia specific testy:**
* • Jednoduchý img element je validný HTML
* • Picture element so source elementmi je validný HTML
* • Picture element s viacerými source elementmi je validný HTML
*
* **Každý test case sa testuje na:**
* • HTML validitu (toHTMLValidate)
* • Accessibility (axe)
* • Bezchybné renderovanie (bez exceptions)
*/
// Test cases covering different scenarios
const testCases = [
// Simple string src
{
name: "simple image with string src",
component: (
),
},
{
name: "decorative image with empty alt",
component: ,
},
// Responsive images with different breakpoint combinations
{
name: "responsive image with all breakpoints",
component: (
),
},
{
name: "responsive image with partial breakpoints",
component: (
),
},
{
name: "responsive image with only default",
component: (
),
},
// Images with additional props
{
name: "image with custom className",
component: (
),
},
{
name: "image with additional attributes",
component: (
),
},
// Edge cases
{
name: "responsive image with custom breakpoint keys",
component: (
),
},
];
// Combined test case for multiple images
const multipleImagesExample = (
<>
{testCases.map((testCase, index) => (
{testCase.component}
))}
);
describe("Image Component Conformance Tests", () => {
describe("Individual test cases", () => {
testCases.forEach((testCase) => {
it(`${testCase.name} is valid HTML`, () => {
const { container } = render(testCase.component);
expect(container).toHTMLValidate();
});
it(`${testCase.name} is accessible`, async () => {
const { container } = render(testCase.component);
const results = await axe(container);
expect(results).toHaveNoViolations();
});
it(`${testCase.name} renders without errors`, () => {
expect(() => render(testCase.component)).not.toThrow();
});
});
});
describe("Multiple images together", () => {
it("all images together are valid HTML", () => {
const { container } = render(multipleImagesExample);
expect(container).toHTMLValidate();
});
it("all images together are accessible", async () => {
const { container } = render(multipleImagesExample);
const results = await axe(container);
expect(results).toHaveNoViolations();
});
it("renders correct number of images", () => {
const { container } = render(multipleImagesExample);
const images = container.querySelectorAll("img");
// Každý test case má img element (buď priamo alebo v picture elemente)
expect(images.length).toBe(testCases.length);
});
});
describe("Accessibility specific tests", () => {
it("images with meaningful alt text are accessible", async () => {
const { container } = render(
,
);
const results = await axe(container);
expect(results).toHaveNoViolations();
});
it("decorative images with empty alt are accessible", async () => {
const { container } = render(
,
);
const results = await axe(container);
expect(results).toHaveNoViolations();
});
it("responsive images maintain accessibility", async () => {
const { container } = render(
,
);
const results = await axe(container);
expect(results).toHaveNoViolations();
});
});
describe("HTML validation specific tests", () => {
it("simple img element is valid HTML", () => {
const { container } = render(
,
);
expect(container).toHTMLValidate();
});
it("picture element with sources is valid HTML", () => {
const { container } = render(
,
);
expect(container).toHTMLValidate();
});
it("picture element with multiple sources is valid HTML", () => {
const { container } = render(
,
);
expect(container).toHTMLValidate();
});
});
});