diff --git a/.eslintrc.js b/.eslintrc.js index 96a06b2575..2fff62e40f 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -130,6 +130,12 @@ module.exports = { checksVoidReturn: false, }, ], + 'testing-library/no-await-sync-events': [ + 'error', + { + eventModules: ['fire-event'], + }, + ], }, }, // Testing linting diff --git a/.vscode/settings.json b/.vscode/settings.json index bbc0eaf3d0..12b296997e 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -13,7 +13,7 @@ }, "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true, - "prettier.prettierPath": "./node_modules/prettier", + "prettier.prettierPath": "", "typescript.tsdk": "node_modules/typescript/lib", "task.allowAutomaticTasks": "off", "[bicep]": { diff --git a/package.json b/package.json index c5eb903a5b..a326e786e2 100644 --- a/package.json +++ b/package.json @@ -51,18 +51,18 @@ "@babel/preset-typescript": "^7.22.5", "@babel/runtime": "^7.22.5", "@types/jest-axe": "^3.5.5", - "@typescript-eslint/eslint-plugin": "^5.60.1", - "@typescript-eslint/parser": "^5.60.1", + "@typescript-eslint/eslint-plugin": "^6.4.0", + "@typescript-eslint/parser": "^6.4.0", "babel-plugin-styled-components": "^2.1.4", - "eslint": "^8.43.0", - "eslint-config-prettier": "^8.8.0", - "eslint-import-resolver-typescript": "^3.5.5", - "eslint-plugin-import": "^2.27.5", + "eslint": "^8.47.0", + "eslint-config-prettier": "^9.0.0", + "eslint-import-resolver-typescript": "^3.6.0", + "eslint-plugin-import": "^2.28.0", "eslint-plugin-jsx-a11y": "^6.7.1", - "eslint-plugin-prettier": "^4.2.1", - "eslint-plugin-react": "^7.32.2", + "eslint-plugin-prettier": "^5.0.0", + "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", - "eslint-plugin-testing-library": "^5.11.0", + "eslint-plugin-testing-library": "^6.0.0", "jest-axe": "^7.0.1", "prettier": "3.0.2", "typescript": "^4.9.4" diff --git a/packages/eds-core-react/src/components/Accordion/Accordion.test.tsx b/packages/eds-core-react/src/components/Accordion/Accordion.test.tsx index a1a11ec62c..82d03d225d 100644 --- a/packages/eds-core-react/src/components/Accordion/Accordion.test.tsx +++ b/packages/eds-core-react/src/components/Accordion/Accordion.test.tsx @@ -1,5 +1,5 @@ /* eslint-disable react/require-default-props */ -import { render, cleanup, screen, fireEvent } from '@testing-library/react' +import { render, screen, fireEvent } from '@testing-library/react' import '@testing-library/jest-dom' import 'jest-styled-components' import { axe } from 'jest-axe' @@ -18,7 +18,6 @@ beforeEach(() => { afterEach(() => { jest.spyOn(Math, 'random').mockRestore() - cleanup }) type TestProps = { diff --git a/packages/eds-core-react/src/components/Autocomplete/Autocomplete.test.tsx b/packages/eds-core-react/src/components/Autocomplete/Autocomplete.test.tsx index af37791ea8..c1b38f0e58 100644 --- a/packages/eds-core-react/src/components/Autocomplete/Autocomplete.test.tsx +++ b/packages/eds-core-react/src/components/Autocomplete/Autocomplete.test.tsx @@ -1,7 +1,6 @@ import { useState } from 'react' import { render, - cleanup, fireEvent, screen, within, @@ -17,7 +16,6 @@ const itemObjects = [{ label: 'One' }, { label: 'Two' }, { label: 'Three' }] const items = ['One', 'Two', 'Three'] const labelText = 'Select label test' -afterEach(cleanup) const mockResizeObserver = jest.fn(() => ({ observe: jest.fn(), disconnect: jest.fn(), diff --git a/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tsx b/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tsx index 6df0d21ca1..b89213ee2c 100644 --- a/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tsx +++ b/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tsx @@ -364,6 +364,7 @@ function AutocompleteInner( return item } try { + // eslint-disable-next-line @typescript-eslint/no-base-to-string return item?.toString() } catch (error) { throw new Error( diff --git a/packages/eds-core-react/src/components/Autocomplete/Option.tsx b/packages/eds-core-react/src/components/Autocomplete/Option.tsx index 6e29f26e0c..ace01dc7a2 100644 --- a/packages/eds-core-react/src/components/Autocomplete/Option.tsx +++ b/packages/eds-core-react/src/components/Autocomplete/Option.tsx @@ -50,7 +50,7 @@ const Label = styled.span<{ multiline: boolean }>(({ theme, multiline }) => { ` }) -export type AutocompleteOptionProps = { +export type AutocompleteOptionProps = { value: string multiple: boolean highlighted: string @@ -60,8 +60,8 @@ export type AutocompleteOptionProps = { optionComponent?: ReactNode } & LiHTMLAttributes -function AutocompleteOptionInner( - props: AutocompleteOptionProps, +function AutocompleteOptionInner( + props: AutocompleteOptionProps, ref: React.ForwardedRef, ) { const { @@ -109,8 +109,8 @@ function AutocompleteOptionInner( ) } -export const AutocompleteOption = forwardRef(AutocompleteOptionInner) as ( - props: AutocompleteOptionProps & { +export const AutocompleteOption = forwardRef(AutocompleteOptionInner) as ( + props: AutocompleteOptionProps & { ref?: React.ForwardedRef displayName?: string | undefined }, diff --git a/packages/eds-core-react/src/components/Avatar/Avatar.test.tsx b/packages/eds-core-react/src/components/Avatar/Avatar.test.tsx index 748bcf2ea5..f64bce4d6b 100644 --- a/packages/eds-core-react/src/components/Avatar/Avatar.test.tsx +++ b/packages/eds-core-react/src/components/Avatar/Avatar.test.tsx @@ -1,5 +1,5 @@ /* eslint-disable no-undef */ -import { render, cleanup, screen } from '@testing-library/react' +import { render, screen } from '@testing-library/react' import '@testing-library/jest-dom' import 'jest-styled-components' import { axe } from 'jest-axe' @@ -11,8 +11,6 @@ const StyledAvatar = styled(Avatar)` position: relative; ` -afterEach(cleanup) - describe('Avatar', () => { it('Matches snapshot', () => { const src = 'https://i.imgur.com/UM3mrju.jpg' diff --git a/packages/eds-core-react/src/components/Avatar/Avatar.tsx b/packages/eds-core-react/src/components/Avatar/Avatar.tsx index 352d0d8537..2012372bf5 100644 --- a/packages/eds-core-react/src/components/Avatar/Avatar.tsx +++ b/packages/eds-core-react/src/components/Avatar/Avatar.tsx @@ -16,11 +16,10 @@ const StyledAvatar = styled.div` flex-shrink: 0; overflow: hidden; ${bordersTemplate(tokens.border)}; - ${({ size }) => - css` - height: ${size}px; - width: ${size}px; - `} + ${({ size }) => css` + height: ${size}px; + width: ${size}px; + `} ` type StyledImageProps = { diff --git a/packages/eds-core-react/src/components/Banner/Banner.test.tsx b/packages/eds-core-react/src/components/Banner/Banner.test.tsx index e3b7f0ab84..d0dc125ce0 100644 --- a/packages/eds-core-react/src/components/Banner/Banner.test.tsx +++ b/packages/eds-core-react/src/components/Banner/Banner.test.tsx @@ -1,5 +1,5 @@ /* eslint-disable no-undef */ -import { render, cleanup, screen } from '@testing-library/react' +import { render, screen } from '@testing-library/react' import '@testing-library/jest-dom' import 'jest-styled-components' import { axe } from 'jest-axe' @@ -19,8 +19,6 @@ const StyledBanner = styled(Banner)` const rgbaTrim = (x: string) => x.split(' ').join('') -afterEach(cleanup) - describe('Banner', () => { it('Matches snapshot', () => { const { asFragment } = render( diff --git a/packages/eds-core-react/src/components/Breadcrumbs/Breadcrumbs.test.tsx b/packages/eds-core-react/src/components/Breadcrumbs/Breadcrumbs.test.tsx index b2e152fce6..246064e6f0 100644 --- a/packages/eds-core-react/src/components/Breadcrumbs/Breadcrumbs.test.tsx +++ b/packages/eds-core-react/src/components/Breadcrumbs/Breadcrumbs.test.tsx @@ -1,5 +1,5 @@ /* eslint-disable no-undef */ -import { render, cleanup, fireEvent, act, screen } from '@testing-library/react' +import { render, fireEvent, act, screen } from '@testing-library/react' import '@testing-library/jest-dom' import 'jest-styled-components' import { axe } from 'jest-axe' @@ -12,8 +12,6 @@ const StyledBreadcrumbs = styled(Breadcrumbs)` position: absolute; ` -afterEach(cleanup) - describe('Breadcrumbs', () => { it('Matches snapshot', () => { const { asFragment } = render( diff --git a/packages/eds-core-react/src/components/Button/Button.test.tsx b/packages/eds-core-react/src/components/Button/Button.test.tsx index f2fc2f3c4f..68496e1a19 100644 --- a/packages/eds-core-react/src/components/Button/Button.test.tsx +++ b/packages/eds-core-react/src/components/Button/Button.test.tsx @@ -1,5 +1,5 @@ /* eslint-disable no-undef */ -import { render, cleanup, screen, fireEvent } from '@testing-library/react' +import { render, screen, fireEvent } from '@testing-library/react' import '@testing-library/jest-dom' import 'jest-styled-components' import { axe } from 'jest-axe' @@ -27,8 +27,6 @@ const LinkButton = ({ to }: { to: string }) => { ) } -afterEach(cleanup) - describe('Button', () => { it('Matches snapshot', () => { const { asFragment } = render() diff --git a/packages/eds-core-react/src/components/Card/Card.test.tsx b/packages/eds-core-react/src/components/Card/Card.test.tsx index 5ef4b29448..ffc9321669 100644 --- a/packages/eds-core-react/src/components/Card/Card.test.tsx +++ b/packages/eds-core-react/src/components/Card/Card.test.tsx @@ -1,4 +1,4 @@ -import { render, cleanup, screen } from '@testing-library/react' +import { render, screen } from '@testing-library/react' import '@testing-library/jest-dom' import 'jest-styled-components' import { axe } from 'jest-axe' @@ -42,8 +42,6 @@ const StyledActions = styled(Actions)` width: 100px; ` -afterEach(cleanup) - describe('Card', () => { it('Matches snapshot', () => { const { asFragment } = render( diff --git a/packages/eds-core-react/src/components/Checkbox/Checkbox.test.tsx b/packages/eds-core-react/src/components/Checkbox/Checkbox.test.tsx index f67f1d42d7..ef3df335cf 100644 --- a/packages/eds-core-react/src/components/Checkbox/Checkbox.test.tsx +++ b/packages/eds-core-react/src/components/Checkbox/Checkbox.test.tsx @@ -1,7 +1,7 @@ /* eslint-disable no-undef */ import { useState } from 'react' -import { render, cleanup, fireEvent, screen } from '@testing-library/react' +import { render, fireEvent, screen } from '@testing-library/react' import '@testing-library/jest-dom' import 'jest-styled-components' import { axe } from 'jest-axe' @@ -10,8 +10,6 @@ import styled from 'styled-components' import { Checkbox } from './Checkbox' -afterEach(cleanup) - const StyledCheckbox = styled(Checkbox)` clip-path: unset; ` diff --git a/packages/eds-core-react/src/components/Chip/Chip.test.tsx b/packages/eds-core-react/src/components/Chip/Chip.test.tsx index 6fc2803e1d..7c97f80774 100644 --- a/packages/eds-core-react/src/components/Chip/Chip.test.tsx +++ b/packages/eds-core-react/src/components/Chip/Chip.test.tsx @@ -1,4 +1,4 @@ -import { render, cleanup, fireEvent, screen } from '@testing-library/react' +import { render, fireEvent, screen } from '@testing-library/react' import '@testing-library/jest-dom' import { axe } from 'jest-axe' import 'jest-styled-components' @@ -17,8 +17,6 @@ const { enabled, error } = tokens const rgbaTrim = (x: string) => x.split(' ').join('') -afterEach(cleanup) - describe('Chips', () => { it('Matches snapshot', () => { const { asFragment } = render( diff --git a/packages/eds-core-react/src/components/Dialog/Dialog.test.tsx b/packages/eds-core-react/src/components/Dialog/Dialog.test.tsx index 60279ae962..00e86375d3 100644 --- a/packages/eds-core-react/src/components/Dialog/Dialog.test.tsx +++ b/packages/eds-core-react/src/components/Dialog/Dialog.test.tsx @@ -1,6 +1,6 @@ /* eslint-disable no-undef */ import { useState } from 'react' -import { render, cleanup, screen, fireEvent } from '@testing-library/react' +import { render, screen, fireEvent } from '@testing-library/react' import '@testing-library/jest-dom' import 'jest-styled-components' import { axe } from 'jest-axe' @@ -23,8 +23,6 @@ beforeAll(() => { HTMLDialogElement.prototype.close = jest.fn() }) -afterEach(cleanup) - const DismissableDialog = (props) => { const [isOpen, setIsOpen] = useState(true) diff --git a/packages/eds-core-react/src/components/Divider/Divider.test.tsx b/packages/eds-core-react/src/components/Divider/Divider.test.tsx index 77917b20cf..991b602820 100644 --- a/packages/eds-core-react/src/components/Divider/Divider.test.tsx +++ b/packages/eds-core-react/src/components/Divider/Divider.test.tsx @@ -1,5 +1,5 @@ /* eslint-disable no-undef */ -import { render, cleanup, screen } from '@testing-library/react' +import { render, screen } from '@testing-library/react' import '@testing-library/jest-dom' import { axe } from 'jest-axe' import 'jest-styled-components' @@ -25,8 +25,6 @@ const { }, } = tokens -afterEach(cleanup) - describe('Divider', () => { it('Matches snapshot', () => { const { asFragment } = render() diff --git a/packages/eds-core-react/src/components/Icon/Icon.test.tsx b/packages/eds-core-react/src/components/Icon/Icon.test.tsx index f45aca653d..6e340d5f45 100644 --- a/packages/eds-core-react/src/components/Icon/Icon.test.tsx +++ b/packages/eds-core-react/src/components/Icon/Icon.test.tsx @@ -1,5 +1,5 @@ /* eslint-disable no-undef */ -import { render, cleanup, screen } from '@testing-library/react' +import { render, screen } from '@testing-library/react' import '@testing-library/jest-dom' import 'jest-styled-components' import { axe } from 'jest-axe' @@ -15,8 +15,6 @@ const StyledIcon = styled(Icon)` width: 100px; ` -afterEach(cleanup) - describe('Icon', () => { it('Matches snapshot using data', () => { const { asFragment } = render() diff --git a/packages/eds-core-react/src/components/Icon/Icon.types.tsx b/packages/eds-core-react/src/components/Icon/Icon.types.tsx index 25c7868977..b253dbc093 100644 --- a/packages/eds-core-react/src/components/Icon/Icon.types.tsx +++ b/packages/eds-core-react/src/components/Icon/Icon.types.tsx @@ -4,7 +4,7 @@ import { add } from './library' export type IconBasket = { icon?: IconData; count: number } -export type Name = IconName | string +export type Name = IconName export type IconType = typeof Icon & { add: typeof add diff --git a/packages/eds-core-react/src/components/Input/Input.test.tsx b/packages/eds-core-react/src/components/Input/Input.test.tsx index e2690e96fe..06438cfe91 100644 --- a/packages/eds-core-react/src/components/Input/Input.test.tsx +++ b/packages/eds-core-react/src/components/Input/Input.test.tsx @@ -1,5 +1,5 @@ /* eslint-disable no-undef */ -import { render, cleanup, screen } from '@testing-library/react' +import { render, screen } from '@testing-library/react' import 'jest-styled-components' import '@testing-library/jest-dom' import { axe } from 'jest-axe' @@ -8,8 +8,6 @@ import { Input } from './Input' import * as tokens from './Input.tokens' import { trimSpaces } from '@equinor/eds-utils' -afterEach(cleanup) - describe('Input', () => { it('Matches snapshot', () => { const { asFragment } = render() diff --git a/packages/eds-core-react/src/components/InputWrapper/InputWrapper.tsx b/packages/eds-core-react/src/components/InputWrapper/InputWrapper.tsx index c101bf9db9..286b92bdd7 100644 --- a/packages/eds-core-react/src/components/InputWrapper/InputWrapper.tsx +++ b/packages/eds-core-react/src/components/InputWrapper/InputWrapper.tsx @@ -18,13 +18,15 @@ const Label = styled(_Label)` margin-left: 8px; margin-right: 8px; ` - +/* @TODO fix no-unused-prop-types disabled & readOnly */ export type InputWrapperProps = { /** Label */ label?: string /** Disabled state */ + // eslint-disable-next-line react/no-unused-prop-types disabled?: boolean /** Read Only */ + // eslint-disable-next-line react/no-unused-prop-types readOnly?: boolean /** Highlight color */ color?: Variants diff --git a/packages/eds-core-react/src/components/Label/Label.test.tsx b/packages/eds-core-react/src/components/Label/Label.test.tsx index 928f7e9309..5dc80fc7ba 100644 --- a/packages/eds-core-react/src/components/Label/Label.test.tsx +++ b/packages/eds-core-react/src/components/Label/Label.test.tsx @@ -1,12 +1,10 @@ /* eslint-disable no-undef */ -import { render, cleanup, screen } from '@testing-library/react' +import { render, screen } from '@testing-library/react' import 'jest-styled-components' import { axe } from 'jest-axe' import styled from 'styled-components' import { Label } from './Label' -afterEach(cleanup) - describe('Label', () => { it('Matches snapshot', () => { const { asFragment } = render(