Skip to content

Commit ce30b02

Browse files
faraazb-contentstackfaraazb-contentstack
committed
test: add tests for various modules
New tests for appendFieldToolbar, add tests to check if getEntryPermissionsCached and isFieldDisabled are used correctly in various functions
1 parent c05998b commit ce30b02

7 files changed

Lines changed: 428 additions & 13 deletions

File tree

‎src/visualBuilder/components/FieldToolbar.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -314,6 +314,7 @@ function FieldToolbarComponent(
314314
</button>
315315
);
316316

317+
// TODO sibling count is incorrect for this purpose
317318
const totalElementCount = targetElement?.parentNode?.childElementCount ?? 1;
318319
const indexOfElement = fieldMetadata?.multipleFieldMetadata?.index;
319320

‎src/visualBuilder/components/__test__/fieldLabelWrapper.test.tsx‎

Lines changed: 64 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
1-
import { render, cleanup, waitFor,screen } from "@testing-library/preact";
1+
import { waitFor } from "@testing-library/preact";
22
import FieldLabelWrapperComponent from "../fieldLabelWrapper";
33
import { CslpData } from "../../../cslp/types/cslp.types";
44
import { VisualBuilderCslpEventDetails } from "../../types/visualBuilder.types";
55
import { VisualBuilderPostMessageEvents } from "../../utils/types/postMessage.types";
66
import { singleLineFieldSchema } from "../../../__test__/data/fields";
77
import { asyncRender } from "../../../__test__/utils";
8+
import { isFieldDisabled } from "../../utils/isFieldDisabled";
9+
import { FieldSchemaMap } from "../../utils/fieldSchemaMap";
10+
import { getEntryPermissionsCached } from "../../utils/getEntryPermissionsCached";
11+
import React from "preact/compat";
812

