fixup! fixup! Feat(web-react): Add spacing property to Grid #DS-1388

lmc-eu · Jul 25, 2024 · 26a86eb · 26a86eb
1 parent 6f8ff7c
commit 26a86eb
Showing 1 changed file with 51 additions and 20 deletions.
diff --git a/packages/web-react/src/components/Grid/__tests__/Grid.test.tsx b/packages/web-react/src/components/Grid/__tests__/Grid.test.tsx
@@ -1,5 +1,5 @@
 import '@testing-library/jest-dom';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
 import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
@@ -14,54 +14,77 @@ describe('Grid', () => {
   restPropsTest(Grid, 'div');
 
   it('should render text children', () => {
-    const dom = render(<Grid>Hello World</Grid>);
+    const text = 'Hello world';
 
-    const element = dom.container.querySelector('div') as HTMLElement;
-    expect(element.textContent).toBe('Hello World');
+    render(<Grid>{text}</Grid>);
+
+    const element = screen.getByText(text) as HTMLElement;
+
+    expect(element).toBeInTheDocument();
   });
 
   it('should have desktop cols classname', () => {
-    const dom = render(<Grid cols={{ desktop: 3 }} />);
+    const testId = 'grid-test-id';
+
+    render(<Grid cols={{ desktop: 3 }} data-testid={testId} />);
+
+    const element = screen.getByTestId(testId) as HTMLElement;
 
-    const element = dom.container.querySelector('div') as HTMLElement;
     expect(element).toHaveClass('Grid--desktop--cols-3');
   });
 
   it('should have tablet cols classname', () => {
-    const dom = render(<Grid cols={{ tablet: 3 }} />);
+    const testId = 'grid-test-id';
+
+    render(<Grid cols={{ tablet: 3 }} data-testid={testId} />);
+
+    const element = screen.getByTestId(testId) as HTMLElement;
 
-    const element = dom.container.querySelector('div') as HTMLElement;
     expect(element).toHaveClass('Grid--tablet--cols-3');
   });
 
   it('should have all cols classnames', () => {
-    const dom = render(<Grid cols={{ mobile: 2, tablet: 3, desktop: 4 }} />);
+    const testId = 'grid-test-id';
+
+    render(<Grid cols={{ mobile: 2, tablet: 3, desktop: 4 }} data-testid={testId} />);
+
+    const element = screen.getByTestId(testId) as HTMLElement;
 
-    const element = dom.container.querySelector('div') as HTMLElement;
     expect(element).toHaveClass('Grid--cols-2');
     expect(element).toHaveClass('Grid--tablet--cols-3');
     expect(element).toHaveClass('Grid--desktop--cols-4');
   });
 
   it('should have cols classname', () => {
-    const dom = render(<Grid cols={2} />);
+    const testId = 'grid-test-id';
+
+    render(<Grid cols={2} data-testid={testId} />);
+
+    const element = screen.getByTestId(testId) as HTMLElement;
 
-    const element = dom.container.querySelector('div') as HTMLElement;
     expect(element).toHaveClass('Grid--cols-2');
   });
 
   it('should render with custom spacing', () => {
-    const dom = render(<Grid spacing="space-600" />);
+    const testId = 'grid-test-id';
+
+    render(<Grid spacing="space-600" data-testid={testId} />);
+
+    const element = screen.getByTestId(testId) as HTMLElement;
 
-    const element = dom.container.querySelector('div') as HTMLElement;
     expect(element).toHaveStyle({ '--grid-spacing-x': 'var(--spirit-space-600)' });
     expect(element).toHaveStyle({ '--grid-spacing-y': 'var(--spirit-space-600)' });
   });
 
   it('should render with custom spacing for each breakpoint', () => {
-    const dom = render(<Grid spacing={{ mobile: 'space-100', tablet: 'space-1000', desktop: 'space-1200' }} />);
+    const testId = 'grid-test-id';
+
+    render(
+      <Grid spacing={{ mobile: 'space-100', tablet: 'space-1000', desktop: 'space-1200' }} data-testid={testId} />,
+    );
+
+    const element = screen.getByTestId(testId) as HTMLElement;
 
-    const element = dom.container.querySelector('div') as HTMLElement;
     expect(element).toHaveStyle({ '--grid-spacing-x': 'var(--spirit-space-100)' });
     expect(element).toHaveStyle({ '--grid-spacing-y': 'var(--spirit-space-100)' });
     expect(element).toHaveStyle({ '--grid-spacing-x-tablet': 'var(--spirit-space-1000)' });
@@ -71,9 +94,14 @@ describe('Grid', () => {
   });
 
   it('should render with custom vertical spacing for each breakpoint', () => {
-    const dom = render(<Grid spacingY={{ mobile: 'space-100', tablet: 'space-1000', desktop: 'space-1200' }} />);
+    const testId = 'grid-test-id';
+
+    render(
+      <Grid spacingY={{ mobile: 'space-100', tablet: 'space-1000', desktop: 'space-1200' }} data-testid={testId} />,
+    );
+
+    const element = screen.getByTestId(testId) as HTMLElement;
 
-    const element = dom.container.querySelector('div') as HTMLElement;
     expect(element).toHaveStyle({ '--grid-spacing-y': 'var(--spirit-space-100)' });
     expect(element).toHaveStyle({ '--grid-spacing-y-tablet': 'var(--spirit-space-1000)' });
     expect(element).toHaveStyle({ '--grid-spacing-y-desktop': 'var(--spirit-space-1200)' });
@@ -83,9 +111,12 @@ describe('Grid', () => {
   });
 
   it('should render with custom spacing for only one breakpoint', () => {
-    const dom = render(<Grid spacing={{ tablet: 'space-1000' }} />);
+    const testId = 'grid-test-id';
+
+    render(<Grid spacing={{ tablet: 'space-1000' }} data-testid={testId} />);
+
+    const element = screen.getByTestId(testId) as HTMLElement;
 
-    const element = dom.container.querySelector('div') as HTMLElement;
     expect(element).toHaveStyle({ '--grid-spacing-x-tablet': 'var(--spirit-space-1000)' });
     expect(element).toHaveStyle({ '--grid-spacing-y-tablet': 'var(--spirit-space-1000)' });
     expect(element).not.toHaveStyle({ '--grid-spacing-x': 'var(--spirit-space-100)' });