@instructure/ui-buttons 8.55.0 → 8.55.1-snapshot-3

package/src/CondensedButton/__new-tests__/CondensedButton.test.tsx

@@ -0,0 +1,186 @@
+/*
+ * 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 userEvent from '@testing-library/user-event'
+import '@testing-library/jest-dom'
+
+import { CondensedButton } from '../index'
+
+describe('<CondensedButton/>', () => {
+  const icon = (
+    <svg
+      data-title="myIcon"
+      height="1em"
+      width="1em"
+      style={{ fill: 'currentcolor' }}
+    >
+      <circle cx="0.5em" cy="0.5em" r="0.5em" />
+    </svg>
+  )
+  const iconSelector = 'svg[data-title="myIcon"]'
+
+  it('should render children', () => {
+    const children = 'Hello world'
+
+    render(<CondensedButton>{children}</CondensedButton>)
+
+    const button = document.querySelector('button')
+
+    expect(button).toBeInTheDocument()
+    expect(button).toHaveTextContent(children)
+  })
+
+  it('should provide a focused getter', () => {
+    let componentRef: CondensedButton | undefined
+
+    render(
+      <CondensedButton
+        ref={(component: CondensedButton) => {
+          componentRef = component
+        }}
+      >
+        Hello
+      </CondensedButton>
+    )
+    const button = screen.getByRole('button', { name: 'Hello' })
+
+    button.focus()
+
+    expect(componentRef?.focused).toBe(true)
+  })
+
+  it('should provide a focus function', () => {
+    let componentRef: CondensedButton | undefined
+
+    render(
+      <CondensedButton
+        ref={(component: CondensedButton) => {
+          componentRef = component
+        }}
+      >
+        Hello
+      </CondensedButton>
+    )
+    const button = screen.getByRole('button', { name: 'Hello' })
+
+    componentRef?.focus()
+
+    expect(document.activeElement).toBe(button)
+  })
+
+  it('should pass the type attribute', () => {
+    render(<CondensedButton type="submit">Hello</CondensedButton>)
+
+    const button = screen.getByRole('button', { name: 'Hello' })
+
+    expect(button).toBeInTheDocument()
+    expect(button).toHaveAttribute('type', 'submit')
+  })
+
+  it('should pass the `elementRef` prop', async () => {
+    const elementRef = jest.fn()
+    render(<CondensedButton elementRef={elementRef}>Hello</CondensedButton>)
+    const button = screen.getByRole('button', { name: 'Hello' })
+
+    expect(elementRef).toHaveBeenCalledWith(button)
+  })
+
+  it('should pass the `as` prop', () => {
+    const { container } = render(
+      <CondensedButton as="li">Hello</CondensedButton>
+    )
+
+    const button = container.querySelector('[type="button"]')
+
+    expect(button).toBeInTheDocument()
+    expect(button).toHaveTextContent('Hello')
+    expect(button!.tagName).toBe('LI')
+  })
+
+  it('should set the disabled attribute when `interaction` is set to disabled', () => {
+    render(<CondensedButton interaction="disabled">Hello</CondensedButton>)
+
+    const button = screen.getByRole('button', { name: 'Hello' })
+
+    expect(button).toHaveAttribute('disabled')
+  })
+
+  it('should set the disabled attribute when `disabled` is set', () => {
+    render(<CondensedButton disabled>Hello</CondensedButton>)
+
+    const button = screen.getByRole('button', { name: 'Hello' })
+
+    expect(button).toHaveAttribute('disabled')
+  })
+
+  it('should set the disabled attribute when `interaction` is set to readonly', () => {
+    render(<CondensedButton interaction="readonly">Hello</CondensedButton>)
+
+    const button = screen.getByRole('button', { name: 'Hello' })
+
+    expect(button).toHaveAttribute('disabled')
+  })
+
+  it('should set the disabled attribute when `readOnly` is set', () => {
+    render(<CondensedButton readOnly>Hello</CondensedButton>)
+
+    const button = screen.getByRole('button', { name: 'Hello' })
+
+    expect(button).toHaveAttribute('disabled')
+  })
+
+  it('should pass the `href` prop', () => {
+    render(<CondensedButton href="#">Hello</CondensedButton>)
+
+    const linkButton = screen.getByRole('link', { name: 'Hello' })
+
+    expect(linkButton).toBeInTheDocument()
+    expect(linkButton).toHaveAttribute('href', '#')
+  })
+
+  it('should pass the `renderIcon` prop', async () => {
+    render(<CondensedButton renderIcon={icon}>Hello</CondensedButton>)
+
+    const svgIcon = document.querySelector(iconSelector)
+    const button = screen.getByRole('button', { name: 'Hello' })
+
+    expect(button).toBeInTheDocument()
+    expect(svgIcon).toBeInTheDocument()
+  })
+
+  it('should pass the `onClick` prop', async () => {
+    const onClick = jest.fn()
+    render(<CondensedButton onClick={onClick}>Hello</CondensedButton>)
+
+    const button = screen.getByRole('button', { name: 'Hello' })
+
+    await userEvent.click(button)
+
+    await waitFor(() => {
+      expect(onClick).toHaveBeenCalledTimes(1)
+    })
+  })
+})

package/src/IconButton/__new-tests__/IconButton.test.tsx

@@ -0,0 +1,214 @@
+/*
+ * 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 userEvent from '@testing-library/user-event'
+import '@testing-library/jest-dom'
+
+import { IconButton } from '../index'
+
+describe('<IconButton/>', () => {
+  const icon = (
+    <svg
+      data-title="myIcon"
+      height="1em"
+      width="1em"
+      style={{ fill: 'currentcolor' }}
+    >
+      <circle cx="0.5em" cy="0.5em" r="0.5em" />
+    </svg>
+  )
+  const iconSelector = 'svg[data-title="myIcon"]'
+
+  it('should render an icon when provided as the `children` prop', () => {
+    render(<IconButton screenReaderLabel="some action">{icon}</IconButton>)
+
+    const svgIcon = document.querySelector(iconSelector)
+    const button = screen.getByRole('button')
+
+    expect(button).toBeInTheDocument()
+    expect(svgIcon).toBeInTheDocument()
+    expect(button).toHaveTextContent('some action')
+  })
+
+  it('should render an icon when provided as the `renderIcon` prop', () => {
+    render(<IconButton screenReaderLabel="some action" renderIcon={icon} />)
+    const svgIcon = document.querySelector(iconSelector)
+    const button = screen.getByRole('button')
+
+    expect(button).toBeInTheDocument()
+    expect(svgIcon).toBeInTheDocument()
+  })
+
+  it('should provide a focused getter', () => {
+    let componentRef: IconButton | undefined
+
+    render(
+      <IconButton
+        screenReaderLabel="some action"
+        renderIcon={icon}
+        ref={(component: IconButton) => {
+          componentRef = component
+        }}
+      />
+    )
+    const button = screen.getByRole('button')
+
+    button.focus()
+
+    expect(componentRef?.focused).toBe(true)
+  })
+
+  it('should provide a focus function', () => {
+    let componentRef: IconButton | undefined
+
+    render(
+      <IconButton
+        screenReaderLabel="some action"
+        renderIcon={icon}
+        ref={(component: IconButton) => {
+          componentRef = component
+        }}
+      />
+    )
+    const button = screen.getByRole('button')
+
+    componentRef?.focus()
+
+    expect(document.activeElement).toBe(button)
+  })
+
+  it('should pass the `href` prop', () => {
+    render(
+      <IconButton screenReaderLabel="some action" renderIcon={icon} href="#" />
+    )
+    const linkButton = screen.getByRole('link')
+
+    expect(linkButton).toBeInTheDocument()
+    expect(linkButton).toHaveAttribute('href', '#')
+  })
+
+  it('should pass the `type` prop', () => {
+    render(
+      <IconButton
+        screenReaderLabel="some action"
+        renderIcon={icon}
+        type="reset"
+      />
+    )
+    const button = screen.getByRole('button')
+
+    expect(button).toBeInTheDocument()
+    expect(button).toHaveAttribute('type', 'reset')
+  })
+
+  it('should pass the `elementRef` prop', () => {
+    const elementRef = jest.fn()
+    render(
+      <IconButton
+        screenReaderLabel="some action"
+        renderIcon={icon}
+        elementRef={elementRef}
+      />
+    )
+    const button = screen.getByRole('button')
+
+    expect(elementRef).toHaveBeenCalledWith(button)
+  })
+
+  it('should pass the `as` prop', () => {
+    const { container } = render(
+      <IconButton screenReaderLabel="some action" renderIcon={icon} as="li" />
+    )
+    const button = container.querySelector('[type="button"]')
+
+    expect(button).toBeInTheDocument()
+    expect(button).toHaveTextContent('some action')
+    expect(button!.tagName).toBe('LI')
+  })
+
+  it('should set the disabled attribute when `interaction` is set to disabled', () => {
+    render(
+      <IconButton
+        screenReaderLabel="some action"
+        renderIcon={icon}
+        interaction="disabled"
+      />
+    )
+    const button = screen.getByRole('button')
+
+    expect(button).toHaveAttribute('disabled')
+  })
+
+  it('should set the disabled attribute when `disabled` is set', () => {
+    render(
+      <IconButton screenReaderLabel="some action" renderIcon={icon} disabled />
+    )
+    const button = screen.getByRole('button')
+
+    expect(button).toHaveAttribute('disabled')
+  })
+
+  it('should set the disabled attribute when `interaction` is set to readonly', () => {
+    render(
+      <IconButton
+        screenReaderLabel="some action"
+        renderIcon={icon}
+        interaction="readonly"
+      />
+    )
+    const button = screen.getByRole('button')
+
+    expect(button).toHaveAttribute('disabled')
+  })
+
+  it('should set the disabled attribute when `readOnly` is set', () => {
+    render(
+      <IconButton screenReaderLabel="some action" renderIcon={icon} readOnly />
+    )
+    const button = screen.getByRole('button')
+
+    expect(button).toHaveAttribute('disabled')
+  })
+
+  it('should pass the `onClick` prop', async () => {
+    const onClick = jest.fn()
+
+    render(
+      <IconButton
+        screenReaderLabel="some action"
+        renderIcon={icon}
+        onClick={onClick}
+      />
+    )
+    const button = screen.getByRole('button')
+
+    await userEvent.click(button)
+
+    await waitFor(() => {
+      expect(onClick).toHaveBeenCalledTimes(1)
+    })
+  })
+})

package/src/ToggleButton/__new-tests__/ToggleButton.test.tsx

@@ -0,0 +1,200 @@
+/*
+ * 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 userEvent from '@testing-library/user-event'
+import '@testing-library/jest-dom'
+
+import { ToggleButton } from '../index'
+
+describe('<ToggleButton />', () => {
+  const icon = (
+    <svg data-title="myIcon" height="1em" width="1em">
+      <circle cx="0.5em" cy="0.5em" r="0.5em" />
+    </svg>
+  )
+  const iconSelector = 'svg[data-title="myIcon"]'
+
+  it('should render', () => {
+    render(
+      <ToggleButton
+        screenReaderLabel="This is a screen reader label"
+        renderIcon={icon}
+        renderTooltipContent="This is tooltip content"
+        status="pressed"
+      />
+    )
+    const button = screen.getByRole('button')
+    const svgIcon = document.querySelector(iconSelector)
+    const tooltip = screen.getByRole('tooltip')
+
+    expect(button).toBeInTheDocument()
+    expect(button).toHaveTextContent('This is a screen reader label')
+    expect(svgIcon).toBeInTheDocument()
+    expect(tooltip).toBeInTheDocument()
+    expect(tooltip).toHaveTextContent('This is tooltip content')
+  })
+
+  it('should set `aria-pressed` to `true` if `status` is `pressed`', () => {
+    render(
+      <ToggleButton
+        screenReaderLabel="This is a screen reader label"
+        renderIcon={icon}
+        renderTooltipContent="This is tooltip content"
+        status="pressed"
+      />
+    )
+    const button = screen.getByRole('button')
+
+    expect(button).toHaveAttribute('aria-pressed', 'true')
+  })
+
+  it('should set `aria-pressed` to `false` if `status` is `unpressed`', () => {
+    render(
+      <ToggleButton
+        screenReaderLabel="This is a screen reader label"
+        renderIcon={icon}
+        renderTooltipContent="This is tooltip content"
+        status="unpressed"
+      />
+    )
+    const button = screen.getByRole('button')
+
+    expect(button).toHaveAttribute('aria-pressed', 'false')
+  })
+
+  it('should render an icon', () => {
+    render(
+      <ToggleButton
+        screenReaderLabel="This is a screen reader label"
+        renderIcon={icon}
+        renderTooltipContent="This is tooltip content"
+        status="pressed"
+      />
+    )
+    const button = screen.getByRole('button')
+    const svgIcon = document.querySelector(iconSelector)
+
+    expect(button).toBeInTheDocument()
+    expect(svgIcon).toBeInTheDocument()
+  })
+
+  it('should pass the `as` prop', () => {
+    const { container } = render(
+      <ToggleButton
+        screenReaderLabel="This is a screen reader label"
+        renderIcon={icon}
+        renderTooltipContent="This is tooltip content"
+        as="li"
+        status="pressed"
+      />
+    )
+    const button = container.querySelector('[type="button"]')
+
+    expect(button).toBeInTheDocument()
+    expect(button!.tagName).toBe('LI')
+  })
+
+  it('should set the disabled attribute when `interaction` prop is set to disabled', () => {
+    render(
+      <ToggleButton
+        screenReaderLabel="This is a screen reader label"
+        renderIcon={icon}
+        renderTooltipContent="This is tooltip content"
+        interaction="disabled"
+        status="pressed"
+      />
+    )
+    const button = screen.getByRole('button')
+
+    expect(button).toHaveAttribute('disabled')
+  })
+
+  it('should set the disabled attribute when `disabled` prop is set', () => {
+    render(
+      <ToggleButton
+        screenReaderLabel="This is a screen reader label"
+        renderIcon={icon}
+        renderTooltipContent="This is tooltip content"
+        disabled
+        status="pressed"
+      />
+    )
+    const button = screen.getByRole('button')
+
+    expect(button).toHaveAttribute('disabled')
+  })
+
+  it('should set the disabled attribute when `interaction` prop is set to readonly', () => {
+    render(
+      <ToggleButton
+        screenReaderLabel="This is a screen reader label"
+        renderIcon={icon}
+        renderTooltipContent="This is tooltip content"
+        interaction="readonly"
+        status="pressed"
+      />
+    )
+    const button = screen.getByRole('button')
+
+    expect(button).toHaveAttribute('disabled')
+  })
+
+  it('should set the disabled attribute when `readOnly` prop is set', () => {
+    render(
+      <ToggleButton
+        screenReaderLabel="This is a screen reader label"
+        renderIcon={icon}
+        renderTooltipContent="This is tooltip content"
+        readOnly
+        status="pressed"
+      />
+    )
+    const button = screen.getByRole('button')
+
+    expect(button).toHaveAttribute('disabled')
+  })
+
+  it('should pass the `onClick` prop', async () => {
+    const onClick = jest.fn()
+
+    render(
+      <ToggleButton
+        screenReaderLabel="This is a screen reader label"
+        renderIcon={icon}
+        renderTooltipContent="This is tooltip content"
+        onClick={onClick}
+        status="pressed"
+      />
+    )
+    const button = screen.getByRole('button')
+
+    await userEvent.click(button)
+
+    await waitFor(() => {
+      expect(onClick).toHaveBeenCalledTimes(1)
+    })
+  })
+})

package/tsconfig.build.json

@@ -8,8 +8,6 @@
   "include": ["src"],
   "references": [
     { "path": "../ui-babel-preset/tsconfig.build.json" },
-    { "path": "../ui-test-locator/tsconfig.build.json" },
-    { "path": "../ui-test-queries/tsconfig.build.json" },
     { "path": "../ui-test-utils/tsconfig.build.json" },
     { "path": "../ui-themes/tsconfig.build.json" },
     { "path": "../console/tsconfig.build.json" },
@@ -25,6 +23,7 @@
     { "path": "../ui-testable/tsconfig.build.json" },
     { "path": "../ui-tooltip/tsconfig.build.json" },
     { "path": "../ui-utils/tsconfig.build.json" },
-    { "path": "../ui-view/tsconfig.build.json" }
+    { "path": "../ui-view/tsconfig.build.json" },
+    { "path": "../ui-axe-check/tsconfig.build.json" }
   ]
 }