Skip to content

Commit 2279c00

Browse files
idanidan29idanidan29
committed
adding tests for the alert ui element
1 parent 938be32 commit 2279c00

File tree

1 file changed

+184
-0
lines changed

1 file changed

+184
-0
lines changed

‎cypress/components/ui/alert.cy.tsx‎

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
import React from 'react';
2+
import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert';
3+
4+
describe('Alert Component', () => {
5+
it('renders basic Alert component correctly', () => {
6+
cy.mount(<Alert>This is a basic alert message</Alert>);
7+
8+
cy.get('[data-slot="alert"]').should('exist');
9+
cy.get('[role="alert"]').should('exist');
10+
cy.get('[data-slot="alert"]').contains('This is a basic alert message');
11+
});
12+
13+
it('renders Alert with default variant correctly', () => {
14+
cy.mount(<Alert variant="default">Default alert message</Alert>);
15+
16+
cy.get('[data-slot="alert"]').should('exist');
17+
cy.get('[data-slot="alert"]').should('have.class', 'bg-card');
18+
cy.get('[data-slot="alert"]').should('have.class', 'text-card-foreground');
19+
});
20+
21+
it('renders Alert with destructive variant correctly', () => {
22+
cy.mount(<Alert variant="destructive">Destructive alert message</Alert>);
23+
24+
cy.get('[data-slot="alert"]').should('exist');
25+
cy.get('[data-slot="alert"]').should('have.class', 'text-destructive');
26+
cy.get('[data-slot="alert"]').should('have.class', 'bg-card');
27+
});
28+
29+
it('renders Alert with custom className correctly', () => {
30+
cy.mount(
31+
<Alert className="custom-alert-class">Alert with custom class</Alert>,
32+
);
33+
34+
cy.get('[data-slot="alert"]').should('have.class', 'custom-alert-class');
35+
});
36+
37+
it('renders Alert with AlertTitle correctly', () => {
38+
cy.mount(
39+
<Alert>
40+
<AlertTitle>Alert Title</AlertTitle>
41+
This is the alert description
42+
</Alert>,
43+
);
44+
45+
cy.get('[data-slot="alert-title"]').should('exist');
46+
cy.get('[data-slot="alert-title"]').contains('Alert Title');
47+
cy.get('[data-slot="alert-title"]').should('have.class', 'font-medium');
48+
});
49+
50+
it('renders Alert with AlertDescription correctly', () => {
51+
cy.mount(
52+
<Alert>
53+
<AlertDescription>This is an alert description</AlertDescription>
54+
</Alert>,
55+
);
56+
57+
cy.get('[data-slot="alert-description"]').should('exist');
58+
cy.get('[data-slot="alert-description"]').contains(
59+
'This is an alert description',
60+
);
61+
cy.get('[data-slot="alert-description"]').should(
62+
'have.class',
63+
'text-muted-foreground',
64+
);
65+
});
66+
67+
it('renders Alert with both AlertTitle and AlertDescription correctly', () => {
68+
cy.mount(
69+
<Alert>
70+
<AlertTitle>Important Notice</AlertTitle>
71+
<AlertDescription>
72+
This is a detailed description of the alert message.
73+
</AlertDescription>
74+
</Alert>,
75+
);
76+
77+
cy.get('[data-slot="alert-title"]').should('exist');
78+
cy.get('[data-slot="alert-title"]').contains('Important Notice');
79+
cy.get('[data-slot="alert-description"]').should('exist');
80+
cy.get('[data-slot="alert-description"]').contains(
81+
'This is a detailed description of the alert message.',
82+
);
83+
});
84+
85+
it('renders Alert with icon correctly', () => {
86+
cy.mount(
87+
<Alert>
88+
<svg data-testid="alert-icon" />
89+
<AlertTitle>Alert with Icon</AlertTitle>
90+
<AlertDescription>This alert has an icon</AlertDescription>
91+
</Alert>,
92+
);
93+
94+
cy.get('[data-testid="alert-icon"]').should('exist');
95+
cy.get('[data-slot="alert"]').should('have.class', 'has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr]');
96+
});
97+
98+
it('renders destructive Alert with icon correctly', () => {
99+
cy.mount(
100+
<Alert variant="destructive">
101+
<svg data-testid="destructive-icon" />
102+
<AlertTitle>Destructive Alert</AlertTitle>
103+
<AlertDescription>This is a destructive alert with icon</AlertDescription>
104+
</Alert>,
105+
);
106+
107+
cy.get('[data-testid="destructive-icon"]').should('exist');
108+
cy.get('[data-slot="alert"]').should('have.class', 'text-destructive');
109+
// Check that the alert description has the data-slot attribute and is styled appropriately
110+
cy.get('[data-slot="alert-description"]').should('exist');
111+
cy.get('[data-slot="alert-description"]').should('have.attr', 'data-slot', 'alert-description');
112+
});
113+
114+
it('renders AlertTitle with custom className correctly', () => {
115+
cy.mount(
116+
<Alert>
117+
<AlertTitle className="custom-title-class">Custom Title</AlertTitle>
118+
</Alert>,
119+
);
120+
121+
cy.get('[data-slot="alert-title"]').should('have.class', 'custom-title-class');
122+
});
123+
124+
it('renders AlertDescription with custom className correctly', () => {
125+
cy.mount(
126+
<Alert>
127+
<AlertDescription className="custom-description-class">
128+
Custom Description
129+
</AlertDescription>
130+
</Alert>,
131+
);
132+
133+
cy.get('[data-slot="alert-description"]').should('have.class', 'custom-description-class');
134+
});
135+
136+
it('renders multiple Alert components correctly', () => {
137+
cy.mount(
138+
<div>
139+
<Alert variant="default" data-testid="alert-1">
140+
<AlertTitle>First Alert</AlertTitle>
141+
<AlertDescription>First alert description</AlertDescription>
142+
</Alert>
143+
<Alert variant="destructive" data-testid="alert-2">
144+
<AlertTitle>Second Alert</AlertTitle>
145+
<AlertDescription>Second alert description</AlertDescription>
146+
</Alert>
147+
</div>,
148+
);
149+
150+
cy.get('[data-testid="alert-1"]').should('exist');
151+
cy.get('[data-testid="alert-1"] [data-slot="alert-title"]').contains('First Alert');
152+
cy.get('[data-testid="alert-2"]').should('exist');
153+
cy.get('[data-testid="alert-2"] [data-slot="alert-title"]').contains('Second Alert');
154+
cy.get('[data-testid="alert-2"]').should('have.class', 'text-destructive');
155+
});
156+
157+
it('renders Alert with HTML content correctly', () => {
158+
cy.mount(
159+
<Alert>
160+
<AlertTitle>HTML Content Alert</AlertTitle>
161+
<AlertDescription>
162+
This alert contains <strong>bold text</strong> and <em>italic text</em>.
163+
</AlertDescription>
164+
</Alert>,
165+
);
166+
167+
cy.get('[data-slot="alert-description"]').contains('bold text');
168+
cy.get('[data-slot="alert-description"]').contains('italic text');
169+
cy.get('[data-slot="alert-description"] strong').should('exist');
170+
cy.get('[data-slot="alert-description"] em').should('exist');
171+
});
172+
173+
it('renders Alert with accessibility attributes correctly', () => {
174+
cy.mount(
175+
<Alert aria-label="Custom alert" data-testid="accessible-alert">
176+
<AlertTitle>Accessible Alert</AlertTitle>
177+
<AlertDescription>This alert has custom accessibility attributes</AlertDescription>
178+
</Alert>,
179+
);
180+
181+
cy.get('[data-testid="accessible-alert"]').should('have.attr', 'aria-label', 'Custom alert');
182+
cy.get('[data-testid="accessible-alert"]').should('have.attr', 'role', 'alert');
183+
});
184+
});

0 commit comments

Comments
 (0)