Skip to content

Commit

Permalink
fix: tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@gabrielchl
gabrielchl committed Jan 2, 2025
1 parent 677f882 commit 5b7eff4
Show file tree
Hide file tree
Showing 3 changed files with 133 additions and 40 deletions.
34 changes: 27 additions & 7 deletions src/components/NotificationSystem/NotificationSystem.unit.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,11 @@ describe('<NotificationSystem />', () => {

act(() => {
NotificationSystem.notify(
<NotificationTemplate aria-label="Some notification" content={content} toastCloseButtonLabel="Close notification" />,
<NotificationTemplate
aria-label="Some notification"
content={content}
toastCloseButtonLabel="Close notification"
/>,
{
toastId: fixedToastId,
notificationSystemId: id,
Expand Down Expand Up @@ -364,15 +368,20 @@ describe('<NotificationSystem />', () => {
it('should show a notification after notify has been fired and disappears after dismiss has been fired', async () => {
expect.assertions(4);

render(<NotificationSystem ariaLabel="test" />);
render(<NotificationSystem id="id" ariaLabel="test" />);

const toastId = '12345';
act(() => {
NotificationSystem.notify(
<NotificationTemplate aria-label="Some label" content={textContent} toastCloseButtonLabel="Close notification" />,
<NotificationTemplate
aria-label="Some label"
content={textContent}
toastCloseButtonLabel="Close notification"
/>,
{
autoClose: false,
toastId,
notificationSystemId: 'id',
}
);
});
Expand All @@ -398,7 +407,7 @@ describe('<NotificationSystem />', () => {
expect.assertions(5);
const user = userEvent.setup();

render(<NotificationSystem ariaLabel="test" />);
render(<NotificationSystem id="id" ariaLabel="test" />);

const closeButtonText = 'Close';
const toastId = '12345';
Expand All @@ -414,6 +423,7 @@ describe('<NotificationSystem />', () => {
autoClose: false,
toastId,
attention: NotificationSystem.ATTENTION.MEDIUM,
notificationSystemId: 'id',
}
);
});
Expand All @@ -437,16 +447,21 @@ describe('<NotificationSystem />', () => {
});

it('should update an existing notification', async () => {
render(<NotificationSystem ariaLabel="test" />);
render(<NotificationSystem id="id" ariaLabel="test" />);

const toastId = '12345';
const newcontent = 'this is a new text';
act(() => {
NotificationSystem.notify(
<NotificationTemplate aria-label="Some label" content={textContent} toastCloseButtonLabel="Close notification" />,
<NotificationTemplate
aria-label="Some label"
content={textContent}
toastCloseButtonLabel="Close notification"
/>,
{
autoClose: false,
toastId,
notificationSystemId: 'id',
}
);
});
Expand All @@ -461,8 +476,13 @@ describe('<NotificationSystem />', () => {
act(() => {
NotificationSystem.update(toastId, {
render: (
<NotificationTemplate aria-label="Some label" content={newcontent} toastCloseButtonLabel="Close notification" />
<NotificationTemplate
aria-label="Some label"
content={newcontent}
toastCloseButtonLabel="Close notification"
/>
),
notificationSystemId: 'id',
});
});

Expand Down
80 changes: 80 additions & 0 deletions src/components/NotificationSystem/NotificationSystem.unit.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,11 @@ exports[`<NotificationSystem /> snapshot should match snapshot 1`] = `
</div>
</div>
</section>
<div
class="md-screen-reader-announcer-wrapper"
data-testid="screen-reader-announcer"
style="clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; width: 1px; white-space: nowrap;"
/>
</div>
`;

Expand Down Expand Up @@ -247,6 +252,11 @@ exports[`<NotificationSystem /> snapshot should match snapshot if notification c
</div>
</div>
</section>
<div
class="md-screen-reader-announcer-wrapper"
data-testid="screen-reader-announcer"
style="clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; width: 1px; white-space: nowrap;"
/>
</div>
`;

Expand Down Expand Up @@ -372,6 +382,11 @@ exports[`<NotificationSystem /> snapshot should match snapshot if notification c
</div>
</div>
</section>
<div
class="md-screen-reader-announcer-wrapper"
data-testid="screen-reader-announcer"
style="clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; width: 1px; white-space: nowrap;"
/>
</div>
`;

Expand Down Expand Up @@ -497,6 +512,11 @@ exports[`<NotificationSystem /> snapshot should match snapshot when limit is set
</div>
</div>
</section>
<div
class="md-screen-reader-announcer-wrapper"
data-testid="screen-reader-announcer"
style="clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; width: 1px; white-space: nowrap;"
/>
</div>
`;

Expand Down Expand Up @@ -622,6 +642,11 @@ exports[`<NotificationSystem /> snapshot should match snapshot with ariaLabel pr
</div>
</div>
</section>
<div
class="md-screen-reader-announcer-wrapper"
data-testid="screen-reader-announcer"
style="clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; width: 1px; white-space: nowrap;"
/>
</div>
`;

Expand Down Expand Up @@ -747,6 +772,11 @@ exports[`<NotificationSystem /> snapshot should match snapshot with body class n
</div>
</div>
</section>
<div
class="md-screen-reader-announcer-wrapper"
data-testid="screen-reader-announcer"
style="clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; width: 1px; white-space: nowrap;"
/>
</div>
`;

Expand Down Expand Up @@ -872,6 +902,11 @@ exports[`<NotificationSystem /> snapshot should match snapshot with className 1`
</div>
</div>
</section>
<div
class="md-screen-reader-announcer-wrapper"
data-testid="screen-reader-announcer"
style="clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; width: 1px; white-space: nowrap;"
/>
</div>
`;

Expand Down Expand Up @@ -997,6 +1032,11 @@ exports[`<NotificationSystem /> snapshot should match snapshot with container cl
</div>
</div>
</section>
<div
class="md-screen-reader-announcer-wrapper"
data-testid="screen-reader-announcer"
style="clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; width: 1px; white-space: nowrap;"
/>
</div>
`;

Expand Down Expand Up @@ -1115,6 +1155,11 @@ exports[`<NotificationSystem /> snapshot should match snapshot with different at
id="low_notification_container"
/>
</section>
<div
class="md-screen-reader-announcer-wrapper"
data-testid="screen-reader-announcer"
style="clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; width: 1px; white-space: nowrap;"
/>
</div>
`;

Expand Down Expand Up @@ -1240,6 +1285,11 @@ exports[`<NotificationSystem /> snapshot should match snapshot with different po
id="medium_notification_container"
/>
</section>
<div
class="md-screen-reader-announcer-wrapper"
data-testid="screen-reader-announcer"
style="clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; width: 1px; white-space: nowrap;"
/>
</div>
`;

Expand Down Expand Up @@ -1365,6 +1415,11 @@ exports[`<NotificationSystem /> snapshot should match snapshot with different zI
</div>
</div>
</section>
<div
class="md-screen-reader-announcer-wrapper"
data-testid="screen-reader-announcer"
style="clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; width: 1px; white-space: nowrap;"
/>
</div>
`;

Expand Down Expand Up @@ -1490,6 +1545,11 @@ exports[`<NotificationSystem /> snapshot should match snapshot with enter animat
</div>
</div>
</section>
<div
class="md-screen-reader-announcer-wrapper"
data-testid="screen-reader-announcer"
style="clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; width: 1px; white-space: nowrap;"
/>
</div>
`;

Expand Down Expand Up @@ -1615,6 +1675,11 @@ exports[`<NotificationSystem /> snapshot should match snapshot with id 1`] = `
</div>
</div>
</section>
<div
class="md-screen-reader-announcer-wrapper"
data-testid="screen-reader-announcer"
style="clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; width: 1px; white-space: nowrap;"
/>
</div>
`;

Expand Down Expand Up @@ -1740,6 +1805,11 @@ exports[`<NotificationSystem /> snapshot should match snapshot with newest on to
</div>
</div>
</section>
<div
class="md-screen-reader-announcer-wrapper"
data-testid="screen-reader-announcer"
style="clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; width: 1px; white-space: nowrap;"
/>
</div>
`;

Expand Down Expand Up @@ -1865,6 +1935,11 @@ exports[`<NotificationSystem /> snapshot should match snapshot with style 1`] =
</div>
</div>
</section>
<div
class="md-screen-reader-announcer-wrapper"
data-testid="screen-reader-announcer"
style="clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; width: 1px; white-space: nowrap;"
/>
</div>
`;

Expand Down Expand Up @@ -1990,5 +2065,10 @@ exports[`<NotificationSystem /> snapshot should match snapshot with toast class
</div>
</div>
</section>
<div
class="md-screen-reader-announcer-wrapper"
data-testid="screen-reader-announcer"
style="clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; width: 1px; white-space: nowrap;"
/>
</div>
`;
59 changes: 26 additions & 33 deletions src/components/NotificationSystem/NotificationSystem.utils.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,61 +23,49 @@ describe('NotificationSystem utils', () => {
jest.clearAllMocks();
});
describe('getContainerID', () => {
it('should return the right container id if an id is passed in', () => {
const id = '12345';
const id = '12345';
it('should return the right container id if attention is low', () => {
expect(getContainerID(id, ATTENTION.LOW)).toBe('12345_low_notification_container');
});

it('should return the right container id if no id is passed in', () => {
expect(getContainerID(undefined, ATTENTION.MEDIUM)).toBe('medium_notification_container');
it('should return the right container id if attention is medium', () => {
expect(getContainerID(id, ATTENTION.MEDIUM)).toBe('12345_medium_notification_container');
});

it('should return the right container id if no id is passed in', () => {
expect(getContainerID(undefined, undefined)).toBe('notification_container');
it('should return the right container id if attention is undefined', () => {
expect(getContainerID(id, undefined)).toBe('12345__notification_container');
});
});

describe('calculateAutoClose', () => {
it('should return the DEFAULT timeout if no option is provided', () => {
expect(calculateAutoClose({})).toBe(DEFAULTS.AUTOCLOSE_TIMEOUT);
expect(calculateAutoClose({ notificationSystemId: 'id' })).toBe(DEFAULTS.AUTOCLOSE_TIMEOUT);
});

it('should return the DEFAULT timeout if no custom autoClose is provided and ATTENTION is low', () => {
expect(calculateAutoClose({ attention: ATTENTION.LOW })).toBe(DEFAULTS.AUTOCLOSE_TIMEOUT);
expect(calculateAutoClose({ attention: ATTENTION.LOW, notificationSystemId: 'id' })).toBe(
DEFAULTS.AUTOCLOSE_TIMEOUT
);
});

it('should return the right autoClose timeout if an custom autoClose is provided', () => {
const autoClose = 3500;
expect(calculateAutoClose({ autoClose })).toBe(3500);
expect(calculateAutoClose({ autoClose, notificationSystemId: 'id' })).toBe(3500);
});

it('should return false if no custom autoClose is provided', () => {
expect(calculateAutoClose({ autoClose: false })).toBe(false);
expect(calculateAutoClose({ autoClose: false, notificationSystemId: 'id' })).toBe(false);
});

it('should return false if no custom autoClose is provided and ATTENTION is medium', () => {
expect(calculateAutoClose({ attention: ATTENTION.MEDIUM })).toBe(false);
expect(calculateAutoClose({ attention: ATTENTION.MEDIUM, notificationSystemId: 'id' })).toBe(
false
);
});
});

describe('notify', () => {
it('should fire the right functions and returns correctly when firing the toast function without any options passed in', () => {
const autoCloseSpy = jest.spyOn(utils, 'calculateAutoClose');
const getContainerIDSpy = jest.spyOn(utils, 'getContainerID');

expect(notify(<div />)).toStrictEqual(expect.any(String));

expect(toast).toHaveBeenCalledWith(<div />, {
autoClose: 3000,
containerId: 'low_notification_container',
onClose: undefined,
toastId: undefined,
});
expect(autoCloseSpy).toHaveBeenCalledWith(undefined);
expect(getContainerIDSpy).toHaveBeenCalledWith(undefined, 'low');
});

it('should fire the right functions and returns correctly when firing the toast function with custom options passed in', () => {
it('should fire the right functions and returns correctly when firing the toast function', () => {
const autoCloseSpy = jest.spyOn(utils, 'calculateAutoClose');
const getContainerIDSpy = jest.spyOn(utils, 'getContainerID');
const toastId = 'test';
Expand All @@ -102,22 +90,27 @@ describe('NotificationSystem utils', () => {

describe('update', () => {
it('should fire the right functions when updating an existing toast', () => {
const toastId = notify(<div />);
const toastId = notify(<div />, { notificationSystemId: 'id' });
const getContainerIDSpy = jest.spyOn(utils, 'getContainerID');

update(toastId, { toastId: 'new', render: <p />, attention: ATTENTION.MEDIUM });
update(toastId, {
toastId: 'new',
render: <p />,
attention: ATTENTION.MEDIUM,
notificationSystemId: 'id',
});
expect(toast.update).toHaveBeenCalledWith(toastId, {
containerId: 'medium_notification_container',
containerId: 'id_medium_notification_container',
toastId: 'new',
render: <p />,
});
expect(getContainerIDSpy).toHaveBeenCalledWith(undefined, 'low');
expect(getContainerIDSpy).toHaveBeenCalledWith('id', 'medium');
});
});

describe('dismiss', () => {
it('should fire the right functions when dismissing an existing toast', () => {
const toastId = notify(<div />);
const toastId = notify(<div />, { notificationSystemId: ' id' });

dismiss(toastId);
expect(toast.dismiss).toHaveBeenCalledWith(toastId);
Expand Down

0 comments on commit 5b7eff4

Please sign in to comment.