Skip to content

Commit 93843ba

Browse files
zombieJzombieJ
committed
test: align notification refactor coverage
1 parent 484b995 commit 93843ba

4 files changed

Lines changed: 8 additions & 399 deletions

File tree

‎tests/hooks.test.tsx‎

Lines changed: 2 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React, { ReactElement } from 'react';
22
import { render, fireEvent, act } from '@testing-library/react';
3-
import { useNotification, NotificationProvider } from '../src';
3+
import { useNotification } from '../src';
44
import type { NotificationAPI, NotificationConfig } from '../src';
5+
import NotificationProvider from '../src/NotificationProvider';
56

67
require('../assets/index.less');
78

@@ -180,44 +181,4 @@ describe('Notification.Hooks', () => {
180181
expect(document.querySelector('.rc-notification')).toHaveClass('banana');
181182
expect(document.querySelector('.custom-notice')).toHaveClass('apple');
182183
});
183-
184-
it('support root classNames defaults', () => {
185-
const { instance } = renderDemo({
186-
classNames: {
187-
wrapper: 'hook-wrapper',
188-
close: 'hook-close',
189-
},
190-
});
191-
192-
act(() => {
193-
instance.open({
194-
description: <div className="bamboo" />,
195-
duration: 0,
196-
closable: true,
197-
icon: <span />,
198-
classNames: {
199-
root: 'notice-root',
200-
},
201-
});
202-
});
203-
204-
expect(document.querySelector('.hook-wrapper')).toHaveClass('hook-wrapper');
205-
expect(document.querySelector('.rc-notification-notice')).toHaveClass('notice-root');
206-
expect(document.querySelector('.rc-notification-notice-close')).toHaveClass('hook-close');
207-
});
208-
209-
it('support root placement defaults', () => {
210-
const { instance } = renderDemo({
211-
placement: 'bottomLeft',
212-
});
213-
214-
act(() => {
215-
instance.open({
216-
description: <div className="bamboo" />,
217-
duration: 0,
218-
});
219-
});
220-
221-
expect(document.querySelector('.rc-notification')).toHaveClass('rc-notification-bottomLeft');
222-
});
223184
});

‎tests/index.test.tsx‎

Lines changed: 6 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -68,26 +68,6 @@ describe('Notification.Basic', () => {
6868
expect(document.querySelector('.test-icon').textContent).toEqual('test-close-icon');
6969
});
7070

