diff --git a/app/packages/looker-3d/src/fo3d/Leva.tsx b/app/packages/looker-3d/src/fo3d/Leva.tsx index 2a45b4a3db7..2d5bd12450b 100644 --- a/app/packages/looker-3d/src/fo3d/Leva.tsx +++ b/app/packages/looker-3d/src/fo3d/Leva.tsx @@ -69,9 +69,14 @@ function Leva() { const levaContainer = levaParentContainer.firstElementChild as HTMLDivElement; + + levaContainer.setAttribute("data-cy", "leva-container"); + const levaContainerHeader = levaContainer.firstElementChild as HTMLDivElement; + levaContainerHeader.setAttribute("data-cy", "leva-container-header"); + levaContainerHeader.addEventListener("mousedown", mouseDownEventHandler); levaContainerHeader.addEventListener("mouseup", mouseUpEventHandler); levaContainerHeader.addEventListener("mousemove", mouseMoveEventHandler); diff --git a/e2e-pw/src/oss/poms/fo3d/assets-panel/index.ts b/e2e-pw/src/oss/poms/fo3d/assets-panel/index.ts new file mode 100644 index 00000000000..f1dbb61645d --- /dev/null +++ b/e2e-pw/src/oss/poms/fo3d/assets-panel/index.ts @@ -0,0 +1,36 @@ +import { Locator, Page } from "src/oss/fixtures"; + +export class Asset3dPanelPom { + readonly locator: Locator; + readonly headerLocator: Locator; + + constructor(private readonly page: Page) { + this.locator = this.page.getByTestId("leva-container"); + this.headerLocator = this.page.getByTestId("leva-container-header"); + } + + async dragToToLeftCorner() { + await this.headerLocator.waitFor({ state: "visible" }); + + const levaContainerBox = await this.locator.boundingBox(); + + if (!levaContainerBox) { + throw new Error("Unable to find bounding box on leva container"); + } + + const dragXOffset = -this.page.viewportSize().width / 2; + const dragYOffset = -10; + + const levaCenterX = levaContainerBox.x + levaContainerBox.width / 2; + const levaCenterY = levaContainerBox.y + levaContainerBox.height / 2; + + await this.headerLocator.hover(); + + await this.page.mouse.down(); + await this.page.mouse.move( + levaCenterX + dragXOffset, + levaCenterY + dragYOffset + ); + await this.page.mouse.up(); + } +} diff --git a/e2e-pw/src/oss/specs/groups/modal-multi-pcd.spec.ts b/e2e-pw/src/oss/specs/groups/modal-multi-pcd.spec.ts index 8d22d716623..5276ffb92ac 100644 --- a/e2e-pw/src/oss/specs/groups/modal-multi-pcd.spec.ts +++ b/e2e-pw/src/oss/specs/groups/modal-multi-pcd.spec.ts @@ -14,18 +14,33 @@ const test = base.extend<{ grid: GridPom; modal: ModalPom }>({ const datasetName = getUniqueDatasetNameWithPrefix(`modal-multi-pcd`); -test.beforeAll(async ({ fiftyoneLoader }) => { +const pcd1Path = `/tmp/test-pcd1-${datasetName}.pcd`; +const pcd2Path = `/tmp/test-pcd2-${datasetName}.pcd`; + +test.beforeAll(async ({ fiftyoneLoader, mediaFactory }) => { + mediaFactory.createPcd({ + outputPath: pcd1Path, + shape: "cube", + numPoints: 100, + }); + + mediaFactory.createPcd({ + outputPath: pcd2Path, + shape: "diagonal", + numPoints: 5, + }); + await fiftyoneLoader.executePythonCode(` - import fiftyone.zoo as foz + import fiftyone as fo - dataset = foz.load_zoo_dataset( - "quickstart-groups", dataset_name="${datasetName}", max_samples=3 - ) + dataset = fo.Dataset("${datasetName}") dataset.persistent = True - dataset.group_slice = "pcd" - extra = dataset.first().copy() - extra.group.name = "extra" - dataset.add_sample(extra)`); + + group = fo.Group() + sample1 = fo.Sample(filepath="${pcd1Path}", group=group.element("pcd1")) + sample2 = fo.Sample(filepath="${pcd2Path}", group=group.element("pcd2")) + + dataset.add_samples([sample1, sample2])`); }); test.beforeEach(async ({ page, fiftyoneLoader }) => { @@ -35,20 +50,22 @@ test.beforeEach(async ({ page, fiftyoneLoader }) => { test.describe("multi-pcd", () => { test("multi-pcd slice in modal", async ({ grid, modal }) => { await grid.openFirstSample(); - await modal.group.toggleMedia("carousel"); - await modal.group.toggleMedia("viewer"); + await modal.clickOnLooker3d(); - await modal.toggleLooker3dSlice("extra"); + await modal.toggleLooker3dSlice("pcd2"); - await modal.sidebar.assert.verifySidebarEntryText("pcd-group.name", "pcd"); await modal.sidebar.assert.verifySidebarEntryText( - "extra-group.name", - "extra" + "pcd1-group.name", + "pcd1" + ); + await modal.sidebar.assert.verifySidebarEntryText( + "pcd2-group.name", + "pcd2" ); - await modal.toggleLooker3dSlice("pcd"); + await modal.toggleLooker3dSlice("pcd1"); - await modal.sidebar.assert.verifySidebarEntryText("group.name", "extra"); + await modal.sidebar.assert.verifySidebarEntryText("group.name", "pcd2"); }); }); diff --git a/e2e-pw/src/oss/specs/smoke-tests/quickstart-groups.spec.ts b/e2e-pw/src/oss/specs/smoke-tests/quickstart-groups.spec.ts index 7fecc043f9a..24eaa714fa7 100644 --- a/e2e-pw/src/oss/specs/smoke-tests/quickstart-groups.spec.ts +++ b/e2e-pw/src/oss/specs/smoke-tests/quickstart-groups.spec.ts @@ -1,4 +1,5 @@ import { test as base, expect } from "src/oss/fixtures"; +import { Asset3dPanelPom } from "src/oss/poms/fo3d/assets-panel"; import { GridPom } from "src/oss/poms/grid"; import { ModalPom } from "src/oss/poms/modal"; import { SidebarPom } from "src/oss/poms/sidebar"; @@ -13,6 +14,7 @@ const test = base.extend<{ grid: GridPom; modal: ModalPom; sidebar: SidebarPom; + asset3dPanel: Asset3dPanelPom; }>({ grid: async ({ page, eventUtils }, use) => { await use(new GridPom(page, eventUtils)); @@ -23,6 +25,9 @@ const test = base.extend<{ sidebar: async ({ page }, use) => { await use(new SidebarPom(page)); }, + asset3dPanel: async ({ page }, use) => { + await use(new Asset3dPanelPom(page)); + }, }); test.describe("quickstart-groups", () => { @@ -89,9 +94,16 @@ test.describe("quickstart-groups", () => { ); }); - test("group media visibility toggle works", async ({ modal }) => { + test("group media visibility toggle works", async ({ + modal, + asset3dPanel, + }) => { + // need to drag the asset3d panel to the left corner to make sure it doesn't overlap with the popout + await asset3dPanel.dragToToLeftCorner(); + // make sure popout is right aligned to the toggle button await modal.group.toggleMediaButton.click(); + const popoutBoundingBox = await modal.group.groupMediaVisibilityPopout.boundingBox(); const toggleButtonBoundingBox =