@orangesk/orange-design-system 2.0.0-alpha.1 → 2.0.0-alpha.3

package/src/components/Grid/tests/Grid.unit.test.js

@@ -0,0 +1,572 @@
+/**
+ * Grid component unit tests
+ *
+ * This test suite verifies the rendering, props, and className logic of the Grid component.
+ * It checks default rendering, children rendering, alignment, gap props, and className merging.
+ * Also includes complex scenarios with multiple GridCol components and various size combinations.
+ * Tests both React component usage and equivalent HTML structure generation.
+ */
+
+import React from "react";
+import { render } from "@testing-library/react";
+import { Grid } from "../Grid";
+import { GridCol } from "../GridCol";
+
+const alignment = {
+  vertical: ["stretch", "start", "end", "center"],
+  horizontal: ["end", "center", "space-around", "space-between"],
+};
+
+describe("Grid", () => {
+  it("renders with default class grid", () => {
+    const { getByTestId } = render(<Grid data-testid="test-id" />);
+    expect(getByTestId("test-id")).toHaveClass("grid");
+  });
+
+  it("renders children", () => {
+    const { getByText } = render(<Grid>test</Grid>);
+    expect(getByText("test")).toBeInTheDocument();
+  });
+
+  alignment.horizontal.forEach((hAlign) => {
+    it(`applies justify-content-${hAlign} class when hAlign is ${hAlign}`, () => {
+      const { getByTestId } = render(
+        <Grid data-testid="test-id" hAlign={hAlign} />,
+      );
+      expect(getByTestId("test-id")).toHaveClass(`justify-content-${hAlign}`);
+    });
+  });
+
+  alignment.vertical.forEach((vAlign) => {
+    it(`applies align-items-${vAlign} class when vAlign is ${vAlign}`, () => {
+      const { getByTestId } = render(
+        <Grid data-testid="test-id" vAlign={vAlign} />,
+      );
+      expect(getByTestId("test-id")).toHaveClass(`align-items-${vAlign}`);
+    });
+  });
+
+  it("applies grid--justify-height class when justifyHeight is true", () => {
+    const { getByTestId } = render(
+      <Grid data-testid="test-id" justifyHeight={true} />,
+    );
+    expect(getByTestId("test-id")).toHaveClass("grid--justify-height");
+  });
+
+  ["medium", "large", "xlarge"].forEach((rowGapSize) => {
+    it(`applies grid-row-gap--${rowGapSize} class when rowGapSize is ${rowGapSize}`, () => {
+      const { getByTestId } = render(
+        <Grid data-testid="test-id" rowGapSize={rowGapSize} />,
+      );
+      expect(getByTestId("test-id")).toHaveClass(`grid-row-gap--${rowGapSize}`);
+    });
+  });
+
+  it("merges additional className", () => {
+    const { getByTestId } = render(
+      <Grid data-testid="test-id" className="test-class" />,
+    );
+    expect(getByTestId("test-id")).toHaveClass("test-class");
+  });
+
+  it("spreads additional props to the rendered element", () => {
+    const { getByTestId } = render(
+      <Grid data-testid="test-id" id="my-grid" data-extra="foo" />,
+    );
+    const el = getByTestId("test-id");
+    expect(el).toHaveAttribute("id", "my-grid");
+    expect(el).toHaveAttribute("data-extra", "foo");
+  });
+});
+
+describe("Grid with GridCol combinations", () => {
+  it("renders default GridCol with 12-column layout", () => {
+    const { container } = render(
+      <Grid>
+        <GridCol>default 12</GridCol>
+        <GridCol size={6}>6</GridCol>
+      </Grid>,
+    );
+
+    const grid = container.querySelector(".grid");
+    expect(grid).toBeTruthy();
+    const cols = grid ? grid.querySelectorAll(":scope > .grid__col") : [];
+
+    expect(cols).toHaveLength(2);
+    expect(cols[0]).toHaveClass("grid__col");
+    expect(cols[1]).toHaveClass("grid__col", "grid__col--6");
+  });
+
+  it("renders auto-sized GridCol with fixed columns", () => {
+    const { container } = render(
+      <Grid>
+        <GridCol size="auto">auto</GridCol>
+        <GridCol size={4}>4</GridCol>
+        <GridCol size={6}>6</GridCol>
+      </Grid>,
+    );
+
+    const grid = container.querySelector(".grid");
+    expect(grid).toBeTruthy();
+    const cols = grid ? grid.querySelectorAll(":scope > .grid__col") : [];
+    expect(cols[0]).toHaveClass("grid__col", "grid__col--auto");
+    expect(cols[1]).toHaveClass("grid__col", "grid__col--4");
+    expect(cols[2]).toHaveClass("grid__col", "grid__col--6");
+  });
+
+  it("renders fill-sized GridCol with fixed columns", () => {
+    const { container } = render(
+      <Grid>
+        <GridCol size="fill">fill</GridCol>
+        <GridCol size={4}>4</GridCol>
+        <GridCol size={6}>6</GridCol>
+      </Grid>,
+    );
+
+    const grid = container.querySelector(".grid");
+    expect(grid).toBeTruthy();
+    const cols = grid ? grid.querySelectorAll(":scope > .grid__col") : [];
+    expect(cols[0]).toHaveClass("grid__col", "grid__col--fill");
+    expect(cols[1]).toHaveClass("grid__col", "grid__col--4");
+    expect(cols[2]).toHaveClass("grid__col", "grid__col--6");
+  });
+
+  it("renders shrink-sized GridCol with fixed column", () => {
+    const { container } = render(
+      <Grid>
+        <GridCol size="shrink">shrink</GridCol>
+        <GridCol size={6}>6</GridCol>
+      </Grid>,
+    );
+
+    const grid = container.querySelector(".grid");
+    expect(grid).toBeTruthy();
+    const cols = grid ? grid.querySelectorAll(":scope > .grid__col") : [];
+    expect(cols[0]).toHaveClass("grid__col", "grid__col--shrink");
+    expect(cols[1]).toHaveClass("grid__col", "grid__col--6");
+  });
+
+  it("renders complex layout with mixed sizes and alignment", () => {
+    const { container } = render(
+      <Grid hAlign="center" vAlign="stretch">
+        <GridCol size={3} align="top">
+          top aligned
+        </GridCol>
+        <GridCol size="auto" align="middle">
+          auto middle
+        </GridCol>
+        <GridCol size="fill" align="bottom">
+          fill bottom
+        </GridCol>
+        <GridCol size={2} align="stretch">
+          stretch
+        </GridCol>
+      </Grid>,
+    );
+
+    const grid = container.querySelector(".grid");
+    expect(grid).toBeTruthy();
+    const cols = grid ? grid.querySelectorAll(":scope > .grid__col") : [];
+
+    expect(grid).toHaveClass("justify-content-center", "align-items-stretch");
+    expect(cols[0]).toHaveClass("grid__col", "grid__col--3", "align-self-top");
+    expect(cols[1]).toHaveClass(
+      "grid__col",
+      "grid__col--auto",
+      "align-self-middle",
+    );
+    expect(cols[2]).toHaveClass(
+      "grid__col",
+      "grid__col--fill",
+      "align-self-bottom",
+    );
+    expect(cols[3]).toHaveClass(
+      "grid__col",
+      "grid__col--2",
+      "align-self-stretch",
+    );
+  });
+
+  it("renders responsive grid with custom tags", () => {
+    const { container } = render(
+      <Grid tag="section" justifyHeight>
+        <GridCol tag="article" size={8}>
+          main content
+        </GridCol>
+        <GridCol tag="aside" size={4}>
+          sidebar
+        </GridCol>
+      </Grid>,
+    );
+
+    const section = container.querySelector("section");
+    const article = container.querySelector("article");
+    const aside = container.querySelector("aside");
+
+    expect(section).toHaveClass("grid", "grid--justify-height");
+    expect(article).toHaveClass("grid__col", "grid__col--8");
+    expect(aside).toHaveClass("grid__col", "grid__col--4");
+  });
+
+  it("renders nested grid structure", () => {
+    const { container } = render(
+      <Grid>
+        <GridCol size={6}>
+          <Grid>
+            <GridCol size={4}>nested 4</GridCol>
+            <GridCol size={8}>nested 8</GridCol>
+          </Grid>
+        </GridCol>
+        <GridCol size={6}>outer 6</GridCol>
+      </Grid>,
+    );
+
+    const outerGrid = container.querySelector(".grid");
+    const outerCols = outerGrid?.querySelectorAll(":scope > .grid__col");
+    const nestedGrid = outerCols?.[0]?.querySelector(".grid");
+    const nestedCols = nestedGrid?.querySelectorAll(":scope > .grid__col");
+
+    // Filter out nested columns to get only direct children
+    const directOuterCols = Array.from(outerCols || []).filter(
+      (col) => col.parentElement === outerGrid,
+    );
+
+    expect(directOuterCols).toHaveLength(2);
+    expect(directOuterCols[0]).toHaveClass("grid__col", "grid__col--6");
+    expect(directOuterCols[1]).toHaveClass("grid__col", "grid__col--6");
+    expect(nestedCols).toHaveLength(2);
+    expect(nestedCols?.[0]).toHaveClass("grid__col", "grid__col--4");
+    expect(nestedCols?.[1]).toHaveClass("grid__col", "grid__col--8");
+  });
+
+  it("renders grid with all size variations", () => {
+    const { container } = render(
+      <Grid>
+        <GridCol size={1}>1</GridCol>
+        <GridCol size={2}>2</GridCol>
+        <GridCol size={3}>3</GridCol>
+        <GridCol size={4}>4</GridCol>
+        <GridCol size={5}>5</GridCol>
+        <GridCol size={6}>6</GridCol>
+        <GridCol size={7}>7</GridCol>
+        <GridCol size={8}>8</GridCol>
+        <GridCol size={9}>9</GridCol>
+        <GridCol size={10}>10</GridCol>
+        <GridCol size={11}>11</GridCol>
+        <GridCol size={12}>12</GridCol>
+      </Grid>,
+    );
+
+    const grid = container.querySelector(".grid");
+    expect(grid).toBeTruthy();
+    const cols = grid ? grid.querySelectorAll(":scope > .grid__col") : [];
+    expect(cols).toHaveLength(12);
+
+    for (let i = 0; i < 12; i++) {
+      expect(cols[i]).toHaveClass("grid__col", `grid__col--${i + 1}`);
+    }
+  });
+
+  it("renders grid with gap and custom styling", () => {
+    const { container } = render(
+      <Grid rowGapSize="large" columnGapSize="none" className="custom-grid">
+        <GridCol size="auto" className="custom-col">
+          auto
+        </GridCol>
+        <GridCol size="fill" className="custom-col">
+          fill
+        </GridCol>
+        <GridCol size="shrink" className="custom-col">
+          shrink
+        </GridCol>
+      </Grid>,
+    );
+
+    const grid = container.querySelector(".grid");
+    expect(grid).toBeTruthy();
+    const cols = grid ? grid.querySelectorAll(":scope > .grid__col") : [];
+
+    expect(grid).toHaveClass(
+      "grid-row-gap--large",
+      "grid--column-gap-none",
+      "custom-grid",
+    );
+    expect(cols[0]).toHaveClass("grid__col", "grid__col--auto", "custom-col");
+    expect(cols[1]).toHaveClass("grid__col", "grid__col--fill", "custom-col");
+    expect(cols[2]).toHaveClass("grid__col", "grid__col--shrink", "custom-col");
+  });
+});
+
+describe("Grid and GridCol - Real-world scenarios", () => {
+  it("renders scenario 1: default 12 + size 6", () => {
+    const { container } = render(
+      <Grid>
+        <GridCol>
+          <code>(default) 12</code>
+        </GridCol>
+        <GridCol size={6}>
+          <code>6</code>
+        </GridCol>
+      </Grid>,
+    );
+
+    const grid = container.querySelector(".grid");
+    expect(grid).toBeTruthy();
+    const cols = grid ? grid.querySelectorAll(":scope > .grid__col") : [];
+    const codes = container.querySelectorAll("code");
+
+    expect(cols).toHaveLength(2);
+    expect(cols[0]).toHaveClass("grid__col");
+    expect(cols[1]).toHaveClass("grid__col", "grid__col--6");
+    expect(codes[0]).toHaveTextContent("(default) 12");
+    expect(codes[1]).toHaveTextContent("6");
+  });
+
+  it("renders scenario 2: auto + 4 + 6", () => {
+    const { container } = render(
+      <Grid>
+        <GridCol size="auto">
+          <code>auto</code>
+        </GridCol>
+        <GridCol size={4}>
+          <code>5</code>
+        </GridCol>
+        <GridCol size={6}>
+          <code>6</code>
+        </GridCol>
+      </Grid>,
+    );
+
+    const grid = container.querySelector(".grid");
+    expect(grid).toBeTruthy();
+    const cols = grid ? grid.querySelectorAll(":scope > .grid__col") : [];
+    const codes = container.querySelectorAll("code");
+
+    expect(cols[0]).toHaveClass("grid__col", "grid__col--auto");
+    expect(cols[1]).toHaveClass("grid__col", "grid__col--4");
+    expect(cols[2]).toHaveClass("grid__col", "grid__col--6");
+    expect(codes[0]).toHaveTextContent("auto");
+    expect(codes[1]).toHaveTextContent("5");
+    expect(codes[2]).toHaveTextContent("6");
+  });
+
+  it("renders scenario 3: fill + 4 + 6", () => {
+    const { container } = render(
+      <Grid>
+        <GridCol size="fill">
+          <code>fill</code>
+        </GridCol>
+        <GridCol size={4}>
+          <code>5</code>
+        </GridCol>
+        <GridCol size={6}>
+          <code>6</code>
+        </GridCol>
+      </Grid>,
+    );
+
+    const grid = container.querySelector(".grid");
+    expect(grid).toBeTruthy();
+    const cols = grid ? grid.querySelectorAll(":scope > .grid__col") : [];
+    const codes = container.querySelectorAll("code");
+
+    expect(cols[0]).toHaveClass("grid__col", "grid__col--fill");
+    expect(cols[1]).toHaveClass("grid__col", "grid__col--4");
+    expect(cols[2]).toHaveClass("grid__col", "grid__col--6");
+    expect(codes[0]).toHaveTextContent("fill");
+    expect(codes[1]).toHaveTextContent("5");
+    expect(codes[2]).toHaveTextContent("6");
+  });
+
+  it("renders scenario 4: shrink + 6", () => {
+    const { container } = render(
+      <Grid>
+        <GridCol size="shrink">
+          <code>shrink</code>
+        </GridCol>
+        <GridCol size={6}>
+          <code>6</code>
+        </GridCol>
+      </Grid>,
+    );
+
+    const grid = container.querySelector(".grid");
+    expect(grid).toBeTruthy();
+    const cols = grid ? grid.querySelectorAll(":scope > .grid__col") : [];
+    const codes = container.querySelectorAll("code");
+
+    expect(cols[0]).toHaveClass("grid__col", "grid__col--shrink");
+    expect(cols[1]).toHaveClass("grid__col", "grid__col--6");
+    expect(codes[0]).toHaveTextContent("shrink");
+    expect(codes[1]).toHaveTextContent("6");
+  });
+
+  it("renders all scenarios together with hr separators", () => {
+    const { container } = render(
+      <>
+        <Grid>
+          <GridCol>
+            <code>(default) 12</code>
+          </GridCol>
+          <GridCol size={6}>
+            <code>6</code>
+          </GridCol>
+        </Grid>
+        <hr />
+        <Grid>
+          <GridCol size="auto">
+            <code>auto</code>
+          </GridCol>
+          <GridCol size={4}>
+            <code>5</code>
+          </GridCol>
+          <GridCol size={6}>
+            <code>6</code>
+          </GridCol>
+        </Grid>
+        <hr />
+        <Grid>
+          <GridCol size="fill">
+            <code>fill</code>
+          </GridCol>
+          <GridCol size={4}>
+            <code>5</code>
+          </GridCol>
+          <GridCol size={6}>
+            <code>6</code>
+          </GridCol>
+        </Grid>
+        <hr />
+        <Grid>
+          <GridCol size="shrink">
+            <code>shrink</code>
+          </GridCol>
+          <GridCol size={6}>
+            <code>6</code>
+          </GridCol>
+        </Grid>
+      </>,
+    );
+
+    const grids = container.querySelectorAll(".grid");
+    const allCols = [];
+    grids.forEach((grid) => {
+      const cols = grid.querySelectorAll(":scope > .grid__col");
+      cols.forEach((col) => allCols.push(col));
+    });
+    const codes = container.querySelectorAll("code");
+    const hrs = container.querySelectorAll("hr");
+
+    expect(grids).toHaveLength(4);
+    expect(allCols).toHaveLength(10); // 2 + 3 + 3 + 2
+    expect(codes).toHaveLength(10);
+    expect(hrs).toHaveLength(3);
+    // Prvý grid
+    expect(allCols[0]).toHaveClass("grid__col");
+    expect(allCols[1]).toHaveClass("grid__col", "grid__col--6");
+    // Druhý grid
+    expect(allCols[2]).toHaveClass("grid__col", "grid__col--auto");
+    expect(allCols[3]).toHaveClass("grid__col", "grid__col--4");
+    expect(allCols[4]).toHaveClass("grid__col", "grid__col--6");
+    // Tretí grid
+    expect(allCols[5]).toHaveClass("grid__col", "grid__col--fill");
+    expect(allCols[6]).toHaveClass("grid__col", "grid__col--4");
+    expect(allCols[7]).toHaveClass("grid__col", "grid__col--6");
+    // Štvrtý grid
+    expect(allCols[8]).toHaveClass("grid__col", "grid__col--shrink");
+    expect(allCols[9]).toHaveClass("grid__col", "grid__col--6");
+  });
+});
+
+describe("Grid and GridCol - HTML structure verification", () => {
+  it("generates correct HTML structure for scenario 1", () => {
+    const { container } = render(
+      <Grid>
+        <GridCol>
+          <code>(default) 12</code>
+        </GridCol>
+        <GridCol size={6}>
+          <code>6</code>
+        </GridCol>
+      </Grid>,
+    );
+
+    // Verify the generated HTML structure matches expected
+    const html = container.innerHTML;
+    expect(html).toContain('<div class="grid">');
+    expect(html).toContain('<div class="grid__col">');
+    expect(html).toContain('<div class="grid__col grid__col--6">');
+    expect(html).toContain("<code>(default) 12</code>");
+    expect(html).toContain("<code>6</code>");
+  });
+
+  it("generates correct HTML structure for scenario 2", () => {
+    const { container } = render(
+      <Grid>
+        <GridCol size="auto">
+          <code>auto</code>
+        </GridCol>
+        <GridCol size={4}>
+          <code>5</code>
+        </GridCol>
+        <GridCol size={6}>
+          <code>6</code>
+        </GridCol>
+      </Grid>,
+    );
+
+    const html = container.innerHTML;
+    expect(html).toContain('<div class="grid">');
+    expect(html).toContain('<div class="grid__col grid__col--auto">');
+    expect(html).toContain('<div class="grid__col grid__col--4">');
+    expect(html).toContain('<div class="grid__col grid__col--6">');
+    expect(html).toContain("<code>auto</code>");
+    expect(html).toContain("<code>5</code>");
+    expect(html).toContain("<code>6</code>");
+  });
+
+  it("generates correct HTML structure for scenario 3", () => {
+    const { container } = render(
+      <Grid>
+        <GridCol size="fill">
+          <code>fill</code>
+        </GridCol>
+        <GridCol size={4}>
+          <code>5</code>
+        </GridCol>
+        <GridCol size={6}>
+          <code>6</code>
+        </GridCol>
+      </Grid>,
+    );
+
+    const html = container.innerHTML;
+    expect(html).toContain('<div class="grid">');
+    expect(html).toContain('<div class="grid__col grid__col--fill">');
+    expect(html).toContain('<div class="grid__col grid__col--4">');
+    expect(html).toContain('<div class="grid__col grid__col--6">');
+    expect(html).toContain("<code>fill</code>");
+    expect(html).toContain("<code>5</code>");
+    expect(html).toContain("<code>6</code>");
+  });
+
+  it("generates correct HTML structure for scenario 4", () => {
+    const { container } = render(
+      <Grid>
+        <GridCol size="shrink">
+          <code>shrink</code>
+        </GridCol>
+        <GridCol size={6}>
+          <code>6</code>
+        </GridCol>
+      </Grid>,
+    );
+
+    const html = container.innerHTML;
+    expect(html).toContain('<div class="grid">');
+    expect(html).toContain('<div class="grid__col grid__col--shrink">');
+    expect(html).toContain('<div class="grid__col grid__col--6">');
+    expect(html).toContain("<code>shrink</code>");
+    expect(html).toContain("<code>6</code>");
+  });
+});