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

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

@@ -1,533 +0,0 @@
-/**
- * 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'] as const,
-  horizontal: ['end', 'center', 'space-around', 'space-between'] as const,
-};
-
-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'] as const).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');
-    
-    expect(outerCols).toHaveLength(2);
-    expect(outerCols?.[0]).toHaveClass('grid__col', 'grid__col--6');
-    expect(outerCols?.[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: Element[] = [];
-    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>');
-  });
-});