Skip to content

Commit 9e3d225

Browse files
segunadebayosegunadebayo
committed
test: improve rating tests
1 parent 23bf36e commit 9e3d225

File tree

3 files changed

+144
-68
lines changed

3 files changed

+144
-68
lines changed

‎e2e/_utils.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,13 @@ export const rect = async (el: Locator) => {
8080
throw new Error("Element not found")
8181
}
8282

83-
return { ...bbox, midX: bbox.x + bbox.width / 2, midY: bbox.y + bbox.height / 2 }
83+
return {
84+
...bbox,
85+
midX: bbox.x + bbox.width / 2,
86+
midY: bbox.y + bbox.height / 2,
87+
maxX: bbox.x + bbox.width,
88+
maxY: bbox.y + bbox.height,
89+
}
8490
}
8591

8692
export async function isInViewport(viewport: Locator, el: Locator) {

‎e2e/models/rating-group.model.ts

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import { expect, type Locator, type Page } from "@playwright/test"
2+
import { a11y, part, testid } from "../_utils"
3+
import { Model } from "./model"
4+
5+
export class RatingGroupModel extends Model {
6+
constructor(public page: Page) {
7+
super(page)
8+
}
9+
10+
goto() {
11+
return this.page.goto("/rating-group")
12+
}
13+
14+
checkAccessibility(selector?: string): Promise<void> {
15+
return a11y(this.page, selector)
16+
}
17+
18+
get control() {
19+
return this.page.locator(part("control"))
20+
}
21+
22+
get hiddenInput() {
23+
return this.page.locator(testid("hidden-input"))
24+
}
25+
26+
get label() {
27+
return this.page.locator(part("label"))
28+
}
29+
30+
getRating(value: number): Locator {
31+
return this.page.locator(part("item")).nth(value - 1)
32+
}
33+
34+
async hoverOut() {
35+
await this.page.hover("main")
36+
}
37+
38+
async clickRating(value: number) {
39+
await this.getRating(value).click()
40+
}
41+
42+
async clickLabel() {
43+
await this.label.click()
44+
}
45+
46+
async focusRating(value: number) {
47+
await this.getRating(value).focus()
48+
}
49+
50+
async hoverRating(value: number) {
51+
const el = this.getRating(value)
52+
await el.hover()
53+
await el.dispatchEvent("pointermove", { button: 0 })
54+
}
55+
56+
async seeRatingIsHighlighted(value: number) {
57+
await expect(this.getRating(value)).toHaveAttribute("data-highlighted", "")
58+
}
59+
60+
async seeRatingIsDisabled(value: number) {
61+
await expect(this.getRating(value)).toHaveAttribute("data-disabled", "")
62+
}
63+
64+
async seeControlIsDisabled() {
65+
await expect(this.control).toHaveAttribute("data-disabled", "")
66+
}
67+
68+
async seeRatingIsFocused(value: number) {
69+
await expect(this.getRating(value)).toBeFocused()
70+
}
71+
72+
async seeInputHasValue(value: string) {
73+
await expect(this.hiddenInput).toHaveValue(value)
74+
}
75+
76+
async seeAllRatingsAreDisabled() {
77+
const items = this.page.locator(part("item"))
78+
const isAllItemsDisabled = await items.evaluateAll((items) => items.every((item) => item.dataset.disabled === ""))
79+
expect(isAllItemsDisabled).toBeTruthy()
80+
}
81+
82+
async seeAllRatingsAreReadonly() {
83+
const items = this.page.locator(part("item"))
84+
const isAllItemsReadonly = await items.evaluateAll((items) => items.every((item) => item.dataset.readonly === ""))
85+
expect(isAllItemsReadonly).toBeTruthy()
86+
}
87+
}

‎e2e/rating-group.e2e.ts

Lines changed: 50 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,87 @@
1-
import { expect, test, type Locator, type Page } from "@playwright/test"
2-
import { a11y, controls, part, testid } from "./_utils"
1+
import { test } from "@playwright/test"
2+
import { controls } from "./_utils"
3+
import { RatingGroupModel } from "./models/rating-group.model"
34

4-
const control = part("control")
5-
const hiddenInput = testid("hidden-input")
6-
const rating = part("item")
7-
8-
const getRating = (page: Page, value: number): Locator => {
9-
return page.locator(rating).nth(value - 1)
10-
}
11-
12-
const expectToBeHighlighted = (el: Locator) => {
13-
return expect(el).toHaveAttribute("data-highlighted", "")
14-
}
15-
16-
const expectToBeDisabled = (el: Locator) => {
17-
return expect(el).toHaveAttribute("data-disabled", "")
18-
}
19-
20-
const pointerover = (el: Locator) => {
21-
el.hover()
22-
return el.dispatchEvent("pointermove", { button: 0 })
23-
}
5+
let I: RatingGroupModel
246

257
test.describe("rating / pointer", () => {
268
test.beforeEach(async ({ page }) => {
27-
await page.goto("/rating-group")
9+
I = new RatingGroupModel(page)
10+
await I.goto()
2811
})
2912

30-
test("should be accessible", async ({ page }) => {
31-
await a11y(page)
13+
test("should be accessible", async () => {
14+
await I.checkAccessibility()
3215
})
3316

34-
test("should set value when item is clicked", async ({ page }) => {
35-
await getRating(page, 4).click()
36-
await expect(page.locator(hiddenInput)).toHaveValue("4")
17+
test("should set value when item is clicked", async () => {
18+
await I.clickRating(4)
19+
await I.seeInputHasValue("4")
3720
})
3821

39-
test.skip("highlight when hovered", async ({ page }) => {
40-
const el = getRating(page, 4)
22+
test.skip("highlight when hovered", async () => {
23+
await I.hoverRating(4)
24+
await I.seeRatingIsHighlighted(4)
4125

42-
await pointerover(el)
43-
await expectToBeHighlighted(el)
26+
await I.hoverOut()
27+
await I.seeRatingIsHighlighted(3)
4428

45-
// hover out
46-
page.hover("main")
47-
await expectToBeHighlighted(getRating(page, 3))
29+
await I.hoverRating(4)
30+
await I.clickRating(4)
31+
await I.seeInputHasValue("4")
32+
})
4833

49-
await pointerover(el)
50-
el.click()
51-
await expect(page.locator(hiddenInput)).toHaveValue("4")
34+
test("clicking label should focus 3rd item", async () => {
35+
await I.clickLabel()
36+
await I.seeRatingIsFocused(3)
5237
})
5338
})
5439

5540
test.describe("rating / properties", () => {
5641
test.beforeEach(async ({ page }) => {
57-
await page.goto("/rating-group")
42+
I = new RatingGroupModel(page)
43+
await I.goto()
5844
})
5945

60-
test("should not be selectable when disabled", async ({ page }) => {
61-
await controls(page).bool("disabled")
62-
await expectToBeDisabled(page.locator(control))
63-
const items = page.locator(rating)
64-
const isAllItemsDisabled = await items.evaluateAll((items) => items.every((item) => item.dataset.disabled === ""))
65-
expect(isAllItemsDisabled).toBeTruthy()
46+
test("should not be selectable when disabled", async () => {
47+
await controls(I.page).bool("disabled")
48+
await I.seeControlIsDisabled()
49+
await I.seeAllRatingsAreDisabled()
6650
})
6751

68-
test("should not be selectable when is readonly", async ({ page }) => {
69-
await controls(page).bool("readOnly")
70-
const items = page.locator(rating)
71-
const isAllItemsReadonly = await items.evaluateAll((items) => items.every((item) => item.dataset.readonly === ""))
72-
expect(isAllItemsReadonly).toBeTruthy()
52+
test("should not be selectable when is readonly", async () => {
53+
await controls(I.page).bool("readOnly")
54+
await I.seeAllRatingsAreReadonly()
7355
})
7456
})
7557

7658
test.describe("rating / keyboard", () => {
7759
test.beforeEach(async ({ page }) => {
78-
await page.goto("/rating-group")
60+
I = new RatingGroupModel(page)
61+
await I.goto()
7962
})
8063

81-
test("should select value on arrow left/right", async ({ page }) => {
82-
await getRating(page, 3).focus()
64+
test("should select value on arrow left/right", async () => {
65+
await I.focusRating(3)
8366

84-
await page.keyboard.press("ArrowRight")
85-
await page.keyboard.press("ArrowRight")
86-
await expect(getRating(page, 4)).toBeFocused()
67+
await I.pressKey("ArrowRight")
68+
await I.pressKey("ArrowRight")
69+
await I.seeRatingIsFocused(4)
8770

88-
await page.keyboard.press("ArrowLeft")
89-
await page.keyboard.press("ArrowLeft")
90-
await expect(getRating(page, 3)).toBeFocused()
71+
await I.pressKey("ArrowLeft")
72+
await I.pressKey("ArrowLeft")
73+
await I.seeRatingIsFocused(3)
9174
})
9275

93-
test("should select value on arrow home/end", async ({ page }) => {
94-
await getRating(page, 3).focus()
76+
test("should select value on arrow home/end", async () => {
77+
await I.focusRating(3)
9578

96-
await page.keyboard.press("Home")
97-
await expect(getRating(page, 1)).toBeFocused()
98-
await expectToBeHighlighted(getRating(page, 1))
79+
await I.pressKey("Home")
80+
await I.seeRatingIsFocused(1)
81+
await I.seeRatingIsHighlighted(1)
9982

100-
await page.keyboard.press("End")
101-
await expect(getRating(page, 5)).toBeFocused()
102-
await expectToBeHighlighted(getRating(page, 5))
83+
await I.pressKey("End")
84+
await I.seeRatingIsFocused(5)
85+
await I.seeRatingIsHighlighted(5)
10386
})
10487
})

0 commit comments

Comments
 (0)