Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-08 07:50:43 -05:00
Code Issues Activity

🐛 Fix mocking websockets when running multiple tests

Browse source
This commit is contained in:
Belén Albeza 2024-05-14 15:13:11 +02:00
parent 575873eba7
commit d43458ee89
5 changed files with 51 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/playwright.config.js
View file

@ -18,7 +18,7 @@ export default defineConfig({
/* Retry on CI only */
retries: process.env.CI ? 2 : 0,
/* Opt out of parallel tests on CI. */
workers: process.env.CI ? 1 : 1,
workers: process.env.CI ? 1 : undefined,
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
reporter: "html",
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */

63
frontend/playwright/helpers/MockWebSocketHelper.js
View file

@ -2,17 +2,19 @@ export class MockWebSocketHelper extends EventTarget {
static #mocks = new Map();
static async init(page) {
await page.exposeFunction("MockWebSocket$$constructor", (url, protocols) => {
const webSocket = new MockWebSocketHelper(page, url, protocols);
this.#mocks = new Map();
await page.exposeFunction("onMockWebSocketConstructor", (url) => {
const webSocket = new MockWebSocketHelper(page, url);
this.#mocks.set(url, webSocket);
});
await page.exposeFunction("MockWebSocket$$spyMessage", (url, data) => {
await page.exposeFunction("onMockWebSocketSpyMessage", (url, data) => {
if (!this.#mocks.has(url)) {
throw new Error(`WebSocket with URL ${url} not found`);
}
this.#mocks.get(url).dispatchEvent(new MessageEvent("message", { data }));
});
await page.exposeFunction("MockWebSocket$$spyClose", (url, code, reason) => {
await page.exposeFunction("onMockWebSocketSpyClose", (url, code, reason) => {
if (!this.#mocks.has(url)) {
throw new Error(`WebSocket with URL ${url} not found`);
}
@ -36,39 +38,52 @@ export class MockWebSocketHelper extends EventTarget {
#page = null;
#url;
#protocols;
constructor(page, url, protocols) {
super();
this.#page = page;
this.#url = url;
this.#protocols = protocols;
}
mockOpen(options) {
return this.#page.evaluate(({ url, options }) => {
if (typeof WebSocket.getByURL !== 'function') {
throw new Error('WebSocket.getByURL is not a function. Did you forget to call MockWebSocket.init(page)?')
}
WebSocket.getByURL(url).mockOpen(options);
}, { url: this.#url, options });
return this.#page.evaluate(
({ url, options }) => {
if (typeof WebSocket.getByURL !== "function") {
throw new Error(
"WebSocket.getByURL is not a function. Did you forget to call MockWebSocket.init(page)?",
);
}
WebSocket.getByURL(url).mockOpen(options);
},
{ url: this.#url, options },
);
}
mockMessage(data) {
return this.#page.evaluate(({ url, data }) => {
if (typeof WebSocket.getByURL !== 'function') {
throw new Error('WebSocket.getByURL is not a function. Did you forget to call MockWebSocket.init(page)?')
}
WebSocket.getByURL(url).mockMessage(data);
}, { url: this.#url, data });
return this.#page.evaluate(
({ url, data }) => {
if (typeof WebSocket.getByURL !== "function") {
throw new Error(
"WebSocket.getByURL is not a function. Did you forget to call MockWebSocket.init(page)?",
);
}
WebSocket.getByURL(url).mockMessage(data);
},
{ url: this.#url, data },
);
}
mockClose() {
return this.#page.evaluate(({ url }) => {
if (typeof WebSocket.getByURL !== 'function') {
throw new Error('WebSocket.getByURL is not a function. Did you forget to call MockWebSocket.init(page)?')
}
WebSocket.getByURL(url).mockClose();
}, { url: this.#url });
return this.#page.evaluate(
({ url }) => {
if (typeof WebSocket.getByURL !== "function") {
throw new Error(
"WebSocket.getByURL is not a function. Did you forget to call MockWebSocket.init(page)?",
);
}
WebSocket.getByURL(url).mockClose();
},
{ url: this.#url },
);
}
}

12
frontend/playwright/scripts/MockWebSocket.js
View file

@ -46,14 +46,14 @@ window.WebSocket = class MockWebSocket extends EventTarget {
MockWebSocket.#mocks.set(this.#url, this);
if (typeof window["MockWebSocket$$constructor"] === "function") {
MockWebSocket$$constructor(this.#url, this.#protocols);
if (typeof window["onMockWebSocketConstructor"] === "function") {
onMockWebSocketConstructor(this.#url, this.#protocols);
}
if (typeof window["MockWebSocket$$spyMessage"] === "function") {
this.#spyMessage = MockWebSocket$$spyMessage;
if (typeof window["onMockWebSocketSpyMessage"] === "function") {
this.#spyMessage = onMockWebSocketSpyMessage;
}
if (typeof window["MockWebSocket$$spyClose"] === "function") {
this.#spyClose = MockWebSocket$$spyClose;
if (typeof window["onMockWebSocketSpyClose"] === "function") {
this.#spyClose = onMockWebSocketSpyClose;
}
}

4
frontend/playwright/ui/pages/BaseWebSocketPage.js
View file

@ -8,8 +8,8 @@ export class BaseWebSocketPage extends BasePage {
* @param {Page} page
* @returns
*/
static initWebSockets(page) {
return MockWebSocketHelper.init(page);
static async initWebSockets(page) {
await MockWebSocketHelper.init(page);
}
/**

6
frontend/playwright/ui/specs/workspace.spec.js
View file

@ -6,7 +6,7 @@ test.beforeEach(async ({ page }) => {
await WorkspacePage.init(page);
});
test.skip("User loads worskpace with empty file", async ({ page }) => {
test("User loads worskpace with empty file", async ({ page }) => {
const workspacePage = new WorkspacePage(page);
await workspacePage.setupEmptyFile(page);
@ -15,7 +15,7 @@ test.skip("User loads worskpace with empty file", async ({ page }) => {
await expect(workspacePage.pageName).toHaveText("Page 1");
});
test.skip("User receives presence notifications updates in the workspace", async ({ page }) => {
test("User receives presence notifications updates in the workspace", async ({ page }) => {
const workspacePage = new WorkspacePage(page);
await workspacePage.setupEmptyFile();
@ -25,7 +25,7 @@ test.skip("User receives presence notifications updates in the workspace", async
await expect(page.getByTestId("active-users-list").getByAltText("Princesa Leia")).toHaveCount(2);
});
test.skip("User draws a rect", async ({ page }) => {
test("User draws a rect", async ({ page }) => {
const workspacePage = new WorkspacePage(page);
await workspacePage.setupEmptyFile();
await workspacePage.mockRPC("update-file?id=*", "workspace/update-file-create-rect.json");