Skip to content

Commit a91058b

Browse files
mortalYoungmortalYoung
committed
test: add unit tests
1 parent f2bc4d2 commit a91058b

File tree

12 files changed

+728
-4
lines changed

12 files changed

+728
-4
lines changed

‎src/chat/__tests__/__snapshots__/button.test.tsx.snap‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Test Chat Button Match the snapshot: default button 1`] = `
4+
<DocumentFragment>
5+
<button
6+
class="ant-btn ant-btn-default ant-btn-background-ghost dtc__aigc__button dtc__aigc__button--default"
7+
type="button"
8+
>
9+
<span
10+
class="dtc__aigc__button__text"
11+
>
12+
Default
13+
</span>
14+
</button>
15+
</DocumentFragment>
16+
`;
17+
18+
exports[`Test Chat Button Match the snapshot: primary button 1`] = `
19+
<DocumentFragment>
20+
<button
21+
class="ant-btn ant-btn-default ant-btn-background-ghost dtc__aigc__button dtc__aigc__button--primary"
22+
type="button"
23+
>
24+
<span
25+
class="dtc__aigc__button__text"
26+
>
27+
Default
28+
</span>
29+
</button>
30+
</DocumentFragment>
31+
`;
32+
33+
exports[`Test Chat Button Match the snapshot: secondary button 1`] = `
34+
<DocumentFragment>
35+
<button
36+
class="ant-btn ant-btn-default ant-btn-background-ghost dtc__aigc__button dtc__aigc__button--secondary"
37+
type="button"
38+
>
39+
<span
40+
class="dtc__aigc__button__text"
41+
>
42+
Default
43+
</span>
44+
</button>
45+
</DocumentFragment>
46+
`;
47+
48+
exports[`Test Chat Button expect ONLY one global gradient div: global gradient 1`] = `"<svg width="0" height="0"><defs><linearGradient id="secondary_linear_gradient" x1="1.18164" y1="3.93164" x2="13.9881" y2="8.54198" gradientUnits="userSpaceOnUse"><stop stop-color="#00BAC6"></stop><stop offset="0.5" stop-color="#0067FF"></stop><stop offset="1" stop-color="#450FDE"></stop></linearGradient><linearGradient id="secondary_linear_gradient_hover" x1="8.96582" y1="0.96582" x2="15.9711" y2="3.4877" gradientUnits="userSpaceOnUse"><stop stop-color="#00BAC6"></stop><stop offset="0.5" stop-color="#0067FF"></stop><stop offset="1" stop-color="#450FDE"></stop></linearGradient></defs></svg>"`;

