Skip to content

Commit

Permalink
test(react): share js tests
Browse files Browse the repository at this point in the history
  • Loading branch information
VojtechVidra committed Jan 21, 2025
1 parent 31a44f8 commit 9b88a70
Show file tree
Hide file tree
Showing 28 changed files with 1,286 additions and 737 deletions.
471 changes: 448 additions & 23 deletions pnpm-lock.yaml

Large diffs are not rendered by default.

13 changes: 10 additions & 3 deletions workspaces/e2e/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,29 @@
"name": "e2e",
"private": true,
"scripts": {
"serve:test": "vite",
"playwright": "playwright test",
"playwright:install": "playwright install --with-deps",
"playwright:docker": "./docker_run_playwright.sh /app/workspaces/e2e/docker_playwright_script.sh",
"playwright:docker:update-snapshots": "./docker_run_playwright.sh /app/workspaces/e2e/docker_playwright_script_update_snapshots.sh",
"playwright:install": "playwright install --with-deps",
"serve:test": "vite",
"tsc": "tsc -p tsconfig.json"
},
"dependencies": {
"@flows/js": "workspace:*",
"@flows/js-components": "workspace:*",
"@flows/react": "workspace:*",
"@flows/react-components": "workspace:*",
"@flows/shared": "workspace:*"
},
"devDependencies": {
"@playwright/test": "^1.49.1",
"@types/node": "^20",
"@types/react": "19.0.7",
"@types/react-dom": "19.0.3",
"@vitejs/plugin-react": "^4.3.4",
"react": "19.0.0",
"react-dom": "19.0.0",
"typescript": "^5.7.3",
"vite": "^6.0.7"
"vite": "^6.0.9"
}
}
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/tests/reset.css" />
<link rel="stylesheet" href="/reset.css" />
</head>
<body>
<h1>heading 1</h1>
Expand All @@ -15,6 +15,6 @@ <h2>Subtitle</h2>
</div>
</flows-slot>

<script type="module" src="./script.ts"></script>
<script type="module" src="/js.ts"></script>
</body>
</html>
File renamed without changes.
File renamed without changes.
File renamed without changes.
12 changes: 12 additions & 0 deletions workspaces/e2e/pages/react.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/reset.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="/react.tsx"></script>
</body>
</html>
44 changes: 44 additions & 0 deletions workspaces/e2e/pages/react.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import { FlowsProvider, FlowsSlot } from "@flows/react";
import { FC, StrictMode } from "react";
import { createRoot } from "react-dom/client";

import * as components from "@flows/react-components";
import * as tourComponents from "@flows/react-components/tour";
import "@flows/react-components/index.css";

const apiUrl = new URLSearchParams(window.location.search).get("apiUrl") ?? undefined;

const Card: FC<{ text: string }> = (props) => (
<div
className="flows-card"
style={{
border: "1px solid black",
padding: "16px",
borderRadius: "4px",
}}
>
<p>{props.text}</p>
</div>
);

createRoot(document.getElementById("root")!).render(
<StrictMode>
<FlowsProvider
organizationId="orgId"
environment="prod"
userId="testUserId"
userProperties={{
email: "[email protected]",
age: 10,
}}
apiUrl={apiUrl}
components={{ ...components, Card }}
tourComponents={{ ...tourComponents, Card }}
>
<h1>heading 1</h1>
<h2>Subtitle</h2>

<FlowsSlot id="my-slot" placeholder={<p>Slot placeholder</p>} />
</FlowsProvider>
</StrictMode>,
);
File renamed without changes.
63 changes: 63 additions & 0 deletions workspaces/e2e/tests/events.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import { Block } from "@flows/shared";
import { test, expect } from "@playwright/test";

test.beforeEach(async ({ page }) => {
await page.routeWebSocket(
(url) => url.pathname === "/ws/sdk/block-updates",
() => {},
);
});

const block: Block = {
id: "w",
type: "component",
componentType: "Modal",
data: { title: "Workflow block", body: "", continueText: "continue" },
exitNodes: [],
slottable: false,
};

const run = (packageName: string) => {
test(`${packageName} - shouldn't pass any methods without exit nodes`, async ({ page }) => {
await page.route("**/v2/sdk/blocks", (route) => {
route.fulfill({ json: { blocks: [block] } });
});
await page.goto(`/${packageName}.html`);
await expect(page.getByText("Workflow block")).toBeVisible();
let reqWasSent = false;
page.on("request", (req) => {
if (req.url().includes("v2/sdk/events")) {
reqWasSent = true;
}
});
await page.getByText("continue").click();
expect(reqWasSent).toBe(false);
});
test(`${packageName} - should pass methods with exit nodes`, async ({ page }) => {
const b: Block = {
...block,
exitNodes: ["continue"],
};
await page.route("**/v2/sdk/blocks", (route) => {
route.fulfill({ json: { blocks: [b] } });
});
await page.goto(`/${packageName}.html`);
await expect(page.getByText("Workflow block")).toBeVisible();
const req = page.waitForRequest((req) => {
const body = req.postDataJSON();
return (
req.url() === "https://api.flows-cloud.com/v2/sdk/events" &&
body.organizationId === "orgId" &&
body.userId === "testUserId" &&
body.environment === "prod" &&
body.name === "transition" &&
body.propertyKey === "continue"
);
});
await page.getByText("continue").click();
await req;
});
};

run("js");
run("react");
52 changes: 52 additions & 0 deletions workspaces/e2e/tests/init.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import { test } from "@playwright/test";

test.beforeEach(async ({ page }) => {
await page.routeWebSocket(
(url) => url.pathname === "/ws/sdk/block-updates",
() => {},
);
});

const run = (packageName: string) => {
test(`${packageName} - should call blocks with correct parameters`, async ({ page }) => {
await page.route("**/v2/sdk/blocks", (route) => {
route.fulfill({ json: { blocks: [] } });
});
const blocksReq = page.waitForRequest((req) => {
const body = req.postDataJSON();
return (
req.url() === "https://api.flows-cloud.com/v2/sdk/blocks" &&
body.organizationId === "orgId" &&
body.userId === "testUserId" &&
body.environment === "prod" &&
body.userProperties.email === "[email protected]" &&
body.userProperties.age === 10
);
});
await page.goto(`/${packageName}.html`);
await blocksReq;
});
test(`${packageName} - should call custom apiUrl`, async ({ page }) => {
await page.route("**/v2/sdk/blocks", (route) => {
route.fulfill({ json: { blocks: [] } });
});
const blocksReq = page.waitForRequest((req) => {
const body = req.postDataJSON();
return (
req.url() === "https://custom.api.flows.com/v2/sdk/blocks" &&
body.organizationId === "orgId" &&
body.userId === "testUserId" &&
body.environment === "prod" &&
body.userProperties.email === "[email protected]" &&
body.userProperties.age === 10
);
});
await page.goto(
`/${packageName}.html?apiUrl=${encodeURIComponent("https://custom.api.flows.com")}`,
);
await blocksReq;
});
};

run("js");
run("react");
File renamed without changes.
58 changes: 0 additions & 58 deletions workspaces/e2e/tests/js/events.spec.ts

This file was deleted.

45 changes: 0 additions & 45 deletions workspaces/e2e/tests/js/init.spec.ts

This file was deleted.

Loading

0 comments on commit 9b88a70

Please sign in to comment.