Skip to content

Commit becbc54

Browse files
HypenateHypenate
committed
Add tests
1 parent 9331e20 commit becbc54

File tree

1 file changed

+219
-0
lines changed

1 file changed

+219
-0
lines changed

‎tests/bingo.spec.ts‎

Lines changed: 219 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,224 @@ test.describe('Bingo Application', () => {
1010
// Verify the page title
1111
await expect(page).toHaveTitle('Bingo');
1212
});
13+
14+
test('should display a 5x5 bingo grid', async ({ page }) => {
15+
// Verify the grid has 25 buttons (including the center star)
16+
const buttons = page.locator('button').filter({ hasNotText: 'Generate Number' });
17+
await expect(buttons).toHaveCount(25);
18+
});
19+
20+
test('should have a disabled center button with star', async ({ page }) => {
21+
// Find the center button (13th button in the grid, index 12)
22+
const centerButton = page.locator('button').filter({ hasNotText: 'Generate Number' }).nth(12);
23+
await expect(centerButton).toBeDisabled();
24+
await expect(centerButton).toHaveText('★');
25+
});
26+
27+
test('should mark button as active when clicked', async ({ page }) => {
28+
// Click the first button in the grid
29+
const firstButton = page.locator('button').filter({ hasNotText: 'Generate Number' }).first();
30+
await firstButton.click();
31+
32+
// Verify it has the active state (you may need to adjust the selector based on your CSS)
33+
await expect(firstButton).toHaveAttribute('class', /active/);
34+
});
35+
36+
test('should create BINGO by clicking 5 buttons in the top row', async ({ page }) => {
37+
// Click all 5 buttons in the top row (indices 0-4)
38+
const buttons = page.locator('button').filter({ hasNotText: 'Generate Number' });
39+
40+
for (let i = 0; i < 5; i++) {
41+
await buttons.nth(i).click();
42+
}
43+
44+
// Verify BINGO message appears
45+
await expect(page.locator('text=🎉 BINGO! 🎉')).toBeVisible();
46+
});
47+
48+
test('should create BINGO by clicking 5 buttons in the left column', async ({ page }) => {
49+
// Click all 5 buttons in the leftmost column (indices 0, 5, 10, 15, 20)
50+
const buttons = page.locator('button').filter({ hasNotText: 'Generate Number' });
51+
52+
const columnIndices = [0, 5, 10, 15, 20];
53+
for (const index of columnIndices) {
54+
await buttons.nth(index).click();
55+
}
56+
57+
// Verify BINGO message appears
58+
await expect(page.locator('text=🎉 BINGO! 🎉')).toBeVisible();
59+
});
60+
61+
test('should create BINGO by clicking diagonal from top-left to bottom-right', async ({ page }) => {
62+
// Click diagonal buttons (indices 0, 6, 12, 18, 24)
63+
// Note: index 12 is the center star which is disabled, so it should already count
64+
const buttons = page.locator('button').filter({ hasNotText: 'Generate Number' });
65+
66+
const diagonalIndices = [0, 6, 18, 24]; // Skip 12 as it's the center star
67+
for (const index of diagonalIndices) {
68+
await buttons.nth(index).click();
69+
}
70+
71+
// Verify BINGO message appears
72+
await expect(page.locator('text=🎉 BINGO! 🎉')).toBeVisible();
73+
});
74+
75+
test('should toggle button state when clicked multiple times', async ({ page }) => {
76+
const firstButton = page.locator('button').filter({ hasNotText: 'Generate Number' }).first();
77+
78+
// Click to activate
79+
await firstButton.click();
80+
await expect(firstButton).toHaveAttribute('class', /active/);
81+
82+
// Click again to deactivate
83+
await firstButton.click();
84+
await expect(firstButton).toHaveAttribute('class', /cell-inactive/);
85+
});
86+
87+
test('should have "Use Words" checkbox unchecked by default', async ({ page }) => {
88+
const useWordsCheckbox = page.getByRole('checkbox', { name: 'Use Words' });
89+
await expect(useWordsCheckbox).not.toBeChecked();
90+
});
91+
92+
test('should change to corporate words when "Use Words" is checked', async ({ page }) => {
93+
const useWordsCheckbox = page.getByRole('checkbox', { name: 'Use Words' });
94+
95+
// Check the checkbox
96+
await useWordsCheckbox.check();
97+
await expect(useWordsCheckbox).toBeChecked();
98+
99+
// Verify the title changes to "CORPORATE BINGO!"
100+
await expect(page.locator('h1')).toHaveText('CORPORATE BINGO!');
101+
102+
// Verify buttons show words instead of numbers (check a few buttons contain text, not just digits)
103+
const buttons = page.locator('button').filter({ hasNotText: 'Generate' });
104+
const firstButtonText = await buttons.first().textContent();
105+
106+
// Corporate words should be alphabetic, not just digits
107+
expect(firstButtonText).toMatch(/[A-Za-z]/);
108+
});
109+
110+
test('should change button text to "Generate Word" when "Use Words" is checked', async ({ page }) => {
111+
const useWordsCheckbox = page.getByRole('checkbox', { name: 'Use Words' });
112+
113+
// Initially should say "Generate Number"
114+
await expect(page.getByRole('button', { name: 'Generate Number' })).toBeVisible();
115+
116+
// Check the checkbox
117+
await useWordsCheckbox.check();
118+
119+
// Button text should change to "Generate Word"
120+
await expect(page.getByRole('button', { name: 'Generate Word' })).toBeVisible();
121+
await expect(page.getByRole('button', { name: 'Generate Number' })).not.toBeVisible();
122+
});
123+
124+
test('should revert to numbers when "Use Words" is unchecked', async ({ page }) => {
125+
const useWordsCheckbox = page.getByRole('checkbox', { name: 'Use Words' });
126+
127+
// Check and then uncheck
128+
await useWordsCheckbox.check();
129+
await expect(page.locator('h1')).toHaveText('CORPORATE BINGO!');
130+
131+
await useWordsCheckbox.uncheck();
132+
133+
// Title should revert to "BINGO!"
134+
await expect(page.locator('h1')).toHaveText('BINGO!');
135+
136+
// Button should revert to "Generate Number"
137+
await expect(page.getByRole('button', { name: 'Generate Number' })).toBeVisible();
138+
});
139+
140+
test('should have "Live" checkbox unchecked by default', async ({ page }) => {
141+
const liveCheckbox = page.getByRole('checkbox', { name: 'Live' });
142+
await expect(liveCheckbox).not.toBeChecked();
143+
144+
// Timer should not be visible
145+
await expect(page.locator('text=/⏱️/')).not.toBeVisible();
146+
});
147+
148+
test('should display a timer when "Live" is checked', async ({ page }) => {
149+
const liveCheckbox = page.getByRole('checkbox', { name: 'Live' });
150+
151+
// Check the checkbox
152+
await liveCheckbox.check();
153+
await expect(liveCheckbox).toBeChecked();
154+
155+
// Verify timer appears
156+
await expect(page.locator('text=/⏱️/')).toBeVisible();
157+
158+
// Verify timer has a time format (e.g., "⏱️ 00:01")
159+
const timerText = await page.locator('text=/⏱️/').textContent();
160+
expect(timerText).toMatch(/⏱️\s+\d{2}:\d{2}/);
161+
});
162+
163+
test('should increment timer when "Live" is checked', async ({ page }) => {
164+
const liveCheckbox = page.getByRole('checkbox', { name: 'Live' });
165+
166+
// Check the checkbox
167+
await liveCheckbox.check();
168+
169+
// Get initial timer value
170+
const initialTimerText = await page.locator('text=/⏱️/').textContent();
171+
172+
// Wait for 2 seconds
173+
await page.waitForTimeout(2000);
174+
175+
// Get updated timer value
176+
const updatedTimerText = await page.locator('text=/⏱️/').textContent();
177+
178+
// Timer should have changed (increased)
179+
expect(updatedTimerText).not.toBe(initialTimerText);
180+
});
181+
182+
test('should hide timer when "Live" is unchecked', async ({ page }) => {
183+
const liveCheckbox = page.getByRole('checkbox', { name: 'Live' });
184+
185+
// Check and then uncheck
186+
await liveCheckbox.check();
187+
await expect(page.locator('text=/⏱️/')).toBeVisible();
188+
189+
await liveCheckbox.uncheck();
190+
191+
// Timer should disappear
192+
await expect(page.locator('text=/⏱️/')).not.toBeVisible();
193+
});
194+
195+
test('should work with both "Use Words" and "Live" checked together', async ({ page }) => {
196+
const useWordsCheckbox = page.getByRole('checkbox', { name: 'Use Words' });
197+
const liveCheckbox = page.getByRole('checkbox', { name: 'Live' });
198+
199+
// Check both checkboxes
200+
await useWordsCheckbox.check();
201+
await liveCheckbox.check();
202+
203+
// Verify both features are active
204+
await expect(page.locator('h1')).toHaveText('CORPORATE BINGO!');
205+
await expect(page.locator('text=/⏱️/')).toBeVisible();
206+
207+
// Verify the grid shows words (not numbers)
208+
const buttons = page.locator('button').filter({ hasNotText: 'Generate' });
209+
const firstButtonText = await buttons.first().textContent();
210+
expect(firstButtonText).toMatch(/[A-Za-z]/);
211+
});
212+
213+
test('should create BINGO with words when "Use Words" is checked', async ({ page }) => {
214+
const useWordsCheckbox = page.getByRole('checkbox', { name: 'Use Words' });
215+
216+
// Check the checkbox
217+
await useWordsCheckbox.check();
218+
219+
// Click all 5 buttons in the top row
220+
const buttons = page.locator('button').filter({ hasNotText: 'Generate' });
221+
222+
for (let i = 0; i < 5; i++) {
223+
await buttons.nth(i).click();
224+
}
225+
226+
// Verify BINGO message appears
227+
await expect(page.locator('text=🎉 BINGO! 🎉')).toBeVisible();
228+
});
229+
13230
});
14231

232+
233+

0 commit comments

Comments
 (0)