‎src/chat/__tests__/__snapshots__/codeBlock.test.tsx.snap‎

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Test Chat CodeBlock Match snapshot: normal 1`] = `
4+
<DocumentFragment>
5+
<div
6+
class="dtc__aigc__codeblock jest_test"
7+
style="color: red;"
8+
>
9+
<div
10+
class="dtc__aigc__codeblock__header"
11+
>
12+
<span
13+
class="dtc__aigc__codeblock__language"
14+
>
15+
javascript
16+
</span>
17+
<div
18+
class="dtc__aigc__codeblock__tool"
19+
>
20+
<span
21+
class="dtc-copy"
22+
>
23+
<span
24+
class="dtc__icon"
25+
>
26+
<svg
27+
height="1em"
28+
viewBox="0 0 16 16"
29+
width="1em"
30+
xmlns="http://www.w3.org/2000/svg"
31+
>
32+
<g
33+
fill="none"
34+
fill-rule="evenodd"
35+
stroke="none"
36+
stroke-width="1"
37+
>
38+
<g
39+
transform="translate(-340 -367)"
40+
>
41+
<g
42+
transform="translate(201 320)"
43+
>
44+
<g
45+
transform="translate(139 47)"
46+
>
47+
<path
48+
d="M11 1.5A1.5 1.5 0 0112.5 3v.25h.5a1.5 1.5 0 011.5 1.5v8a1.5 1.5 0 01-1.5 1.5H5a1.5 1.5 0 01-1.5-1.5v-.25H3a1.5 1.5 0 01-1.493-1.356L1.5 11V3A1.5 1.5 0 013 1.5zm1.5 9.5a1.5 1.5 0 01-1.5 1.5H4.5v.25a.5.5 0 00.5.5h8a.5.5 0 00.5-.5v-8a.5.5 0 00-.5-.5h-.5zM11 2.5H3a.5.5 0 00-.5.5v8a.5.5 0 00.5.5h8a.5.5 0 00.5-.5V3a.5.5 0 00-.5-.5zm-4 1a.5.5 0 01.5.5v2.5H10a.5.5 0 110 1H7.5V10a.5.5 0 11-1 0V7.5H4a.5.5 0 010-1h2.5V4a.5.5 0 01.5-.5z"
49+
fill="currentColor"
50+
/>
51+
</g>
52+
</g>
53+
</g>
54+
</g>
55+
</svg>
56+
</span>
57+
</span>
58+
</div>
59+
</div>
60+
<pre
61+
style="background: rgb(255, 255, 255); color: rgb(56, 56, 56); font-family: "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; line-height: 1.5; tab-size: 2; hyphens: none; padding: 1em; margin: 0px; overflow: auto; border-radius: 0 0 4px 4px; max-height: 270px;"
62+
>
63+
<code
64+
class="language-javascript"
65+
style="background: rgb(255, 255, 255); color: rgb(56, 56, 56); font-family: "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; line-height: 1.5; tab-size: 2; hyphens: none;"
66+
>
67+
<span>
68+
<span
69+
class="linenumber react-syntax-highlighter-line-number"
70+
style="display: inline-block; min-width: 1.25em; padding-right: 1em; text-align: right; user-select: none; font-style: italic; color: rgb(160, 160, 160);"
71+
>
72+
1
73+
</span>
74+
<span
75+
class="token"
76+
style="color: rgb(38, 38, 38);"
77+
>
78+
const
79+
</span>
80+
<span>
81+
a
82+
</span>
83+
<span
84+
class="token"
85+
style="color: rgb(64, 64, 64);"
86+
>
87+
=
88+
</span>
89+
<span>
90+
91+
</span>
92+
<span
93+
class="token"
94+
style="color: rgb(1, 1, 1);"
95+
>
96+
1
97+
</span>
98+
</span>
99+
</code>
100+
</pre>
101+
</div>
102+
</DocumentFragment>
103+
`;
104+
105+
exports[`Test Chat CodeBlock Match snapshot: normal 2`] = `
106+
<DocumentFragment>
107+
<div
108+
class="dtc__aigc__codeblock dtc__aigc__codeblock--convert"
109+
>
110+
<div
111+
class="dtc__aigc__codeblock__header"
112+
>
113+
<span
114+
class="dtc__aigc__codeblock__language"
115+
>
116+
javascript
117+
</span>
118+
<div
119+
class="dtc__aigc__codeblock__tool"
120+
>
121+
<span
122+
class="dtc-copy"
123+
>
124+
<span
125+
class="dtc__icon"
126+
>
127+
<svg
128+
height="1em"
129+
viewBox="0 0 16 16"
130+
width="1em"
131+
xmlns="http://www.w3.org/2000/svg"
132+
>
133+
<g
134+
fill="none"
135+
fill-rule="evenodd"
136+
stroke="none"
137+
stroke-width="1"
138+
>
139+
<g
140+
transform="translate(-340 -367)"
141+
>
142+
<g
143+
transform="translate(201 320)"
144+
>
145+
<g
146+
transform="translate(139 47)"
147+
>
148+
<path
149+
d="M11 1.5A1.5 1.5 0 0112.5 3v.25h.5a1.5 1.5 0 011.5 1.5v8a1.5 1.5 0 01-1.5 1.5H5a1.5 1.5 0 01-1.5-1.5v-.25H3a1.5 1.5 0 01-1.493-1.356L1.5 11V3A1.5 1.5 0 013 1.5zm1.5 9.5a1.5 1.5 0 01-1.5 1.5H4.5v.25a.5.5 0 00.5.5h8a.5.5 0 00.5-.5v-8a.5.5 0 00-.5-.5h-.5zM11 2.5H3a.5.5 0 00-.5.5v8a.5.5 0 00.5.5h8a.5.5 0 00.5-.5V3a.5.5 0 00-.5-.5zm-4 1a.5.5 0 01.5.5v2.5H10a.5.5 0 110 1H7.5V10a.5.5 0 11-1 0V7.5H4a.5.5 0 010-1h2.5V4a.5.5 0 01.5-.5z"
150+
fill="currentColor"
151+
/>
152+
</g>
153+
</g>
154+
</g>
155+
</g>
156+
</svg>
157+
</span>
158+
</span>
159+
</div>
160+
</div>
161+
<pre
162+
style="background: rgb(249, 249, 250); color: rgb(56, 56, 56); font-family: "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; line-height: 1.5; tab-size: 2; hyphens: none; padding: 1em; margin: 0px; overflow: auto; border-radius: 0 0 4px 4px; max-height: 270px;"
163+
>
164+
<code
165+
class="language-javascript"
166+
style="background: rgb(249, 249, 250); color: rgb(56, 56, 56); font-family: "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; line-height: 1.5; tab-size: 2; hyphens: none;"
167+
>
168+
<span>
169+
<span
170+
class="linenumber react-syntax-highlighter-line-number"
171+
style="display: inline-block; min-width: 1.25em; padding-right: 1em; text-align: right; user-select: none; font-style: italic; color: rgb(160, 160, 160);"
172+
>
173+
1
174+
</span>
175+
<span
176+
class="token"
177+
style="color: rgb(38, 38, 38);"
178+
>
179+
const
180+
</span>
181+
<span>
182+
a
183+
</span>
184+
<span
185+
class="token"
186+
style="color: rgb(64, 64, 64);"
187+
>
188+
=
189+
</span>
190+
<span>
191+
192+
</span>
193+
<span
194+
class="token"
195+
style="color: rgb(1, 1, 1);"
196+
>
197+
1
198+
</span>
199+
</span>
200+
</code>
201+
</pre>
202+
</div>
203+
</DocumentFragment>
204+
`;

‎src/chat/__tests__/__snapshots__/content.test.tsx.snap‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Test Content Match snapshot: normal 1`] = `
4+
<DocumentFragment>
5+
<div
6+
class="dtc__aigc__content__container dtc__aigc__content__container--valid"
7+
>
8+
<div
9+
class="dtc__aigc__content__inner__holder"
10+
>
11+
<pre
12+
data-testid="fakePrompt"
13+
>
14+
{"data":{"id":"1","createdAt":1736479532239,"title":"What is your name?","messages":[{"id":"1","createdAt":1736479532239,"content":"My Name is dt-react-component","status":0}]}}
15+
</pre>
16+
<div
17+
data-testid="fakeMessage"
18+
>
19+
<pre>
20+
{"prompt":{"id":"1","createdAt":1736479532239,"title":"What is your name?","messages":[{"id":"1","createdAt":1736479532239,"content":"My Name is dt-react-component","status":0}]},"data":[{"id":"1","createdAt":1736479532239,"content":"My Name is dt-react-component","status":0}],"regenerate":true}
21+
</pre>
22+
<button
23+
data-testid="fakeOnRegenerate"
24+
>
25+
onRegenerate
26+
</button>
27+
<button
28+
data-testid="fakeOnStop"
29+
>
30+
onStop
31+
</button>
32+
<button
33+
data-testid="fakeOnLazyRendered"
34+
>
35+
onLazyRendered
36+
</button>
37+
</div>
38+
</div>
39+
</div>
40+
</DocumentFragment>
41+
`;
42+
43+
exports[`Test Content Match snapshot: placeholder 1`] = `
44+
<DocumentFragment>
45+
<div
46+
class="dtc__aigc__content__container"
47+
>
48+
<div>
49+
placeholder
50+
</div>
51+
<span
52+
class="dtc__icon"
53+
style="font-size: 200px; position: absolute; right: 0px; bottom: -100px;"
54+
>
55+
<svg
56+
fill="none"
57+
height="1em"
58+
viewBox="0 0 268 265"
59+
width="1em"
60+
xmlns="http://www.w3.org/2000/svg"
61+
>
62+
<path
63+
clip-rule="evenodd"
64+
d="M210.656 14.094c0-7.266-5.89-13.156-13.156-13.156-7.266 0-13.156 5.89-13.156 13.156V27.25h-72.36c-14.532 0-26.312 11.78-26.312 26.313V237.75c0 14.532 11.78 26.313 26.312 26.313h171.032c14.532 0 26.312-11.781 26.312-26.313V53.562c0-14.531-11.78-26.312-26.312-26.312h-72.36V14.094zm72.36 39.468H111.984V237.75h171.032V53.562zm-111.828 85.516c0 10.899-8.836 19.735-19.735 19.735s-19.734-8.836-19.734-19.735 8.835-19.734 19.734-19.734c10.899 0 19.735 8.835 19.735 19.734zm-105.25-32.89c0-7.267-5.89-13.157-13.157-13.157-7.266 0-13.156 5.89-13.156 13.157v78.937c0 7.266 5.89 13.156 13.156 13.156 7.266 0 13.157-5.89 13.157-13.156v-78.937zm-52.626 13.156c7.266 0 13.157 5.89 13.157 13.156v26.313c0 7.266-5.89 13.156-13.157 13.156-7.265 0-13.156-5.89-13.156-13.156V132.5c0-7.266 5.89-13.156 13.156-13.156zM394.844 132.5c0-7.266-5.89-13.156-13.156-13.156-7.266 0-13.157 5.89-13.157 13.156v26.313c0 7.266 5.891 13.156 13.157 13.156s13.156-5.89 13.156-13.156V132.5zm-52.625-39.469c7.266 0 13.156 5.89 13.156 13.157v78.937c0 7.266-5.89 13.156-13.156 13.156-7.266 0-13.156-5.89-13.156-13.156v-78.937c0-7.267 5.89-13.157 13.156-13.157zm-98.672 65.782c10.899 0 19.734-8.836 19.734-19.735s-8.835-19.734-19.734-19.734c-10.899 0-19.734 8.835-19.734 19.734 0 10.899 8.835 19.735 19.734 19.735z"
65+
fill="url(#paint0_linear_1290_3143)"
66+
fill-opacity="0.03"
67+
fill-rule="evenodd"
68+
/>
69+
<defs>
70+
<lineargradient
71+
gradientUnits="userSpaceOnUse"
72+
id="paint0_linear_1290_3143"
73+
x1="0.156"
74+
x2="415.745"
75+
y1="0.938"
76+
y2="225.356"
77+
>
78+
<stop
79+
stop-color="#00BAC6"
80+
/>
81+
<stop
82+
offset="0.5"
83+
stop-color="#0067FF"
84+
/>
85+
<stop
86+
offset="1"
87+
stop-color="#450FDE"
88+
/>
89+
</lineargradient>
90+
</defs>
91+
</svg>
92+
</span>
93+
</div>
94+
</DocumentFragment>
95+
`;

