Skip to content

Commit d0eadac

Browse files
amanabiyamanabiy
committed
test: improve testing configurations and add tests
1 parent 16e21c3 commit d0eadac

File tree

6 files changed

+297
-7
lines changed

6 files changed

+297
-7
lines changed

‎scripts/environment.js‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,17 @@ const pkg = JSON.parse(fs.readFileSync("package.json", "utf-8"));
1010
const packageVersion = `${pkg.version} (${gitCommitVersion})`;
1111

1212
const basePath = "lib/components/internal/environment";
13-
const values = {
14-
PACKAGE_SOURCE: "chat-components",
15-
PACKAGE_VERSION: packageVersion,
16-
THEME: "open-source-visual-refresh",
17-
SYSTEM: "core",
18-
ALWAYS_VISUAL_REFRESH: true,
19-
};
13+
export function getEnvironmentVariables() {
14+
return {
15+
PACKAGE_SOURCE: "chat-components",
16+
PACKAGE_VERSION: packageVersion,
17+
THEME: "open-source-visual-refresh",
18+
SYSTEM: "core",
19+
ALWAYS_VISUAL_REFRESH: true,
20+
};
21+
}
22+
23+
const values = getEnvironmentVariables();
2024
writeFile(`${basePath}.json`, JSON.stringify(values, null, 2));
2125
writeFile(
2226
`${basePath}.js`,

‎src/__tests__/__snapshots__/documenter.test.ts.snap‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -215,6 +215,102 @@ If avatar is being used, set its \`loading\` state to true.",
215215
"optional": true,
216216
"type": "boolean",
217217
},
218+
{
219+
"inlineType": {
220+
"name": "ChatBubbleProps.Style",
221+
"properties": [
222+
{
223+
"inlineType": {
224+
"name": "object",
225+
"properties": [
226+
{
227+
"name": "background",
228+
"optional": true,
229+
"type": "string",
230+
},
231+
{
232+
"name": "borderColor",
233+
"optional": true,
234+
"type": "string",
235+
},
236+
{
237+
"name": "borderRadius",
238+
"optional": true,
239+
"type": "string",
240+
},
241+
{
242+
"name": "borderWidth",
243+
"optional": true,
244+
"type": "string",
245+
},
246+
{
247+
"name": "boxShadow",
248+
"optional": true,
249+
"type": "string",
250+
},
251+
{
252+
"name": "color",
253+
"optional": true,
254+
"type": "string",
255+
},
256+
{
257+
"name": "fontSize",
258+
"optional": true,
259+
"type": "string",
260+
},
261+
{
262+
"name": "fontWeight",
263+
"optional": true,
264+
"type": "string",
265+
},
266+
{
267+
"name": "paddingBlock",
268+
"optional": true,
269+
"type": "string",
270+
},
271+
{
272+
"name": "paddingInline",
273+
"optional": true,
274+
"type": "string",
275+
},
276+
{
277+
"name": "rowGap",
278+
"optional": true,
279+
"type": "string",
280+
},
281+
],
282+
"type": "object",
283+
},
284+
"name": "bubble",
285+
"optional": true,
286+
"type": "{ background?: string | undefined; borderColor?: string | undefined; borderRadius?: string | undefined; borderWidth?: string | undefined; boxShadow?: string | undefined; color?: string | undefined; ... 4 more ...; paddingInline?: string | undefined; }",
287+
},
288+
{
289+
"inlineType": {
290+
"name": "{ columnGap?: string | undefined; }",
291+
"properties": [
292+
{
293+
"name": "columnGap",
294+
"optional": true,
295+
"type": "string",
296+
},
297+
],
298+
"type": "object",
299+
},
300+
"name": "root",
301+
"optional": true,
302+
"type": "{ columnGap?: string | undefined; }",
303+
},
304+
],
305+
"type": "object",
306+
},
307+
"name": "style",
308+
"optional": true,
309+
"systemTags": [
310+
"core",
311+
],
312+
"type": "ChatBubbleProps.Style",
313+
},
218314
{
219315
"description": "Defines the type of the chat bubble and sets its color accordingly.",
220316
"inlineType": {

‎src/avatar/__tests__/avatar.test.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,9 @@ describe("Avatar", () => {
125125
});
126126

127127
test("style api", () => {
128+
vi.mock("../internal/environment", () => ({
129+
SYSTEM: "core",
130+
}));
128131
const ariaLabel = "User avatar JD Jane Doe";
129132
const wrapper = renderAvatar({
130133
ariaLabel,

‎src/chat-bubble/__tests__/__snapshots__/style.test.ts.snap‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2+
3+
exports[`getBubbleStyle > handles all possible style configurations 1`] = `
4+
{
5+
"background": undefined,
6+
"borderColor": undefined,
7+
"borderRadius": undefined,
8+
"borderStyle": undefined,
9+
"borderWidth": undefined,
10+
"boxShadow": undefined,
11+
"color": undefined,
12+
"fontSize": undefined,
13+
"fontWeight": undefined,
14+
"paddingBlock": undefined,
15+
"paddingInline": undefined,
16+
"rowGap": undefined,
17+
}
18+
`;
19+
20+
exports[`getBubbleStyle > handles all possible style configurations 2`] = `
21+
{
22+
"background": undefined,
23+
"borderColor": undefined,
24+
"borderRadius": undefined,
25+
"borderStyle": undefined,
26+
"borderWidth": undefined,
27+
"boxShadow": undefined,
28+
"color": undefined,
29+
"fontSize": undefined,
30+
"fontWeight": undefined,
31+
"paddingBlock": undefined,
32+
"paddingInline": undefined,
33+
"rowGap": undefined,
34+
}
35+
`;
36+
37+
exports[`getBubbleStyle > handles all possible style configurations 3`] = `
38+
{
39+
"background": "#f0f0f0",
40+
"borderColor": "#ccc",
41+
"borderRadius": "8px",
42+
"borderStyle": "solid",
43+
"borderWidth": "2px",
44+
"boxShadow": "0 4px 8px rgba(0,0,0,0.2)",
45+
"color": "#333",
46+
"fontSize": "16px",
47+
"fontWeight": "500",
48+
"paddingBlock": "20px",
49+
"paddingInline": "24px",
50+
"rowGap": "12px",
51+
}
52+
`;
53+
54+
exports[`getChatBubbleRootStyle > handles all possible style configurations 1`] = `
55+
{
56+
"columnGap": undefined,
57+
}
58+
`;
59+
60+
exports[`getChatBubbleRootStyle > handles all possible style configurations 2`] = `
61+
{
62+
"columnGap": undefined,
63+
}
64+
`;
65+
66+
exports[`getChatBubbleRootStyle > handles all possible style configurations 3`] = `
67+
{
68+
"columnGap": "10px",
69+
}
70+
`;

‎src/chat-bubble/__tests__/style.test.ts‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
import { afterEach, describe, expect, test, vi } from "vitest";
4+
5+
import { getBubbleStyle, getChatBubbleRootStyle } from "../style";
6+
7+
vi.mock("../internal/environment", () => ({
8+
SYSTEM: "core",
9+
}));
10+
11+
const allStyles = {
12+
root: {
13+
columnGap: "10px",
14+
},
15+
bubble: {
16+
background: "#f0f0f0",
17+
borderColor: "#ccc",
18+
borderRadius: "8px",
19+
borderWidth: "2px",
20+
boxShadow: "0 4px 8px rgba(0,0,0,0.2)",
21+
color: "#333",
22+
fontSize: "16px",
23+
fontWeight: "500",
24+
rowGap: "12px",
25+
paddingBlock: "20px",
26+
paddingInline: "24px",
27+
},
28+
};
29+
30+
describe("getChatBubbleRootStyle", () => {
31+
afterEach(() => {
32+
vi.resetModules();
33+
});
34+
35+
test("handles all possible style configurations", () => {
36+
expect(getChatBubbleRootStyle(undefined)).toMatchSnapshot();
37+
expect(getChatBubbleRootStyle({})).toMatchSnapshot();
38+
expect(getChatBubbleRootStyle(allStyles)).toMatchSnapshot();
39+
});
40+
41+
test("returns empty object when SYSTEM is not core", async () => {
42+
vi.resetModules();
43+
vi.doMock("../internal/environment", () => ({
44+
SYSTEM: "visual-refresh",
45+
}));
46+
47+
const { getChatBubbleRootStyle: getChatBubbleRootStyleNonCore } = await import("../style.js");
48+
49+
const style = {
50+
root: {
51+
columnGap: "10px",
52+
},
53+
};
54+
55+
const result = getChatBubbleRootStyleNonCore(style);
56+
expect(result).toEqual({});
57+
});
58+
});
59+
60+
describe("getBubbleStyle", () => {
61+
afterEach(() => {
62+
vi.resetModules();
63+
});
64+
65+
test("handles all possible style configurations", () => {
66+
expect(getBubbleStyle(undefined)).toMatchSnapshot();
67+
expect(getBubbleStyle({})).toMatchSnapshot();
68+
expect(getBubbleStyle(allStyles)).toMatchSnapshot();
69+
});
70+
71+
test("returns empty object when SYSTEM is not core", async () => {
72+
vi.resetModules();
73+
vi.doMock("../internal/environment", () => ({
74+
SYSTEM: "visual-refresh",
75+
}));
76+
77+
const { getBubbleStyle: getBubbleStyleNonCore } = await import("../style.js");
78+
79+
const style = {
80+
bubble: {
81+
background: "#f0f0f0",
82+
borderRadius: "8px",
83+
fontSize: "16px",
84+
},
85+
};
86+
87+
const result = getBubbleStyleNonCore(style);
88+
expect(result).toEqual({});
89+
});
90+
});

‎vite.config.unit.mjs‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,40 @@
22
// SPDX-License-Identifier: Apache-2.0
33

44
import process from "node:process";
5+
56
import { defineConfig } from "vite";
7+
8+
import { getEnvironmentVariables } from "./scripts/environment.js";
69
import base from "./vite.config.mjs";
710

811
// https://vitejs.dev/config/
912
export default defineConfig({
1013
...base,
1114
root: "./",
15+
resolve: {
16+
alias: {
17+
"../internal/environment": "/virtual:environment-mock",
18+
},
19+
},
20+
plugins: [
21+
...(base.plugins || []),
22+
{
23+
name: "virtual-environment-mock",
24+
resolveId(id) {
25+
if (id === "/virtual:environment-mock") {
26+
return id;
27+
}
28+
},
29+
load(id) {
30+
if (id === "/virtual:environment-mock") {
31+
const values = getEnvironmentVariables();
32+
return Object.entries(values)
33+
.map(([key, value]) => `export const ${key} = ${JSON.stringify(value)};`)
34+
.join("\n");
35+
}
36+
},
37+
},
38+
],
1239
test: {
1340
include: ["./src/**/__tests__/**/*.test.{ts,tsx}"],
1441
environment: "jsdom",

0 commit comments

Comments
 (0)