Skip to content

Commit c30ca1c

Browse files
jyasskinjyasskin
committed
Reduce flakiness in tooltip testing.
1 parent 0292f62 commit c30ca1c

File tree

1 file changed

+90
-48
lines changed

1 file changed

+90
-48
lines changed

‎webserver/e2e/recipe.spec.ts

Lines changed: 90 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,100 +1,142 @@
1-
import { expect } from '@playwright/test';
2-
import { test } from './fixtures.js';
3-
import { getSectionByHeading } from './util.js';
1+
import { expect } from "@playwright/test";
2+
import { test } from "./fixtures.js";
3+
import { getSectionByHeading } from "./util.js";
44

5-
test('Renders a recipe', async ({ page, testUser, testRecipe }) => {
6-
const user = await testUser.create({ username: 'testuser', name: "User Name" });
5+
test("Renders a recipe", async ({ page, testUser, testRecipe }) => {
6+
const user = await testUser.create({
7+
username: "testuser",
8+
name: "User Name",
9+
});
710
await testRecipe.create({
811
author: { connect: { id: user.id } },
912
name: "Test Recipe",
1013
slug: "test-recipe",
1114
servings: 3,
1215
ingredients: {
1316
create: [
14-
{ order: 0, amount: "1", unit: "cup", name: "flour", preparation: "sifted" },
17+
{
18+
order: 0,
19+
amount: "1",
20+
unit: "cup",
21+
name: "flour",
22+
preparation: "sifted",
23+
},
1524
{ order: 1, name: "sugar" },
1625
{ order: 2, amount: "3", name: "eggs" },
1726
{ order: 3, name: "butter", preparation: "melted" },
18-
]
27+
],
1928
},
2029
steps: ["1. Mix.\n2. Bake.\n3. Eat.\n\nNew Paragraph"],
21-
})
22-
await page.goto('/r/testuser/test-recipe');
30+
});
31+
await page.goto("/r/testuser/test-recipe");
2332

2433
await expect.soft(page).toHaveTitle("Test Recipe");
25-
await expect.soft(getSectionByHeading(page, 'Ingredients').getByRole("listitem")).toHaveText([
26-
"1 cup flour, sifted",
27-
"sugar",
28-
"3 eggs",
29-
"butter, melted"
30-
]);
31-
const instructions = getSectionByHeading(page, 'Instructions');
32-
await expect.soft(instructions.getByRole("listitem")).toHaveText([
33-
"Mix.",
34-
"Bake.",
35-
"Eat.",
36-
]);
37-
await expect.soft(instructions.getByRole("paragraph")).toHaveText("New Paragraph");
34+
await expect
35+
.soft(getSectionByHeading(page, "Ingredients").getByRole("listitem"))
36+
.toHaveText(["1 cup flour, sifted", "sugar", "3 eggs", "butter, melted"]);
37+
const instructions = getSectionByHeading(page, "Instructions");
38+
await expect
39+
.soft(instructions.getByRole("listitem"))
40+
.toHaveText(["Mix.", "Bake.", "Eat."]);
41+
await expect
42+
.soft(instructions.getByRole("paragraph"))
43+
.toHaveText("New Paragraph");
3844
});
3945

