feat(Popover): migrate to Tailwind

kiwicom · Nov 21, 2023 · 4dcbbe4 · 4dcbbe4
1 parent 0841817
commit 4dcbbe4
Show file tree

Hide file tree

Showing 5 changed files with 150 additions and 245 deletions.
diff --git a/docs/src/data/tailwind-migration-status.yaml b/docs/src/data/tailwind-migration-status.yaml
@@ -65,7 +65,7 @@ NavigationBar: true
 NotificationBadge: true
 OrbitProvider: true
 Pagination: false
-Popover: false
+Popover: true
 Portal: true
 Radio: true
 NewSeatIcon: false

diff --git a/packages/orbit-components/cypress/integration/pages/lock-scrolling.test.ts b/packages/orbit-components/cypress/integration/pages/lock-scrolling.test.ts
@@ -6,7 +6,7 @@ describe("useLockScrolling", () => {
   it("should listen for viewport resize", () => {
     cy.viewport(breakpoint - 1, 600);
     cy.visit("/lock-scrolling");
-    cy.findByRole("button", { name: "Open" }).click();
+    cy.findAllByRole("button", { name: "Open" }).eq(1).click();
     cy.get("body").should("have.css", "overflow-y", "hidden");
     // cy.get("body").should("have.css", "padding-right", "15px");
     cy.viewport(breakpoint, 600);
@@ -20,8 +20,8 @@ describe("useLockScrolling", () => {
   it("should unlock scrolling after last lock is cleared", () => {
     cy.viewport(breakpoint - 1, 600);
     cy.visit("/lock-scrolling");
-    cy.findByRole("button", { name: "Open" }).click();
-    cy.findByRole("button", { name: "Open nested" }).click();
+    cy.findAllByRole("button", { name: "Open" }).eq(1).click();
+    cy.findAllByRole("button", { name: "Open nested" }).eq(1).click();
     cy.findByRole("button", { name: "Close nested" }).click();
     cy.get("body").should("have.css", "overflow-y", "hidden");
     cy.findByRole("button", { name: "Close" }).click();

diff --git a/packages/orbit-components/src/Popover/__tests__/index.test.tsx b/packages/orbit-components/src/Popover/__tests__/index.test.tsx
@@ -37,7 +37,7 @@ describe("Popover", () => {
       </Popover>,
     );
 
-    const openButton = screen.getByRole("button", { name: "Open" });
+    const openButton = screen.getAllByRole("button", { name: "Open" })[1];
     await user.click(openButton);
     expect(onOpen).toHaveBeenCalled();
     expect(screen.getByTestId(dataTest)).toBeInTheDocument();
@@ -88,7 +88,7 @@ describe("Popover", () => {
     );
 
     // default is 4px
-    expect(screen.getByRole("tooltip")).toHaveStyle({ top: "10" });
+    expect(screen.getByRole("dialog")).toHaveStyle({ top: "10" });
     // Needs to flush async `floating-ui` hooks
     // https://github.com/floating-ui/floating-ui/issues/1520
     await act(async () => {});
@@ -100,10 +100,11 @@ describe("Popover", () => {
         <Button>Open popover</Button>
       </Popover>,
     );
-    await user.click(screen.getByRole("button"));
+
+    await user.click(screen.getAllByRole("button")[1]);
     const overlay = (await screen.findByTestId("popover")).previousElementSibling;
     expect(overlay).toBeInTheDocument();
     if (overlay) await user.click(overlay);
-    expect(screen.queryByTestId("popover")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("dialog")).not.toBeInTheDocument();
   });
 });