test(shared table + searchmembers): replace snapshots tests by manual tests

Author: GuillaumeKESTEMAN

src/pages/Demos/SearchMembers/__tests__/SearchMembers.test.tsx

@@ -1,7 +1,7 @@
 import { screen } from '@testing-library/react';
 import { MODES } from 'shared/components/Loader';
 import { emptyFunction, render } from 'shared/testsUtils';
-import SearchMembers, { getDownloadPath, setFileName, DownloadLinkEnhanced } from '../SearchMembers';
+import SearchMembers, { DownloadLinkEnhanced, getDownloadPath, setFileName } from '../SearchMembers';
 
 describe('getDownloadPath', () => {
   it('Should return "members/0064962455/download-detail" When getDownloadPath with memberId "0064962455"', () => {
@@ -40,18 +40,11 @@ describe('<DownloadLinkEnhanced />', () => {
     firstname: 'samuel',
     lastname: 'gomez',
   };
-  it('Should call getDownloadPathFn and setFileNameFn with proper params', () => {
-    const { asFragment } = render(
-      <DownloadLinkEnhanced {...defaultDownloadProps} getDownloadPathFn={getDownloadPathFnMock} setFileNameFn={setFileNameFnMock} />,
-    );
-    expect(asFragment()).toMatchSnapshot();
-    expect(getDownloadPathFnMock).toBeCalledWith('09878817');
-    expect(setFileNameFnMock).toBeCalledWith({ memberId: '09878817', name: 'samuel-gomez' });
-  });
 
-  it('Should call getDownloadPathFn and setFileNameFn with proper params 2 ', () => {
-    const { asFragment } = render(<DownloadLinkEnhanced {...defaultDownloadProps} />);
-    expect(asFragment()).toMatchSnapshot();
+  it('Should call getDownloadPathFn and setFileNameFn with proper params', () => {
+    render(<DownloadLinkEnhanced {...defaultDownloadProps} getDownloadPathFn={getDownloadPathFnMock} setFileNameFn={setFileNameFnMock} />);
+    expect(getDownloadPathFnMock).toHaveBeenCalledWith('09878817');
+    expect(setFileNameFnMock).toHaveBeenCalledWith({ memberId: '09878817', name: 'samuel-gomez' });
   });
 });
 

src/pages/Demos/SearchMembers/__tests__/__snapshots__/SearchMembers.test.tsx.snap

@@ -6,20 +6,21 @@ const defaultProps = {
   label: 'label',
   hover: null,
 };
-const container = document.createElement('tr');
+const trContainer = document.createElement('tr');
 
 describe('Td', () => {
   it('Render <Td/> without hover', () => {
-    const { asFragment } = renderWithContainer(<Td {...defaultProps}>child th</Td>, container);
-    expect(asFragment()).toMatchSnapshot();
+    const { container } = renderWithContainer(<Td {...defaultProps}>child th</Td>, trContainer);
+    expect(container.firstChild?.firstChild?.textContent).toBe('label');
   });
+
   it('Render <Td/> with hover', () => {
-    const { asFragment } = renderWithContainer(
+    const { container } = renderWithContainer(
       <Td {...defaultProps} classModifier="custom" hover={<p>Hover content</p>}>
         child td
       </Td>,
-      container,
+      trContainer,
     );
-    expect(asFragment()).toMatchSnapshot();
+    expect(container.firstChild?.firstChild).toHaveClass('af-popover__wrapper');
   });
 });

src/shared/components/Table/Body/Line/Td/__tests__/Td.test.tsx

@@ -1,7 +1,8 @@
 import { renderWithContainer } from 'shared/testsUtils';
+import { within } from 'shared/testsUtils/customRender';
 import Line from '../Line';
 
-const container = document.createElement('tbody');
+const tbodyContainer = document.createElement('tbody');
 
 const columnsMock = [
   {
@@ -11,25 +12,32 @@ const columnsMock = [
   },
 ];
 
-const itemsType = 'users';
-
 describe('Line', () => {
   it.each`
-    columns        | className    | modifier      | children     | lineNumber
-    ${undefined}   | ${undefined} | ${undefined}  | ${undefined} | ${1}
-    ${[]}          | ${undefined} | ${undefined}  | ${undefined} | ${2}
-    ${columnsMock} | ${undefined} | ${undefined}  | ${undefined} | ${3}
-    ${columnsMock} | ${undefined} | ${'modifier'} | ${undefined} | ${4}
+    columns        | className    | modifier      | children
+    ${undefined}   | ${undefined} | ${undefined}  | ${undefined}
+    ${[]}          | ${undefined} | ${undefined}  | ${undefined}
+    ${columnsMock} | ${undefined} | ${undefined}  | ${undefined}
+    ${columnsMock} | ${undefined} | ${'modifier'} | ${undefined}
   `(
-    'Should render <Line/> when columns: $columns, className: $className, modifier: $modifier, children: $children, lineNumber: $lineNumber',
-    ({ columns, className, modifier, children, lineNumber }) => {
-      const { baseElement } = renderWithContainer(
-        <Line className={className} itemsType={itemsType} lineNumber={lineNumber} columns={columns} classModifier={modifier}>
+    'Should render <Line/> when columns: $columns, className: $className, modifier: $modifier, children: $children',
+    ({ columns, className, modifier, children }) => {
+      const { baseElement, container } = renderWithContainer(
+        <Line className={className} columns={columns} classModifier={modifier}>
           {children}
         </Line>,
-        container,
+        tbodyContainer,
       );
-      expect(baseElement).toMatchSnapshot();
+
+      if (columns && columns.length > 0) {
+        within(baseElement).getByText('F');
+      } else {
+        expect(within(baseElement).queryByText('F')).toBeNull();
+      }
+
+      if (modifier) {
+        expect(container.firstChild).toHaveClass('af-table__tr--modifier');
+      }
     },
   );
 });

src/shared/components/Table/Body/Line/Td/__tests__/__snapshots__/Td.test.tsx.snap

@@ -1,12 +1,13 @@
 import { renderWithContainer } from 'shared/testsUtils';
+import { screen, within } from 'shared/testsUtils/customRender';
 import Body from '../Body';
 
 const container = document.createElement('table');
 
 describe('Body', () => {
   it('Render <Body/> with empty items', () => {
-    const { baseElement } = renderWithContainer(<Body />, container);
-    expect(baseElement).toMatchSnapshot();
+    renderWithContainer(<Body />, container);
+    expect(screen.queryAllByRole('row').length).toBe(0);
   });
 
   const items = [
@@ -23,6 +24,10 @@ describe('Body', () => {
 
   it('Render <Body/> with 1 item', () => {
     const { baseElement } = renderWithContainer(<Body items={items} />, container);
-    expect(baseElement).toMatchSnapshot();
+    expect(screen.getAllByRole('row').length).toBe(1);
+    within(baseElement).getByText(items[0].cols.firstname.label);
+    within(baseElement).getByText(items[0].cols.lastname.label);
+    within(baseElement).getByText(items[0].cols.birthdate.label);
+    within(baseElement).getByText(items[0].cols.sexe.label);
   });
 });

src/shared/components/Table/Body/Line/__tests__/Line.test.tsx

@@ -17,16 +17,16 @@ describe('orderIcons', () => {
 
 describe('SortingIcon', () => {
   it('Should render SortingIcon with order equal NONE', () => {
-    const { asFragment } = render(<SortingIcon />);
-    expect(asFragment()).toMatchSnapshot();
+    const { container } = render(<SortingIcon />);
+    expect(container.querySelector('span')).toHaveClass('glyphicon-sorting');
   });
 
   it('Should render SortingIcon with order equal 1', () => {
-    const { asFragment } = render(<SortingIcon order={1} />);
-    expect(asFragment()).toMatchSnapshot();
+    const { container } = render(<SortingIcon order={1} />);
+    expect(container.querySelector('span')).toHaveClass('glyphicon-arrow-xs-up');
   });
   it('Should render SortingIcon with order equal -1', () => {
-    const { asFragment } = render(<SortingIcon order={-1} />);
-    expect(asFragment()).toMatchSnapshot();
+    const { container } = render(<SortingIcon order={-1} />);
+    expect(container.querySelector('span')).toHaveClass('glyphicon-arrow-xs-down');
   });
 });

src/shared/components/Table/Body/Line/__tests__/__snapshots__/Line.test.tsx.snap

@@ -1,10 +1,12 @@
 import { renderWithContainer } from 'shared/testsUtils';
+import { within } from 'shared/testsUtils/customRender';
+import { orderIcons } from '../SortingIcon';
 import ThSortable from '../ThSortable';
 
 const defaultProps = {
   sort: vi.fn(),
 };
-const container = document.createElement('tr');
+const trContainer = document.createElement('tr');
 
 describe('ThSortable', () => {
   it.each`
@@ -17,15 +19,19 @@ describe('ThSortable', () => {
     ${-1}     | ${'child'}   | ${'variant'}
   `(
     'Should render <ThSortable/> when order: $order, children: $children, className: $className, classModifier: $classModifier',
-    ({ children, ...rest }) => {
-      const { baseElement } = renderWithContainer(
-        <ThSortable {...defaultProps} {...rest}>
+    ({ order, children, ...rest }) => {
+      const { baseElement, container } = renderWithContainer(
+        <ThSortable {...defaultProps} {...rest} order={order}>
           {children}
         </ThSortable>,
-        container,
+        trContainer,
       );
 
-      expect(baseElement).toMatchSnapshot();
+      expect(container.querySelector('span')).toHaveClass(`glyphicon-${orderIcons(order)}`);
+
+      if (children) {
+        within(baseElement).getByText(children);
+      }
     },
   );
 });