Merge pull request #2091 from SpareBank1/develop_fjern-sinon

test: rydder vekk sinon
SpareBank1 · Jun 17, 2024 · 04d0b5b · 04d0b5b
2 parents 4b35857 + 815e09e
commit 04d0b5b
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 33 deletions.
diff --git a/packages/ffe-file-upload-react/package.json b/packages/ffe-file-upload-react/package.json
@@ -37,10 +37,8 @@
     },
     "devDependencies": {
         "@sb1/ffe-buildtool": "^0.6.3",
-        "@types/sinon": "^17.0.3",
         "react": "^16.9.0",
-        "react-dom": "^16.9.0",
-        "sinon": "^7.2.3"
+        "react-dom": "^16.9.0"
     },
     "peerDependencies": {
         "react": ">=16.9.0"

diff --git a/packages/ffe-file-upload-react/src/FileUpload.spec.tsx b/packages/ffe-file-upload-react/src/FileUpload.spec.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { spy } from 'sinon';
 import { FileUpload, FileUploadProps } from './FileUpload';
 import { render, screen, fireEvent } from '@testing-library/react';
 
@@ -36,15 +35,15 @@ describe('<FileUpload/>', () => {
     });
 
     it('should extract and return files when user finishes selecting files', () => {
-        const onFilesSelected = spy();
+        const onFilesSelected = jest.fn();
         const { container } = renderFileUpload({ onFilesSelected });
         const input = container.querySelector('input#file-upload') as Element;
         fireEvent.change(input);
-        expect(onFilesSelected.calledOnce).toBe(true);
+        expect(onFilesSelected).toHaveBeenCalledTimes(1);
     });
 
     it('should remove file from files when delete button is clicked', () => {
-        const onFileDeleted = spy();
+        const onFileDeleted = jest.fn();
         // Do click on span inside button with event listener instead of actual button to catch nested clicks.
         const { container } = renderFileUpload({
             onFileDeleted,
@@ -60,6 +59,6 @@ describe('<FileUpload/>', () => {
         ) as Element;
         fireEvent.click(deleteButton);
 
-        expect(onFileDeleted.calledWith({ name: 'fileToDelete' })).toBe(true);
+        expect(onFileDeleted).toHaveBeenCalledWith({ name: 'fileToDelete' });
     });
 });
diff --git a/packages/ffe-form-react/package.json b/packages/ffe-form-react/package.json
@@ -35,11 +35,9 @@
     },
     "devDependencies": {
         "@sb1/ffe-buildtool": "^0.6.3",
-        "@types/sinon": "^17.0.3",
         "eslint": "^8.57.0",
         "react": "^16.9.0",
-        "react-dom": "^16.9.0",
-        "sinon": "^7.2.3"
+        "react-dom": "^16.9.0"
     },
     "peerDependencies": {
         "react": ">=16.9.0"

diff --git a/packages/ffe-form-react/src/Tooltip.spec.tsx b/packages/ffe-form-react/src/Tooltip.spec.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Tooltip, TooltipProps } from './Tooltip';
-import { spy } from 'sinon';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
@@ -12,15 +11,15 @@ describe('<Tooltip>', () => {
     it('renders a "?" button', async () => {
         const user = userEvent.setup();
 
-        const onClick = spy();
+        const onClick = jest.fn();
         renderTooltip({ 'aria-label': 'button-label', onClick });
         const button = screen.getByRole('button', { name: 'button-label' });
 
         expect(button.textContent).toBe('?');
         expect(button.classList.contains('ffe-tooltip__icon')).toBeTruthy();
 
         await user.click(button);
-        expect(onClick.calledOnce).toBe(true);
+        expect(onClick).toHaveBeenCalledTimes(1);
     });
 
     it('renders Collapse', () => {

diff --git a/packages/ffe-tables-react/package.json b/packages/ffe-tables-react/package.json
@@ -38,8 +38,7 @@
     "devDependencies": {
         "@sb1/ffe-buildtool": "^0.6.3",
         "react": "^16.9.0",
-        "react-dom": "^16.9.0",
-        "sinon": "^7.2.3"
+        "react-dom": "^16.9.0"
     },
     "peerDependencies": {
         "react": ">=16.9.0"

diff --git a/packages/ffe-tables-react/src/SortableTable/SortableTable.spec.js b/packages/ffe-tables-react/src/SortableTable/SortableTable.spec.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import { assert, match, spy } from 'sinon';
 import SortableTable from './SortableTable';
 
 describe('<SortableTable>', () => {
@@ -58,23 +57,45 @@ describe('<SortableTable>', () => {
     });
 
     it('should call onSort after sorting table', () => {
-        const onSort = spy();
+        const onSort = jest.fn();
         const table = shallow(
             <SortableTable columns={columns} data={data} onSort={onSort} />,
         );
         table.instance().tableHeaderClicked('name');
-        assert.calledWith(
-            onSort,
-            match(val => {
-                return (
-                    'sortBy' in val && 'descending' in val && 'tableData' in val
-                );
-            }),
-        );
+        expect.objectContaining({
+            sortBy: 'name',
+            descending: false,
+            tableData: [
+                {
+                    age: 16,
+                    button: <button>poke</button>,
+                    id: 4,
+                    name: 'Daenerys Targaryen',
+                },
+                {
+                    age: 20,
+                    button: <button>poke</button>,
+                    id: 1,
+                    name: 'Jon Snow',
+                },
+                {
+                    age: 48,
+                    button: <button>poke</button>,
+                    id: 3,
+                    name: 'Ned Stark',
+                },
+                {
+                    age: 36,
+                    button: <button>poke</button>,
+                    id: 2,
+                    name: 'Zombie Mountain',
+                },
+            ],
+        });
     });
 
     it('should call onSort after initial sort', () => {
-        const onSort = spy();
+        const onSort = jest.fn();
         shallow(
             <SortableTable
                 columns={columns}
@@ -83,12 +104,36 @@ describe('<SortableTable>', () => {
                 sortBy={'name'}
             />,
         );
-        assert.calledWith(
-            onSort,
-            match(val => {
-                return (
-                    'sortBy' in val && 'descending' in val && 'tableData' in val
-                );
+        expect(onSort).toHaveBeenCalledWith(
+            expect.objectContaining({
+                sortBy: 'name',
+                descending: false,
+                tableData: [
+                    {
+                        age: 16,
+                        button: <button>poke</button>,
+                        id: 4,
+                        name: 'Daenerys Targaryen',
+                    },
+                    {
+                        age: 20,
+                        button: <button>poke</button>,
+                        id: 1,
+                        name: 'Jon Snow',
+                    },
+                    {
+                        age: 48,
+                        button: <button>poke</button>,
+                        id: 3,
+                        name: 'Ned Stark',
+                    },
+                    {
+                        age: 36,
+                        button: <button>poke</button>,
+                        id: 2,
+                        name: 'Zombie Mountain',
+                    },
+                ],
             }),
         );
     });