Skip to content

Commit

Permalink
added checks for graph and map point color
Browse files Browse the repository at this point in the history
  • Loading branch information
@nstclair-cc
nstclair-cc committed Dec 23, 2024
1 parent 2ec3e07 commit c057e59
Show file tree
Hide file tree
Showing 4 changed files with 198 additions and 101 deletions.
80 changes: 57 additions & 23 deletions v3/cypress/e2e/pixi-interaction/graph-pixi-interaction.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@ context("Graph UI with Pixi interaction", () => {
gch.validateGraphPointCount(tileId, 24) // 24 points in graph
})
})
it("shows parent visibility toggles when Show Parent Visibility Toggles option is selected and checks point count", () => {
it("shows parent visibility toggles and verifies point count with Show Parent Visibility Toggles selected", () => {
ah.openAxisAttributeMenu("bottom")
ah.selectMenuAttribute("Sleep", "bottom") // Sleep => x-axis
cy.wait(500)
Expand Down Expand Up @@ -279,31 +279,35 @@ context("Graph UI with Pixi interaction", () => {

// NOTE: Adornments are covered in graph-adornments.spec.ts (including Show Measures)
})
describe("checks for graph point position with pixi interaction", () => {
// use this test to debug point positions when running locally
it.skip("should check position of a point", () => {
describe("graph colors and selection with point count pixi interaction", () => {
it("checks color of a point with Legend colors", () => {
ah.openAxisAttributeMenu("bottom")
ah.selectMenuAttribute("Sleep", "bottom") // Sleep => x-axis
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) => {
cy.log(`Retrieved Tile ID: ${tileId}`)
if (!tileId) {
throw new Error("Tile ID is undefined or null.")
}

gch.getPixiPointPosition(tileId, 0).then((position: { x: number
; y: number }) => {
cy.log(`Point 0 Position: x=${position.x}, y=${position.y}`)
gch.getPixiPointFillColors(tileId).then((colors) => {
cy.log(`Extracted Fill Colors: ${colors}`)
expect(colors).to.have.length.greaterThan(0)
colors.forEach((color) => {
expect(color).to.match(/^#[0-9a-fA-F]{6}$/, "Each color should be a valid hex code")
})
})
})
})
it.skip("SPIKE: should check color of a point", () => {
it("checks point selection using 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")
Expand All @@ -313,15 +317,45 @@ context("Graph UI with Pixi interaction", () => {
gch.validateGraphPointCount(tileId, 27) // 27 points in graph
})

table.moveAttributeToParent("Diet", "newCollection")
table.getNumOfRows(1).should("contain", 5) // five rows: top, plants, meat, both, bottom
gch.setAxisAndRetrieveTileId("Diet", "bottom").then((tileId) => {
gch.validateGraphPointCount(tileId, 3)
})

table.getGridCell(2, 2).should("contain", "plants").click()
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");
});
});
gch.getPixiPointFillColors(tileId).then((colors) => {
cy.log(`Extracted Fill Colors: ${colors}`)
expect(colors).to.have.length(2) // Verify there are exactly 2 colors
expect(colors).to.deep.equal(["#4682B4", "#E6805B"]) // Verify the colors are as expected
})
})
})
})
describe("checks for graph point position and color with pixi interaction", () => {
// use this test to debug point positions when running locally
// skip this on the cloud because it's not necessary
it.skip("should check position of a point", () => {
ah.openAxisAttributeMenu("bottom")
ah.selectMenuAttribute("Sleep", "bottom") // Sleep => x-axis
cy.wait(500) // Wait for the graph to update

graph.getGraphTile() // Ensure graph tile is loaded

gch.getGraphTileId().then((tileId: string) => {
cy.log(`Retrieved Tile ID: ${tileId}`)
if (!tileId) {
throw new Error("Tile ID is undefined or null.")
}

gch.getPixiPointPosition(tileId, 0).then((position: { x: number
; y: number }) => {
cy.log(`Point 0 Position: x=${position.x}, y=${position.y}`)
})
})
})
// this test will work when PT-#188601933 is delivered
it.skip("check for point compression interaction", () => {
Expand Down Expand Up @@ -360,7 +394,7 @@ context("Graph UI with Pixi interaction", () => {
gch.checkPointsHaveUniquePositions(tileId) // Call the helper function
})
})
it("no point compression after drawing categorical legend with categorical attribute on x axis and undo/redo", () => {
it("verifies no point compression after drawing categorical legend on x-axis with undo/redo actions", () => {
// Initial setup: Drag attributes to the x-axis and plot area, respectively
ah.openAxisAttributeMenu("bottom")
ah.selectMenuAttribute("Diet", "bottom") // Diet => x-axis
Expand All @@ -385,7 +419,7 @@ context("Graph UI with Pixi interaction", () => {
gch.checkPointsHaveUniquePositions(tileId) // Call the helper function
})
})
it("no point compression after drawing categorical legend with categorical attribute on y axis and undo/redo", () => {
it("verifies no point compression after drawing categorical legend on y-axis with undo/redo actions", () => {
// Drag attribute to the y-axis and drag another attribute to the plot area
ah.openAxisAttributeMenu("left")
ah.selectMenuAttribute("Diet", "left") // Diet => y-axis
Expand Down
42 changes: 41 additions & 1 deletion v3/cypress/e2e/pixi-interaction/map-pixi-interaction.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ context("Graph UI with Pixi interaction", () => {
cy.visit(url)
cy.wait(2500)
})
describe("map view", () => {
describe("map point count with point count pixi interaction", () => {
it("validates point count for map data on map component with pixi interaction", () => {
cy.log('Correct number of points in maps')
map.getMapTile().click()
Expand Down Expand Up @@ -71,4 +71,44 @@ context("Graph UI with Pixi interaction", () => {
// })
})
})
describe("map colors and selection with pixi interaction", () => {
it("validates point selection for map data on map component with pixi interaction", () => {
table.getGridCell(2, 2).should("contain", "546").click()

cy.log('Correct highlighting when points are selected')
map.getMapTile().click()
mch.getMapTileId().then((tileId) => {
mch.validateMapPointCount(tileId, 858)
})

mch.getMapTileId().then((tileId: string) => {
mch.getPixiPointFillColors(tileId).then((colors) => {
const upperCaseColors = colors.map(color => color.toUpperCase()) // Convert all colors to uppercase
cy.log(`Extracted Fill Colors (Uppercase): ${upperCaseColors}`)
expect(upperCaseColors).to.have.length(2) // Verify there are exactly 2 colors
expect(upperCaseColors).to.deep.equal(["#E6805B", "#4682B4"]) // Verify the colors are as expected
})
})
})
// This is a simple test case for maps with legends
// we'd need to get the target drag working for this to work
// it("validates map color data on map legend plot with pixi interaction", () => {
// cy.dragAttributeToTarget("animal_id", "color", "map")

// cy.log('Correct highlighting when points are selected')
// map.getMapTile().click()
// mch.getMapTileId().then((tileId) => {
// mch.validateMapPointCount(tileId, 858)
// })

// mch.getMapTileId().then((tileId: string) => {
// mch.getPixiPointFillColors(tileId).then((colors) => {
// const upperCaseColors = colors.map(color => color.toUpperCase()) // Convert all colors to uppercase
// cy.log(`Extracted Fill Colors (Uppercase): ${upperCaseColors}`)
// expect(upperCaseColors).to.have.length(2) // Verify there are exactly 2 colors
// expect(upperCaseColors).to.deep.equal(["#E6805B", "#4682B4"]) // Verify the colors are as expected
// })
// })
// })
})
})
127 changes: 50 additions & 77 deletions v3/cypress/support/helpers/graph-canvas-helper.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,81 +103,54 @@ export const GraphCanvasHelper = {
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 });
// });
// }
// Checks if the points in a graph have unique fill colors.
getPixiPointFillColors(tileId: string): Cypress.Chainable<string[]> {
cy.log("Get all PixiPoint fill colors from textures")
return cy.window().then((win: any) => {
const pixiPoints = win.pixiPointsMap[tileId]
const textures = pixiPoints[0].textures // Access textures directly from PixiPoints

if (!textures) {
throw new Error("Textures object is undefined.")
}

// Array to store extracted fill colors
const fillColors: string[] = []

if (typeof textures.entries === "function") {
for (const [key] of textures.entries()) {
try {
// Parse the key to extract the `fill` color
const parsedKey = JSON.parse(key)
if (parsedKey.fill) {
fillColors.push(parsedKey.fill)
}
} catch (error) {
cy.log(`Error parsing texture key: ${key}`, error)
}
}
} else {
// If textures is an object
for (const key of Object.keys(textures)) {
try {
// Parse the key to extract the `fill` color
const parsedKey = JSON.parse(key)
if (parsedKey.fill) {
fillColors.push(parsedKey.fill)
}
} catch (error) {
cy.log(`Error parsing texture key: ${key}`, error)
}
}
}

cy.log("Extracted Fill Colors:", fillColors)

if (fillColors.length === 0) {
throw new Error("No fill colors found in the textures map.")
}

return cy.wrap(fillColors)
})
}
}
50 changes: 50 additions & 0 deletions v3/cypress/support/helpers/map-canvas-helper.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,5 +51,55 @@ export const MapCanvasHelper = {
// Assert the number of points
expect(pointsCount).to.equal(expectedPointCount, "Point count matches expected value")
})
},
// Checks if the points in a graph have unique fill colors.
getPixiPointFillColors(tileId: string): Cypress.Chainable<string[]> {
cy.log("Get all PixiPoint fill colors from textures")
return cy.window().then((win: any) => {
const pixiPoints = win.pixiPointsMap[tileId]
const textures = pixiPoints[0].textures // Access textures directly from PixiPoints

if (!textures) {
throw new Error("Textures object is undefined.")
}

// Array to store extracted fill colors
const fillColors: string[] = []

if (typeof textures.entries === "function") {
for (const [key] of textures.entries()) {
try {
// Parse the key to extract the `fill` color
const parsedKey = JSON.parse(key)
if (parsedKey.fill) {
fillColors.push(parsedKey.fill)
}
} catch (error) {
cy.log(`Error parsing texture key: ${key}`, error)
}
}
} else {
// If textures is an object
for (const key of Object.keys(textures)) {
try {
// Parse the key to extract the `fill` color
const parsedKey = JSON.parse(key)
if (parsedKey.fill) {
fillColors.push(parsedKey.fill)
}
} catch (error) {
cy.log(`Error parsing texture key: ${key}`, error)
}
}
}

cy.log("Extracted Fill Colors:", fillColors)

if (fillColors.length === 0) {
throw new Error("No fill colors found in the textures map.")
}

return cy.wrap(fillColors)
})
}
}

0 comments on commit c057e59

Please sign in to comment.