diff --git a/src/components/__tests__/GroupsOverlay.test.tsx b/src/components/__tests__/GroupsOverlay.test.tsx index f01f2e2f..acd014d3 100644 --- a/src/components/__tests__/GroupsOverlay.test.tsx +++ b/src/components/__tests__/GroupsOverlay.test.tsx @@ -203,7 +203,7 @@ describe("GroupControlsOverlay", () => { expect(screen.getByText("My Test Group")).toBeInTheDocument(); }); - it("should render color picker button", () => { + it("should render group options menu button", () => { mockUseWorkflowStore.mockImplementation((selector) => { return selector(createDefaultState({ groups: { "group-1": createMockGroup() }, @@ -211,11 +211,10 @@ describe("GroupControlsOverlay", () => { }); render(); - const colorButton = screen.getByTitle("Change color"); - expect(colorButton).toBeInTheDocument(); + expect(screen.getByTitle("Group options")).toBeInTheDocument(); }); - it("should render lock/unlock button", () => { + it("should show menu items when group options button is clicked", () => { mockUseWorkflowStore.mockImplementation((selector) => { return selector(createDefaultState({ groups: { "group-1": createMockGroup({ locked: false }) }, @@ -223,20 +222,11 @@ describe("GroupControlsOverlay", () => { }); render(); - const lockButton = screen.getByTitle("Lock group"); - expect(lockButton).toBeInTheDocument(); - }); + fireEvent.click(screen.getByTitle("Group options")); - it("should render delete button", () => { - mockUseWorkflowStore.mockImplementation((selector) => { - return selector(createDefaultState({ - groups: { "group-1": createMockGroup() }, - })); - }); - - render(); - const deleteButton = screen.getByTitle("Delete group"); - expect(deleteButton).toBeInTheDocument(); + expect(screen.getByText("Background")).toBeInTheDocument(); + expect(screen.getByText("Lock")).toBeInTheDocument(); + expect(screen.getByText("Delete")).toBeInTheDocument(); }); }); @@ -321,7 +311,7 @@ describe("GroupControlsOverlay", () => { }); describe("Lock Toggle", () => { - it("should show unlock button when group is locked", () => { + it("should show Unlock label in menu when group is locked", () => { mockUseWorkflowStore.mockImplementation((selector) => { return selector(createDefaultState({ groups: { "group-1": createMockGroup({ locked: true }) }, @@ -329,10 +319,11 @@ describe("GroupControlsOverlay", () => { }); render(); - expect(screen.getByTitle("Unlock group")).toBeInTheDocument(); + fireEvent.click(screen.getByTitle("Group options")); + expect(screen.getByText("Unlock")).toBeInTheDocument(); }); - it("should call toggleGroupLock when lock button is clicked", () => { + it("should call toggleGroupLock when Lock is clicked in menu", () => { mockUseWorkflowStore.mockImplementation((selector) => { return selector(createDefaultState({ groups: { "group-1": createMockGroup({ locked: false }) }, @@ -340,14 +331,14 @@ describe("GroupControlsOverlay", () => { }); render(); - - fireEvent.click(screen.getByTitle("Lock group")); + fireEvent.click(screen.getByTitle("Group options")); + fireEvent.click(screen.getByText("Lock")); expect(mockToggleGroupLock).toHaveBeenCalledWith("group-1"); }); }); describe("Color Picker", () => { - it("should show color picker when color button is clicked", () => { + it("should show color picker when Background is clicked in menu", () => { mockUseWorkflowStore.mockImplementation((selector) => { return selector(createDefaultState({ groups: { "group-1": createMockGroup({ color: "blue" }) }, @@ -356,7 +347,9 @@ describe("GroupControlsOverlay", () => { render(); - fireEvent.click(screen.getByTitle("Change color")); + // Open menu, then click Background to show color fan + fireEvent.click(screen.getByTitle("Group options")); + fireEvent.click(screen.getByText("Background")); // Should show color options (Gray, Blue, Green, Purple, Orange, Red) expect(screen.getByTitle("Gray")).toBeInTheDocument(); @@ -376,8 +369,9 @@ describe("GroupControlsOverlay", () => { render(); - // Open color picker - fireEvent.click(screen.getByTitle("Change color")); + // Open menu, then color picker + fireEvent.click(screen.getByTitle("Group options")); + fireEvent.click(screen.getByText("Background")); // Select green fireEvent.click(screen.getByTitle("Green")); @@ -387,7 +381,7 @@ describe("GroupControlsOverlay", () => { }); describe("Delete Group", () => { - it("should call deleteGroup when delete button is clicked", () => { + it("should call deleteGroup when Delete is clicked in menu", () => { mockUseWorkflowStore.mockImplementation((selector) => { return selector(createDefaultState({ groups: { "group-1": createMockGroup() }, @@ -396,7 +390,8 @@ describe("GroupControlsOverlay", () => { render(); - fireEvent.click(screen.getByTitle("Delete group")); + fireEvent.click(screen.getByTitle("Group options")); + fireEvent.click(screen.getByText("Delete")); expect(mockDeleteGroup).toHaveBeenCalledWith("group-1"); }); });