@instructure/ui-navigation 10.19.2-snapshot-3 → 10.19.2-snapshot-4

package/src/AppNav/Item/__new-tests__/Item.test.tsx

@@ -1,149 +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 { render, screen, waitFor } from '@testing-library/react'
-import { vi } from 'vitest'
-import userEvent from '@testing-library/user-event'
-import '@testing-library/jest-dom'
-
-import { runAxeCheck } from '@instructure/ui-axe-check'
-import { ScreenReaderContent } from '@instructure/ui-a11y-content'
-import { Item } from '../index'
-
-const icon = (
-  <svg height="24" width="24">
-    <title>Some icon</title>
-    <circle cx="50" cy="50" r="40" />
-  </svg>
-)
-
-describe('<AppNav.Item />', () => {
-  let consoleWarningMock: ReturnType<typeof vi.spyOn>
-  let consoleErrorMock: ReturnType<typeof vi.spyOn>
-
-  beforeEach(() => {
-    // Mocking console to prevent test output pollution and expect for messages
-    consoleWarningMock = vi
-      .spyOn(console, 'warn')
-      .mockImplementation(() => {}) as any
-    consoleErrorMock = vi
-      .spyOn(console, 'error')
-      .mockImplementation(() => {}) as any
-  })
-
-  afterEach(() => {
-    consoleWarningMock.mockRestore()
-    consoleErrorMock.mockRestore()
-  })
-
-  it('should render label text', async () => {
-    render(<Item renderLabel="Some label" href="#" />)
-    const item = screen.getByRole('link')
-
-    expect(item).toHaveTextContent('Some label')
-  })
-
-  it('should render an icon/image/etc.', async () => {
-    const { container } = render(
-      <Item
-        renderIcon={icon}
-        renderLabel={<ScreenReaderContent>Some label</ScreenReaderContent>}
-        href="#"
-      />
-    )
-
-    const iconTitle = screen.getByTitle('Some icon')
-    const iconSvg = container.querySelector('svg')
-    const item = screen.getByRole('link')
-
-    expect(iconTitle).toBeInTheDocument()
-    expect(iconSvg).toBeInTheDocument()
-
-    expect(iconSvg).toHaveTextContent('Some icon')
-    expect(item).toHaveTextContent('Some label')
-  })
-
-  it('should render content after the label text to accommodate badges, etc.', async () => {
-    render(
-      <Item
-        renderLabel="Some label"
-        href="#"
-        renderAfter={<strong>I am rendered after!</strong>}
-      />
-    )
-    const item = screen.getByRole('link')
-    const after = screen.getByText('I am rendered after!')
-
-    expect(item).toBeInTheDocument()
-    expect(item).toHaveTextContent('Some label')
-
-    expect(after).toBeInTheDocument()
-    expect(after.tagName).toBe('STRONG')
-  })
-
-  it('should respond to an onClick event', async () => {
-    const onClick = vi.fn()
-    render(<Item renderLabel="Some label" onClick={onClick} />)
-
-    const button = screen.getByRole('button')
-
-    await userEvent.click(button)
-
-    await waitFor(() => {
-      expect(onClick).toHaveBeenCalledTimes(1)
-    })
-  })
-
-  it('should output a console error if icon is used with non-screenreader label text', async () => {
-    render(
-      <Item
-        renderIcon={icon}
-        renderLabel="Some label"
-        onClick={() => 'clicked'}
-      />
-    )
-
-    const expectedErrorMessage =
-      'Warning: [AppNav] If an icon is used, the label text should be wrapped in <ScreenReaderContent />.'
-
-    expect(consoleErrorMock).toHaveBeenCalledWith(
-      expect.stringContaining(expectedErrorMessage),
-      expect.any(String)
-    )
-  })
-
-  it('should meet a11y standards', async () => {
-    const { container } = render(
-      <Item
-        renderIcon={icon}
-        renderLabel={<ScreenReaderContent>Some label</ScreenReaderContent>}
-        onClick={() => 'clicked'}
-      />
-    )
-
-    const axeCheck = await runAxeCheck(container)
-
-    expect(axeCheck).toBe(true)
-  })
-})

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

