Skip to content

Commit 53c6e77

Browse files
SahilCs15SahilCs15
committed
fix: fixed the required changes
1 parent 17423d5 commit 53c6e77

4 files changed

Lines changed: 129 additions & 100 deletions

File tree

‎src/visualBuilder/components/FieldLocationIcon.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export const FieldLocationIcon = ({
2626

2727

2828

29-
if (!fieldLocationData?.apps || fieldLocationData.apps.length === 0) {
29+
if (!fieldLocationData?.apps || fieldLocationData?.apps?.length === 0) {
3030
return null;
3131
}
3232

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

Lines changed: 46 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,21 @@ vi.mock("../../visualBuilder.style", () => ({
2929
}));
3030

3131
vi.mock("classnames", () => ({
32-
default: (...args: any[]) => args.filter(Boolean).join(" "),
32+
default: (...args: any[]) => {
33+
const classes: string[] = [];
34+
args.forEach(arg => {
35+
if (typeof arg === 'string') {
36+
classes.push(arg);
37+
} else if (typeof arg === 'object' && arg !== null) {
38+
Object.entries(arg).forEach(([className, condition]) => {
39+
if (condition) {
40+
classes.push(className);
41+
}
42+
});
43+
}
44+
});
45+
return classes.join(' ');
46+
},
3347
}));
3448

3549
vi.mock("../icons/EmptyAppIcon", () => ({
@@ -108,23 +122,23 @@ describe("FieldLocationAppList", () => {
108122
});
109123

110124
it("should render the app list with search input", () => {
111-
render(<FieldLocationAppList apps={mockApps} position="right" toolbarRef={mockToolbarRef} />);
125+
render(<FieldLocationAppList apps={mockApps} position="right" toolbarRef={mockToolbarRef} domEditStack={[]} setDisplayAllApps={() => {}} displayAllApps={true} />);
112126

113127
expect(screen.getByPlaceholderText("Search for Apps")).toBeInTheDocument();
114128
expect(screen.getByText("Second App")).toBeInTheDocument();
115129
expect(screen.getByText("Third App")).toBeInTheDocument();
116130
});
117131

118132
it("should not render the first app (index 0)", () => {
119-
render(<FieldLocationAppList apps={mockApps} position="right" toolbarRef={mockToolbarRef} />);
133+
render(<FieldLocationAppList apps={mockApps} position="right" toolbarRef={mockToolbarRef} domEditStack={[]} setDisplayAllApps={() => {}} displayAllApps={true} />);
120134

121135
expect(screen.queryByText("First App")).not.toBeInTheDocument();
122136
expect(screen.getByText("Second App")).toBeInTheDocument();
123137
expect(screen.getByText("Third App")).toBeInTheDocument();
124138
});
125139

126140
it("should filter apps when searching", () => {
127-
render(<FieldLocationAppList apps={mockApps} position="right" toolbarRef={mockToolbarRef} />);
141+
render(<FieldLocationAppList apps={mockApps} position="right" toolbarRef={mockToolbarRef} domEditStack={[]} setDisplayAllApps={() => {}} displayAllApps={true} />);
128142

129143
const searchInput = screen.getByPlaceholderText("Search for Apps");
130144
fireEvent.input(searchInput, { target: { value: "Second" } });
@@ -134,7 +148,7 @@ describe("FieldLocationAppList", () => {
134148
});
135149

136150
it("should show no results message when search has no matches", () => {
137-
render(<FieldLocationAppList apps={mockApps} position="right" toolbarRef={mockToolbarRef} />);
151+
render(<FieldLocationAppList apps={mockApps} position="right" toolbarRef={mockToolbarRef} domEditStack={[]} setDisplayAllApps={() => {}} displayAllApps={true} />);
138152

139153
const searchInput = screen.getByPlaceholderText("Search for Apps");
140154
fireEvent.input(searchInput, { target: { value: "NonExistent" } });
@@ -168,40 +182,54 @@ describe("FieldLocationAppList", () => {
168182
expect(mockSetDisplayAllApps).toHaveBeenCalledWith(false);
169183
});
170184

171-
172-
173185

174186

175187
it("should apply correct CSS classes for right position", () => {
176-
const { container } = render(<FieldLocationAppList apps={mockApps} position="right" toolbarRef={mockToolbarRef} />);
177-
188+
const { container } = render(
189+
<FieldLocationAppList
190+
apps={mockApps}
191+
position="right"
192+
toolbarRef={mockToolbarRef}
193+
domEditStack={[]}
194+
setDisplayAllApps={() => {}}
195+
displayAllApps={true}
196+
/>
197+
);
178198
const appList = container.firstChild as HTMLElement;
179-
expect(appList).toHaveClass("visual-builder__field-location-app-list");
199+
expect(appList).toHaveClass("visual-builder__field-location-app-list--right");
180200
});
181201

182-
it("should apply correct CSS classes for left position", () => {
183-
const { container } = render(<FieldLocationAppList apps={mockApps} position="left" toolbarRef={mockToolbarRef} />);
184-
202+
it("should apply correct CSS classes and left position style for left position", () => {
203+
const { container } = render(
204+
<FieldLocationAppList
205+
apps={mockApps}
206+
position="left"
207+
toolbarRef={mockToolbarRef}
208+
domEditStack={[]}
209+
setDisplayAllApps={() => {}}
210+
displayAllApps={true}
211+
/>
212+
);
185213
const appList = container.firstChild as HTMLElement;
186-
expect(appList).toHaveClass("visual-builder__field-location-app-list");
214+
expect(appList).toHaveClass("visual-builder__field-location-app-list--left");
187215
});
188216

189217
it("should handle empty apps array", () => {
190-
render(<FieldLocationAppList apps={[]} position="right" toolbarRef={mockToolbarRef} />);
218+
render(<FieldLocationAppList apps={[]} position="right" toolbarRef={mockToolbarRef} domEditStack={[]} setDisplayAllApps={() => {}} displayAllApps={true} />);
191219

192220
expect(screen.getByText("No matching results found!")).toBeInTheDocument();
193221
});
194222

195223
it("should handle single app (which gets filtered out)", () => {
196224
const singleApp = [mockApps[0]];
197-
render(<FieldLocationAppList apps={singleApp} position="right" toolbarRef={mockToolbarRef} />);
225+
render(<FieldLocationAppList apps={singleApp} position="right" toolbarRef={mockToolbarRef} domEditStack={[]} setDisplayAllApps={() => {}} displayAllApps={true} />);
198226

199227
expect(screen.getByText("No matching results found!")).toBeInTheDocument();
200228
expect(screen.queryByText("First App")).not.toBeInTheDocument();
201229
});
202230

203231
it("should handle case-insensitive search", () => {
204-
render(<FieldLocationAppList apps={mockApps} position="right" toolbarRef={mockToolbarRef} />);
232+
render(<FieldLocationAppList apps={mockApps} position="right" toolbarRef={mockToolbarRef} domEditStack={[]} setDisplayAllApps={() => {}} displayAllApps={true} />);
205233

206234
const searchInput = screen.getByPlaceholderText("Search for Apps");
207235
fireEvent.input(searchInput, { target: { value: "second" } });
@@ -211,7 +239,7 @@ describe("FieldLocationAppList", () => {
211239
});
212240

213241
it("should clear search results when search input is cleared", () => {
214-
render(<FieldLocationAppList apps={mockApps} position="right" toolbarRef={mockToolbarRef} />);
242+
render(<FieldLocationAppList apps={mockApps} position="right" toolbarRef={mockToolbarRef} domEditStack={[]} setDisplayAllApps={() => {}} displayAllApps={true} />);
215243

216244
const searchInput = screen.getByPlaceholderText("Search for Apps");
217245

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

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { render, fireEvent } from "@testing-library/preact";
33
import { FieldLocationIcon } from "../FieldLocationIcon";
44
import visualBuilderPostMessage from "../../utils/visualBuilderPostMessage";
55
import { vi } from "vitest";
6+
import { asyncRender } from "../../../__test__/utils";
67

78

89

@@ -19,6 +20,7 @@ describe("FieldLocationIcon", () => {
1920
handleMoreIconClick={() => {}}
2021
moreButtonRef={null}
2122
toolbarRef={null}
23+
2224
/>
2325
);
2426
expect(getByTestId("field-location-icon")).toBeInTheDocument();
@@ -37,5 +39,85 @@ describe("FieldLocationIcon", () => {
3739
expect(queryByTestId("field-location-icon")).not.toBeInTheDocument();
3840
});
3941

42+
describe("Field Location Dropdown", () => {
43+
44+
45+
46+
test("FieldLocationIcon shows dropdown icon when multiple apps are available", async () => {
47+
const mockFieldLocationData = {
48+
apps: [
49+
{
50+
uid: "app1",
51+
title: "First App",
52+
icon: "icon1.png",
53+
app_installation_uid: "install1"
54+
},
55+
{
56+
uid: "app2",
57+
title: "Second App",
58+
icon: "icon2.png",
59+
app_installation_uid: "install2"
60+
}
61+
]
62+
};
63+
64+
const mockHandleMoreIconClick = vi.fn();
65+
const mockButtonRef = { current: null };
66+
const mockToolbarRef = { current: null };
67+
68+
const { container } = await asyncRender(
69+
<FieldLocationIcon
70+
fieldLocationData={mockFieldLocationData}
71+
multipleFieldToolbarButtonClasses="mock-button-class"
72+
handleMoreIconClick={mockHandleMoreIconClick}
73+
moreButtonRef={mockButtonRef}
74+
toolbarRef={mockToolbarRef}
75+
/>
76+
);
77+
78+
const appIcon = container.querySelector('[data-testid="field-location-icon"]');
79+
expect(appIcon).toBeInTheDocument();
80+
81+
const moreButton = container.querySelector('[data-testid="field-location-more-button"]');
82+
expect(moreButton).toBeInTheDocument();
83+
84+
fireEvent.click(moreButton!);
85+
expect(mockHandleMoreIconClick).toHaveBeenCalledTimes(1);
86+
});
87+
88+
test("FieldLocationIcon does not show dropdown icon when only one app is available", async () => {
89+
const mockFieldLocationData = {
90+
apps: [
91+
{
92+
uid: "app1",
93+
title: "First App",
94+
icon: "icon1.png",
95+
app_installation_uid: "install1"
96+
}
97+
]
98+
};
99+
100+
const mockHandleMoreIconClick = vi.fn();
101+
const mockButtonRef = { current: null };
102+
const mockToolbarRef = { current: null };
103+
104+
const { container } = await asyncRender(
105+
<FieldLocationIcon
106+
fieldLocationData={mockFieldLocationData}
107+
multipleFieldToolbarButtonClasses="mock-button-class"
108+
handleMoreIconClick={mockHandleMoreIconClick}
109+
moreButtonRef={mockButtonRef}
110+
toolbarRef={mockToolbarRef}
111+
/>
112+
);
113+
114+
const appIcon = container.querySelector('[data-testid="field-location-icon"]');
115+
expect(appIcon).toBeInTheDocument();
116+
117+
const moreButton = container.querySelector('[data-testid="field-location-more-button"]');
118+
expect(moreButton).not.toBeInTheDocument();
119+
});
120+
121+
});
40122

41123
});

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

Lines changed: 0 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -304,85 +304,4 @@ describe("FieldToolbarComponent", () => {
304304
expect(replaceButton).toBeDisabled();
305305
}
306306
});
307-
308-
describe("Field Location Dropdown", () => {
309-
310-
311-
312-
test("FieldLocationIcon shows dropdown icon when multiple apps are available", async () => {
313-
const mockFieldLocationData = {
314-
apps: [
315-
{
316-
uid: "app1",
317-
title: "First App",
318-
icon: "icon1.png",
319-
app_installation_uid: "install1"
320-
},
321-
{
322-
uid: "app2",
323-
title: "Second App",
324-
icon: "icon2.png",
325-
app_installation_uid: "install2"
326-
}
327-
]
328-
};
329-
330-
const mockHandleMoreIconClick = vi.fn();
331-
const mockButtonRef = { current: null };
332-
const mockToolbarRef = { current: null };
333-
334-
const { container } = await asyncRender(
335-
<FieldLocationIcon
336-
fieldLocationData={mockFieldLocationData}
337-
multipleFieldToolbarButtonClasses="mock-button-class"
338-
handleMoreIconClick={mockHandleMoreIconClick}
339-
moreButtonRef={mockButtonRef}
340-
toolbarRef={mockToolbarRef}
341-
/>
342-
);
343-
344-
const appIcon = container.querySelector('[data-testid="field-location-icon"]');
345-
expect(appIcon).toBeInTheDocument();
346-
347-
const moreButton = container.querySelector('[data-testid="field-location-more-button"]');
348-
expect(moreButton).toBeInTheDocument();
349-
350-
fireEvent.click(moreButton!);
351-
expect(mockHandleMoreIconClick).toHaveBeenCalledTimes(1);
352-
});
353-
354-
test("FieldLocationIcon does not show dropdown icon when only one app is available", async () => {
355-
const mockFieldLocationData = {
356-
apps: [
357-
{
358-
uid: "app1",
359-
title: "First App",
360-
icon: "icon1.png",
361-
app_installation_uid: "install1"
362-
}
363-
]
364-
};
365-
366-
const mockHandleMoreIconClick = vi.fn();
367-
const mockButtonRef = { current: null };
368-
const mockToolbarRef = { current: null };
369-
370-
const { container } = await asyncRender(
371-
<FieldLocationIcon
372-
fieldLocationData={mockFieldLocationData}
373-
multipleFieldToolbarButtonClasses="mock-button-class"
374-
handleMoreIconClick={mockHandleMoreIconClick}
375-
moreButtonRef={mockButtonRef}
376-
toolbarRef={mockToolbarRef}
377-
/>
378-
);
379-
380-
const appIcon = container.querySelector('[data-testid="field-location-icon"]');
381-
expect(appIcon).toBeInTheDocument();
382-
383-
const moreButton = container.querySelector('[data-testid="field-location-more-button"]');
384-
expect(moreButton).not.toBeInTheDocument();
385-
});
386-
387-
});
388307
});

0 commit comments

Comments
 (0)