Skip to content

Commit 78484cc

Browse files
committed
test(web-components): add avatar tests
1 parent 3cd0f52 commit 78484cc

File tree

2 files changed

+123
-13
lines changed

2 files changed

+123
-13
lines changed
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,130 @@
1-
import { render, screen, userEvent } from "@internals/test-helpers";
2-
import { describe, expect, it, jest } from "@jest/globals";
1+
import { fireEvent, render, screen } from "@internals/test-helpers";
2+
import { describe, expect, it } from "@jest/globals";
3+
import { createComponent } from "@lit/react";
4+
import React from "react";
5+
import {
6+
itShouldMount,
7+
itSupportsClassName,
8+
itSupportsDataSetProps,
9+
itSupportsStyle,
10+
} from "../internals/tests.tsx";
11+
import { TapsiAvatar } from "./index.ts";
312

4-
import "./index.ts";
13+
const Avatar = createComponent({
14+
react: React,
15+
elementClass: TapsiAvatar,
16+
tagName: "tapsi-avatar",
17+
});
18+
19+
const mockRequiredProps = {
20+
"data-testid": "test-avatar",
21+
};
22+
23+
const getTestAvatarRoot = async () => screen.findByShadowTestId("avatar-root");
24+
25+
const getTestAvatarImage = async () =>
26+
screen.findByShadowTestId("avatar-image");
27+
28+
const getTestAvatarPlaceholder = async () =>
29+
screen.findByShadowTestId("avatar-placeholder");
30+
31+
describe("🧪 avatar: UI", () => {
32+
itShouldMount(Avatar, mockRequiredProps);
33+
itSupportsClassName(Avatar, mockRequiredProps);
34+
itSupportsStyle(Avatar, mockRequiredProps);
35+
itSupportsDataSetProps(Avatar, mockRequiredProps);
36+
37+
it("should render placeholder if no image was set", async () => {
38+
render(<Avatar {...mockRequiredProps} />);
39+
40+
const placeholder = await getTestAvatarPlaceholder();
41+
42+
expect(placeholder).toBeInTheDocument();
43+
});
44+
45+
it("should render image if `image` property was set", async () => {
46+
render(
47+
<Avatar
48+
{...mockRequiredProps}
49+
image="image.png"
50+
alt="image-alt"
51+
/>,
52+
);
53+
54+
expect(await screen.findByShadowTestId("avatar-image")).toBeInTheDocument();
55+
});
56+
57+
it("should render placeholder if image has error", async () => {
58+
render(
59+
<Avatar
60+
{...mockRequiredProps}
61+
image="image.png"
62+
alt="image-alt"
63+
/>,
64+
);
565

6-
describe("tapsi-avatar", () => {
7-
it("renders", async () => {
8-
// @ts-expect-error Current React does not support custom elements.
9-
render(<tapsi-avatar data-testid="test"></tapsi-avatar>);
66+
const image = await getTestAvatarImage();
1067

11-
const el = screen.getByTestId("test");
68+
fireEvent.error(image);
1269

13-
const handleClick = jest.fn();
70+
const placeholder = await getTestAvatarPlaceholder();
1471

15-
el.addEventListener("click", handleClick);
72+
expect(placeholder).toBeInTheDocument();
73+
});
74+
75+
it("should apply `loading` attribute correctly", async () => {
76+
render(
77+
<Avatar
78+
{...mockRequiredProps}
79+
image="image.png"
80+
loading="lazy"
81+
/>,
82+
);
83+
84+
const image = await getTestAvatarImage();
85+
86+
expect(image).toHaveAttribute("loading", "lazy");
87+
});
88+
89+
it("should apply the correct size class", async () => {
90+
render(
91+
<Avatar
92+
{...mockRequiredProps}
93+
image="image.png"
94+
size="lg"
95+
/>,
96+
);
97+
98+
const avatarRoot = await getTestAvatarRoot();
99+
100+
expect(avatarRoot).toHaveClass("lg");
101+
});
102+
103+
it("should apply `alt` attribute to the `img` tag correctly", async () => {
104+
render(
105+
<Avatar
106+
{...mockRequiredProps}
107+
image="image.png"
108+
alt="Test Alt"
109+
/>,
110+
);
111+
112+
const image = await getTestAvatarImage();
113+
114+
expect(image).toHaveAttribute("alt", "Test Alt");
115+
});
16116

17-
await userEvent.click(el);
117+
it("should apply `label` property as `aria-label`", async () => {
118+
render(
119+
<Avatar
120+
{...mockRequiredProps}
121+
image="image.png"
122+
label="Avatar Label"
123+
/>,
124+
);
18125

19-
expect(handleClick).toHaveBeenCalled();
126+
const avatarRoot = await getTestAvatarRoot();
20127

21-
expect(await screen.findByShadowRole("img")).toBeInTheDocument();
128+
expect(avatarRoot).toHaveAttribute("aria-label", "Avatar Label");
22129
});
23130
});

packages/web-components/src/avatar/avatar.ts

+3
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ export class Avatar extends LitElement {
4646
return html`
4747
<img
4848
part="image"
49+
data-testid="avatar-image"
4950
class="image"
5051
alt=${this.alt}
5152
src="${this.image}"
@@ -57,6 +58,7 @@ export class Avatar extends LitElement {
5758

5859
private _renderPlaceholder() {
5960
return html` <div
61+
data-testid="avatar-placeholder"
6062
part="placeholder"
6163
class="placeholder"
6264
aria-hidden="true"
@@ -73,6 +75,7 @@ export class Avatar extends LitElement {
7375

7476
return html`
7577
<div
78+
data-testid="avatar-root"
7679
role="img"
7780
aria-label=${this.label}
7881
part="root"

0 commit comments

Comments
 (0)