diff --git a/v3/cypress/e2e/pixi-interaction/graph-pixi-interaction.spec.ts b/v3/cypress/e2e/pixi-interaction/graph-pixi-interaction.spec.ts index bdccdc37c..7d9171ad9 100644 --- a/v3/cypress/e2e/pixi-interaction/graph-pixi-interaction.spec.ts +++ b/v3/cypress/e2e/pixi-interaction/graph-pixi-interaction.spec.ts @@ -1,11 +1,9 @@ -// import * as PIXI from "pixi.js" import { ComponentElements as c } from "../../support/elements/component-elements" import { CfmElements as cfm } from "../../support/elements/cfm" import { GraphLegendHelper as glh } from "../../support/helpers/graph-legend-helper" import { GraphTileElements as graph } from "../../support/elements/graph-tile" import { TableTileElements as table } from "../../support/elements/table-tile" import { ToolbarElements as toolbar } from "../../support/elements/toolbar-elements" -//import { ColorPickerPaletteElements as cpp} from "../../support/elements/color-picker-palette" import { GraphCanvasHelper as gch } from "../../support/helpers/graph-canvas-helper" import { AxisHelper as ah } from "../../support/helpers/axis-helper" import graphRules from '../../fixtures/graph-rules.json' @@ -116,7 +114,7 @@ context("Graph UI with Pixi interaction", () => { }) }) describe("case card graph interaction with point count pixi interaction", () => { - it("can drag attributes from the case card to the graph with pixijs interaction", () => { + it("can drag attributes from the case card to the graph and check point count", () => { const tableHeaderLeftSelector = ".codap-component.codap-case-table .component-title-bar .header-left" cy.get(tableHeaderLeftSelector).click() cy.get(`${tableHeaderLeftSelector} .card-table-toggle-message`).click() @@ -302,6 +300,29 @@ context("Graph UI with Pixi interaction", () => { }) }) }) + it.skip("SPIKE: should check color of a point", () => { + ah.openAxisAttributeMenu("bottom") + ah.selectMenuAttribute("Diet", "bottom") // Diet => x-axis + glh.dragAttributeToPlot("Habitat") // Habitat => plot area + cy.wait(500) // Wait for the graph to update + + ah.verifyAxisLabel("bottom", "Diet") + //glh.verifyCategoricalLegend("LifeSpan") + + gch.getGraphTileId().then((tileId) => { + gch.validateGraphPointCount(tileId, 27) // 27 points in graph + }) + + graph.getGraphTile() // Ensure graph tile is loaded + + gch.getGraphTileId().then((tileId: string) => { + gch.getPixiPointFillColorHardcoded(tileId, 0).then(({ fill }) => { + cy.log(`Retrieved Fill Color for Point 0: ${fill}`); + expect(fill).to.exist; + expect(fill).to.match(/^#[0-9a-fA-F]{6}$/, "Fill color should be a valid hex code"); + }); + }); + }) // this test will work when PT-#188601933 is delivered it.skip("check for point compression interaction", () => { // Open Four Seals diff --git a/v3/cypress/support/helpers/graph-canvas-helper.ts b/v3/cypress/support/helpers/graph-canvas-helper.ts index 968566dba..673168e10 100644 --- a/v3/cypress/support/helpers/graph-canvas-helper.ts +++ b/v3/cypress/support/helpers/graph-canvas-helper.ts @@ -102,5 +102,82 @@ export const GraphCanvasHelper = { // Assert all points have unique positions expect(uniquePositions.size).to.equal(positions.length, "All points should have unique positions") }) - } + }, + // getPixiPointFillColorHardcoded(tileId: string, pointIndex: number): Cypress.Chainable<{ fill?: string }> { + // cy.log("Get the PixiPoint fill color (manual inspection)"); + // return cy.window().then((win: any) => { + // const pixiPoints = win.pixiPointsMap[tileId]; + // const textures = pixiPoints[0].textures; // Access textures directly from PixiPoints + + // // Log basic info for debugging + // cy.log("PixiPoints:", pixiPoints); + // cy.log("Textures Object (Type):", typeof textures); + + // if (!textures) { + // throw new Error("Textures object is undefined."); + // } + + // // Check if textures is a Map-like structure + // if (typeof textures.entries === "function") { + // const textureEntries = Array.from(textures.entries()); + // cy.log("Texture Entries (from Map):", textureEntries); + + // // Manually log all entries to inspect them + // textureEntries.forEach(([key, entry], index) => { + // cy.log(`Texture Entry ${index} Key:`, key); + // cy.log(`Texture Entry ${index} Properties:`, { + // fill: entry.fill, + // style: entry.style, + // }); + // }); + + // // Attempt to retrieve the first texture's fill property + // const [textureKey, textureEntry] = textureEntries[0] || []; + // if (!textureEntry) { + // throw new Error(`Texture entry for key ${textureKey} is not found.`); + // } + + // const fillColor = textureEntry.fill || textureEntry.style?.fill; + // cy.log("Fill Color (From Map):", fillColor); + + // if (!fillColor) { + // throw new Error("Fill color is undefined in the texture entry."); + // } + + // return cy.wrap({ fill: fillColor }); + // } + + // // Handle case where textures is an object + // const textureKeys = Object.keys(textures); + // cy.log("Texture Keys (from Object):", textureKeys); + + // textureKeys.forEach((key, index) => { + // const entry = textures[key]; + // cy.log(`Texture Entry ${index} Key:`, key); + // cy.log(`Texture Entry ${index} Properties:`, { + // fill: entry.fill, + // style: entry.style, + // }); + // }); + + // const textureKey = textureKeys[0]; + // if (!textureKey) { + // throw new Error("No texture keys found in the textures object."); + // } + + // const textureEntry = textures[textureKey]; + // if (!textureEntry) { + // throw new Error(`Texture entry for key ${textureKey} is not found.`); + // } + + // const fillColor = textureEntry.fill || textureEntry.style?.fill; + // cy.log("Fill Color (From Object):", fillColor); + + // if (!fillColor) { + // throw new Error("Fill color is undefined in the texture entry."); + // } + + // return cy.wrap({ fill: fillColor }); + // }); + // } }