913
const DISPLAY_NAMES = {
1014
mockFieldCslp: "Field 0",
@@ -73,14 +77,7 @@ vi.mock("../../utils/visualBuilderPostMessage", async () => {
7377
});
7478

7579
vi.mock("../../utils/isFieldDisabled", () => ({
76-
isFieldDisabled: vi
77-
.fn()
78-
.mockReturnValueOnce({ isDisabled: false })
79-
.mockReturnValueOnce({ isDisabled: false })
80-
.mockReturnValueOnce({
81-
isDisabled: true,
82-
reason: "You have only read access to this field",
83-
}),
80+
isFieldDisabled: vi.fn().mockReturnValue({ isDisabled: false }),
8481
}));
8582

8683
vi.mock("../../../cslp", () => ({
@@ -90,7 +87,17 @@ vi.mock("../../../cslp", () => ({
9087
}));
9188

9289
describe("FieldLabelWrapperComponent", () => {
93-
afterEach(cleanup);
90+
beforeEach(() => {
91+
vi.mocked(isFieldDisabled).mockReturnValue({
92+
isDisabled: false,
93+
// @ts-expect-error - reason is an unexported literal
94+
reason: "",
95+
});
96+
});
97+
98+
afterEach(() => {
99+
vi.clearAllMocks();
100+
});
94101

95102
const mockFieldMetadata: CslpData = {
96103
entry_uid: "",
@@ -156,6 +163,11 @@ describe("FieldLabelWrapperComponent", () => {
156163
});
157164

158165
test("renders with correct class when field is disabled", async () => {
166+
vi.mocked(isFieldDisabled).mockReturnValue({
167+
isDisabled: true,
168+
// @ts-expect-error - reason is an unexported literal
169+
reason: "You have only read access to this field",
170+
});
159171
const { findByTestId } = await asyncRender(
160172
<FieldLabelWrapperComponent
161173
fieldMetadata={mockFieldMetadata}
@@ -175,4 +187,46 @@ describe("FieldLabelWrapperComponent", () => {
175187
);
176188
});
177189
});
190+
191+
test("calls isFieldDisabled with correct arguments", async () => {
192+
const mockFieldSchema = { ...singleLineFieldSchema };
193+
const mockEntryPermissions = {
194+
create: true,
195+
read: true,
196+
update: false,
197+
delete: true,
198+
publish: true,
199+
};
200+
201+
vi.mocked(FieldSchemaMap.getFieldSchema).mockResolvedValue(
202+
mockFieldSchema
203+
);
204+
vi.mocked(getEntryPermissionsCached).mockResolvedValue(
205+
mockEntryPermissions
206+
);
207+
208+
await asyncRender(
209+
<FieldLabelWrapperComponent
210+
fieldMetadata={mockFieldMetadata}
211+
eventDetails={mockEventDetails}
212+
parentPaths={[]}
213+
getParentEditableElement={mockGetParentEditable}
214+
/>
215+
);
216+
217+
// wait for component to mount
218+
await waitFor(() => {
219+
expect(
220+
document.querySelector(
221+
".visual-builder__focused-toolbar__field-label-container"
222+
)
223+
).toBeInTheDocument();
224+
});
225+
226+
expect(isFieldDisabled).toHaveBeenCalledWith(
227+
mockFieldSchema,
228+
mockEventDetails,
229+
mockEntryPermissions
230+
);
231+
});
178232
});

‎src/visualBuilder/components/__test__/fieldToolbar.test.tsx‎

Lines changed: 66 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import FieldToolbarComponent from "../FieldToolbar";
1010
import { mockMultipleLinkFieldSchema, mockMultipleFileFieldSchema } from "../../../__test__/data/fields";
1111
import { asyncRender } from "../../../__test__/utils";
1212
import { VisualBuilderCslpEventDetails } from "../../types/visualBuilder.types";
13+
import { isFieldDisabled } from "../../utils/isFieldDisabled";
14+
import React from "preact/compat";
1315

1416
vi.mock("../../utils/instanceHandlers", () => ({
1517
handleMoveInstance: vi.fn(),
@@ -40,6 +42,10 @@ vi.mock("../../utils/getDiscussionIdByFieldMetaData", () => {
4042
};
4143
});
4244

45+
vi.mock("../../utils/isFieldDisabled", () => ({
46+
isFieldDisabled: vi.fn().mockReturnValue({ isDisabled: false }),
47+
}));
48+
4349
const mockMultipleFieldMetadata: CslpData = {
4450
entry_uid: "",
4551
content_type_uid: "",
@@ -60,7 +66,7 @@ const mockMultipleFieldMetadata: CslpData = {
6066
},
6167
};
6268

63-
describe("MultipleFieldToolbarComponent", () => {
69+
describe("FieldToolbarComponent", () => {
6470
let targetElement: HTMLDivElement;
6571
const mockEventDetails: VisualBuilderCslpEventDetails = {
6672
fieldMetadata: mockMultipleFieldMetadata,
@@ -90,6 +96,7 @@ describe("MultipleFieldToolbarComponent", () => {
9096
const { findByTestId } = await asyncRender(
9197
<FieldToolbarComponent
9298
eventDetails={mockEventDetails}
99+
hideOverlay={vi.fn()}
93100
/>
94101
);
95102

@@ -112,6 +119,7 @@ describe("MultipleFieldToolbarComponent", () => {
112119
const { findByTestId } = await asyncRender(
113120
<FieldToolbarComponent
114121
eventDetails={mockEventDetails}
122+
hideOverlay={vi.fn()}
115123
/>
116124
);
117125

@@ -132,6 +140,7 @@ describe("MultipleFieldToolbarComponent", () => {
132140
const { findByTestId } = await asyncRender(
133141
<FieldToolbarComponent
134142
eventDetails={mockEventDetails}
143+
hideOverlay={vi.fn()}
135144
/>
136145
);
137146

@@ -152,6 +161,7 @@ describe("MultipleFieldToolbarComponent", () => {
152161
const { findByTestId } = await asyncRender(
153162
<FieldToolbarComponent
154163
eventDetails={mockEventDetails}
164+
hideOverlay={vi.fn()}
155165
/>
156166
);
157167

@@ -205,6 +215,7 @@ describe("MultipleFieldToolbarComponent", () => {
205215
const { container } = await asyncRender(
206216
<FieldToolbarComponent
207217
eventDetails={parentWrapperEventDetails}
218+
hideOverlay={vi.fn()}
208219
/>
209220
);
210221

@@ -229,11 +240,65 @@ describe("MultipleFieldToolbarComponent", () => {
229240
const { container } = await asyncRender(
230241
<FieldToolbarComponent
231242
eventDetails={individualFieldEventDetails}
243+
hideOverlay={vi.fn()}
232244
/>
233245
);
234246

235247
const replaceButton = container.querySelector('[data-testid="visual-builder-replace-file"]');
236248
expect(replaceButton).toBeInTheDocument();
237249
});
238250
});
251+
252+
test("passes disabled state correctly to child components when field is disabled", async () => {
253+
// Mock isFieldDisabled to return disabled state
254+
vi.mocked(isFieldDisabled).mockReturnValue({
255+
isDisabled: true,
256+
reason: "You have only read access to this field" as any,
257+
});
258+
259+
const { findByTestId } = await asyncRender(
260+
<FieldToolbarComponent
261+
eventDetails={mockEventDetails}
262+
hideOverlay={vi.fn()}
263+
/>
264+
);
265+
266+
await waitFor(async () => {
267+
const toolbar = await findByTestId(
268+
"visual-builder__focused-toolbar__multiple-field-toolbar"
269+
);
270+
expect(toolbar).toBeInTheDocument();
271+
});
272+
273+
// Check that move buttons are disabled
274+
const moveLeftButton = await findByTestId(
275+
"visual-builder__focused-toolbar__multiple-field-toolbar__move-left-button"
276+
);
277+
const moveRightButton = await findByTestId(
278+
"visual-builder__focused-toolbar__multiple-field-toolbar__move-right-button"
279+
);
280+
const deleteButton = await findByTestId(
281+
"visual-builder__focused-toolbar__multiple-field-toolbar__delete-button"
282+
);
283+
284+
expect(moveLeftButton).toBeDisabled();
285+
expect(moveRightButton).toBeDisabled();
286+
expect(deleteButton).toBeDisabled();
287+
288+
// Check that edit button is disabled if present
289+
const editButton = await findByTestId(
290+
"visual-builder__focused-toolbar__multiple-field-toolbar__edit-button"
291+
).catch(() => null);
292+
if (editButton) {
293+
expect(editButton).toBeDisabled();
294+
}
295+
296+
// Check that replace button is disabled if present
297+
const replaceButton = document.querySelector(
298+
'[data-testid="visual-builder-replace-file"]'
299+
);
300+
if (replaceButton) {
301+
expect(replaceButton).toBeDisabled();
302+
}
303+
});
239304
});

‎src/visualBuilder/components/__test__/variantRevertDropdown.test.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
VariantRevertDropdown,
66
} from "../FieldRevert/FieldRevertComponent";
77
import { describe, it, expect, vi } from "vitest";
8+
import React from "preact/compat";
89

910
const sendMock = vi.hoisted(() =>
1011
vi.fn().mockImplementation((_eventName: string) => {
@@ -85,6 +86,30 @@ describe("VariantRevertDropdown", () => {
8586
expect(button).toBeInTheDocument();
8687
});
8788

89+
it("should disable dropdown button", async () => {
90+
const { findByTestId } = await asyncRender(
91+
<VariantRevertDropdown
92+
closeDropdown={vi.fn()}
93+
invertTooltipPosition={false}
94+
toggleVariantDropdown={vi.fn()}
95+
variantStatus={{
96+
isAddedInstances: true,
97+
isBaseModified: false,
98+
isDeletedInstances: true,
99+
isOrderChanged: false,
100+
fieldLevelCustomizations: true,
101+
}}
102+
fieldDataName="fieldDataName"
103+
disabled={true}
104+
/>
105+
);
106+
107+
const button = await findByTestId(
108+
"visual-builder-canvas-variant-revert"
109+
);
110+
expect(button).toBeDisabled();
111+
});
112+
88113
it("should call toggleVariantDropdown when button is clicked", async () => {
89114
const toggleVariantDropdown = vi.fn();
90115
const { findByTestId } = await asyncRender(

0 commit comments

Comments
 (0)