@@ -1,175 +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 { render, screen } from '@testing-library/react'
-import { vi } from 'vitest'
-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 { AppNav } from '../index'
-import AppNavExamples from '../__examples__/AppNav.examples'
-
-describe('<AppNav />', () => {
-  let consoleErrorMock: ReturnType<typeof vi.spyOn>
-
-  beforeEach(() => {
-    // Mocking console to prevent test output pollution
-    consoleErrorMock = vi
-      .spyOn(console, 'error')
-      .mockImplementation(() => {}) as any
-  })
-
-  afterEach(() => {
-    consoleErrorMock.mockRestore()
-  })
-
-  describe('for a11y', () => {
-    it('should render a nav element with an aria-label', async () => {
-      const { container } = render(
-        <AppNav screenReaderLabel="Screen reader label" visibleItemsCount={2}>
-          <AppNav.Item
-            renderLabel="Some label"
-            href="http://instructure.design"
-          />
-          <AppNav.Item
-            renderLabel="Some other label"
-            href="http://instructure.design"
-          />
-        </AppNav>
-      )
-
-      const appNavList = container.querySelector('ul[class*="-appNav__list"]')!
-
-      expect(appNavList).toBeInTheDocument()
-      expect(appNavList.tagName).toBe('UL')
-      expect(appNavList).toHaveAttribute('aria-label', 'Screen reader label')
-    })
-
-    it('should render a semantic list of items', async () => {
-      render(
-        <AppNav screenReaderLabel="App navigation" visibleItemsCount={2}>
-          <AppNav.Item
-            renderLabel="Some first label"
-            href="http://instructure.design"
-          />
-          <AppNav.Item
-            renderLabel="Some second label"
-            onClick={() => 'clicked'}
-          />
-        </AppNav>
-      )
-
-      const list = screen.getAllByRole('list')
-      const items = screen.getAllByRole('listitem')
-      const link = screen.getAllByRole('link')
-      const button = screen.getAllByRole('button')
-
-      expect(list.length).toBe(1)
-      expect(items.length).toBe(2)
-      expect(link.length).toBe(1)
-      expect(button.length).toBe(1)
-    })
-
-    it('should render with a single item', async () => {
-      render(
-        <AppNav screenReaderLabel="App navigation" visibleItemsCount={1}>
-          <AppNav.Item
-            renderLabel="Some label"
-            href="http://instructure.design"
-          />
-        </AppNav>
-      )
-
-      const list = screen.getAllByRole('list')
-      const items = screen.getAllByRole('listitem')
-      const link = screen.getAllByRole('link')
-
-      expect(list.length).toBe(1)
-      expect(items.length).toBe(1)
-      expect(link.length).toBe(1)
-    })
-  })
-
-  describe('with rendered content', () => {
-    it('should render content after the navigation', async () => {
-      render(
-        <AppNav
-          screenReaderLabel="App navigation"
-          renderAfterItems={<button type="button">I am rendered after!</button>}
-          visibleItemsCount={2}
-        >
-          <AppNav.Item
-            renderLabel="Some label"
-            href="http://instructure.design"
-          />
-          <AppNav.Item
-            renderLabel="Some other label"
-            href="http://instructure.design"
-          />
-        </AppNav>
-      )
-      const button = screen.getByRole('button')
-
-      expect(button).toHaveTextContent('I am rendered after!')
-    })
-  })
-
-  describe('with item truncation', () => {
-    it('should pass a custom label to the menu trigger', async () => {
-      render(
-        <AppNav
-          screenReaderLabel="App navigation"
-          visibleItemsCount={2}
-          renderTruncateLabel={function () {
-            return 'I am sooo custom!'
-          }}
-        >
-          <AppNav.Item renderLabel="Label" href="http://instructure.design" />
-          <AppNav.Item renderLabel="Label" href="http://instructure.design" />
-          <AppNav.Item renderLabel="Label" href="http://instructure.design" />
-          <AppNav.Item renderLabel="Label" href="http://instructure.design" />
-        </AppNav>
-      )
-
-      const items = screen.getAllByRole('listitem')
-
-      expect(items.length).toBe(3)
-      expect(items[2]).toHaveTextContent('I am sooo custom!')
-    })
-  })
-
-  describe('with generated examples', () => {
-    const generatedComponents = generateA11yTests(AppNav, AppNavExamples)
-    for (const component of generatedComponents) {
-      it(component.description, async () => {
-        const { container } = render(component.content)
-        const axeCheck = await runAxeCheck(container)
-        expect(axeCheck).toBe(true)
-      })
-    }
-  })
-})

package/types/AppNav/Item/__new-tests__/Item.test.d.ts

@@ -1,2 +0,0 @@
-import '@testing-library/jest-dom';
-//# sourceMappingURL=Item.test.d.ts.map

package/types/AppNav/Item/__new-tests__/Item.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Item.test.d.ts","sourceRoot":"","sources":["../../../../src/AppNav/Item/__new-tests__/Item.test.tsx"],"names":[],"mappings":"AA2BA,OAAO,2BAA2B,CAAA"}

package/types/AppNav/__new-tests__/AppNav.test.d.ts

@@ -1,2 +0,0 @@
-import '@testing-library/jest-dom';
-//# sourceMappingURL=AppNav.test.d.ts.map

package/types/AppNav/__new-tests__/AppNav.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AppNav.test.d.ts","sourceRoot":"","sources":["../../../src/AppNav/__new-tests__/AppNav.test.tsx"],"names":[],"mappings":"AA0BA,OAAO,2BAA2B,CAAA"}