mirror of
https://github.com/Unleash/unleash.git
synced 2025-01-06 00:07:44 +01:00
3acb3ad2c2
**Upgrade to React v18 for Unleash v6. Here's why I think it's a good time to do it:** - Command Bar project: We've begun work on the command bar project, and there's a fantastic library we want to use. However, it requires React v18 support. - Straightforward Upgrade: I took a look at the upgrade guide https://react.dev/blog/2022/03/08/react-18-upgrade-guide and it seems fairly straightforward. In fact, I was able to get React v18 running with minimal changes in just 10 minutes! - Dropping IE Support: React v18 no longer supports Internet Explorer (IE), which is no longer supported by Microsoft as of June 15, 2022. Upgrading to v18 in v6 would be a good way to align with this change. TS updates: * FC children has to be explicit: https://stackoverflow.com/questions/71788254/react-18-typescript-children-fc * forcing version 18 types in resolutions: https://sentry.io/answers/type-is-not-assignable-to-type-reactnode/ Test updates: * fixing SWR issue that we have always had but it manifests more in new React (https://github.com/vercel/swr/issues/2373) --------- Co-authored-by: kwasniew <kwasniewski.mateusz@gmail.com>
65 lines
1.8 KiB
TypeScript
65 lines
1.8 KiB
TypeScript
import { screen } from '@testing-library/react';
|
|
import { render } from 'utils/testRenderer';
|
|
import { Banner } from './Banner';
|
|
|
|
test('should render correctly when using basic options', () => {
|
|
render(
|
|
<Banner
|
|
banner={{
|
|
message: 'This is a simple banner message.',
|
|
variant: 'warning',
|
|
}}
|
|
/>,
|
|
);
|
|
|
|
expect(
|
|
screen.getByText('This is a simple banner message.'),
|
|
).toBeInTheDocument();
|
|
expect(screen.getByTestId('WarningAmberIcon')).toBeInTheDocument();
|
|
});
|
|
|
|
test('should render correctly when using advanced options', async () => {
|
|
render(
|
|
<Banner
|
|
banner={{
|
|
message: 'This is a more advanced banner message.',
|
|
variant: 'success',
|
|
sticky: false,
|
|
icon: 'star',
|
|
link: 'dialog',
|
|
linkText: 'Click me',
|
|
dialogTitle: 'Dialog title',
|
|
dialog: 'Dialog content',
|
|
}}
|
|
/>,
|
|
);
|
|
|
|
expect(
|
|
screen.getByText('This is a more advanced banner message.'),
|
|
).toBeInTheDocument();
|
|
|
|
const link = screen.getByText('Click me');
|
|
expect(link).toBeInTheDocument();
|
|
link.click();
|
|
|
|
expect(await screen.findByText('Dialog title')).toBeInTheDocument();
|
|
expect(screen.getByText('Dialog content')).toBeInTheDocument();
|
|
});
|
|
|
|
test('should default to info variant when an invalid variant is provided', () => {
|
|
render(
|
|
<Banner
|
|
banner={{
|
|
message: 'This defaulted to an info banner message.',
|
|
// @ts-expect-error
|
|
variant: 'invalid',
|
|
}}
|
|
/>,
|
|
);
|
|
|
|
expect(
|
|
screen.getByText('This defaulted to an info banner message.'),
|
|
).toBeInTheDocument();
|
|
expect(screen.getByTestId('InfoOutlinedIcon')).toBeInTheDocument();
|
|
});
|