Skip to content

Commit e960352

Browse files
amanabiyamanabiy
committed
test: add comprehensive style API test coverage
1 parent 2f86247 commit e960352

File tree

3 files changed

+289
-0
lines changed

3 files changed

+289
-0
lines changed

‎pages/chat-bubble/style-permutations.page.tsx‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
import Box from "@cloudscape-design/components/box";
4+
5+
import { ChatBubble } from "../../lib/components";
6+
import { Page } from "../app/templates";
7+
import { TestBed } from "../app/test-bed";
8+
import { Actions, ChatBubbleAvatarGenAI, ChatBubbleAvatarUser, ChatContainer } from "./util-components";
9+
10+
export default function ChatBubblePage() {
11+
return (
12+
<Page title="Chat bubble">
13+
<TestBed>
14+
<ChatContainer>
15+
{/* Background Color with Dark Mode */}
16+
<ChatBubble
17+
style={{ bubble: { background: "light-dark(#f0f8ff, #1a1a2e)", color: "light-dark(#333, #eee)" } }}
18+
type="incoming"
19+
avatar={<ChatBubbleAvatarGenAI />}
20+
ariaLabel="Background test"
21+
>
22+
Light blue/dark purple background with adaptive text color
23+
</ChatBubble>
24+
25+
{/* Border Styles with Dark Mode */}
26+
<ChatBubble
27+
style={{
28+
bubble: { borderColor: "light-dark(#e74c3c, #ff6b6b)", borderWidth: "2px", borderRadius: "20px" },
29+
}}
30+
type="outgoing"
31+
avatar={<ChatBubbleAvatarUser />}
32+
ariaLabel="Border test"
33+
>
34+
Adaptive red border with rounded corners
35+
</ChatBubble>
36+
37+
{/* Typography with Dark Mode */}
38+
<ChatBubble
39+
style={{ bubble: { fontSize: "18px", fontWeight: "bold", color: "light-dark(#8e44ad, #bb86fc)" } }}
40+
type="incoming"
41+
avatar={<ChatBubbleAvatarGenAI />}
42+
ariaLabel="Typography test"
43+
>
44+
Large bold adaptive purple text
45+
</ChatBubble>
46+
47+
{/* Shadow Effect with Dark Mode */}
48+
<ChatBubble
49+
style={{
50+
bubble: { boxShadow: "10px 5px 5px red" },
51+
}}
52+
type="outgoing"
53+
avatar={<ChatBubbleAvatarUser />}
54+
ariaLabel="Shadow test"
55+
>
56+
Adaptive shadow for elevation
57+
</ChatBubble>
58+
59+
{/* Spacing */}
60+
<ChatBubble
61+
style={{ root: { columnGap: "32px" }, bubble: { paddingBlock: "20px", paddingInline: "24px" } }}
62+
type="incoming"
63+
avatar={<ChatBubbleAvatarGenAI />}
64+
ariaLabel="Spacing test"
65+
>
66+
Wide avatar spacing with generous padding
67+
</ChatBubble>
68+
69+
{/* Loading State with Dark Mode */}
70+
<ChatBubble
71+
style={{
72+
bubble: {
73+
background: "light-dark(#fff3cd, #3d3d00)",
74+
borderColor: "light-dark(#ffc107, #ffeb3b)",
75+
borderWidth: "1px",
76+
},
77+
}}
78+
avatar={<ChatBubbleAvatarGenAI loading={true} />}
79+
type="incoming"
80+
showLoadingBar={true}
81+
ariaLabel="Loading test"
82+
>
83+
<Box color="text-body-secondary">Generating response...</Box>
84+
</ChatBubble>
85+
86+
{/* With Actions and Dark Mode */}
87+
<ChatBubble
88+
style={{ bubble: { background: "light-dark(#e8f5e8, #1b2e1b)", borderRadius: "18px", rowGap: "25px" } }}
89+
avatar={<ChatBubbleAvatarGenAI />}
90+
type="incoming"
91+
actions={<Actions />}
92+
ariaLabel="Actions test"
93+
>
94+
Message with action buttons
95+
</ChatBubble>
96+
97+
{/* All Properties Combined with Dark Mode */}
98+
<ChatBubble
99+
style={{
100+
root: {
101+
columnGap: "25px",
102+
},
103+
bubble: {
104+
background: "light-dark(#ffffff, #2d2d2d)",
105+
color: "light-dark(#1b5e20, #81c784)",
106+
borderColor: "light-dark(#4caf50, #66bb6a)",
107+
borderWidth: "2px",
108+
borderRadius: "24px",
109+
boxShadow: "0 4px 12px rgb(29, 130, 118)",
110+
fontSize: "16px",
111+
fontWeight: "bold",
112+
paddingBlock: "20px",
113+
paddingInline: "30px",
114+
rowGap: "20px",
115+
},
116+
}}
117+
type="outgoing"
118+
avatar={<ChatBubbleAvatarUser />}
119+
actions={<Actions />}
120+
ariaLabel="All properties test"
121+
showLoadingBar={true}
122+
>
123+
All style properties combined
124+
</ChatBubble>
125+
</ChatContainer>
126+
</TestBed>
127+
</Page>
128+
);
129+
}

‎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.js";
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+
});

0 commit comments

Comments
 (0)