diff --git a/cypress/component/InlineSVG.cy.tsx b/cypress/component/InlineSVG.cy.tsx new file mode 100644 index 0000000000..51a99d50f3 --- /dev/null +++ b/cypress/component/InlineSVG.cy.tsx @@ -0,0 +1,97 @@ +/* + * The MIT License (MIT) + * + * Copyright (c) 2015 - present Instructure, Inc. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ +import React from 'react' +import '../support/component' +import 'cypress-real-events' +import { InlineSVG } from '@instructure/ui' +import { expect } from 'chai' + +const WIDTH = '100px' +const HEIGHT = '200px' +const SVG_SRC = `` + +describe('', () => { + it('should set custom width and height properly', async () => { + cy.mount() + + cy.get('svg') + .should('have.css', 'height', HEIGHT) + .and('have.css', 'width', WIDTH) + + cy.get('svg').then(($svg) => { + const attributes = $svg[0].attributes + const attributeNames = Array.from(attributes).map((attr) => attr.name) + + expect(attributeNames).to.include('width') + expect(attributeNames).to.include('height') + }) + }) + + it('should not set width/height attributes and styles when value is auto', async () => { + cy.mount() + + cy.get('svg').then(($svg) => { + const attributes = $svg[0].attributes + const attributeNames = Array.from(attributes).map((attr) => attr.name) + + expect(attributeNames).not.to.include('width') + expect(attributeNames).not.to.include('height') + }) + }) + + it('should display block when inline is false', async () => { + cy.mount() + + cy.get('svg').should('have.css', 'display', 'block') + }) + + it('should change the SVG color property', async () => { + cy.mount() + + cy.get('svg').then(($successSvg) => { + const colorSuccess = getComputedStyle($successSvg[0]).color + + // Set prop: color + cy.mount() + + cy.get('svg').then(($errorSvg) => { + const colorError = getComputedStyle($errorSvg[0]).color + + expect(colorError).to.not.equal(colorSuccess) + }) + }) + }) + + it('should allow passing in the svg src as a string', async () => { + cy.mount(`} />) + + cy.get('svg').should('exist') + cy.get('g').should('exist') + + cy.get('g').then(($g) => { + const innerHTML = $g[0].innerHTML.trim() + expect(innerHTML).to.equal('') + }) + }) +}) diff --git a/package-lock.json b/package-lock.json index 258fb7482c..ca7ae7ba86 100644 --- a/package-lock.json +++ b/package-lock.json @@ -45901,10 +45901,14 @@ "prop-types": "^15.8.1" }, "devDependencies": { + "@instructure/ui-axe-check": "10.6.0", "@instructure/ui-babel-preset": "10.6.0", - "@instructure/ui-test-locator": "10.6.0", "@instructure/ui-test-utils": "10.6.0", - "@instructure/ui-themes": "10.6.0" + "@instructure/ui-themes": "10.6.0", + "@testing-library/jest-dom": "^6.4.6", + "@testing-library/react": "^16.0.1", + "@testing-library/user-event": "^14.5.2", + "vitest": "^2.1.1" }, "peerDependencies": { "react": ">=16.8 <=18" diff --git a/packages/ui-svg-images/package.json b/packages/ui-svg-images/package.json index 6ac2872883..6132775cac 100644 --- a/packages/ui-svg-images/package.json +++ b/packages/ui-svg-images/package.json @@ -23,10 +23,14 @@ }, "license": "MIT", "devDependencies": { + "@instructure/ui-axe-check": "10.6.0", "@instructure/ui-babel-preset": "10.6.0", - "@instructure/ui-test-locator": "10.6.0", "@instructure/ui-test-utils": "10.6.0", - "@instructure/ui-themes": "10.6.0" + "@instructure/ui-themes": "10.6.0", + "@testing-library/jest-dom": "^6.4.6", + "@testing-library/react": "^16.0.1", + "@testing-library/user-event": "^14.5.2", + "vitest": "^2.1.1" }, "dependencies": { "@babel/runtime": "^7.25.6", diff --git a/packages/ui-svg-images/src/InlineSVG/InlineSVGLocator.ts b/packages/ui-svg-images/src/InlineSVG/InlineSVGLocator.ts deleted file mode 100644 index 4bce68eb6b..0000000000 --- a/packages/ui-svg-images/src/InlineSVG/InlineSVGLocator.ts +++ /dev/null @@ -1,29 +0,0 @@ -/* - * The MIT License (MIT) - * - * Copyright (c) 2015 - present Instructure, Inc. - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - * SOFTWARE. - */ -import { locator } from '@instructure/ui-test-locator' - -import { InlineSVG } from './index' - -// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message -export const InlineSVGLocator = locator(InlineSVG.selector) diff --git a/packages/ui-svg-images/src/InlineSVG/__new-tests__/InlineSVG.test.tsx b/packages/ui-svg-images/src/InlineSVG/__new-tests__/InlineSVG.test.tsx new file mode 100644 index 0000000000..7353a8c539 --- /dev/null +++ b/packages/ui-svg-images/src/InlineSVG/__new-tests__/InlineSVG.test.tsx @@ -0,0 +1,150 @@ +/* + * The MIT License (MIT) + * + * Copyright (c) 2015 - present Instructure, Inc. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +import React from 'react' +import { render } from '@testing-library/react' +import '@testing-library/jest-dom' + +// eslint-disable-next-line no-restricted-imports +import { generateA11yTests } from '@instructure/ui-scripts/lib/test/generateA11yTests' +import { runAxeCheck } from '@instructure/ui-axe-check' +import { InlineSVG } from '../index' +import InlineSVGExamples from '../__examples__/InlineSVG.examples' + +const SVG_SRC = `` + +describe('', () => { + it('should render', () => { + const { container } = render() + const svg = container.querySelector('svg') + + expect(svg).toBeInTheDocument() + }) + + it('should have role "presentation" when no title is provided', () => { + const { container } = render() + const svg = container.querySelector('svg') + + expect(svg).toHaveAttribute('role', 'presentation') + }) + + it('should have role "img" when a title is provided', () => { + const { container } = render( + + ) + const svg = container.querySelector('svg') + + expect(svg).toHaveAttribute('role', 'img') + }) + + it('should add a group with a role "presentation', () => { + const { container } = render( + + ) + const group = container.querySelector('g') + + expect(group).toHaveAttribute('role', 'presentation') + }) + + it('should not render title when no title prop is provided', () => { + const { container } = render() + const title = container.querySelector('title') + + expect(title).not.toBeInTheDocument() + }) + + it('should render title when title prop is provided', () => { + const { container } = render() + const title = container.querySelector('title') + + expect(title).toBeInTheDocument() + expect(title).toHaveTextContent('Test Title') + }) + + it('should not render description when no description prop is provided', () => { + const { container } = render() + const description = container.querySelector('desc') + + expect(description).not.toBeInTheDocument() + }) + + it('should render description when description prop is provided', () => { + const { container } = render( + + ) + const description = container.querySelector('desc') + + expect(description).toBeInTheDocument() + expect(description).toHaveTextContent('testIconDesc') + }) + + it('should produce null for "labelledBy" when no title or desc are provided', () => { + const { container } = render() + const svg = container.querySelector('svg') + + expect(svg).toBeInTheDocument() + expect(svg).not.toHaveAttribute('aria-labelledby') + }) + + it('should properly join ids when both title and desc attributes are provided', () => { + const { container } = render( + + ) + const svg = container.querySelector('svg')! + const ids = svg.getAttribute('aria-labelledby')!.split(' ') + + expect(ids.length).toBe(2) + }) + + it('should set focusable to false by default', () => { + const { container } = render() + const svg = container.querySelector('svg') + + expect(svg).toHaveAttribute('focusable', 'false') + }) + + it('should allow focusable to be overridden', () => { + const { container } = render() + const svg = container.querySelector('svg') + + expect(svg).toHaveAttribute('focusable', 'true') + }) + + describe('with generated examples', () => { + const generatedComponents = generateA11yTests(InlineSVG, InlineSVGExamples) + + it.each(generatedComponents)( + 'should be accessible with example: $description', + async ({ content }) => { + const { container } = render(content) + const axeCheck = await runAxeCheck(container) + expect(axeCheck).toBe(true) + } + ) + }) +}) diff --git a/packages/ui-svg-images/src/InlineSVG/__tests__/InlineSVG.test.tsx b/packages/ui-svg-images/src/InlineSVG/__tests__/InlineSVG.test.tsx deleted file mode 100644 index 0739391d13..0000000000 --- a/packages/ui-svg-images/src/InlineSVG/__tests__/InlineSVG.test.tsx +++ /dev/null @@ -1,192 +0,0 @@ -/* - * The MIT License (MIT) - * - * Copyright (c) 2015 - present Instructure, Inc. - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - * SOFTWARE. - */ - -import React from 'react' -import { mount, expect, generateA11yTests } from '@instructure/ui-test-utils' - -import { InlineSVG } from '../index' -import { InlineSVGLocator } from '../InlineSVGLocator' -import InlineSVGExamples from '../__examples__/InlineSVG.examples' - -import type { InlineSVGProps } from '../props' - -const SVG_SRC = `` - -describe('', async () => { - it('should render', async () => { - await mount() - const svg = await InlineSVGLocator.find() - - expect(svg).to.exist() - }) - - it('should have role "presentation" when no title is provided', async () => { - await mount() - const svg = await InlineSVGLocator.find() - - expect(svg.getAttribute('role')).to.equal('presentation') - }) - - it('should have role "img" when a title is provided', async () => { - await mount() - const svg = await InlineSVGLocator.find() - - expect(svg.getAttribute('role')).to.equal('img') - }) - - it('should add a group with a role "presentation', async () => { - await mount() - const svg = await InlineSVGLocator.find() - const group = await svg.find('g') - - expect(group.getAttribute('role')).to.equal('presentation') - }) - - it('should not render title when no title prop is provided', async () => { - await mount() - - const svg = await InlineSVGLocator.find() - const title = await svg.find('title', { expectEmpty: true }) - - expect(title).to.not.exist() - }) - - it('should render title when title prop is provided', async () => { - await mount() - const svg = await InlineSVGLocator.find() - const title = await svg.find(':withTitle(Test Title)') - - expect(title).to.exist() - }) - - it('should not render description when no description prop is provided', async () => { - await mount() - - const svg = await InlineSVGLocator.find() - const description = await svg.find('description', { - expectEmpty: true - }) - - expect(description).to.not.exist() - }) - - it('should render description when description prop is provided', async () => { - await mount() - - const svg = await InlineSVGLocator.find() - const description = await svg.find('desc') - - expect(description).to.exist() - }) - - it('should produce null for "labelledBy" when no title or desc are provided', async () => { - await mount() - const svg = await InlineSVGLocator.find() - - expect(svg.getAttribute('aria-labelledby')).to.not.exist() - }) - - it('should properly join ids when both title and desc attributes are provided', async () => { - await mount( - - ) - const svg = await InlineSVGLocator.find() - const ids = svg.getAttribute('aria-labelledby')!.split(' ') - - expect(ids).to.have.length(2) - }) - - it('should set custom width and height properly', async () => { - await mount() - const svg = await InlineSVGLocator.find() - const width = svg.getComputedStyle().width - const height = svg.getComputedStyle().height - - expect(width).to.equal('100px') - expect(height).to.equal('200px') - }) - - it('should not set width/height attributes and styles when value is auto', async () => { - await mount() - const svg = await InlineSVGLocator.find() - - expect(svg.getDOMNode()).to.have.style('width', '') - expect(svg.getDOMNode()).to.have.style('height', '') - expect(svg.getAttribute('width')).to.not.exist() - expect(svg.getAttribute('height')).to.not.exist() - }) - - it('should set focusable to false by default', async () => { - await mount() - const svg = await InlineSVGLocator.find() - - expect(svg.getAttribute('focusable')).to.equal('false') - }) - - it('should allow focusable to be overridden', async () => { - await mount() - const svg = await InlineSVGLocator.find() - - expect(svg.getAttribute('focusable')).to.equal('true') - }) - - it('should display block when inline is false', async () => { - await mount() - const svg = await InlineSVGLocator.find() - - expect(svg.getComputedStyle().getPropertyValue('display')).to.equal('block') - }) - - it('should change the SVG color property', async () => { - await mount() - const successSvg = await InlineSVGLocator.find() - const colorSuccess = successSvg.getComputedStyle().color - - await mount() - const errorSvg = await InlineSVGLocator.find() - const colorError = errorSvg.getComputedStyle().color - - expect(colorError).to.not.equal(colorSuccess) - }) - - it('should allow passing in the svg src as a string', async () => { - await mount( - `} /> - ) - const svg = await InlineSVGLocator.find() - const group = await svg.find('g') - - expect(group.getDOMNode().innerHTML).to.equal( - '' - ) - }) - - describe('with generated examples', async () => { - generateA11yTests(InlineSVG, InlineSVGExamples) - }) -}) diff --git a/packages/ui-svg-images/src/InlineSVG/locator.ts b/packages/ui-svg-images/src/InlineSVG/locator.ts deleted file mode 100644 index edf5d9518a..0000000000 --- a/packages/ui-svg-images/src/InlineSVG/locator.ts +++ /dev/null @@ -1,27 +0,0 @@ -/* - * The MIT License (MIT) - * - * Copyright (c) 2015 - present Instructure, Inc. - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - * SOFTWARE. - */ -import { InlineSVGLocator } from './InlineSVGLocator' - -export { InlineSVGLocator } -export default InlineSVGLocator diff --git a/packages/ui-svg-images/src/SVGIcon/SVGIconLocator.ts b/packages/ui-svg-images/src/SVGIcon/SVGIconLocator.ts deleted file mode 100644 index a6b1a18fdb..0000000000 --- a/packages/ui-svg-images/src/SVGIcon/SVGIconLocator.ts +++ /dev/null @@ -1,29 +0,0 @@ -/* - * The MIT License (MIT) - * - * Copyright (c) 2015 - present Instructure, Inc. - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - * SOFTWARE. - */ -import { locator } from '@instructure/ui-test-locator' - -import { SVGIcon } from './index' - -// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message -export const SVGIconLocator = locator(SVGIcon.selector) diff --git a/packages/ui-svg-images/src/SVGIcon/__new-tests__/SVGIcon.test.tsx b/packages/ui-svg-images/src/SVGIcon/__new-tests__/SVGIcon.test.tsx new file mode 100644 index 0000000000..9bd4f3fcfc --- /dev/null +++ b/packages/ui-svg-images/src/SVGIcon/__new-tests__/SVGIcon.test.tsx @@ -0,0 +1,92 @@ +/* + * The MIT License (MIT) + * + * Copyright (c) 2015 - present Instructure, Inc. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +import React from 'react' +import { render } from '@testing-library/react' +import '@testing-library/jest-dom' + +// eslint-disable-next-line no-restricted-imports +import { generateA11yTests } from '@instructure/ui-scripts/lib/test/generateA11yTests' +import { runAxeCheck } from '@instructure/ui-axe-check' +import { SVGIcon } from '../index' +import SVGIconExamples from '../__examples__/SVGIcon.examples' + +const SVG_SRC = `` + +describe('', () => { + it('should render', async () => { + const { container } = render() + const svg = container.querySelector('svg') + + expect(svg).toBeInTheDocument() + }) + + it('should set rotate to 0 by default', async () => { + const { container } = render() + const svg = container.querySelector('svg') + + expect(svg).toHaveAttribute('rotate', '0') + }) + + it('should allow rotate prop to be overridden', async () => { + const { container } = render() + const svg = container.querySelector('svg') + + expect(svg).toHaveAttribute('rotate', '90') + }) + + it('should set size', async () => { + const { container, rerender } = render( + + ) + const svg = container.querySelector('svg') + const largeFontSize = window.getComputedStyle(svg!).fontSize + + // set prop: size + rerender() + const svgUpdated = container.querySelector('svg') + const smallFontSize = window.getComputedStyle(svgUpdated!).fontSize + + expect(smallFontSize).not.toEqual(largeFontSize) + }) + + describe('with generated examples', () => { + it('should be accessible', async () => { + const { container } = render() + const axeCheck = await runAxeCheck(container) + + expect(axeCheck).toBe(true) + }) + + const generatedComponents = generateA11yTests(SVGIcon, SVGIconExamples) + it.each(generatedComponents)( + 'should be accessible with example: $description', + async ({ content }) => { + const { container } = render(content) + const axeCheck = await runAxeCheck(container) + expect(axeCheck).toBe(true) + } + ) + }) +}) diff --git a/packages/ui-svg-images/src/SVGIcon/__tests__/SVGIcon.test.tsx b/packages/ui-svg-images/src/SVGIcon/__tests__/SVGIcon.test.tsx deleted file mode 100644 index 6ea305bf81..0000000000 --- a/packages/ui-svg-images/src/SVGIcon/__tests__/SVGIcon.test.tsx +++ /dev/null @@ -1,70 +0,0 @@ -/* - * The MIT License (MIT) - * - * Copyright (c) 2015 - present Instructure, Inc. - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - * SOFTWARE. - */ - -import React from 'react' -import { mount, expect, generateA11yTests } from '@instructure/ui-test-utils' - -import { SVGIcon } from '../index' -import { SVGIconLocator } from '../SVGIconLocator' -import SVGIconExamples from '../__examples__/SVGIcon.examples' - -import type { SVGIconProps } from '../props' - -const SVG_SRC = `` - -describe('', async () => { - it('should render', async () => { - await mount() - const icon = await SVGIconLocator.find() - expect(icon).to.exist() - }) - - it('should set rotate to 0 by default', async () => { - await mount() - const icon = await SVGIconLocator.find() - expect(icon.getAttribute('rotate')).to.equal('0') - }) - - it('should allow rotate prop to be overridden', async () => { - await mount() - const icon = await SVGIconLocator.find() - expect(icon.getAttribute('rotate')).to.equal('90') - }) - - it('should set size', async () => { - await mount() - const sizeLarge = await SVGIconLocator.find() - const largeFont = sizeLarge.getComputedStyle().fontSize - - await mount() - const sizeSmall = await SVGIconLocator.find() - const smallFont = sizeSmall.getComputedStyle().fontSize - - expect(smallFont).to.not.equal(largeFont) - }) - - describe('with generated examples', async () => { - generateA11yTests(SVGIcon, SVGIconExamples) - }) -}) diff --git a/packages/ui-svg-images/src/SVGIcon/locator.ts b/packages/ui-svg-images/src/SVGIcon/locator.ts deleted file mode 100644 index 2b0c64462b..0000000000 --- a/packages/ui-svg-images/src/SVGIcon/locator.ts +++ /dev/null @@ -1,27 +0,0 @@ -/* - * The MIT License (MIT) - * - * Copyright (c) 2015 - present Instructure, Inc. - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - * SOFTWARE. - */ -import { SVGIconLocator } from './SVGIconLocator' - -export { SVGIconLocator } -export default SVGIconLocator diff --git a/packages/ui-svg-images/tsconfig.build.json b/packages/ui-svg-images/tsconfig.build.json index 8aa6f3e562..b2a558ddcc 100644 --- a/packages/ui-svg-images/tsconfig.build.json +++ b/packages/ui-svg-images/tsconfig.build.json @@ -8,7 +8,6 @@ "include": ["src"], "references": [ { "path": "../ui-babel-preset/tsconfig.build.json" }, - { "path": "../ui-test-locator/tsconfig.build.json" }, { "path": "../ui-test-utils/tsconfig.build.json" }, { "path": "../ui-themes/tsconfig.build.json" }, { "path": "../emotion/tsconfig.build.json" }, @@ -16,6 +15,7 @@ { "path": "../ui-react-utils/tsconfig.build.json" }, { "path": "../ui-testable/tsconfig.build.json" }, { "path": "../ui-utils/tsconfig.build.json" }, - { "path": "../uid/tsconfig.build.json" } + { "path": "../uid/tsconfig.build.json" }, + { "path": "../ui-axe-check/tsconfig.build.json" } ] }