Skip to content

Commit

Permalink
WIP(ui-billboard,ui-breadcrumb,ui-scripts,ui-test-utils): wip
Browse files Browse the repository at this point in the history
  • Loading branch information
balzss committed Oct 5, 2023
1 parent a88888a commit 689e505
Show file tree
Hide file tree
Showing 10 changed files with 664 additions and 30 deletions.
90 changes: 89 additions & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,10 @@ import userEvent from '@testing-library/user-event'
import '@testing-library/jest-dom/extend-expect'

import { Billboard } from '../index'
import BillboardExamples from '../__examples__/Billboard.examples'
import { IconUserLine } from '@instructure/ui-icons'
import { runAxeCheck } from '@instructure/ui-axe-check'
import { generateA11yTests } from '../../../../ui-scripts/lib/test/generateA11yTests'

Check failure on line 34 in packages/ui-billboard/src/Billboard/__new-tests__/Billboard.test.tsx

View workflow job for this annotation

GitHub Actions / chromatic_deployment

File '/home/runner/work/instructure-ui/instructure-ui/packages/ui-scripts/lib/test/generateA11yTests.tsx' is not under 'rootDir' '/home/runner/work/instructure-ui/instructure-ui/packages/ui-billboard/src'. 'rootDir' is expected to contain all source files.

Check failure on line 34 in packages/ui-billboard/src/Billboard/__new-tests__/Billboard.test.tsx

View workflow job for this annotation

GitHub Actions / chromatic_deployment

File '/home/runner/work/instructure-ui/instructure-ui/packages/ui-scripts/lib/test/generateA11yTests.tsx' is not listed within the file list of project '/home/runner/work/instructure-ui/instructure-ui/packages/ui-billboard/tsconfig.build.json'. Projects must list all files or use an 'include' pattern.

Check failure on line 34 in packages/ui-billboard/src/Billboard/__new-tests__/Billboard.test.tsx

View workflow job for this annotation

GitHub Actions / pr_validation

File '/home/runner/work/instructure-ui/instructure-ui/packages/ui-scripts/lib/test/generateA11yTests.tsx' is not under 'rootDir' '/home/runner/work/instructure-ui/instructure-ui/packages/ui-billboard/src'. 'rootDir' is expected to contain all source files.

Check failure on line 34 in packages/ui-billboard/src/Billboard/__new-tests__/Billboard.test.tsx

View workflow job for this annotation

GitHub Actions / pr_validation

File '/home/runner/work/instructure-ui/instructure-ui/packages/ui-scripts/lib/test/generateA11yTests.tsx' is not listed within the file list of project '/home/runner/work/instructure-ui/instructure-ui/packages/ui-billboard/tsconfig.build.json'. Projects must list all files or use an 'include' pattern.

const TEST_HEADING = 'test-heading'
const TEST_MESSAGE = 'test-message'
Expand All @@ -56,6 +58,15 @@ describe('<Billboard />', () => {
expect(axeCheck).toBe(true)
})

const generatedExamples = generateA11yTests(Billboard, BillboardExamples)
for (const example of generatedExamples) {
it(example.description, async () => {
const { container } = render(example.content)
const axeCheck = await runAxeCheck(container)
expect(axeCheck).toBe(true)
})
}

