-
Notifications
You must be signed in to change notification settings - Fork 155
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: Add
initialCheck capability to alert/flash content API (#2879)
- Loading branch information
1 parent
cc75463
commit b22ec75
Showing
13 changed files
with
285 additions
and
16 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
| import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects'; | ||
| import useBrowser from '@cloudscape-design/browser-test-tools/use-browser'; | ||
|
|
||
| import createWrapper from '../../../lib/components/test-utils/selectors'; | ||
|
|
||
| class RuntimeContentPage extends BasePageObject { | ||
| async rerenderAlerts() { | ||
| await this.click(createWrapper().findCheckbox('[data-testid="unmount-all"]').findNativeInput().toSelector()); | ||
| await this.keys(['Space']); | ||
| } | ||
| } | ||
|
|
||
| function setupTest(testFn: (page: RuntimeContentPage) => Promise<void>) { | ||
| return useBrowser(async browser => { | ||
| const page = new RuntimeContentPage(browser); | ||
| await browser.url('#/light/alert/runtime-content/?autofocus=true'); | ||
| await page.waitForVisible('.screenshot-area'); | ||
| await testFn(page); | ||
| }); | ||
| } | ||
|
|
||
| test( | ||
| 'should focus the alert', | ||
| setupTest(async page => { | ||
| await page.rerenderAlerts(); | ||
|
|
||
| await expect(page.getFocusedElementText()).resolves.toEqual(expect.stringContaining('---REPLACEMENT---')); | ||
| // (make sure entire page isn't focused) | ||
| await expect(page.getFocusedElementText()).resolves.toEqual(expect.not.stringContaining('Header')); | ||
| }) | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
| import * as React from 'react'; | ||
| import testRenderer, { ReactTestRendererJSON } from 'react-test-renderer'; | ||
|
|
||
| import Alert from '../../../lib/components/alert'; | ||
| import awsuiPlugins from '../../../lib/components/internal/plugins'; | ||
| import { awsuiPluginsInternal } from '../../../lib/components/internal/plugins/api'; | ||
| import { AlertFlashContentConfig } from '../../../lib/components/internal/plugins/controllers/alert-flash-content'; | ||
|
|
||
| import stylesCss from '../../../lib/components/alert/styles.css.js'; | ||
|
|
||
| afterEach(() => { | ||
| awsuiPluginsInternal.alertContent.clearRegisteredReplacer(); | ||
| jest.resetAllMocks(); | ||
| jest.restoreAllMocks(); | ||
| }); | ||
|
|
||
| // In a separate file as mixing react-test-renderer and @testing-library/react in a single file can cause some issues. | ||
| // We use react-test-renderer here as it works at a slightly lower level, so doesn't "hide" the first render cycle from tests. | ||
| describe('initialCheck method', () => { | ||
| let initialCheck: jest.Mock<boolean>; | ||
| beforeEach(() => { | ||
| initialCheck = jest.fn(() => true); | ||
| const plugin: AlertFlashContentConfig = { | ||
| id: 'plugin-1', | ||
| runReplacer: () => { | ||
| return { update: () => {}, unmount: () => {} }; | ||
| }, | ||
| initialCheck, | ||
| }; | ||
| awsuiPlugins.alertContent.registerContentReplacer(plugin); | ||
| }); | ||
|
|
||
| test('calls `initialCheck` method, and hides alert if true', () => { | ||
| const basicRender = testRenderer.create(<Alert type="error">Content</Alert>); | ||
| expect(initialCheck).toHaveBeenCalledTimes(1); | ||
| expect((basicRender.toJSON() as ReactTestRendererJSON).props.className.split(' ')).toEqual( | ||
| expect.arrayContaining([stylesCss['initial-hidden']]) | ||
| ); | ||
| }); | ||
|
|
||
| test('re-shows alert on next render', () => { | ||
| const basicRender = testRenderer.create(<Alert type="error">Content</Alert>); | ||
| basicRender.update(<Alert type="error">Content</Alert>); | ||
| expect(initialCheck).toHaveBeenCalledTimes(1); | ||
| expect((basicRender.toJSON() as ReactTestRendererJSON).props.className.split(' ')).toEqual( | ||
| expect.not.arrayContaining([stylesCss['initial-hidden']]) | ||
| ); | ||
| }); | ||
|
|
||
| test('does not hide alert if `initialCheck` returns false', () => { | ||
| initialCheck.mockReturnValue(false); | ||
| const basicRender = testRenderer.create(<Alert type="error">Content</Alert>); | ||
| expect((basicRender.toJSON() as ReactTestRendererJSON).props.className.split(' ')).toEqual( | ||
| expect.not.arrayContaining([stylesCss['initial-hidden']]) | ||
| ); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
| import * as React from 'react'; | ||
| import testRenderer, { ReactTestRenderer, ReactTestRendererJSON } from 'react-test-renderer'; | ||
|
|
||
| import Flashbar from '../../../lib/components/flashbar'; | ||
| import awsuiPlugins from '../../../lib/components/internal/plugins'; | ||
| import { awsuiPluginsInternal } from '../../../lib/components/internal/plugins/api'; | ||
| import { AlertFlashContentConfig } from '../../../lib/components/internal/plugins/controllers/alert-flash-content'; | ||
|
|
||
| import stylesCss from '../../../lib/components/flashbar/styles.css.js'; | ||
|
|
||
| afterEach(() => { | ||
| awsuiPluginsInternal.flashContent.clearRegisteredReplacer(); | ||
| jest.resetAllMocks(); | ||
| jest.restoreAllMocks(); | ||
| }); | ||
|
|
||
| // In a separate file as mixing react-test-renderer and @testing-library/react in a single file can cause some issues. | ||
| // We use react-test-renderer here as it works at a slightly lower level, so doesn't "hide" the first render cycle from tests. | ||
| describe('initialCheck method', () => { | ||
| let initialCheck: jest.Mock<boolean>; | ||
| const getFirstFlash = (basicRender: ReactTestRenderer) => | ||
| ( | ||
| ((basicRender.toJSON() as ReactTestRendererJSON).children![0] as ReactTestRendererJSON) | ||
| .children![0] as ReactTestRendererJSON | ||
| ).children![0] as ReactTestRendererJSON; | ||
| beforeEach(() => { | ||
| initialCheck = jest.fn(() => true); | ||
| const plugin: AlertFlashContentConfig = { | ||
| id: 'plugin-1', | ||
| runReplacer: () => { | ||
| return { update: () => {}, unmount: () => {} }; | ||
| }, | ||
| initialCheck, | ||
| }; | ||
| awsuiPlugins.flashContent.registerContentReplacer(plugin); | ||
| }); | ||
|
|
||
| test('calls `initialCheck` method, and hides flash if true', () => { | ||
| const basicRender = testRenderer.create(<Flashbar items={[{}]} />); | ||
| expect(initialCheck).toHaveBeenCalledTimes(1); | ||
| expect(getFirstFlash(basicRender).props.className.split(' ')).toEqual( | ||
| expect.arrayContaining([stylesCss['initial-hidden']]) | ||
| ); | ||
| }); | ||
|
|
||
| test('re-shows alert on next render', () => { | ||
| const basicRender = testRenderer.create(<Flashbar items={[{}]} />); | ||
| basicRender.update(<Flashbar items={[{}]} />); | ||
| expect(initialCheck).toHaveBeenCalledTimes(1); | ||
| expect(getFirstFlash(basicRender).props.className.split(' ')).toEqual( | ||
| expect.not.arrayContaining([stylesCss['initial-hidden']]) | ||
| ); | ||
| }); | ||
|
|
||
| test('does not hide flash if `initialCheck` returns false', () => { | ||
| initialCheck.mockReturnValue(false); | ||
| const basicRender = testRenderer.create(<Flashbar items={[{}]} />); | ||
| expect(initialCheck).toHaveBeenCalledTimes(1); | ||
| expect(getFirstFlash(basicRender).props.className.split(' ')).toEqual( | ||
| expect.not.arrayContaining([stylesCss['initial-hidden']]) | ||
| ); | ||
| }); | ||
| }); |
Oops, something went wrong.