Skip to content

Commit

Permalink
chore: quick fix
Browse files Browse the repository at this point in the history 
Signed-off-by: Sacha Froment <[email protected]>
  • Loading branch information
@sfroment
sfroment committed Jan 14, 2025
1 parent fe82556 commit 7402876
Show file tree
Hide file tree
Showing 3 changed files with 94 additions and 69 deletions.
152 changes: 90 additions & 62 deletions examples/grid/e2e/grid.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
});
2 changes: 2 additions & 0 deletions examples/grid/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = `
Expand Down
9 changes: 2 additions & 7 deletions vite.config.mts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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/**"],
},
},
});

0 comments on commit 7402876

Please sign in to comment.