test(ui-select,ui-options): migrate old Options tests

Author: git-nandor

cypress/component/OptionsItem.cy.tsx

@@ -0,0 +1,91 @@
+/*
+ * 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 { expect } from 'chai'
+import { Options } from '@instructure/ui'
+import { IconCheckSolid } from '@instructure/ui-icons'
+
+describe('<OptionsItem/>', () => {
+  it('should allow label to recieve focus', async () => {
+    const onFocus = cy.spy()
+    cy.mount(
+      <Options.Item tabIndex={-1} onFocus={onFocus}>
+        Hello World
+      </Options.Item>
+    )
+    cy.get('span[role="listitem"]').as('item')
+
+    cy.get('@item').focus()
+    cy.wrap(onFocus).should('have.been.called')
+    cy.contains('Hello World').should('be.focused')
+  })
+
+  it('should render colored icon before label', async () => {
+    cy.mount(
+      <Options.Item
+        renderBeforeLabel={(props) => {
+          return (
+            <IconCheckSolid
+              {...(props.variant === 'default' && { color: 'warning' })}
+            />
+          )
+        }}
+      >
+        Hello World
+      </Options.Item>
+    )
+
+    cy.get('[class$="-optionItem__content--before"]')
+      .find('svg[name="IconCheck"]')
+      .then(($icon) => {
+        const iconStyle = getComputedStyle($icon[0])
+        expect(iconStyle.color).to.equal('rgb(207, 74, 0)')
+      })
+  })
+
+  it('should render colored icon after highlighted label', async () => {
+    cy.mount(
+      <Options.Item
+        variant="highlighted"
+        renderAfterLabel={(props) => {
+          return (
+            <IconCheckSolid
+              {...(props.variant === 'highlighted' && { color: 'success' })}
+            />
+          )
+        }}
+      >
+        Hello World
+      </Options.Item>
+    )
+    cy.get('[class$="-optionItem__content--after"]')
+      .find('svg[name="IconCheck"]')
+      .then(($icon) => {
+        const iconStyle = getComputedStyle($icon[0])
+        expect(iconStyle.color).to.equal('rgb(3, 137, 61)')
+      })
+  })
+})

package-lock.json

@@ -23,11 +23,15 @@
   },
   "license": "MIT",
   "devDependencies": {
+    "@instructure/ui-axe-check": "10.12.0",
     "@instructure/ui-babel-preset": "10.12.0",
     "@instructure/ui-color-utils": "10.12.0",
-    "@instructure/ui-test-locator": "10.12.0",
     "@instructure/ui-test-utils": "10.12.0",
-    "@instructure/ui-themes": "10.12.0"
+    "@instructure/ui-themes": "10.12.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "vitest": "^2.1.8"
   },
   "dependencies": {
     "@babel/runtime": "^7.26.0",

packages/ui-options/package.json

@@ -0,0 +1,213 @@
+/*
+ * 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, screen, waitFor } from '@testing-library/react'
+import { vi, expect } from 'vitest'
+import userEvent from '@testing-library/user-event'
+
+import '@testing-library/jest-dom'
+import { IconCheckSolid } from '@instructure/ui-icons'
+import { Options } from '../../index'
+import { Item } from '../index'
+
+describe('<Item />', () => {
+  it('should render', async () => {
+    const { container } = render(<Item />)
+
+    const optionItem = container.querySelector('[class$="-optionItem"]')
+    expect(optionItem).toBeInTheDocument()
+
+    const optionItemContainer = optionItem!.querySelector(
+      '[class$="-optionItem__container"]'
+    )
+    expect(optionItemContainer).toBeInTheDocument()
+  })
+
+  it('should not render as a list item by default', async () => {
+    const { container } = render(<Item>Hello World</Item>)
+
+    const item = container.querySelector('[class$="-optionItem"]')
+
+    expect(item).toBeInTheDocument()
+    expect(item!.tagName).not.toBe('LI')
+  })
+
+  it('should render designated tag if `as` prop is specified', async () => {
+    const { container } = render(<Item as="li">Hello World</Item>)
+
+    const item = container.querySelector('[class$="-optionItem"]')
+
+    expect(item).toBeInTheDocument()
+    expect(item!.tagName).toBe('LI')
+  })
+
+  it('should render children properly', async () => {
+    const { container } = render(
+      <Item>
+        <span id="customContent">Hello World</span>
+      </Item>
+    )
+
+    const item = container.querySelector('[class$="-optionItem"]')
+    const customContent = item!.querySelector('#customContent')
+
+    expect(customContent).toHaveTextContent('Hello World')
+  })
+
+  it('should render role attributes appropriately when given a role', async () => {
+    const { container } = render(<Item role="option">Hello World</Item>)
+
+    const item = container.querySelector('[class$="-optionItem"]')
+    const child = screen.getByRole('option')
+
+    expect(item).toHaveAttribute('role', 'none')
+    expect(child).toBeInTheDocument()
+  })
+
+  it('should render description properly', async () => {
+    const { container } = render(
+      <Item description="Some text as description">
+        <span id="customContent">Hello World</span>
+      </Item>
+    )
+    const item = container.querySelector('[class$="-optionItem"]')
+
+    const customContent = item!.querySelector('#customContent')
+    const description = item!.querySelector('[class$="__description"]')
+
+    expect(customContent).toHaveTextContent('Hello World')
+    expect(description).toHaveTextContent('Some text as description')
+  })
+
+  it('should render role attributes for description', async () => {
+    render(
+      <Item description="Some text as description" descriptionRole="comment">
+        Hello World
+      </Item>
+    )
+    const description = screen.getByRole('comment')
+
+    expect(description).toBeInTheDocument()
+    expect(description).toHaveTextContent('Some text as description')
+  })
+
+  it('should pass props through to label', async () => {
+    const { container } = render(
+      <Item role="option" tabIndex={-1} data-custom-attr="true">
+        Hello World
+      </Item>
+    )
+    const optionItem = container.querySelector('[class$="-optionItem"]')
+    const optionItemContainer = optionItem!.querySelector(
+      '[class$="-optionItem__container"]'
+    )
+
+    expect(optionItem).toHaveRole('none')
+    expect(optionItemContainer).toHaveRole('option')
+    expect(optionItemContainer).toHaveAttribute('tabindex', '-1')
+    expect(optionItemContainer).toHaveAttribute('data-custom-attr', 'true')
+  })
+
+  it('should pass event handlers through to label', async () => {
+    const onClick = vi.fn()
+    const { container } = render(<Item onClick={onClick}>Hello World</Item>)
+
+    const optionItem = container.querySelector('[class$="-optionItem"]')
+    const optionItemContainer = container.querySelector(
+      '[class$="-optionItem__container"]'
+    )
+
+    userEvent.click(optionItem!)
+    await waitFor(() => {
+      expect(onClick).not.toHaveBeenCalled()
+    })
+
+    userEvent.click(optionItemContainer!)
+    await waitFor(() => {
+      expect(onClick).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  it('should render content before label', async () => {
+    const { container } = render(
+      <Item renderBeforeLabel={<IconCheckSolid />}>Hello World</Item>
+    )
+
+    const content = container.querySelector(
+      '[class$=-optionItem__content--before]'
+    )
+    expect(content).toBeInTheDocument()
+
+    const icon = content!.querySelector('svg[name="IconCheck"]')
+    expect(icon).toBeInTheDocument()
+  })
+
+  it('should render content after label', async () => {
+    const { container } = render(
+      <Item renderAfterLabel={<IconCheckSolid />}>Hello World</Item>
+    )
+
+    const content = container.querySelector(
+      '[class$=-optionItem__content--after]'
+    )
+    expect(content).toBeInTheDocument()
+
+    const icon = content!.querySelector('svg[name="IconCheck"]')
+    expect(icon).toBeInTheDocument()
+  })
+
+  it('should render nested lists', async () => {
+    const { container } = render(
+      <Item>
+        <Options as="ul" renderLabel={'Nested list'}>
+          <Item>Sub item</Item>
+        </Options>
+      </Item>
+    )
+
+    const item = container.querySelector('span[class$="-optionItem"]')
+    expect(item).toBeInTheDocument()
+
+    const options = item!.querySelector('div[class$="-options"]')
+    expect(options).toBeInTheDocument()
+
+    const nestedList = options!.querySelector('ul')
+    const nestedItem = options!.querySelector('li[class$="-optionItem"]')
+
+    expect(nestedList).toBeInTheDocument()
+    expect(nestedItem).toBeInTheDocument()
+    expect(nestedItem).toHaveTextContent('Sub item')
+  })
+
+  it('should render as link with href prop', async () => {
+    const { container } = render(<Item href="/helloWorld">Hello World</Item>)
+
+    const link = container.querySelector('[class$="-optionItem__container"]')
+
+    expect(link).toBeInTheDocument()
+    expect(link).toHaveAttribute('href', '/helloWorld')
+    expect(link?.tagName).toBe('A')
+  })
+})