‎src/chat/__tests__/button.test.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from 'react';
2+
import { cleanup, render } from '@testing-library/react';
3+
4+
import Button from '../button';
5+
6+
describe('Test Chat Button', () => {
7+
beforeEach(() => cleanup());
8+
9+
it('Match the snapshot', () => {
10+
expect(render(<Button type="default">Default</Button>).asFragment()).toMatchSnapshot(
11+
'default button'
12+
);
13+
14+
expect(render(<Button type="primary">Default</Button>).asFragment()).toMatchSnapshot(
15+
'primary button'
16+
);
17+
18+
expect(render(<Button type="secondary">Default</Button>).asFragment()).toMatchSnapshot(
19+
'secondary button'
20+
);
21+
});
22+
23+
it('expect ONLY one global gradient div', () => {
24+
render(
25+
<>
26+
<Button type="default">Default</Button>
27+
<Button type="primary">Default</Button>
28+
<Button type="secondary">Default</Button>
29+
</>
30+
);
31+
const nodeList = document.querySelectorAll<HTMLDivElement>(
32+
'.dtc__aigc__button__global-gradient'
33+
);
34+
expect(nodeList.length).toBe(1);
35+
expect(nodeList[0].style.getPropertyValue('width')).toBe('0px');
36+
expect(nodeList[0].style.getPropertyValue('height')).toBe('0px');
37+
expect(nodeList[0].innerHTML).toMatchSnapshot('global gradient');
38+
});
39+
});

0 commit comments

Comments
 (0)