Skip to content

Commit 316b81a

Browse files
hojberghojberg
committed
Add mobile playwright testing
1 parent f5fd606 commit 316b81a

File tree

4 files changed

+79
-47
lines changed

4 files changed

+79
-47
lines changed

‎playwright.config.ts‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -47,23 +47,19 @@ export default defineConfig({
4747
use: { ...devices["Desktop Safari"] },
4848
},
4949

50-
/*
51-
TODO: re-enable when we understand how to direct tests for mobile (for instance some element worth checking on desktop might be hidden on mobile and visa versa).
5250
{
53-
name: 'Mobile Safari',
54-
use: { ...devices['iPhone 12'] },
51+
name: "Mobile Safari",
52+
use: { ...devices["iPhone 12"] },
5553
},
56-
5754
{
58-
name: 'Mobile Safari',
59-
use: { ...devices['iPhone 14'] },
55+
name: "Mobile Safari",
56+
use: { ...devices["iPhone 14"] },
6057
},
6158

6259
{
63-
name: 'Mobile Chrome',
64-
use: { ...devices['Pixel 5'] },
60+
name: "Mobile Chrome",
61+
use: { ...devices["Pixel 5"] },
6562
},
66-
*/
6763
],
6864

6965
webServer: {

‎tests/e2e/NewOrgModal.spec.ts‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,20 @@ test.describe("without being signed in", () => {
1111
await API.getAccount(page, "NOT_SIGNED_IN");
1212
});
1313

14-
test("can *NOT* see the 'New Org' button", async ({ page }) => {
14+
test("can *NOT* see the 'New Org' button", async ({ page, isMobile }) => {
1515
const response = await page.goto("http://localhost:1234");
1616
expect(response?.status()).toBeLessThan(400);
17+
await expect(page).toHaveScreenshot({ maxDiffPixels: 100 });
1718

18-
await expect(
19-
page.locator(".signed-in-nav_desktop .button").getByText("New Org"),
20-
).not.toBeVisible();
19+
if (isMobile) {
20+
await expect(
21+
page.locator(".signed-in-nav_mobile .button").getByText("New Org"),
22+
).toBeVisible();
23+
} else {
24+
await expect(
25+
page.locator(".signed-in-nav_desktop .button").getByText("New Org"),
26+
).toBeVisible();
27+
}
2128
});
2229
});
2330

@@ -26,12 +33,19 @@ test.describe("while being signed in", () => {
2633
await API.getAccount(page, "@alice", { isSuperadmin: true });
2734
});
2835

29-
test("can see the 'New Org' button", async ({ page }) => {
36+
test("can see the 'New Org' button", async ({ page, isMobile }) => {
3037
const response = await page.goto("http://localhost:1234");
3138
expect(response?.status()).toBeLessThan(400);
39+
await expect(page).toHaveScreenshot({ maxDiffPixels: 100 });
3240

33-
await expect(
34-
page.locator(".signed-in-nav_desktop .button").getByText("New Org"),
35-
).toBeVisible();
41+
if (isMobile) {
42+
await expect(
43+
page.locator(".signed-in-nav_mobile .button").getByText("New Org"),
44+
).toBeVisible();
45+
} else {
46+
await expect(
47+
page.locator(".signed-in-nav_desktop .button").getByText("New Org"),
48+
).toBeVisible();
49+
}
3650
});
3751
});

‎tests/e2e/OrgPeoplePage.spec.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ test.describe("with org:manage permission", () => {
5757
await API.getAccount(page, "@alice");
5858
});
5959

60-
test("can view the org people page", async ({ page }) => {
60+
test("can view the org people page", async ({ page, isMobile }) => {
6161
const orgHandle = "@unison";
6262
await API.getOrgProfile(page, orgHandle, { permissions: ["org:manage"] });
6363
await API.getOrgRoleAssignments(page, orgHandle);
@@ -73,7 +73,11 @@ test.describe("with org:manage permission", () => {
7373
const projects = page.locator(".page-content .profile-snippet");
7474
await expect(projects).toHaveCount(3);
7575

76-
await expect(navItem(page, "People")).toBeVisible();
76+
// The nav is hidden on mobile
77+
if (!isMobile) {
78+
await expect(navItem(page, "People")).toBeVisible();
79+
}
80+
7781
await expect(button(page, "Add an organization member")).toBeVisible();
7882
});
7983
});

‎tests/e2e/ProjectOverviewPage.spec.ts‎

Lines changed: 45 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ test.describe("without being signed in", () => {
1414
await API.getAccount(page, "NOT_SIGNED_IN");
1515
});
1616

17-
test("can view public project", async ({ page }) => {
17+
test("can view public project", async ({ page, isMobile }) => {
1818
await API.getProject(page, "@unison/base");
1919

2020
const response = await page.goto("http://localhost:1234/@unison/base");
@@ -25,13 +25,17 @@ test.describe("without being signed in", () => {
2525

2626
await expect(button(page, "Browse Project Code")).toBeVisible();
2727
await expect(button(page, "Edit summary")).not.toBeVisible();
28-
await expect(navItem(page, "Code")).toBeVisible();
29-
await expect(navItem(page, "Tickets")).toBeVisible();
30-
await expect(navItem(page, "Contributions")).toBeVisible();
31-
await expect(navItem(page, "Settings")).not.toBeVisible();
28+
29+
// Nav is hidden on mobile
30+
if (!isMobile) {
31+
await expect(navItem(page, "Code")).toBeVisible();
32+
await expect(navItem(page, "Tickets")).toBeVisible();
33+
await expect(navItem(page, "Contributions")).toBeVisible();
34+
await expect(navItem(page, "Settings")).not.toBeVisible();
35+
}
3236
});
3337

34-
test("can *not* view a private project`", async ({ page }) => {
38+
test("can *not* view a private project`", async ({ page, isMobile }) => {
3539
await API.getProject_(page, "@bob/private-project", { status: 404 });
3640

3741
const response = await page.goto(
@@ -43,10 +47,14 @@ test.describe("without being signed in", () => {
4347
await expect(
4448
page.getByText("Couldn't find @bob/private-project"),
4549
).toBeVisible();
46-
await expect(navItem(page, "Code")).not.toBeVisible();
47-
await expect(navItem(page, "Tickets")).not.toBeVisible();
48-
await expect(navItem(page, "Contributions")).not.toBeVisible();
49-
await expect(navItem(page, "Settings")).not.toBeVisible();
50+
51+
// Nav is hidden on mobile
52+
if (!isMobile) {
53+
await expect(navItem(page, "Code")).not.toBeVisible();
54+
await expect(navItem(page, "Tickets")).not.toBeVisible();
55+
await expect(navItem(page, "Contributions")).not.toBeVisible();
56+
await expect(navItem(page, "Settings")).not.toBeVisible();
57+
}
5058
});
5159
});
5260

@@ -60,6 +68,7 @@ test.describe("while signed in", () => {
6068
test.describe("with an another user's private project and `project:view` permission", () => {
6169
test("can view, but *not* edit summary or see settings", async ({
6270
page,
71+
isMobile,
6372
}) => {
6473
await API.getProject(page, "@bob/private-project", {
6574
visibility: "private",
@@ -71,17 +80,21 @@ test.describe("while signed in", () => {
7180
);
7281
expect(response?.status()).toBeLessThan(400);
7382

74-
await expect(button(page, "Edit summary")).not.toBeVisible();
75-
await expect(navItem(page, "Code")).toBeVisible();
76-
await expect(navItem(page, "Tickets")).toBeVisible();
77-
await expect(navItem(page, "Contributions")).toBeVisible();
78-
await expect(navItem(page, "Settings")).not.toBeVisible();
83+
// Nav is hidden on mobile
84+
if (!isMobile) {
85+
await expect(button(page, "Edit summary")).not.toBeVisible();
86+
await expect(navItem(page, "Code")).toBeVisible();
87+
await expect(navItem(page, "Tickets")).toBeVisible();
88+
await expect(navItem(page, "Contributions")).toBeVisible();
89+
await expect(navItem(page, "Settings")).not.toBeVisible();
90+
}
7991
});
8092
});
8193

8294
test.describe("with an another user's private project and `project:maintain` permission", () => {
8395
test("can view and edit summary, but not see settings", async ({
8496
page,
97+
isMobile,
8598
}) => {
8699
await API.getProject(page, "@bob/private-project", {
87100
visibility: "private",
@@ -93,18 +106,21 @@ test.describe("while signed in", () => {
93106
);
94107
expect(response?.status()).toBeLessThan(400);
95108

96-
// await expect(button(page, "Browse Project Code")).toBeVisible();
97-
await expect(button(page, "Edit summary")).toBeVisible();
98-
await expect(navItem(page, "Code")).toBeVisible();
99-
await expect(navItem(page, "Tickets")).toBeVisible();
100-
await expect(navItem(page, "Contributions")).toBeVisible();
101-
await expect(navItem(page, "Settings")).not.toBeVisible();
109+
// Nav is hidden on mobile
110+
if (!isMobile) {
111+
await expect(button(page, "Edit summary")).toBeVisible();
112+
await expect(navItem(page, "Code")).toBeVisible();
113+
await expect(navItem(page, "Tickets")).toBeVisible();
114+
await expect(navItem(page, "Contributions")).toBeVisible();
115+
await expect(navItem(page, "Settings")).not.toBeVisible();
116+
}
102117
});
103118
});
104119

105120
test.describe("with an another user's private project and `project:manage` permission", () => {
106121
test("can view and edit summary, but not see settings", async ({
107122
page,
123+
isMobile,
108124
}) => {
109125
await API.getProject(page, "@bob/private-project", {
110126
visibility: "private",
@@ -116,12 +132,14 @@ test.describe("while signed in", () => {
116132
);
117133
expect(response?.status()).toBeLessThan(400);
118134

119-
// await expect(button(page, "Browse Project Code")).toBeVisible();
120-
await expect(button(page, "Edit summary")).toBeVisible();
121-
await expect(navItem(page, "Code")).toBeVisible();
122-
await expect(navItem(page, "Tickets")).toBeVisible();
123-
await expect(navItem(page, "Contributions")).toBeVisible();
124-
await expect(navItem(page, "Settings")).toBeVisible();
135+
// Nav is hidden on mobile
136+
if (!isMobile) {
137+
await expect(button(page, "Edit summary")).toBeVisible();
138+
await expect(navItem(page, "Code")).toBeVisible();
139+
await expect(navItem(page, "Tickets")).toBeVisible();
140+
await expect(navItem(page, "Contributions")).toBeVisible();
141+
await expect(navItem(page, "Settings")).toBeVisible();
142+
}
125143
});
126144
});
127145
});

0 commit comments

Comments
 (0)