Skip to content

Commit

Permalink
feat(js,react): block key (#308)
Browse files Browse the repository at this point in the history
* feat(js,react): block key

* feat(js): export props from the package

* feat: type documentation

* fix: tests

* @flows/[email protected]

* fix: block in active block

* @flows/[email protected]

* fix: tests

* feat: remove key from active block

* fix: remove unused file

---------

Co-authored-by: flows-bot[bot] <170794745+flows-bot[bot]@users.noreply.github.com>
  • Loading branch information
VojtechVidra and flows-bot[bot] authored Feb 28, 2025
1 parent 5916c0d commit 924b964
Show file tree
Hide file tree
Showing 36 changed files with 348 additions and 320 deletions.
2 changes: 2 additions & 0 deletions workspaces/e2e/pages/js.html
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ <h2>Subtitle</h2>
<button id="resetAllWorkflowsProgress">resetAllWorkflowsProgress</button>
<button id="resetWorkflowProgress">resetWorkflowProgress</button>

<p class="current-blocks"></p>

<script type="module" src="/js.ts"></script>
</body>
</html>
7 changes: 7 additions & 0 deletions workspaces/e2e/pages/js.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,13 @@ const Card: Component<{ text: string }> = (props) => {

const text = document.createElement("p");
card.appendChild(text);
text.classList.add("card-text");
text.textContent = props.text;

const keyText = document.createElement("p");
card.appendChild(keyText);
keyText.textContent = `key: ${props.__flows.key}`;

return {
cleanup: () => {},
element: card,
Expand All @@ -44,6 +49,8 @@ const tourComponents = { ..._tourComponents, Card };

addFloatingBlocksChangeListener((blocks) => {
render({ blocks, components, tourComponents });

document.querySelector(".current-blocks")!.textContent = JSON.stringify(blocks);
});
updateSlotComponents({
components,
Expand Down
11 changes: 0 additions & 11 deletions workspaces/e2e/pages/js/block/block.html

This file was deleted.

28 changes: 0 additions & 28 deletions workspaces/e2e/pages/js/block/block.ts

This file was deleted.

33 changes: 24 additions & 9 deletions workspaces/e2e/pages/react.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import {
ComponentProps,
FlowsProvider,
FlowsSlot,
resetAllWorkflowsProgress,
resetWorkflowProgress,
useCurrentFloatingBlocks,
} from "@flows/react";
import { FC, StrictMode } from "react";
import { createRoot } from "react-dom/client";
Expand All @@ -13,7 +15,7 @@ import "@flows/react-components/index.css";

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

const Card: FC<{ text: string }> = (props) => (
const Card: FC<ComponentProps<{ text: string }>> = (props) => (
<div
className="flows-card"
style={{
Expand All @@ -22,7 +24,8 @@ const Card: FC<{ text: string }> = (props) => (
borderRadius: "4px",
}}
>
<p>{props.text}</p>
<p className="card-text">{props.text}</p>
<p>key: {props.__flows.key}</p>
</div>
);

Expand All @@ -44,6 +47,24 @@ const BlockTrigger: FC<{
</div>
);

const App: FC = () => {
const floatingBlocks = useCurrentFloatingBlocks();

return (
<>
<h1>heading 1</h1>
<h2>Subtitle</h2>

<FlowsSlot id="my-slot" placeholder={<p>Slot placeholder</p>} />

<p className="current-blocks">{JSON.stringify(floatingBlocks)}</p>

<button onClick={() => resetAllWorkflowsProgress()}>resetAllWorkflowsProgress</button>
<button onClick={() => resetWorkflowProgress("my-workflow-id")}>resetWorkflowProgress</button>
</>
);
};

createRoot(document.getElementById("root")!).render(
<StrictMode>
<FlowsProvider
Expand All @@ -58,13 +79,7 @@ createRoot(document.getElementById("root")!).render(
components={{ ...components, Card, BlockTrigger }}
tourComponents={{ ...tourComponents, Card }}
>
<h1>heading 1</h1>
<h2>Subtitle</h2>

<FlowsSlot id="my-slot" placeholder={<p>Slot placeholder</p>} />

<button onClick={() => resetAllWorkflowsProgress()}>resetAllWorkflowsProgress</button>
<button onClick={() => resetWorkflowProgress("my-workflow-id")}>resetWorkflowProgress</button>
<App />
</FlowsProvider>
</StrictMode>,
);
4 changes: 2 additions & 2 deletions workspaces/e2e/tests/block-trigger.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const run = (packageName: string) => {
route.fulfill({ json: { blocks: [getBlock()] } });
});
await page.goto(`/${packageName}.html`);
await expect(page.getByText("Block Trigger title")).toBeVisible();
await expect(page.getByText("Block Trigger title", { exact: true })).toBeVisible();
let reqWasSent = false;
page.on("request", (req) => {
if (req.url().includes("v2/sdk/events")) {
Expand All @@ -49,7 +49,7 @@ const run = (packageName: string) => {
route.fulfill({ json: { blocks: [getBlock()] } });
});
await page.goto(`/${packageName}.html`);
await expect(page.getByText("Block Trigger title")).toBeVisible();
await expect(page.getByText("Block Trigger title", { exact: true })).toBeVisible();

const rootBlockTriggerReq = page.waitForRequest((req) => {
const body = req.postDataJSON();
Expand Down
77 changes: 77 additions & 0 deletions workspaces/e2e/tests/block.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
import { Block } from "@flows/shared";
import { expect, test } from "@playwright/test";
import { randomUUID } from "crypto";

const getBlocks = (): Block[] =>
[
{
id: randomUUID(),
key: "my-key",
type: "component",
componentType: "Modal",
data: {},
exitNodes: [],
slottable: false,
},
{
id: randomUUID(),
data: {},
exitNodes: [],
slottable: false,
type: "tour",
tourBlocks: [
{
id: randomUUID(),
data: {},
key: "tour-block-key",
slottable: false,
type: "tour-component",
componentType: "Modal",
},
],
},
] satisfies Block[];

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

const run = (packageName: string) => {
test(`${packageName} - return empty blocks`, async ({ page }) => {
await page.route("**/v2/sdk/blocks", (route) => {
route.fulfill({ json: { blocks: [] } });
});
await page.goto(`/${packageName}.html`);
await expect(page.locator(".current-blocks")).toHaveText(JSON.stringify([]));
});

test(`${packageName} - return floating blocks`, async ({ page }) => {
const blocks = getBlocks();
await page.route("**/v2/sdk/blocks", (route) => {
route.fulfill({ json: { blocks } });
});
await page.goto(`/${packageName}.html`);
await expect(page.locator(".current-blocks")).toHaveText(
JSON.stringify([
{
id: blocks[0]?.id,
type: "component",
component: "Modal",
props: { __flows: { key: "my-key" } },
},
{
id: blocks[1]?.tourBlocks?.[0]?.id,
type: "tour-component",
component: "Modal",
props: { __flows: { key: "tour-block-key" } },
},
]),
);
});
};

run("js");
run("react");
16 changes: 8 additions & 8 deletions workspaces/e2e/tests/buttons.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const run = (packageName: string) => {
});
});
await page.goto(`/${packageName}.html`);
await expect(page.getByText("Workflow Tooltip")).toBeVisible();
await expect(page.getByText("Workflow Tooltip", { exact: true })).toBeVisible();
await expect(page.locator(".flows_tooltip_footer")).toBeVisible();
await expect(
page.locator(".flows_tooltip_footer").locator(".flows_button_primary"),
Expand All @@ -70,7 +70,7 @@ const run = (packageName: string) => {
});
});
await page.goto(`/${packageName}.html`);
await expect(page.getByText("Workflow Tooltip")).toBeVisible();
await expect(page.getByText("Workflow Tooltip", { exact: true })).toBeVisible();
await expect(page.locator(".flows_tooltip_footer")).toHaveCount(0);
});
test(`${packageName} - workflow modal footer with buttons`, async ({ page }) => {
Expand All @@ -80,7 +80,7 @@ const run = (packageName: string) => {
});
});
await page.goto(`/${packageName}.html`);
await expect(page.getByText("Workflow Modal")).toBeVisible();
await expect(page.getByText("Workflow Modal", { exact: true })).toBeVisible();
await expect(page.locator(".flows_modal_footer")).toBeVisible();
await expect(
page.locator(".flows_modal_footer").locator(".flows_button_primary"),
Expand All @@ -93,7 +93,7 @@ const run = (packageName: string) => {
});
});
await page.goto(`/${packageName}.html`);
await expect(page.getByText("Workflow Modal")).toBeVisible();
await expect(page.getByText("Workflow Modal", { exact: true })).toBeVisible();
await expect(page.locator(".flows_modal_footer")).toHaveCount(0);
});

