Skip to content

Commit

Permalink
chore: fix test cases for VB
Browse files Browse the repository at this point in the history
  • Loading branch information
@hiteshshetty-dev
hiteshshetty-dev committed Oct 21, 2024
1 parent 59a0b13 commit e9b7e17
Show file tree
Hide file tree
Showing 55 changed files with 1,644 additions and 1,729 deletions.
7 changes: 4 additions & 3 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
"sideEffects": false,
"scripts": {
"build": "tsup",
"test": "vitest --no-file-parallelism",
"test": "vitest",
"test:once": "vitest run",
"test:coverage": "vitest --coverage",
"dev": "tsup --watch",
Expand All @@ -43,7 +43,7 @@
"author": "Contentstack",
"license": "MIT",
"devDependencies": {
"@contentstack/advanced-post-message": "github:contentstack/adv-post-message#main",
"@contentstack/advanced-post-message": "^0.0.2",
"@eslint/js": "^9.10.0",
"@testing-library/jest-dom": "^6.5.0",
"@testing-library/preact": "^3.2.4",
Expand Down
65 changes: 65 additions & 0 deletions src/__test__/utils.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
import { EventManager } from "@contentstack/advanced-post-message";
import { act, fireEvent, render, waitFor } from "@testing-library/preact";
import { VisualBuilderPostMessageEvents } from "../visualBuilder/utils/types/postMessage.types";
import { ComponentChild } from "preact";

export function convertObjectToMinifiedString(
obj: { [key: string]: any } | string
): any {
Expand Down Expand Up @@ -30,3 +35,63 @@ export class DOMRect {
export async function sleep(waitTimeInMs = 100): Promise<void> {
return new Promise((resolve) => setTimeout(resolve, waitTimeInMs));
}

export const waitForHoverOutline = async () => {
await waitFor(() => {
const hoverOutline = document.querySelector(
"[data-testid='visual-builder__hover-outline']"
);
expect(hoverOutline).not.toBeNull();
});
}
export const waitForBuilderSDKToBeInitialized = async (visualBuilderPostMessage: EventManager | undefined) => {
await waitFor(() => {
expect(visualBuilderPostMessage?.send).toBeCalledWith(
VisualBuilderPostMessageEvents.INIT,
expect.any(Object)
);
});
}
interface WaitForClickActionOptions {
skipWaitForFieldType?: boolean;
}
export const triggerAndWaitForClickAction = async (visualBuilderPostMessage: EventManager | undefined, element: HTMLElement, {skipWaitForFieldType}: WaitForClickActionOptions = {}) => {
await waitForBuilderSDKToBeInitialized(visualBuilderPostMessage);
await act(async () => {
await fireEvent.click(element);
})
if(!skipWaitForFieldType) {
await waitFor(() => {
expect(element).toHaveAttribute("data-cslp-field-type")
})
}
}
export const waitForToolbaxToBeVisible = async () => {
await waitFor(() => {
const toolbar = document.querySelector(
".visual-builder__focused-toolbar__field-label-container"
);
expect(toolbar).not.toBeNull();
});
}
const defaultRect = {
left: 10,
right: 20,
top: 10,
bottom: 20,
width: 10,
height: 5,
}
export const mockGetBoundingClientRect = (element: HTMLElement, rect = defaultRect) => {
vi.spyOn(element, "getBoundingClientRect").mockImplementation(() => rect as DOMRect);
}
export const getElementBytestId = (testId: string) => {
return document.querySelector(`[data-testid="${testId}"]`);
}
export const asyncRender: (componentChild: ComponentChild) => ReturnType<typeof render> = async (...args) => {
let returnValue: ReturnType<typeof render>;
await act(async () => {
returnValue = render(...args);
});
return returnValue;
}
99 changes: 25 additions & 74 deletions src/visualBuilder/__test__/__snapshots__/index.test.ts.snap
View file
Original file line number Diff line number Diff line change
@@ -1,86 +1,37 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`Visual builder > inline editing > should add overlay to DOM when clicked 1`] = `
<body>
<h1
data-cslp="all_fields.blt58a50b4cebae75c5.en-us.modular_blocks.0.block.single_line"
data-cslp-field-type="singleline"
style="visibility: hidden;"
>
Hello World
</h1>
<div
class="go263407482 visual-builder__container"
data-testid="visual-builder__container"
>
<style>
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
[data-cslp] [contenteditable="true"] {
outline: none;
}
@keyframes visual-builder__spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<div
class="go1688149084 visual-builder__cursor"
data-testid="visual-builder__cursor"
/>
<div
class="go842373233 visual-builder__overlay__wrapper"
data-testid="visual-builder__overlay__wrapper"
>
<div
class="visual-builder__overlay visual-builder__overlay--top go2262268276"
data-testid="visual-builder__overlay--top"
/>
<div
class="visual-builder__overlay visual-builder__overlay--left go2262268276"
data-testid="visual-builder__overlay--left"
/>
<div
class="visual-builder__overlay visual-builder__overlay--right go2262268276"
data-testid="visual-builder__overlay--right"
/>
<div
class="visual-builder__overlay visual-builder__overlay--bottom go2262268276"
data-testid="visual-builder__overlay--bottom"
/>
<div
class="visual-builder__overlay--outline go3391008271"
data-testid="visual-builder__overlay--outline"
/>
</div>
<div
class="visual-builder__hover-outline visual-builder__hover-outline--unclickable go3177626044 go1719569523"
data-testid="visual-builder__hover-outline"
/>
<div
class="visual-builder__focused-toolbar go635291819"
data-testid="visual-builder__focused-toolbar"
/>
</div>
</body>
`;

exports[`Visual builder > on click, the sdk > inline elements must be contenteditable > file should render a replacer and remove when it is not 1`] = `
<h1
data-cslp="all_fields.blt58a50b4cebae75c5.en-us.file"
data-cslp-field-type="file"
/>
`;

exports[`Visual builder > on click, the sdk > inline elements must be contenteditable > file should render a replacer and remove when it is not 2`] = `undefined`;
exports[`Visual builder > on click, the sdk > inline elements must be contenteditable > file should render a replacer and remove when it is not 2`] = `
<button
class="visual-builder__replace-button visual-builder__button visual-builder__button--secondary go2828613387 go2545267607 go3805905658"
data-testid="visual-builder-replace-file"
data-tooltip="Replace"
>
<svg
data-testid="visual-builder__replace-asset-icon"
fill="none"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.8903 3.99632L11.5039 1.60984C11.3574 1.46339 11.12 1.46339 10.9735 1.60984C10.8271 1.75628 10.8271 1.99372 10.9735 2.14017L12.7198 3.88649H2.87506C2.39181 3.88649 2.00006 4.27824 2.00006 4.76149V6.13114C2.00006 6.33825 2.16795 6.50614 2.37506 6.50614C2.58217 6.50614 2.75006 6.33825 2.75006 6.13114V4.76149C2.75006 4.69245 2.80603 4.63649 2.87506 4.63649H12.7198L10.9735 6.38281C10.8271 6.52925 10.8271 6.76669 10.9735 6.91314C11.12 7.05958 11.3574 7.05958 11.5039 6.91314L13.8903 4.52665C14.0368 4.3802 14.0368 4.14277 13.8903 3.99632Z"
fill="#475161"
/>
<path
d="M2.10983 12.0054L4.49632 14.3919C4.64277 14.5383 4.8802 14.5383 5.02665 14.3919C5.1731 14.2455 5.1731 14.008 5.02665 13.8616L3.28033 12.1152H13.1251C13.6084 12.1152 14.0001 11.7235 14.0001 11.2402V9.87059C14.0001 9.66348 13.8322 9.49559 13.6251 9.49559C13.418 9.49559 13.2501 9.66348 13.2501 9.87059V11.2402C13.2501 11.3093 13.1942 11.3652 13.1251 11.3652H3.28033L5.02665 9.61893C5.1731 9.47248 5.1731 9.23504 5.02665 9.0886C4.8802 8.94215 4.64277 8.94215 4.49632 9.0886L2.10983 11.4751C1.96339 11.6215 1.96339 11.859 2.10983 12.0054Z"
fill="#475161"
/>
</svg>
</button>
`;

exports[`Visual builder > on click, the sdk > inline elements must be contenteditable > multi line should be contenteditable 1`] = `
<h1
Expand Down
24 changes: 8 additions & 16 deletions src/visualBuilder/__test__/click/fields/boolean.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { waitFor } from "@testing-library/preact";
import { act, waitFor, fireEvent } from "@testing-library/preact";
import "@testing-library/jest-dom";
import { getFieldSchemaMap } from "../../../../__test__/data/fieldSchemaMap";
import Config from "../../../../configManager/configManager";
Expand All @@ -9,6 +9,7 @@ import visualBuilderPostMessage from "../../../utils/visualBuilderPostMessage";
import { vi } from "vitest";
import { VisualBuilderPostMessageEvents } from "../../../utils/types/postMessage.types";
import { VisualBuilder } from "../../../index";
import { triggerAndWaitForClickAction } from "../../../../__test__/utils";

global.ResizeObserver = vi.fn().mockImplementation(() => ({
observe: vi.fn(),
Expand Down Expand Up @@ -78,9 +79,7 @@ describe("When an element is clicked in visual builder mode", () => {
"get"
).mockReturnValue(100);
vi.spyOn(document.body, "scrollHeight", "get").mockReturnValue(100);
});

beforeEach(() => {
Config.reset();
Config.set("mode", 2);
mouseClickEvent = new Event("click", {
Expand All @@ -89,20 +88,17 @@ describe("When an element is clicked in visual builder mode", () => {
});
});

afterEach(() => {
vi.clearAllMocks();
document.body.innerHTML = "";
});

afterAll(() => {
Config.reset();
vi.clearAllMocks();
document.body.innerHTML = "";
});

describe("boolean field", () => {
let booleanField: HTMLParagraphElement;
let visualBuilder: VisualBuilder;

beforeEach(() => {
beforeAll(async () => {
booleanField = document.createElement("p");
booleanField.setAttribute(
"data-cslp",
Expand All @@ -111,33 +107,30 @@ describe("When an element is clicked in visual builder mode", () => {
document.body.appendChild(booleanField);

visualBuilder = new VisualBuilder();
await triggerAndWaitForClickAction(visualBuilderPostMessage, booleanField);
});

afterEach(() => {
afterAll(() => {
visualBuilder.destroy();
});

test("should have outline", () => {
booleanField.dispatchEvent(mouseClickEvent);
expect(booleanField.classList.contains("cslp-edit-mode"));
});

test("should have an overlay", () => {
booleanField.dispatchEvent(mouseClickEvent);
const overlay = document.querySelector(".visual-builder__overlay");
expect(overlay!.classList.contains("visible"));
});

test.skip("should have a field path dropdown", () => {
booleanField.dispatchEvent(mouseClickEvent);
const toolbar = document.querySelector(
".visual-builder__focused-toolbar__field-label-wrapper__current-field"
);
expect(toolbar).toBeInTheDocument();
});

test("should contain a data-cslp-field-type attribute", async () => {
booleanField.dispatchEvent(mouseClickEvent);
await waitFor(() => {
expect(booleanField).toHaveAttribute(
VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY
Expand All @@ -146,14 +139,13 @@ describe("When an element is clicked in visual builder mode", () => {
});

test("should not contain a contenteditable attribute", async () => {
booleanField.dispatchEvent(mouseClickEvent);
await waitFor(() => {
expect(booleanField).not.toHaveAttribute("contenteditable");
});
});

test("should send a focus field message to parent", async () => {
booleanField.dispatchEvent(mouseClickEvent);

await waitFor(() => {
expect(visualBuilderPostMessage?.send).toBeCalledWith(
VisualBuilderPostMessageEvents.FOCUS_FIELD,
Expand Down
Loading

0 comments on commit e9b7e17

Please sign in to comment.