71-
it('works with default close icon and aria props', () => {
72-
const { instance } = renderDemo();
73-
74-
act(() => {
75-
instance.open({
76-
description: <p className="test">1</p>,
77-
closable: {
78-
'aria-describedby': 'custom-close',
79-
},
80-
duration: 0,
81-
});
82-
});
83-
84-
const closeBtn = document.querySelector('.rc-notification-notice-close');
85-
86-
expect(document.querySelectorAll('.test')).toHaveLength(1);
87-
expect(closeBtn?.textContent).toEqual('×');
88-
expect(closeBtn).toHaveAttribute('aria-describedby', 'custom-close');
89-
});
90-
9171
it('works with multi instance', () => {
9272
const { instance } = renderDemo();
9373

@@ -944,12 +924,12 @@ describe('Notification.Basic', () => {
944924
it('show with progress', () => {
945925
const { instance } = renderDemo({
946926
duration: 1,
927+
showProgress: true,
947928
});
948929

949930
act(() => {
950931
instance.open({
951932
description: <p className="test">1</p>,
952-
showProgress: true,
953933
});
954934
});
955935

@@ -969,30 +949,25 @@ describe('Notification.Basic', () => {
969949
});
970950

971951
it('supports custom progress component', () => {
972-
const CustomProgress: React.FC<NotificationProgressProps> = ({ className, percent }) => (
973-
<div className={className} data-testid="custom-progress">
974-
{percent}
975-
</div>
952+
const CustomProgress: React.FC<NotificationProgressProps> = ({ className }) => (
953+
<span className={className} />
976954
);
977955

978956
const { instance } = renderDemo({
979-
duration: 1,
980957
components: {
981958
progress: CustomProgress,
982959
},
960+
duration: 1,
961+
showProgress: true,
983962
});
984963

985964
act(() => {
986965
instance.open({
987966
description: <p className="test">1</p>,
988-
showProgress: true,
989967
});
990968
});
991969

992-
expect(document.querySelector('progress')).toBeFalsy();
993-
expect(document.querySelector('.rc-notification-notice-progress')?.textContent).toEqual(
994-
'100',
995-
);
970+
expect(document.querySelector('span.rc-notification-notice-progress')).toBeTruthy();
996971
});
997972
});
998973

‎tests/stack.test.tsx‎

Lines changed: 0 additions & 153 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { useNotification } from '../src';
22
import { fireEvent, render } from '@testing-library/react';
33
import React from 'react';
4-
import NotificationList from '../src/NotificationList';
54

65
require('../assets/index.less');
76

@@ -41,31 +40,8 @@ describe('stack', () => {
4140
expect(document.querySelectorAll('.rc-notification-notice')).toHaveLength(5);
4241
expect(document.querySelector('.rc-notification-stack-expanded')).toBeFalsy();
4342

44-
const notices = Array.from(document.querySelectorAll<HTMLElement>('.rc-notification-notice'));
45-
expect(notices.map((notice) => notice.getAttribute('data-notification-index'))).toEqual([
46-
'4',
47-
'3',
48-
'2',
49-
'1',
50-
'0',
51-
]);
52-
expect(
53-
notices
54-
.slice(0, 2)
55-
.every((notice) => !notice.matches('.rc-notification-notice-stack-in-threshold')),
56-
).toBeTruthy();
57-
expect(
58-
notices
59-
.slice(2)
60-
.every((notice) => notice.matches('.rc-notification-notice-stack-in-threshold')),
61-
).toBeTruthy();
62-
6343
fireEvent.mouseEnter(document.querySelector('.rc-notification-list'));
6444
expect(document.querySelector('.rc-notification-stack-expanded')).toBeTruthy();
65-
expect(document.querySelector('.rc-notification-list-hovered')).toBeTruthy();
66-
67-
fireEvent.mouseLeave(document.querySelector('.rc-notification-list'));
68-
expect(document.querySelector('.rc-notification-list-hovered')).toBeFalsy();
6945
});
7046

7147
it('should collapse when amount is less than threshold', () => {
@@ -108,133 +84,4 @@ describe('stack', () => {
10884
fireEvent.mouseLeave(document.querySelector('.rc-notification-list'));
10985
expect(document.querySelector('.rc-notification-stack-expanded')).toBeFalsy();
11086
});
111-
112-
it('passes stack offset to list position by bottom edge when collapsed', () => {
113-
const offsetHeightSpy = vi
114-
.spyOn(HTMLElement.prototype, 'offsetHeight', 'get')
115-
.mockImplementation(function mockOffsetHeight() {
116-
if (this.classList?.contains('rc-notification-notice')) {
117-
if (this.querySelector('.context-content-first')) {
118-
return 80;
119-
}
120-
121-
if (this.querySelector('.context-content-second')) {
122-
return 40;
123-
}
124-
}
125-
126-
return 0;
127-
});
128-
129-
render(
130-
<NotificationList
131-
placement="topRight"
132-
stack={{ threshold: 1, offset: 12 }}
133-
configList={[
134-
{
135-
key: 'first',
136-
description: <div className="context-content-first">First</div>,
137-
duration: false,
138-
},
139-
{
140-
key: 'second',
141-
description: <div className="context-content-second">Second</div>,
142-
duration: false,
143-
},
144-
]}
145-
/>,
146-
);
147-
148-
const firstNotice = document
149-
.querySelector('.context-content-first')
150-
?.closest<HTMLElement>('.rc-notification-notice');
151-
const secondNotice = document
152-
.querySelector('.context-content-second')
153-
?.closest<HTMLElement>('.rc-notification-notice');
154-
const contentNode = document.querySelector<HTMLElement>('.rc-notification-list-content');
155-
156-
const getBottom = (notice: HTMLElement | undefined | null) =>
157-
(notice ? parseFloat(notice.style.getPropertyValue('--notification-y')) : 0) +
158-
(notice?.offsetHeight ?? 0);
159-
160-
expect(contentNode?.style.height).toBe('40px');
161-
expect(firstNotice?.style.getPropertyValue('--notification-y')).toBe('-28px');
162-
expect(secondNotice?.style.getPropertyValue('--notification-y')).toBe('0px');
163-
expect(getBottom(firstNotice) - getBottom(secondNotice)).toBe(12);
164-
165-
fireEvent.mouseEnter(document.querySelector('.rc-notification-list'));
166-
167-
expect(contentNode?.style.height).toBe('120px');
168-
expect(firstNotice?.style.getPropertyValue('--notification-y')).toBe('40px');
169-
expect(secondNotice?.style.getPropertyValue('--notification-y')).toBe('0px');
170-
171-
offsetHeightSpy.mockRestore();
172-
});
173-
174-
it('passes list css gap to list position when expanded', () => {
175-
const offsetHeightSpy = vi
176-
.spyOn(HTMLElement.prototype, 'offsetHeight', 'get')
177-
.mockImplementation(function mockOffsetHeight() {
178-
if (
179-
this.classList?.contains('rc-notification-notice-wrapper') ||
180-
this.classList?.contains('rc-notification-notice')
181-
) {
182-
return 50;
183-
}
184-
185-
return 0;
186-
});
187-
const originGetComputedStyle = window.getComputedStyle;
188-
const getComputedStyleSpy = vi
189-
.spyOn(window, 'getComputedStyle')
190-
.mockImplementation((element) => {
191-
const style = originGetComputedStyle(element);
192-
193-
if ((element as HTMLElement).classList?.contains('rc-notification-list-content')) {
194-
return new Proxy(style, {
195-
get(target, prop, receiver) {
196-
if (prop === 'gap' || prop === 'rowGap') {
197-
return '8px';
198-
}
199-
200-
return Reflect.get(target, prop, receiver);
201-
},
202-
}) as CSSStyleDeclaration;
203-
}
204-
205-
return style;
206-
});
207-
208-
render(
209-
<NotificationList
210-
configList={[
211-
{
212-
key: 'first',
213-
description: <div className="context-content-first">First</div>,
214-
duration: false,
215-
},
216-
{
217-
key: 'second',
218-
description: <div className="context-content-second">Second</div>,
219-
duration: false,
220-
},
221-
]}
222-
/>,
223-
);
224-
225-
const firstNotice = document
226-
.querySelector('.context-content-first')
227-
?.closest<HTMLElement>('.rc-notification-notice');
228-
const secondNotice = document
229-
.querySelector('.context-content-second')
230-
?.closest<HTMLElement>('.rc-notification-notice');
231-
232-
expect(firstNotice?.getAttribute('data-notification-index')).toBe('1');
233-
expect(secondNotice?.getAttribute('data-notification-index')).toBe('0');
234-
expect(firstNotice?.style.getPropertyValue('--notification-y')).toBe('58px');
235-
expect(secondNotice?.style.getPropertyValue('--notification-y')).toBe('0px');
236-
237-
getComputedStyleSpy.mockRestore();
238-
offsetHeightSpy.mockRestore();
239-
});
24087
});

0 commit comments

Comments
 (0)