Expand All @@ -105,7 +105,7 @@ const run = (packageName: string) => {
});
});
await page.goto(`/${packageName}.html`);
await expect(page.getByText("Workflow Tooltip")).toBeVisible();
await expect(page.getByText("Workflow Tooltip", { exact: true })).toBeVisible();
await expect(page.locator(".flows_tooltip_footer")).toBeVisible();
await expect(
page.locator(".flows_tooltip_footer").locator(".flows_button_primary"),
Expand All @@ -118,7 +118,7 @@ const run = (packageName: string) => {
});
});
await page.goto(`/${packageName}.html`);
await expect(page.getByText("Workflow Tooltip")).toBeVisible();
await expect(page.getByText("Workflow Tooltip", { exact: true })).toBeVisible();
await expect(page.locator(".flows_tooltip_footer")).toHaveCount(0);
});
test(`${packageName} - tour modal footer with buttons`, async ({ page }) => {
Expand All @@ -128,7 +128,7 @@ const run = (packageName: string) => {
});
});
await page.goto(`/${packageName}.html`);
await expect(page.getByText("Workflow Modal")).toBeVisible();
await expect(page.getByText("Workflow Modal", { exact: true })).toBeVisible();
await expect(page.locator(".flows_modal_footer")).toBeVisible();
await expect(
page.locator(".flows_modal_footer").locator(".flows_button_primary"),
Expand All @@ -141,7 +141,7 @@ const run = (packageName: string) => {
});
});
await page.goto(`/${packageName}.html`);
await expect(page.getByText("Workflow Modal")).toBeVisible();
await expect(page.getByText("Workflow Modal", { exact: true })).toBeVisible();
await expect(page.locator(".flows_modal_footer")).toHaveCount(0);
});
};
Expand Down
8 changes: 4 additions & 4 deletions workspaces/e2e/tests/events.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,14 +24,14 @@ const run = (packageName: string) => {
route.fulfill({ json: { blocks: [block] } });
});
await page.goto(`/${packageName}.html`);
await expect(page.getByText("Workflow block")).toBeVisible();
await expect(page.getByText("Workflow block", { exact: true })).toBeVisible();
let reqWasSent = false;
page.on("request", (req) => {
if (req.url().includes("v2/sdk/events")) {
reqWasSent = true;
}
});
await page.getByText("continue").click();
await page.getByText("continue", { exact: true }).click();
expect(reqWasSent).toBe(false);
});
test(`${packageName} - should pass methods with exit nodes`, async ({ page }) => {
Expand All @@ -43,7 +43,7 @@ const run = (packageName: string) => {
route.fulfill({ json: { blocks: [b] } });
});
await page.goto(`/${packageName}.html`);
await expect(page.getByText("Workflow block")).toBeVisible();
await expect(page.getByText("Workflow block", { exact: true })).toBeVisible();
const req = page.waitForRequest((req) => {
const body = req.postDataJSON();
return (
Expand All @@ -55,7 +55,7 @@ const run = (packageName: string) => {
body.propertyKey === "continue"
);
});
await page.getByText("continue").click();
await page.getByText("continue", { exact: true }).click();
await req;
});
};
Expand Down
34 changes: 34 additions & 0 deletions workspaces/e2e/tests/flows-properties.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { Block } from "@flows/shared";
import test, { expect } from "@playwright/test";
import { randomUUID } from "crypto";

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

const getBlock = (props: { key: string }): Block => ({
id: randomUUID(),
type: "component",
componentType: "Card",
data: { text: "My card" },
exitNodes: [],
slottable: true,
slotId: "my-slot",
key: props.key,
});

const run = (packageName: string) => {
test(`${packageName} - should pass block key to component props`, async ({ page }) => {
await page.route("**/v2/sdk/blocks", (route) => {
route.fulfill({ json: { blocks: [getBlock({ key: "my-block-key" })] } });
});
await page.goto(`/${packageName}.html`);
await expect(page.getByText("key: my-block-key", { exact: true })).toBeVisible();
});
};

run("js");
run("react");
Loading

0 comments on commit 924b964

Please sign in to comment.