From 7402876f29073990193d2c3e5fc2580ba6bb194c Mon Sep 17 00:00:00 2001 From: Sacha Froment Date: Tue, 14 Jan 2025 15:05:17 +0100 Subject: [PATCH] chore: quick fix Signed-off-by: Sacha Froment --- examples/grid/e2e/grid.spec.ts | 152 +++++++++++++++++++-------------- examples/grid/src/index.ts | 2 + vite.config.mts | 9 +- 3 files changed, 94 insertions(+), 69 deletions(-) diff --git a/examples/grid/e2e/grid.spec.ts b/examples/grid/e2e/grid.spec.ts index df361f54..b7a3be21 100644 --- a/examples/grid/e2e/grid.spec.ts +++ b/examples/grid/e2e/grid.spec.ts @@ -6,81 +6,109 @@ const DRPIdInputSelector = "#gridInput"; const joinGridButtonSelector = "#joinGrid"; const objectPeersSelector = "#objectPeers"; -async function getGlowingPeer(page: Page) { - const divs = await page.$$("div"); - const glowingPeer = []; - for (const div of divs) { - const style = await div.getAttribute("style"); - if (!style) continue; - - const matchPeerID = style.match(/glow-([a-zA-Z0-9]+)/); - if (!matchPeerID) continue; - - const matchLeft = style.match(/left: ([0-9]+)px/); - const matchTop = style.match(/top: ([0-9]+)px/); - if (!matchLeft || !matchTop) continue; - - glowingPeer.push({ - peerID: matchPeerID[1], - left: Number.parseInt(matchLeft[1]), - top: Number.parseInt(matchTop[1]), - }); - } - return glowingPeer; +async function getGlowingPeer(page: Page, peerID: string) { + const div = page.locator(`div[data-glowing-peer-id="${peerID}"]`); + const style = await div.getAttribute("style"); + if (!style) throw new Error("style is not defined"); + + const matchPeerID = style.match(/glow-([a-zA-Z0-9]+)/); + if (!matchPeerID) throw new Error("matchPeerID is not defined"); + + const matchLeft = style.match(/left: ([0-9]+)px/); + const matchTop = style.match(/top: ([0-9]+)px/); + if (!matchLeft || !matchTop) + throw new Error("matchLeft or matchTop is not defined"); + + return { + peerID: matchPeerID[1], + left: Number.parseInt(matchLeft[1]), + top: Number.parseInt(matchTop[1]), + }; +} + +async function getPeerID(page: Page) { + const peerID = await ( + await page.waitForSelector(peerIdSelector, { + timeout: 10000, + state: "attached", + }) + ).textContent(); + if (!peerID) throw new Error("peerID is not defined"); + return peerID.trim(); } -test("should work with vite server", async ({ browser }) => { - const page1 = await browser.newPage(); - const page2 = await browser.newPage(); +test.describe("grid", () => { + let page1: Page; + let page2: Page; - await page1.goto("/"); - await page2.goto("/"); + test.beforeEach(async ({ browser }) => { + page1 = await browser.newPage(); + page2 = await browser.newPage(); - await expect(page1).toHaveTitle(/DRP - Grid/); - await expect(page2).toHaveTitle(/DRP - Grid/); + await page1.goto("/"); + await page2.goto("/"); + }); - await expect(page1.locator(peerIdSelector)).not.toBeEmpty({ timeout: 10000 }); - await expect(page2.locator(peerIdSelector)).not.toBeEmpty({ timeout: 10000 }); + test.afterEach(async () => { + await page1.close(); + await page2.close(); + }); - // now we have to wait for the browser node to - const peerID1 = ( - (await (await page1.$(peerIdSelector))?.textContent()) || "" - ).trim(); - if (!peerID1) throw new Error("peerID1 is not defined"); - const peerID2 = ( - (await (await page2.$(peerIdSelector))?.textContent()) || "" - ).trim(); - if (!peerID2) throw new Error("peerID2 is not defined"); + test("check peerID", async () => { + await expect(page1).toHaveTitle(/DRP - Grid/); + await expect(page2).toHaveTitle(/DRP - Grid/); + + await expect(page1.locator(peerIdSelector)).not.toBeEmpty({ + timeout: 10000, + }); + await expect(page2.locator(peerIdSelector)).not.toBeEmpty({ + timeout: 10000, + }); - const peers1Locator = page1.locator(peersSelector); - const peers2Locator = page2.locator(peersSelector); + const peerID1 = await getPeerID(page1); + const peerID2 = await getPeerID(page2); - await expect(peers1Locator).toContainText(peerID2, { timeout: 10000 }); - await expect(peers2Locator).toContainText(peerID1, { timeout: 10000 }); + await expect(page1.locator(peersSelector)).toContainText(peerID2, { + timeout: 10000, + }); + await expect(page2.locator(peersSelector)).toContainText(peerID1, { + timeout: 10000, + }); + }); - const drpId = `test-drp-id-${Math.random().toString(36).substring(2, 15)}`; - await page1.fill(DRPIdInputSelector, drpId); - await page1.click(joinGridButtonSelector); - await page2.fill(DRPIdInputSelector, drpId); - await page2.click(joinGridButtonSelector); + test("check peers are moving", async () => { + const peerID1 = await getPeerID(page1); + const peerID2 = await getPeerID(page2); - const objectPeers1Locator = page1.locator(objectPeersSelector); - const objectPeers2Locator = page2.locator(objectPeersSelector); + const drpId = `test-drp-id-${Math.random().toString(36).substring(2, 15)}`; + await page1.fill(DRPIdInputSelector, drpId); + await page1.click(joinGridButtonSelector); + await page2.fill(DRPIdInputSelector, drpId); + await page2.click(joinGridButtonSelector); - await expect(objectPeers1Locator).toContainText(peerID2, { timeout: 10000 }); - await expect(objectPeers2Locator).toContainText(peerID1, { timeout: 10000 }); + await expect(page1.locator(objectPeersSelector)).toContainText(peerID2, { + timeout: 10000, + }); + await expect(page2.locator(objectPeersSelector)).toContainText(peerID1, { + timeout: 10000, + }); - await expect(page1.locator(DRPIdInputSelector)).toHaveValue(drpId); - await expect(page2.locator(DRPIdInputSelector)).toHaveValue(drpId); + await expect(page1.locator(DRPIdInputSelector)).toHaveValue(drpId); + await expect(page2.locator(DRPIdInputSelector)).toHaveValue(drpId); - const glowingPeer = await getGlowingPeer(page1); - expect(glowingPeer).toHaveLength(2); - expect(glowingPeer.find((peer) => peer.peerID === peerID1)).toBeDefined(); - expect(glowingPeer.find((peer) => peer.peerID === peerID2)).toBeDefined(); + await page1.keyboard.press("w"); + await page2.keyboard.press("s"); - await page1.keyboard.press("w"); - await page2.keyboard.press("s"); + await expect( + page2.locator(`div[data-glowing-peer-id="${peerID1}"]`), + ).toBeVisible(); + await expect( + page2.locator(`div[data-glowing-peer-id="${peerID2}"]`), + ).toBeVisible(); - const movedPeer = await getGlowingPeer(page1); - expect(Math.abs(movedPeer[0].top - glowingPeer[0].top)).toBeLessThan(100); + const glowingPeer1 = await getGlowingPeer(page1, peerID1); + const glowingPeer2 = await getGlowingPeer(page1, peerID2); + console.log(glowingPeer1, glowingPeer2); + expect(Math.abs(glowingPeer1.top - glowingPeer2.top)).toBe(100); + }); }); diff --git a/examples/grid/src/index.ts b/examples/grid/src/index.ts index e3f72c5c..c47d9b4a 100644 --- a/examples/grid/src/index.ts +++ b/examples/grid/src/index.ts @@ -238,6 +238,8 @@ const render = () => { div.style.border = "3px solid black"; } + div.setAttribute("data-glowing-peer-id", id); + // Create dynamic keyframes for the glow effect const style = document.createElement("style"); style.innerHTML = ` diff --git a/vite.config.mts b/vite.config.mts index eb73161b..ed7f14f7 100644 --- a/vite.config.mts +++ b/vite.config.mts @@ -4,17 +4,12 @@ import tsconfigPaths from "vite-tsconfig-paths"; export default defineConfig({ plugins: [tsconfigPaths()], test: { - exclude: ["**/node_modules"], + exclude: ["**/node_modules", "**/e2e"], coverage: { enabled: true, reporter: ["text", "lcov"], include: ["packages/**/*.{ts,tsx}"], - exclude: [ - "**/node_modules/**", - "**/__tests__/**", - "**/tests/**", - "**/e2e/**", - ], + exclude: ["**/node_modules/**", "**/__tests__/**", "**/tests/**"], }, }, });