textkernel · PavelKirvelTextkernel · May 15, 2023 · Apr 20, 2023 · Apr 21, 2023 · Apr 21, 2023
diff --git a/src/components/List/ListActions/__tests__/ListActions.spec.js b/src/components/List/ListActions/__tests__/ListActions.spec.js
diff --git a/src/components/List/ListActions/__tests__/ListActions.spec.tsx b/src/components/List/ListActions/__tests__/ListActions.spec.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ListActions } from '../ListActions';
+
+describe('<ListActions>', () => {
+    it('should render ListActions', () => {
+        const view = render(<ListActions>action</ListActions>);
+        expect(view).toMatchSnapshot();
+
+        expect(screen.getByText('action')).toBeInTheDocument();
+    });
+});
diff --git a/src/components/List/ListActions/__tests__/__snapshots__/ListActions.spec.js.snap b/src/components/List/ListActions/__tests__/__snapshots__/ListActions.spec.js.snap
diff --git a/src/components/List/ListActions/__tests__/__snapshots__/ListActions.spec.tsx.snap b/src/components/List/ListActions/__tests__/__snapshots__/ListActions.spec.tsx.snap
@@ -0,0 +1,74 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ListActions> should render ListActions 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="ListActions"
+      >
+        action
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="ListActions"
+    >
+      action
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/src/components/List/ListItem/__tests__/ListItem.spec.js b/src/components/List/ListItem/__tests__/ListItem.spec.js
diff --git a/src/components/List/ListItem/__tests__/ListItem.spec.tsx b/src/components/List/ListItem/__tests__/ListItem.spec.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import { ListItem } from '../ListItem';
+import { Text } from '../../../Text';
+
+describe('ListItem component', () => {
+    it('should render ListItem correctly', () => {
+        const ref = React.createRef<HTMLLIElement>();
+        const wrapper = render(
+            <ListItem ref={ref}>
+                <Text>An item</Text>
+            </ListItem>
+        );
+
+        expect(wrapper.asFragment()).toMatchSnapshot();
+    });
+
+    it('should turn string items to Text', () => {
+        const wrapper = render(<ListItem>Simple string</ListItem>);
+
+        expect(wrapper.asFragment()).toMatchSnapshot();
+        expect(screen.getByText('Simple string')).toBeInTheDocument();
+    });
+    it('should not add clickable class when onClick is not defined', () => {
+        render(<ListItem>An item</ListItem>);
+
+        expect(screen.getByRole('presentation')).toHaveClass('ListItem');
+    });
+    it('should add clickable class when onClick is defined', () => {
+        const view = render(<ListItem onClick={jest.fn()}>An item</ListItem>);
+
+        expect(view.asFragment()).toMatchSnapshot();
+        expect(screen.getByRole('presentation')).toHaveClass('ListItem ListItem--clickable');
+    });
+    it('should call onClick function when clicked', async () => {
+        const onClick = jest.fn();
+        render(<ListItem onClick={onClick}>An item</ListItem>);
+
+        await userEvent.click(screen.getByRole('presentation'));
+        expect(onClick).toHaveBeenCalledTimes(1);
+    });
+    it('should render correctly when disabled', () => {
+        const wrapper = render(<ListItem disabled>An item</ListItem>);
+        expect(wrapper.asFragment()).toMatchSnapshot();
+
+        const li = screen.getByRole('presentation');
+        expect(li).toHaveClass('ListItem ListItem--disabled');
+    });
+    it('should set disabled prop on li when required', () => {
+        const view = render(
+            <ListItem disabled passDisabledToLi>
+                An item
+            </ListItem>
+        );
+        expect(view.asFragment()).toMatchSnapshot();
+
+        const li = screen.getByRole('presentation');
+        expect(li).toHaveClass('ListItem--disabled');
+        expect(li).toHaveAttribute('disabled', '');
+
+        view.rerender(
+            <ListItem disabled={false} passDisabledToLi>
+                An item
+            </ListItem>
+        );
+        expect(screen.getByRole('presentation')).not.toHaveClass('ListItem--disabled');
+    });
+});
diff --git a/src/components/List/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap b/src/components/List/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap
diff --git a/src/components/List/ListItem/__tests__/__snapshots__/ListItem.spec.tsx.snap b/src/components/List/ListItem/__tests__/__snapshots__/ListItem.spec.tsx.snap
@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ListItem component should add clickable class when onClick is defined 1`] = `
+<DocumentFragment>
+  <li
+    class="ListItem ListItem--clickable"
+    role="presentation"
+  >
+    <span>
+      An item
+    </span>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem component should render ListItem correctly 1`] = `
+<DocumentFragment>
+  <li
+    class="ListItem"
+    role="presentation"
+  >
+    <p>
+      An item
+    </p>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem component should render correctly when disabled 1`] = `
+<DocumentFragment>
+  <li
+    class="ListItem ListItem--disabled"
+    role="presentation"
+  >
+    <span>
+      An item
+    </span>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem component should set disabled prop on li when required 1`] = `
+<DocumentFragment>
+  <li
+    class="ListItem ListItem--disabled"
+    disabled=""
+    role="presentation"
+  >
+    <span>
+      An item
+    </span>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem component should turn string items to Text 1`] = `
+<DocumentFragment>
+  <li
+    class="ListItem"
+    role="presentation"
+  >
+    <span>
+      Simple string
+    </span>
+  </li>
+</DocumentFragment>
+`;
diff --git a/...Optimizer/__tests__/ListOptimizer.spec.js → ...ptimizer/__tests__/ListOptimizer.spec.tsx b/...Optimizer/__tests__/ListOptimizer.spec.js → ...ptimizer/__tests__/ListOptimizer.spec.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { render } from 'enzyme';
-import toJson from 'enzyme-to-json';
+import { render } from '@testing-library/react';
 import { ListOptimizer } from '../ListOptimizer';
 
 describe('<ListOptimizer> that optimally renders list items', () => {
@@ -10,7 +9,7 @@ describe('<ListOptimizer> that optimally renders list items', () => {
                 {({ key, index, style }) => <span key={key} style={style}>{`Item ${index}`}</span>}
             </ListOptimizer>
         );
-        expect(toJson(wrapper)).toMatchSnapshot();
+        expect(wrapper.asFragment()).toMatchSnapshot();
     });
 
     it('should render part of list items due to middle height of block', () => {
@@ -19,14 +18,14 @@ describe('<ListOptimizer> that optimally renders list items', () => {
                 {({ key, index, style }) => <span key={key} style={style}>{`Item ${index}`}</span>}
             </ListOptimizer>
         );
-        expect(toJson(wrapper)).toMatchSnapshot();
+        expect(wrapper.asFragment()).toMatchSnapshot();
     });
     it('should render full list on maximum height', () => {
         const wrapper = render(
             <ListOptimizer defaultHeight={2000} defaultWidth={10} rowCount={20}>
                 {({ key, index, style }) => <span key={key} style={style}>{`Item ${index}`}</span>}
             </ListOptimizer>
         );
-        expect(toJson(wrapper)).toMatchSnapshot();
+        expect(wrapper.asFragment()).toMatchSnapshot();
     });
 });