diff --git a/packages/design-system/src/components/ButtonAsLink/Primitive/ButtonPrimitiveAsLink.tsx b/packages/design-system/src/components/ButtonAsLink/Primitive/ButtonPrimitiveAsLink.tsx index e9aa471706e..ed18b9b21d8 100644 --- a/packages/design-system/src/components/ButtonAsLink/Primitive/ButtonPrimitiveAsLink.tsx +++ b/packages/design-system/src/components/ButtonAsLink/Primitive/ButtonPrimitiveAsLink.tsx @@ -1,6 +1,6 @@ import { forwardRef, Ref } from 'react'; import classnames from 'classnames'; -import Linkable, { LinkableType } from '../../Linkable'; +import { Linkable, LinkableType } from '../../Linkable'; import { StackHorizontal } from '../../Stack'; diff --git a/packages/design-system/src/components/Dropdown/Primitive/DropdownLink.tsx b/packages/design-system/src/components/Dropdown/Primitive/DropdownLink.tsx index 559c273787c..2f1cffa3786 100644 --- a/packages/design-system/src/components/Dropdown/Primitive/DropdownLink.tsx +++ b/packages/design-system/src/components/Dropdown/Primitive/DropdownLink.tsx @@ -1,5 +1,5 @@ import { forwardRef, ReactElement, Ref } from 'react'; -import Linkable, { LinkableType } from '../../Linkable'; +import { Linkable, LinkableType } from '../../Linkable'; import styles from './DropdownEntry.module.scss'; diff --git a/packages/design-system/src/components/InlineMessage/InlineMessage.test.tsx b/packages/design-system/src/components/InlineMessage/InlineMessage.test.tsx new file mode 100644 index 00000000000..1c161e14900 --- /dev/null +++ b/packages/design-system/src/components/InlineMessage/InlineMessage.test.tsx @@ -0,0 +1,24 @@ +/* eslint-disable import/no-extraneous-dependencies */ +import { describe, it, expect } from '@jest/globals'; +import { axe } from 'jest-axe'; +import { render } from '@testing-library/react'; +import { InlineMessage } from './'; + +describe('InlineMessage', () => { + it('should render a11y html', async () => { + const { container } = render( +
+ + + + + +
, + ); + // eslint-disable-next-line testing-library/no-container + container.querySelector('button')?.click(); + expect(container.firstChild).toMatchSnapshot(); + const results = await axe(document.body); + expect(results).toHaveNoViolations(); + }); +}); diff --git a/packages/design-system/src/components/InlineMessage/__snapshots__/InlineMessage.test.tsx.snap b/packages/design-system/src/components/InlineMessage/__snapshots__/InlineMessage.test.tsx.snap new file mode 100644 index 00000000000..04f1e99df2a --- /dev/null +++ b/packages/design-system/src/components/InlineMessage/__snapshots__/InlineMessage.test.tsx.snap @@ -0,0 +1,141 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`InlineMessage should render a11y html 1`] = ` +
+
+ + + +

+ + The information message value + +

+
+
+ + + +

+ + The destructive message value + +

+
+
+ + + +

+ + The success message value + +

+
+
+ + + +

+ + The warning message value + +

+
+
+ + + +

+ + The beta message value + +

+
+
+`; diff --git a/packages/design-system/src/components/Link/Link.cy.tsx b/packages/design-system/src/components/Link/Link.cy.tsx index 5228f9719c7..c399c4e153a 100644 --- a/packages/design-system/src/components/Link/Link.cy.tsx +++ b/packages/design-system/src/components/Link/Link.cy.tsx @@ -13,17 +13,25 @@ context('', () => { }); it('should render icon before', () => { - cy.mount(); + cy.mount( + + Link example + , + ); cy.findByTestId('link.icon.before').should('be.visible'); }); it('should render external', () => { - cy.mount(); + cy.mount(Link example); cy.findByTestId('link.icon.external').should('be.visible'); }); it('should render disabled', () => { - cy.mount(); + cy.mount( + + Link example + , + ); cy.findByTestId('my.link').should('have.attr', 'aria-disabled'); }); diff --git a/packages/design-system/src/components/Link/Link.test.tsx b/packages/design-system/src/components/Link/Link.test.tsx new file mode 100644 index 00000000000..e38a4d51883 --- /dev/null +++ b/packages/design-system/src/components/Link/Link.test.tsx @@ -0,0 +1,26 @@ +/* eslint-disable import/no-extraneous-dependencies */ +import { describe, it, expect } from '@jest/globals'; +import { axe } from 'jest-axe'; +import { render } from '@testing-library/react'; +import { Link } from './'; + +describe('Link', () => { + it('should render a11y html', async () => { + const { container } = render( +
+ + Link example + + + Link example + + Link example +
, + ); + // eslint-disable-next-line testing-library/no-container + container.querySelector('button')?.click(); + expect(container.firstChild).toMatchSnapshot(); + const results = await axe(document.body); + expect(results).toHaveNoViolations(); + }); +}); diff --git a/packages/design-system/src/components/Link/Link.tsx b/packages/design-system/src/components/Link/Link.tsx index 3f8692d00be..2bb68c44fea 100644 --- a/packages/design-system/src/components/Link/Link.tsx +++ b/packages/design-system/src/components/Link/Link.tsx @@ -3,7 +3,7 @@ import { forwardRef, ReactElement, Ref, useCallback, useMemo } from 'react'; import classNames from 'classnames'; import { useTranslation } from 'react-i18next'; import { DeprecatedIconNames } from '../../types'; -import Linkable, { LinkableType, isBlank as targetCheck } from '../Linkable'; +import { Linkable, LinkableType, isBlank as targetCheck } from '../Linkable'; import style from './Link.module.scss'; import { I18N_DOMAIN_DESIGN_SYSTEM } from '../constants'; diff --git a/packages/design-system/src/components/Link/__snapshots__/Link.test.tsx.snap b/packages/design-system/src/components/Link/__snapshots__/Link.test.tsx.snap new file mode 100644 index 00000000000..128bd74e73e --- /dev/null +++ b/packages/design-system/src/components/Link/__snapshots__/Link.test.tsx.snap @@ -0,0 +1,69 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Link should render a11y html 1`] = ` +
+ + + Link example + + + + + + + + Link example + + + + + Link example + + + + + +
+`; diff --git a/packages/design-system/src/components/LinkAsButton/LinkAsButton.test.tsx b/packages/design-system/src/components/LinkAsButton/LinkAsButton.test.tsx new file mode 100644 index 00000000000..b7eebaae409 --- /dev/null +++ b/packages/design-system/src/components/LinkAsButton/LinkAsButton.test.tsx @@ -0,0 +1,22 @@ +/* eslint-disable import/no-extraneous-dependencies */ +import { describe, it, expect } from '@jest/globals'; +import { axe } from 'jest-axe'; +import { render } from '@testing-library/react'; +import { LinkAsButton } from './'; + +describe('LinkAsButton', () => { + it('should render a11y html', async () => { + const { container } = render( +
+ Link example + Link example + Link example +
, + ); + // eslint-disable-next-line testing-library/no-container + container.querySelector('button')?.click(); + expect(container.firstChild).toMatchSnapshot(); + const results = await axe(document.body); + expect(results).toHaveNoViolations(); + }); +}); diff --git a/packages/design-system/src/components/LinkAsButton/__snapshots__/LinkAsButton.test.tsx.snap b/packages/design-system/src/components/LinkAsButton/__snapshots__/LinkAsButton.test.tsx.snap new file mode 100644 index 00000000000..43f9a93d4a5 --- /dev/null +++ b/packages/design-system/src/components/LinkAsButton/__snapshots__/LinkAsButton.test.tsx.snap @@ -0,0 +1,64 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`LinkAsButton should render a11y html 1`] = ` +
+ + + +
+`; diff --git a/packages/design-system/src/components/Linkable/Linkable.test.tsx b/packages/design-system/src/components/Linkable/Linkable.test.tsx new file mode 100644 index 00000000000..ca3e2a41930 --- /dev/null +++ b/packages/design-system/src/components/Linkable/Linkable.test.tsx @@ -0,0 +1,26 @@ +/* eslint-disable import/no-extraneous-dependencies */ +import { describe, it, expect } from '@jest/globals'; +import { axe } from 'jest-axe'; +import { render } from '@testing-library/react'; +import { Linkable } from './'; + +describe('Linkable', () => { + it('should render a11y html', async () => { + const { container } = render( +
+ + Linkable example + + + Linkable example + + Linkable example +
, + ); + // eslint-disable-next-line testing-library/no-container + container.querySelector('button')?.click(); + expect(container.firstChild).toMatchSnapshot(); + const results = await axe(document.body); + expect(results).toHaveNoViolations(); + }); +}); diff --git a/packages/design-system/src/components/Linkable/Linkable.tsx b/packages/design-system/src/components/Linkable/Linkable.tsx index 5f9ea9ee317..c504341a944 100644 --- a/packages/design-system/src/components/Linkable/Linkable.tsx +++ b/packages/design-system/src/components/Linkable/Linkable.tsx @@ -29,7 +29,7 @@ export function isBlank(target: string | undefined): boolean { return !!target && !['_self', '_parent', '_top'].includes(target.toLowerCase()); } -const Linkable = forwardRef( +export const Linkable = forwardRef( ( { as = 'a', @@ -127,4 +127,3 @@ const Linkable = forwardRef( ); Linkable.displayName = 'Linkable'; -export default Linkable; diff --git a/packages/design-system/src/components/Linkable/__snapshots__/Linkable.test.tsx.snap b/packages/design-system/src/components/Linkable/__snapshots__/Linkable.test.tsx.snap new file mode 100644 index 00000000000..384fdf7b668 --- /dev/null +++ b/packages/design-system/src/components/Linkable/__snapshots__/Linkable.test.tsx.snap @@ -0,0 +1,57 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Linkable should render a11y html 1`] = ` +
+ + Linkable example + + + + + + Linkable example + + + Linkable example + + + + +
+`; diff --git a/packages/design-system/src/components/Linkable/index.ts b/packages/design-system/src/components/Linkable/index.ts index 9cbfb5498fe..45dba29023e 100644 --- a/packages/design-system/src/components/Linkable/index.ts +++ b/packages/design-system/src/components/Linkable/index.ts @@ -1,5 +1 @@ -import Linkable, { LinkableType, isBlank } from './Linkable'; - -export type { LinkableType }; -export { isBlank }; -export default Linkable; +export * from './Linkable'; diff --git a/packages/design-system/src/components/Loading/Loading.test.tsx b/packages/design-system/src/components/Loading/Loading.test.tsx new file mode 100644 index 00000000000..5ef9cd0482d --- /dev/null +++ b/packages/design-system/src/components/Loading/Loading.test.tsx @@ -0,0 +1,20 @@ +/* eslint-disable import/no-extraneous-dependencies */ +import { describe, it, expect } from '@jest/globals'; +import { axe } from 'jest-axe'; +import { render } from '@testing-library/react'; +import { Loading } from './'; + +describe('Loading', () => { + it('should render a11y html', async () => { + const { container } = render( +
+ Link example +
, + ); + // eslint-disable-next-line testing-library/no-container + container.querySelector('button')?.click(); + expect(container.firstChild).toMatchSnapshot(); + const results = await axe(document.body); + expect(results).toHaveNoViolations(); + }); +}); diff --git a/packages/design-system/src/components/Loading/Loading.tsx b/packages/design-system/src/components/Loading/Loading.tsx index 36faabc84a8..cb3ac90e4db 100644 --- a/packages/design-system/src/components/Loading/Loading.tsx +++ b/packages/design-system/src/components/Loading/Loading.tsx @@ -1,30 +1,30 @@ -import { forwardRef } from 'react'; +import { HTMLAttributes, forwardRef } from 'react'; -export const Loading = forwardRef>( - (props, ref) => ( - - - ; + +export const Loading = forwardRef((props, ref) => ( + + + + + - - - - - - ), -); + + + +)); Loading.displayName = 'Loading';