Skip to content

Commit

Permalink
fix(fuselage): Avoid duplicated alert on ToastBar (#1324)
Browse files Browse the repository at this point in the history
  • Loading branch information
@dougfabris
dougfabris authored Mar 15, 2024
1 parent 9ccc4e7 commit 8f45029
Show file tree
Hide file tree
Showing 4 changed files with 206 additions and 15 deletions.
5 changes: 5 additions & 0 deletions .changeset/stale-socks-roll.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@rocket.chat/fuselage": patch
---

fix(fuselage): Avoid duplicated alert on ToastBar
33 changes: 23 additions & 10 deletions packages/fuselage/src/components/ToastBar/ToastBar.spec.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,31 @@
import { composeStories } from '@storybook/testing-react';
import { render } from '@testing-library/react';
import { axe } from 'jest-axe';
import React from 'react';

import { ToastBar } from '.';
import * as stories from './ToastBar.stories';

describe('[ToastBar Component]', () => {
it('renders without crashing', () => {
render(<ToastBar />);
});
const testCases = Object.values(composeStories(stories)).map((Story) => [
Story.storyName || 'Story',
Story,
]);

it('should have no a11y violations', async () => {
const { container } = render(<ToastBar />);
describe('[ToastBar Rendering]', () => {
test.each(testCases)(
`renders %s without crashing`,
async (_storyname, Story) => {
const tree = render(<Story />);
expect(tree.baseElement).toMatchSnapshot();
}
);

const results = await axe(container);
expect(results).toHaveNoViolations();
});
test.each(testCases)(
'%s should have no a11y violations',
async (_storyname, Story) => {
const { container } = render(<Story />);

const results = await axe(container);
expect(results).toHaveNoViolations();
}
);
});
8 changes: 3 additions & 5 deletions packages/fuselage/src/components/ToastBar/ToastBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ export function ToastBar({
time = 5,
id,
onClose,
buttonLabel = 'Dismiss alert',
...props
}: ToastBarProps) {
const iconName =
Expand Down Expand Up @@ -72,8 +73,6 @@ export function ToastBar({
]}
elevation='2nb'
borderRadius='x4'
role='alert'
aria-labelledby={toastId}
{...props}
>
<div className='rcx-toastbar_inner'>
Expand All @@ -82,17 +81,16 @@ export function ToastBar({
size='x20'
name={iconName}
/>
<div className='rcx-toastbar_content' id={toastId}>
<div role='alert' className='rcx-toastbar_content'>
{children}
</div>
{onClose && (
<div className='rcx-toastbar-close'>
<IconButton
tiny
aria-label={buttonLabel}
onClick={() => onClose(toastId)}
icon='cross'
tabIndex={-1}
aria-hidden
/>
</div>
)}
Expand Down
175 changes: 175 additions & 0 deletions packages/fuselage/src/components/ToastBar/__snapshots__/ToastBar.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,175 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`[ToastBar Rendering] renders Default without crashing 1`] = `
<body>
<div>
<div
class="rcx-box rcx-box--full rcx-css-fnyeze rcx-toastbar rcx-toastbar--info rcx-css-n4l2cd"
>
<div
class="rcx-toastbar_inner"
>
<i
aria-hidden="true"
class="rcx-box rcx-box--full rcx-icon--name-info rcx-icon rcx-toastbar_icon--info rcx-css-4pvxx3"
>
</i>
<div
class="rcx-toastbar_content"
role="alert"
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco
</div>
</div>
<div
class="rcx-box rcx-box--full rcx-css-1rc3wl5 rcx-toastbar_progressbar"
/>
</div>
</div>
</body>
`;

exports[`[ToastBar Rendering] renders Error without crashing 1`] = `
<body>
<div>
<div
class="rcx-box rcx-box--full rcx-css-fnyeze rcx-toastbar rcx-toastbar--error rcx-css-n4l2cd"
>
<div
class="rcx-toastbar_inner"
>
<i
aria-hidden="true"
class="rcx-box rcx-box--full rcx-icon--name-ban rcx-icon rcx-toastbar_icon--error rcx-css-4pvxx3"
>
</i>
<div
class="rcx-toastbar_content"
role="alert"
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco
</div>
</div>
<div
class="rcx-box rcx-box--full rcx-css-1rc3wl5 rcx-toastbar_progressbar"
/>
</div>
</div>
</body>
`;

exports[`[ToastBar Rendering] renders Success without crashing 1`] = `
<body>
<div>
<div
class="rcx-box rcx-box--full rcx-css-fnyeze rcx-toastbar rcx-toastbar--success rcx-css-n4l2cd"
>
<div
class="rcx-toastbar_inner"
>
<i
aria-hidden="true"
class="rcx-box rcx-box--full rcx-icon--name-circle-check rcx-icon rcx-toastbar_icon--success rcx-css-4pvxx3"
>
</i>
<div
class="rcx-toastbar_content"
role="alert"
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco
</div>
</div>
<div
class="rcx-box rcx-box--full rcx-css-1rc3wl5 rcx-toastbar_progressbar"
/>
</div>
</div>
</body>
`;

exports[`[ToastBar Rendering] renders TinyText without crashing 1`] = `
<body>
<div>
<div
class="rcx-box rcx-box--full rcx-css-fnyeze rcx-toastbar rcx-toastbar--info rcx-css-n4l2cd"
>
<div
class="rcx-toastbar_inner"
>
<i
aria-hidden="true"
class="rcx-box rcx-box--full rcx-icon--name-info rcx-icon rcx-toastbar_icon--info rcx-css-4pvxx3"
>
</i>
<div
class="rcx-toastbar_content"
role="alert"
>
Lorem ipsum dolor sit amet
</div>
</div>
<div
class="rcx-box rcx-box--full rcx-css-1rc3wl5 rcx-toastbar_progressbar"
/>
</div>
</div>
</body>
`;

exports[`[ToastBar Rendering] renders WithCloseButton without crashing 1`] = `
<body>
<div>
<div
class="rcx-box rcx-box--full rcx-css-fnyeze rcx-toastbar rcx-toastbar--info rcx-css-n4l2cd"
>
<div
class="rcx-toastbar_inner"
>
<i
aria-hidden="true"
class="rcx-box rcx-box--full rcx-icon--name-info rcx-icon rcx-toastbar_icon--info rcx-css-4pvxx3"
>
</i>
<div
class="rcx-toastbar_content"
role="alert"
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco
</div>
<div
class="rcx-toastbar-close"
>
<button
aria-label="Dismiss alert"
class="rcx-box rcx-box--full rcx-button--tiny-square rcx-button--square rcx-button--icon rcx-button"
type="button"
>
<i
aria-hidden="true"
class="rcx-box rcx-box--full rcx-icon--name-cross rcx-icon rcx-css-1g87xs3"
>
</i>
</button>
</div>
</div>
<div
class="rcx-box rcx-box--full rcx-css-1rc3wl5 rcx-toastbar_progressbar"
/>
</div>
</div>
</body>
`;

0 comments on commit 8f45029

Please sign in to comment.