it('should render a heading with the correct tag', () => {
render(<Billboard heading={TEST_HEADING} headingAs="h2" />)
const heading = screen.getByText(TEST_HEADING)
Expand Down
5 changes: 4 additions & 1 deletion packages/ui-breadcrumb/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,13 @@
},
"license": "MIT",
"devDependencies": {
"@instructure/ui-axe-check": "^8.45.0",
"@instructure/ui-babel-preset": "8.45.0",
"@instructure/ui-test-locator": "8.45.0",
"@instructure/ui-test-utils": "8.45.0",
"@instructure/ui-themes": "8.45.0"
"@instructure/ui-themes": "8.45.0",
"@testing-library/jest-dom": "^6.1.3",
"@testing-library/react": "^14.0.0"
},
"dependencies": {
"@babel/runtime": "^7.22.15",
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
/*
* 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 } from '@testing-library/react'

// import { runAxeCheck } from '@instructure/ui-axe-check'
import { runAxeCheck } from '@instructure/ui-axe-check'
import { Breadcrumb } from '../index'
import BreadcrumbExamples from '../__examples__/Breadcrumb.examples'
import { generateA11yTests } from '../../../../ui-scripts/lib/test/generateA11yTests'

const originalResizeObserver = global.ResizeObserver

describe('<Breadcrumb />', () => {
beforeAll(() => {
// Mock for ResizeObserver browser API
global.ResizeObserver = jest.fn().mockImplementation(() => ({
observe: jest.fn(),
unobserve: jest.fn(),
disconnect: jest.fn()
}))
})

const generatedComponents = generateA11yTests(Breadcrumb, BreadcrumbExamples)
for (const component of generatedComponents) {
it((component as any).description, async () => {
const { container } = render((component as any).content)
const axeCheck = await runAxeCheck(container)
expect(axeCheck).toBe(true)
})
}

afterAll(() => {
global.ResizeObserver = originalResizeObserver
})
})
53 changes: 27 additions & 26 deletions packages/ui-breadcrumb/src/Breadcrumb/__tests__/Breadcrumb.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,41 +22,42 @@
* SOFTWARE.
*/

import React from 'react'
// import React from 'react'

import { expect, mount, generateA11yTests } from '@instructure/ui-test-utils'
// import { expect, mount, generateA11yTests } from '@instructure/ui-test-utils'
import { generateA11yTests } from '@instructure/ui-test-utils'

import { Breadcrumb } from '../index'
import { BreadcrumbLocator } from '../BreadcrumbLocator'
// import { BreadcrumbLocator } from '../BreadcrumbLocator'
import BreadcrumbExamples from '../__examples__/Breadcrumb.examples'

describe('<Breadcrumb />', async () => {
it('should render the label as an aria-label attribute', async () => {
await mount(
<Breadcrumb label="Settings">
<Breadcrumb.Link>Account</Breadcrumb.Link>
</Breadcrumb>
)
const breadcrumb = await BreadcrumbLocator.find()
const label = await breadcrumb.find(':label(Settings)')

expect(label.getAttribute('aria-label')).to.equal('Settings')
})
// it('should render the label as an aria-label attribute', async () => {
// await mount(
// <Breadcrumb label="Settings">
// <Breadcrumb.Link>Account</Breadcrumb.Link>
// </Breadcrumb>
// )
// const breadcrumb = await BreadcrumbLocator.find()
// const label = await breadcrumb.find(':label(Settings)')
//
// expect(label.getAttribute('aria-label')).to.equal('Settings')
// })

describe('with generated examples', async () => {
generateA11yTests(Breadcrumb, BreadcrumbExamples)
})

it('should render an icon as a separator', async () => {
await mount(
<Breadcrumb label="Settings">
<Breadcrumb.Link href="#">Account</Breadcrumb.Link>
<Breadcrumb.Link>Settings</Breadcrumb.Link>
</Breadcrumb>
)
const breadcrumb = await BreadcrumbLocator.find()
const icon = await breadcrumb.find('svg')

expect(icon.getAttribute('aria-hidden')).to.equal('true')
})
// it('should render an icon as a separator', async () => {
// await mount(
// <Breadcrumb label="Settings">
// <Breadcrumb.Link href="#">Account</Breadcrumb.Link>
// <Breadcrumb.Link>Settings</Breadcrumb.Link>
// </Breadcrumb>
// )
// const breadcrumb = await BreadcrumbLocator.find()
// const icon = await breadcrumb.find('svg')
//
// expect(icon.getAttribute('aria-hidden')).to.equal('true')
// })
})
1 change: 1 addition & 0 deletions packages/ui-breadcrumb/tsconfig.build.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
{ "path": "../ui-babel-preset/tsconfig.build.json" },
{ "path": "../ui-test-locator/tsconfig.build.json" },
{ "path": "../ui-test-utils/tsconfig.build.json" },
{ "path": "../ui-axe-check/tsconfig.build.json" },
{ "path": "../ui-themes/tsconfig.build.json" },
{ "path": "../emotion/tsconfig.build.json" },
{ "path": "../shared-types/tsconfig.build.json" },
Expand Down
61 changes: 61 additions & 0 deletions packages/ui-scripts/lib/test/generateA11yTests.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
/*
* 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 {
Example,
StoryConfig,
generateComponentExamples
} from './generateComponentExamples'

Check failure on line 29 in packages/ui-scripts/lib/test/generateA11yTests.tsx

View workflow job for this annotation

GitHub Actions / chromatic_deployment

File '/home/runner/work/instructure-ui/instructure-ui/packages/ui-scripts/lib/test/generateComponentExamples.tsx' is not under 'rootDir' '/home/runner/work/instructure-ui/instructure-ui/packages/ui-billboard/src'. 'rootDir' is expected to contain all source files.

Check failure on line 29 in packages/ui-scripts/lib/test/generateA11yTests.tsx

View workflow job for this annotation

GitHub Actions / chromatic_deployment

File '/home/runner/work/instructure-ui/instructure-ui/packages/ui-scripts/lib/test/generateComponentExamples.tsx' is not listed within the file list of project '/home/runner/work/instructure-ui/instructure-ui/packages/ui-billboard/tsconfig.build.json'. Projects must list all files or use an 'include' pattern.

Check failure on line 29 in packages/ui-scripts/lib/test/generateA11yTests.tsx

View workflow job for this annotation

GitHub Actions / chromatic_deployment

File '/home/runner/work/instructure-ui/instructure-ui/packages/ui-scripts/lib/test/generateComponentExamples.tsx' is not under 'rootDir' '/home/runner/work/instructure-ui/instructure-ui/packages/ui-breadcrumb/src'. 'rootDir' is expected to contain all source files.

Check failure on line 29 in packages/ui-scripts/lib/test/generateA11yTests.tsx

View workflow job for this annotation

GitHub Actions / chromatic_deployment

File '/home/runner/work/instructure-ui/instructure-ui/packages/ui-scripts/lib/test/generateComponentExamples.tsx' is not listed within the file list of project '/home/runner/work/instructure-ui/instructure-ui/packages/ui-breadcrumb/tsconfig.build.json'. Projects must list all files or use an 'include' pattern.

Check failure on line 29 in packages/ui-scripts/lib/test/generateA11yTests.tsx

View workflow job for this annotation

GitHub Actions / pr_validation

File '/home/runner/work/instructure-ui/instructure-ui/packages/ui-scripts/lib/test/generateComponentExamples.tsx' is not under 'rootDir' '/home/runner/work/instructure-ui/instructure-ui/packages/ui-billboard/src'. 'rootDir' is expected to contain all source files.

Check failure on line 29 in packages/ui-scripts/lib/test/generateA11yTests.tsx

View workflow job for this annotation

GitHub Actions / pr_validation

File '/home/runner/work/instructure-ui/instructure-ui/packages/ui-scripts/lib/test/generateComponentExamples.tsx' is not listed within the file list of project '/home/runner/work/instructure-ui/instructure-ui/packages/ui-billboard/tsconfig.build.json'. Projects must list all files or use an 'include' pattern.

Check failure on line 29 in packages/ui-scripts/lib/test/generateA11yTests.tsx

View workflow job for this annotation

GitHub Actions / pr_validation

File '/home/runner/work/instructure-ui/instructure-ui/packages/ui-scripts/lib/test/generateComponentExamples.tsx' is not under 'rootDir' '/home/runner/work/instructure-ui/instructure-ui/packages/ui-breadcrumb/src'. 'rootDir' is expected to contain all source files.

Check failure on line 29 in packages/ui-scripts/lib/test/generateA11yTests.tsx

View workflow job for this annotation

GitHub Actions / pr_validation

File '/home/runner/work/instructure-ui/instructure-ui/packages/ui-scripts/lib/test/generateComponentExamples.tsx' is not listed within the file list of project '/home/runner/work/instructure-ui/instructure-ui/packages/ui-breadcrumb/tsconfig.build.json'. Projects must list all files or use an 'include' pattern.

type ReturnComponentType = {
content: React.JSX.Element
description: string
}

const renderExample = ({ Component, componentProps, key }: Example<any>) => (
<Component key={key} {...componentProps} />
)

export function generateA11yTests<Props extends Record<string, any>>(
Component: React.ComponentType,
componentExample: StoryConfig<Props>
): ReturnComponentType[] {
const sections = generateComponentExamples(Component, componentExample)
const returnComponents: ReturnComponentType[] = []
sections.forEach(({ pages }, sectionIndex) => {
pages.forEach(({ examples }, pageIndex) => {
examples.forEach((example, exampleIndex) => {
const Example = renderExample.bind(null, example)
const description = `${Component.displayName} example ${
sectionIndex * sections.length + pageIndex + 1
}/${exampleIndex + 1}`
returnComponents.push({
content: <Example />,
description
})
})
})
})
return returnComponents
}
Loading

0 comments on commit 689e505

Please sign in to comment.