40-
test('Multiple steps are rendered as a list', async ({ page, testUser, testRecipe }) => {
41-
const user = await testUser.create({ username: 'testuser', name: "User Name" });
46+
test("Multiple steps are rendered as a list", async ({
47+
page,
48+
testUser,
49+
testRecipe,
50+
}) => {
51+
const user = await testUser.create({
52+
username: "testuser",
53+
name: "User Name",
54+
});
4255
await testRecipe.create({
4356
author: { connect: { id: user.id } },
4457
name: "Test Recipe",
4558
slug: "test-recipe",
4659
ingredients: { create: { order: 0, name: "sugar" } },
4760
steps: ["Mix.", "Bake."],
4861
});
49-
await page.goto('/r/testuser/test-recipe');
62+
await page.goto("/r/testuser/test-recipe");
5063

51-
await expect.soft(getSectionByHeading(page, 'Ingredients').getByRole("listitem")).toHaveText([
52-
"sugar",
53-
]);
54-
await expect.soft(getSectionByHeading(page, 'Instructions').getByRole("listitem")).toHaveText([
55-
"Mix.",
56-
"Bake.",
57-
]);
64+
await expect
65+
.soft(getSectionByHeading(page, "Ingredients").getByRole("listitem"))
66+
.toHaveText(["sugar"]);
67+
await expect
68+
.soft(getSectionByHeading(page, "Instructions").getByRole("listitem"))
69+
.toHaveText(["Mix.", "Bake."]);
5870
});
5971

60-
test("Shows author's name", async ({ page, testUser, testRecipe, testLogin }) => {
72+
test("Shows author's name", async ({
73+
page,
74+
testUser,
75+
testRecipe,
76+
testLogin,
77+
}) => {
6178
const { username } = testLogin;
62-
const author = await testUser.create({ username: 'recipeauthor', name: "User Name" });
79+
const author = await testUser.create({
80+
username: "recipeauthor",
81+
name: "User Name",
82+
});
6383
expect(username).not.toEqual(author.username);
6484
await testRecipe.create({
6585
author: { connect: { id: author.id } },
6686
name: "Test Recipe",
6787
slug: "test-recipe",
68-
ingredients: { create: [{ order: 0, name: "sugar" },] },
88+
ingredients: { create: [{ order: 0, name: "sugar" }] },
6989
steps: ["Bake"],
70-
})
71-
await page.goto('/r/recipeauthor/test-recipe');
90+
});
91+
await page.goto("/r/recipeauthor/test-recipe");
7292

7393
await expect.soft(page.getByRole("link", { name: "✏️" })).toHaveCount(0);
7494
await page.getByRole("link", { name: "User Name" }).click();
7595
await expect(page).toHaveURL(/.*\/r\/recipeauthor$/);
7696
await expect(page).toHaveTitle("User Name's Recipes");
7797
});
7898

79-
test('Shows ingredient tooltips', async ({ page, testUser, testRecipe }) => {
80-
const user = await testUser.create({ username: 'testuser', name: "User Name" });
99+
test("Shows ingredient tooltips", async ({ page, testUser, testRecipe }) => {
100+
const user = await testUser.create({
101+
username: "testuser",
102+
name: "User Name",
103+
});
81104
await testRecipe.create({
82105
author: { connect: { id: user.id } },
83106
name: "Test Recipe",
84107
slug: "test-recipe",
85108
ingredients: {
86109
create: [
87-
{ order: 0, amount: "1", unit: "cup", name: "flour", preparation: "sifted" },
110+
{
111+
order: 0,
112+
amount: "1",
113+
unit: "cup",
114+
name: "flour",
115+
preparation: "sifted",
116+
},
88117
{ order: 2, amount: "3", name: "Funny ingredient'name" },
89-
]
118+
],
90119
},
91120
steps: ["1. Add the flour.\n2. Add some Funny ingredient'name."],
92-
})
93-
await page.goto('/r/testuser/test-recipe');
94-
95-
await page.getByText("Add the flour").locator('span[tabindex]').hover();
96-
await expect.soft(page.getByRole('tooltip')).toHaveText("1 cup flour, sifted");
121+
});
122+
await page.goto("/r/testuser/test-recipe");
97123

98-
await page.getByText("Add some Funny").locator('span[tabindex]').hover();
99-
await expect.soft(page.getByRole('tooltip')).toHaveText("3 Funny ingredient'name");
124+
await expect
125+
.soft(async () => {
126+
await page.getByText("Add the flour").locator("span[tabindex]").hover();
127+
// Use this inside .toPass() instead of .toHaveText() to ensure the element is re-hovered
128+
// during the wait.
129+
expect(
130+
(await page.getByRole("tooltip").allTextContents()).join("").trim()
131+
).toEqual("1 cup flour, sifted");
132+
})
133+
.toPass();
134+
await expect
135+
.soft(async () => {
136+
await page.getByText("Add some Funny").locator("span[tabindex]").hover();
137+
expect(
138+
(await page.getByRole("tooltip").allTextContents()).join("").trim()
139+
).toEqual("3 Funny ingredient'name");
140+
})
141+
.toPass();
100142
});

0 commit comments

Comments
 (0)