test(ui-svg-images): migrate old InlineSVG and SVGIcon tests

Closes: INSTUI-4372

Author: git-nandor

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 = `<svg><circle cx="50" cy="50" r="40" /></svg>`
+
+describe('<InlineSVG />', () => {
+  it('should set custom width and height properly', async () => {
+    cy.mount(<InlineSVG src={SVG_SRC} width={WIDTH} height={HEIGHT} />)
+
+    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(<InlineSVG src={SVG_SRC} width="auto" height="auto" />)
+
+    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(<InlineSVG src={SVG_SRC} inline={false} />)
+
+    cy.get('svg').should('have.css', 'display', 'block')
+  })
+
+  it('should change the SVG color property', async () => {
+    cy.mount(<InlineSVG src={SVG_SRC} color="success" />)
+
+    cy.get('svg').then(($successSvg) => {
+      const colorSuccess = getComputedStyle($successSvg[0]).color
+
+      // Set prop: color
+      cy.mount(<InlineSVG src={SVG_SRC} color="error" />)
+
+      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(<InlineSVG src={`<svg><circle cx="50" cy="50" r="40" /></svg>`} />)
+
+    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('<circle cx="50" cy="50" r="40"></circle>')
+    })
+  })
+})

package-lock.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",

packages/ui-svg-images/package.json

@@ -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 = `<svg><circle cx="50" cy="50" r="40" /></svg>`
+
+describe('<InlineSVG />', () => {
+  it('should render', () => {
+    const { container } = render(<InlineSVG src={SVG_SRC} />)
+    const svg = container.querySelector('svg')
+
+    expect(svg).toBeInTheDocument()
+  })
+
+  it('should have role "presentation" when no title is provided', () => {
+    const { container } = render(<InlineSVG src={SVG_SRC} />)
+    const svg = container.querySelector('svg')
+
+    expect(svg).toHaveAttribute('role', 'presentation')
+  })
+
+  it('should have role "img" when a title is provided', () => {
+    const { container } = render(
+      <InlineSVG src={SVG_SRC} title="testIconTitle" />
+    )
+    const svg = container.querySelector('svg')
+
+    expect(svg).toHaveAttribute('role', 'img')
+  })
+
+  it('should add a group with a role "presentation', () => {
+    const { container } = render(
+      <InlineSVG src={SVG_SRC} title="testIconTitle" />
+    )
+    const group = container.querySelector('g')
+
+    expect(group).toHaveAttribute('role', 'presentation')
+  })
+
+  it('should not render title when no title prop is provided', () => {
+    const { container } = render(<InlineSVG src={SVG_SRC} />)
+    const title = container.querySelector('title')
+
+    expect(title).not.toBeInTheDocument()
+  })
+
+  it('should render title when title prop is provided', () => {
+    const { container } = render(<InlineSVG src={SVG_SRC} title="Test Title" />)
+    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(<InlineSVG src={SVG_SRC} />)
+    const description = container.querySelector('desc')
+
+    expect(description).not.toBeInTheDocument()
+  })
+
+  it('should render description when description prop is provided', () => {
+    const { container } = render(
+      <InlineSVG src={SVG_SRC} description="testIconDesc" />
+    )
+    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(<InlineSVG src={SVG_SRC} />)
+    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(
+      <InlineSVG
+        src={SVG_SRC}
+        title="testIconTitle"
+        description="testIconDescription"
+      />
+    )
+    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(<InlineSVG src={SVG_SRC} />)
+    const svg = container.querySelector('svg')
+
+    expect(svg).toHaveAttribute('focusable', 'false')
+  })
+
+  it('should allow focusable to be overridden', () => {
+    const { container } = render(<InlineSVG src={SVG_SRC} focusable={true} />)
+    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)
+      }
+    )
+  })
+})