fix: tests

Smile-SA · Oct 12, 2023 · 1820161 · 1820161
1 parent 6ed935d
commit 1820161
Show file tree

Hide file tree

Showing 8 changed files with 133 additions and 20 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -4,6 +4,14 @@ module.exports = {
     project: ['./tsconfig.json'],
   },
   root: true,
+  rules: {
+    'import/no-extraneous-dependencies': [
+      'warn',
+      {
+        devDependencies: ['**/setupTests.ts'],
+      },
+    ],
+  },
   settings: {
     next: {
       rootDir: ['apps/*/'],

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/react-front-kit/src/Components/ResponsiveTabs/ResponsiveTabs.mock.tsx b/packages/react-front-kit/src/Components/ResponsiveTabs/ResponsiveTabs.mock.tsx
@@ -31,10 +31,10 @@ export const contents = (
 );
 
 export const tabs = [
-  <Tabs.Tab key={1} value="1">
+  <Tabs.Tab key={1} id="tab-1" value="1">
     First
   </Tabs.Tab>,
-  <Tabs.Tab key={2} data-testid="test-tab" value="2">
+  <Tabs.Tab key={2} data-testid="test-tab" id="tab-1" value="2">
     Second
   </Tabs.Tab>,
   <Tabs.Tab key={3} value="3">

diff --git a/packages/react-front-kit/src/Components/ResponsiveTabs/ResponsiveTabs.test.tsx b/packages/react-front-kit/src/Components/ResponsiveTabs/ResponsiveTabs.test.tsx
@@ -6,7 +6,9 @@ import { contents, tabs } from './ResponsiveTabs.mock';
 describe('ResponsiveTabs', () => {
   it('matches snapshot', () => {
     const { container } = renderWithProviders(
-      <ResponsiveTabs tabs={tabs}>{contents}</ResponsiveTabs>,
+      <ResponsiveTabs id="responsive-tabs" tabs={tabs}>
+        {contents}
+      </ResponsiveTabs>,
     );
     expect(container).toMatchSnapshot();
   });

diff --git a/packages/react-front-kit/src/Components/ResponsiveTabs/ResponsiveTabs.tsx b/packages/react-front-kit/src/Components/ResponsiveTabs/ResponsiveTabs.tsx
@@ -39,7 +39,10 @@ export interface IResponsiveTabs extends TabsProps {
 export function ResponsiveTabs(props: IResponsiveTabs): ReactNode {
   const { children, tabs, ...tabsProps } = props;
   const { ref, width } = useElementSize<HTMLDivElement>();
-  const overflowButtonId = useId();
+  const generatedId = useId();
+  const overflowButtonId = tabsProps.id
+    ? `${tabsProps.id}-overflow-button`
+    : generatedId;
   const [overflowIndex, setOverflowIndex] = useState(tabs.length);
   const { classes } = useStyles();
 

diff --git a/.../react-front-kit/src/Components/ResponsiveTabs/__snapshots__/ResponsiveTabs.test.tsx.snap b/.../react-front-kit/src/Components/ResponsiveTabs/__snapshots__/ResponsiveTabs.test.tsx.snap
@@ -3,20 +3,109 @@
 exports[`ResponsiveTabs matches snapshot 1`] = `
 <div>
   <div
-    class="mantine-Tabs-root mantine-ro6hk9"
-    style="overflow: hidden;"
+    class="mantine-Tabs-root mantine-1w1w6vj"
+    id="responsive-tabs"
   >
+    <div
+      class="mantine-cdxve1"
+    >
+      <button
+        aria-selected="false"
+        class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1z10kp0"
+        id="responsive-tabs-tab-1"
+        role="tab"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="mantine-480qv8 mantine-Tabs-tabLabel"
+        >
+          First
+        </span>
+      </button>
+      <button
+        aria-selected="false"
+        class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1z10kp0"
+        data-testid="test-tab"
+        id="responsive-tabs-tab-2"
+        role="tab"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="mantine-480qv8 mantine-Tabs-tabLabel"
+        >
+          Second
+        </span>
+      </button>
+      <button
+        aria-selected="false"
+        class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1z10kp0"
+        id="responsive-tabs-tab-3"
+        role="tab"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="mantine-480qv8 mantine-Tabs-tabLabel"
+        >
+          Third
+        </span>
+      </button>
+      <button
+        aria-selected="false"
+        class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1z10kp0"
+        id="responsive-tabs-tab-4"
+        role="tab"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="mantine-480qv8 mantine-Tabs-tabLabel"
+        >
+          Fourth
+        </span>
+      </button>
+      <button
+        aria-selected="false"
+        class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1z10kp0"
+        id="responsive-tabs-tab-5"
+        role="tab"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="mantine-480qv8 mantine-Tabs-tabLabel"
+        >
+          Overflow 1
+        </span>
+      </button>
+      <button
+        aria-selected="false"
+        class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1z10kp0"
+        id="responsive-tabs-tab-6"
+        role="tab"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="mantine-480qv8 mantine-Tabs-tabLabel"
+        >
+          Overflow 2
+        </span>
+      </button>
+    </div>
     <div
       aria-orientation="horizontal"
       class="mantine-Tabs-tabsList mantine-i7gwaj"
       role="tablist"
     >
       <button
-        aria-controls="mantine-xj4wuvfjs-dropdown"
+        aria-controls="responsive-tabs-overflow-button-dropdown"
         aria-expanded="false"
         aria-haspopup="menu"
         class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-3zan65"
-        id="mantine-xj4wuvfjs-target"
+        id="responsive-tabs-overflow-button-target"
         type="button"
       >
         <svg
@@ -33,9 +122,9 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
       </button>
     </div>
     <div
-      aria-labelledby="mantine-ocee5lhcn-tab-1"
+      aria-labelledby="responsive-tabs-tab-1"
       class="mantine-Tabs-panel mantine-18ozoug"
-      id="mantine-ocee5lhcn-panel-1"
+      id="responsive-tabs-panel-1"
       role="tabpanel"
     >
       <div
@@ -45,9 +134,9 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
       </div>
     </div>
     <div
-      aria-labelledby="mantine-ocee5lhcn-tab-2"
+      aria-labelledby="responsive-tabs-tab-2"
       class="mantine-Tabs-panel mantine-18ozoug"
-      id="mantine-ocee5lhcn-panel-2"
+      id="responsive-tabs-panel-2"
       role="tabpanel"
     >
       <div
@@ -57,9 +146,9 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
       </div>
     </div>
     <div
-      aria-labelledby="mantine-ocee5lhcn-tab-3"
+      aria-labelledby="responsive-tabs-tab-3"
       class="mantine-Tabs-panel mantine-18ozoug"
-      id="mantine-ocee5lhcn-panel-3"
+      id="responsive-tabs-panel-3"
       role="tabpanel"
     >
       <div
@@ -69,9 +158,9 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
       </div>
     </div>
     <div
-      aria-labelledby="mantine-ocee5lhcn-tab-4"
+      aria-labelledby="responsive-tabs-tab-4"
       class="mantine-Tabs-panel mantine-18ozoug"
-      id="mantine-ocee5lhcn-panel-4"
+      id="responsive-tabs-panel-4"
       role="tabpanel"
     >
       <div
@@ -81,9 +170,9 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
       </div>
     </div>
     <div
-      aria-labelledby="mantine-ocee5lhcn-tab-5"
+      aria-labelledby="responsive-tabs-tab-5"
       class="mantine-Tabs-panel mantine-18ozoug"
-      id="mantine-ocee5lhcn-panel-5"
+      id="responsive-tabs-panel-5"
       role="tabpanel"
     >
       <div
@@ -93,9 +182,9 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
       </div>
     </div>
     <div
-      aria-labelledby="mantine-ocee5lhcn-tab-6"
+      aria-labelledby="responsive-tabs-tab-6"
       class="mantine-Tabs-panel mantine-18ozoug"
-      id="mantine-ocee5lhcn-panel-6"
+      id="responsive-tabs-panel-6"
       role="tabpanel"
     >
       <div

diff --git a/packages/test/package.json b/packages/test/package.json
@@ -15,6 +15,7 @@
   "devDependencies": {
     "@testing-library/jest-dom": "^6.1.3",
     "jest": "^29.7.0",
+    "resize-observer-polyfill": "^1.5.1",
     "typescript": "^5.2.2"
   }
 }
diff --git a/packages/test/setupTests.ts b/packages/test/setupTests.ts
@@ -3,3 +3,6 @@
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom';
+import ResizeObserver from 'resize-observer-polyfill';
+
+global.ResizeObserver = ResizeObserver;