From 10b52eeac634d0023ced6fb15a70db90deb1cd4e Mon Sep 17 00:00:00 2001 From: Kirk Swenson Date: Tue, 13 Aug 2024 16:36:25 -0700 Subject: [PATCH] chore: fix cypress typings (#1401) --- v3/cypress/cypress.d.ts | 21 ++++ v3/cypress/e2e/adornments.spec.ts | 1 + v3/cypress/e2e/axis.spec.ts | 81 ++++--------- v3/cypress/e2e/calculator.spec.ts | 6 +- .../e2e/formula/formula-component.spec.ts | 2 +- v3/cypress/e2e/graph.spec.ts | 18 +-- v3/cypress/e2e/hierarchical-table.spec.ts | 4 +- v3/cypress/e2e/map.spec.ts | 20 ++-- v3/cypress/e2e/plugin.spec.ts | 6 +- v3/cypress/e2e/slider.spec.ts | 16 +-- v3/cypress/e2e/table.spec.ts | 37 +++--- v3/cypress/e2e/toolbar.spec.ts | 28 ++--- v3/cypress/support/commands.ts | 2 +- v3/cypress/support/elements/axis-elements.ts | 38 +++--- .../support/elements/calculator-tile.ts | 6 +- .../support/elements/component-elements.ts | 30 ++--- .../support/elements/graph-legend-elements.ts | 2 +- .../support/elements/map-legend-elements.ts | 2 +- v3/cypress/support/elements/point-elements.ts | 18 +-- v3/cypress/support/elements/slider-tile.ts | 16 +-- v3/cypress/support/elements/table-tile.ts | 113 +++++++++--------- .../support/elements/toolbar-elements.ts | 10 +- v3/cypress/support/elements/web-view-tile.ts | 6 +- v3/cypress/support/helpers/axis-helper.ts | 31 ++--- v3/cypress/support/helpers/formula-helper.ts | 6 +- .../support/helpers/graph-legend-helper.ts | 22 ++-- .../support/helpers/map-legend-helper.ts | 22 ++-- v3/cypress/tsconfig.json | 3 +- v3/package.json | 3 +- 29 files changed, 282 insertions(+), 288 deletions(-) create mode 100644 v3/cypress/cypress.d.ts diff --git a/v3/cypress/cypress.d.ts b/v3/cypress/cypress.d.ts new file mode 100644 index 0000000000..a40232efbc --- /dev/null +++ b/v3/cypress/cypress.d.ts @@ -0,0 +1,21 @@ +export {} + +declare global { + namespace Cypress { + interface Cypress { + // added to Cypress config via cypress.*.json configuration files + config(key: "index"): string + } + interface Chainable { + /** + * Custom commands defined in commands.ts + */ + clickMenuItem(item: string): void + clickToUnselect(subject: Array<{ x: number, y: number }>, options?: { delay: number }): void + checkDragAttributeHighlights(source: string, attribute: string, target: string, exists?: boolean): void + dragAttributeToTarget(source: string, attribute: string, target: string, targetNumber?: number): void + mouseMoveBy(subject: JQuery, targetRect: DOMRect, options?: { delay: number }): void + pointerMoveBy(subject: JQuery, targetRect: DOMRect, options?: { delay: number }): void + } + } +} diff --git a/v3/cypress/e2e/adornments.spec.ts b/v3/cypress/e2e/adornments.spec.ts index 59f8391b90..373cabebcc 100644 --- a/v3/cypress/e2e/adornments.spec.ts +++ b/v3/cypress/e2e/adornments.spec.ts @@ -392,6 +392,7 @@ context("Graph adornments", () => { // The exact value of left may vary slightly depending on browser, screen resolution, etc. // The below checks that the value is within an expected range to accommodate these variations. // Modeled after https://github.com/cypress-io/cypress/issues/14722#issuecomment-767367519 + // @ts-expect-error -- type definition is incorrect: return value is property value not chained element .should("have.css", "left").should((left: string) => { expect(left).to.include("px") expect(parseInt(left, 10)).to.be.within(271, 273) diff --git a/v3/cypress/e2e/axis.spec.ts b/v3/cypress/e2e/axis.spec.ts index 9ce7df170c..357dbc4adb 100644 --- a/v3/cypress/e2e/axis.spec.ts +++ b/v3/cypress/e2e/axis.spec.ts @@ -15,18 +15,16 @@ const arrayOfValues = [ { attribute: "Mass", values: [ "0", "1000", "2000", "3000", "4000", "5000", "6000", "7000" ]}, // Y { attribute: "Sleep", values: [...Array(12).keys()].map(i => `${2 * i}`)}, // Y { attribute: "Speed", values: [ ]}, - { attribute: "Habitat", values: [ "both", "land", "water" ]}, - { attribute: "Diet", values: [ "both", "meat", "plants" ]}, + { attribute: "Habitat", values: [ "land", "water", "both" ]}, + { attribute: "Diet", values: [ "plants", "meat", "both" ]}, ] context("Test graph axes with various attribute types", () => { beforeEach(function () { - cy.log('Starting test setup') const queryParams = "?sample=mammals&dashboard&mouseSensor" const url = `${Cypress.config("index")}${queryParams}` cy.visit(url) - cy.wait(2500) - cy.log('Setup complete') + cy.wait(1000) }) it("will show default x axis label", () => { ah.verifyDefaultAxisLabel("bottom") @@ -35,7 +33,6 @@ context("Test graph axes with various attribute types", () => { it("will add categorical attribute to x axis with undo/redo", () => { // Adding the attribute cy.dragAttributeToTarget("table", arrayOfAttributes[7], "bottom") // Habitat => x-axis - cy.wait(2000) ah.verifyTickMarksDoNotExist("left") ah.verifyGridLinesDoNotExist("left") ah.verifyXAxisTickMarksDisplayed(true) @@ -46,22 +43,20 @@ context("Test graph axes with various attribute types", () => { // Undo adding the attribute cy.log("test undo/redo of add categorical attribute to x axis") + // undo removal of attribute _and_ dropping of attribute toolbar.getUndoTool().dblclick() - cy.wait(2000) - // Verify the attribute was added back + // Verify the attribute was removed ah.verifyTickMarksDoNotExist("bottom") ah.verifyGridLinesDoNotExist("bottom") // Redo adding the attribute toolbar.getRedoTool().click() - cy.wait(2000) // Verify the attribute was removed ah.verifyAxisTickLabels("bottom", arrayOfValues[7].values, true) }) it("will add numeric attribute to x axis with undo/redo", () => { // Adding the attribute cy.dragAttributeToTarget("table", arrayOfAttributes[2], "bottom") // LifeSpan => x-axis - cy.wait(2000) ah.verifyTickMarksDoNotExist("left") ah.verifyGridLinesDoNotExist("left") ah.verifyXAxisTickMarksDisplayed() @@ -72,21 +67,19 @@ context("Test graph axes with various attribute types", () => { // Undo adding the attribute cy.log("test undo/redo of add numeric attribute to x axis") + // undo removal of attribute _and_ dropping of attribute toolbar.getUndoTool().dblclick() - cy.wait(2000) // Verify the attribute was added back ah.verifyTickMarksDoNotExist("bottom") ah.verifyGridLinesDoNotExist("bottom") // Redo adding the attribute toolbar.getRedoTool().click() - cy.wait(2000) // Verify the attribute was removed ah.verifyAxisTickLabels("bottom", arrayOfValues[2].values) }) it("will add categorical attribute to y axis with undo/redo", () => { cy.dragAttributeToTarget("table", arrayOfAttributes[8], "left") // Diet => y-axis - cy.wait(2000) ah.verifyTickMarksDoNotExist("bottom") ah.verifyGridLinesDoNotExist("bottom") ah.verifyYAxisTickMarksDisplayed(true) @@ -95,21 +88,19 @@ context("Test graph axes with various attribute types", () => { ah.openAxisAttributeMenu("left") ah.removeAttributeFromAxis(arrayOfAttributes[8], "left") - // Undo the last change (remove attribute from bottom axis) cy.log("test undo/redo of add categorical attribute to y axis") + // undo removal of attribute _and_ dropping of attribute toolbar.getUndoTool().dblclick() - cy.wait(2000) ah.verifyTickMarksDoNotExist("bottom") ah.verifyGridLinesDoNotExist("bottom") - // Redo the last change (remove attribute from bottom axis) + // redo dropping of attribute _and_ removal of attribute toolbar.getRedoTool().dblclick() ah.verifyTickMarksDoNotExist("left") ah.verifyGridLinesDoNotExist("left") }) it("will add numeric attribute to y axis with undo/redo", () => { cy.dragAttributeToTarget("table", arrayOfAttributes[5], "left") // Sleep => y-axis - cy.wait(2000) ah.verifyTickMarksDoNotExist("bottom") ah.verifyGridLinesDoNotExist("bottom") ah.verifyYAxisTickMarksDisplayed() @@ -120,12 +111,12 @@ context("Test graph axes with various attribute types", () => { // Undo the last change (remove attribute from bottom axis) cy.log("test undo/redo of add numeric attribute to y axis") + // undo removal of attribute _and_ dropping of attribute toolbar.getUndoTool().dblclick() - cy.wait(2000) ah.verifyTickMarksDoNotExist("bottom") ah.verifyGridLinesDoNotExist("bottom") - // Redo the last change (remove attribute from bottom axis) + // redo dropping of attribute _and_ removal of attribute toolbar.getRedoTool().dblclick() ah.verifyTickMarksDoNotExist("left") ah.verifyGridLinesDoNotExist("left") @@ -133,7 +124,6 @@ context("Test graph axes with various attribute types", () => { it("will add categorical attribute to x axis and categorical attribute to y axis with undo/redo", () => { cy.dragAttributeToTarget("table", arrayOfAttributes[7], "bottom") // Habitat => x-axis cy.dragAttributeToTarget("table", arrayOfAttributes[8], "left") // Diet => y-axis - cy.wait(2000) ah.verifyXAxisTickMarksDisplayed(true) ah.verifyXAxisGridLinesDisplayed(true) ah.verifyYAxisTickMarksDisplayed(true) @@ -152,8 +142,8 @@ context("Test graph axes with various attribute types", () => { // Undo the last change (remove attribute from bottom axis) cy.log("test undo/redo of add categorical attribute to x axis and categorical attribute to y axis") + // undo removal of attribute _and_ dropping of attribute toolbar.getUndoTool().dblclick() - cy.wait(2000) ah.verifyXAxisTickMarksDisplayed(true) ah.verifyXAxisGridLinesDisplayed(true) ah.verifyYAxisTickMarksDisplayed(true) @@ -161,7 +151,7 @@ context("Test graph axes with various attribute types", () => { ah.verifyAxisTickLabels("bottom", arrayOfValues[7].values, true) ah.verifyAxisTickLabels("left", arrayOfValues[8].values, true) - // Redo the last change (remove attribute from bottom axis) + // redo dropping of attribute _and_ removal of attribute toolbar.getRedoTool().dblclick() ah.verifyTickMarksDoNotExist("left") ah.verifyGridLinesDoNotExist("left") @@ -169,7 +159,6 @@ context("Test graph axes with various attribute types", () => { it("will add categorical attribute to x axis and numeric attribute to y axis with undo/redo", () => { cy.dragAttributeToTarget("table", arrayOfAttributes[7], "bottom") // Habitat => x-axis cy.dragAttributeToTarget("table", arrayOfAttributes[5], "left") // Sleep => y-axis - cy.wait(2000) ah.verifyXAxisTickMarksDisplayed(true) ah.verifyXAxisGridLinesDisplayed(true) ah.verifyYAxisTickMarksDisplayed() @@ -186,10 +175,9 @@ context("Test graph axes with various attribute types", () => { ah.openAxisAttributeMenu("left") ah.removeAttributeFromAxis(arrayOfAttributes[5], "left") - // Undo the last change (remove attribute from bottom axis) cy.log("test undo/redo of add categorical attribute to x axis and numeric attribute to y axis") + // undo removal of attribute _and_ dropping of attribute toolbar.getUndoTool().dblclick() - cy.wait(2000) ah.verifyXAxisTickMarksDisplayed(true) ah.verifyXAxisGridLinesDisplayed(true) ah.verifyYAxisTickMarksDisplayed() @@ -197,7 +185,7 @@ context("Test graph axes with various attribute types", () => { ah.verifyAxisTickLabels("bottom", arrayOfValues[7].values, true) ah.verifyAxisTickLabels("left", arrayOfValues[5].values) - // Redo the last change (remove attribute from bottom axis) + // redo dropping of attribute _and_ removal of attribute toolbar.getRedoTool().dblclick() ah.verifyTickMarksDoNotExist("left") ah.verifyGridLinesDoNotExist("left") @@ -205,7 +193,6 @@ context("Test graph axes with various attribute types", () => { it("will add numeric attribute to x axis and categorical attribute to y axis with undo/redo", () => { cy.dragAttributeToTarget("table", arrayOfAttributes[3], "bottom") // Height => x-axis cy.dragAttributeToTarget("table", arrayOfAttributes[7], "left") // Habitat => y-axis - cy.wait(2000) ah.verifyXAxisTickMarksDisplayed() ah.verifyXAxisGridLinesNotDisplayed() ah.verifyYAxisTickMarksDisplayed(true) @@ -222,10 +209,9 @@ context("Test graph axes with various attribute types", () => { ah.openAxisAttributeMenu("bottom") ah.removeAttributeFromAxis(arrayOfAttributes[3], "bottom") - // Undo the last change (remove attribute from bottom axis) cy.log("test undo/redo of add numeric attribute to x axis and categorical attribute to y axis") + // undo removal of attribute _and_ dropping of attribute toolbar.getUndoTool().dblclick() - cy.wait(2000) ah.verifyXAxisTickMarksDisplayed() ah.verifyXAxisGridLinesNotDisplayed() ah.verifyYAxisTickMarksDisplayed(true) @@ -234,7 +220,7 @@ context("Test graph axes with various attribute types", () => { ah.verifyAxisTickLabels("left", arrayOfValues[7].values, true) ah.openAxisAttributeMenu("left") - // Redo the last change (remove attribute from bottom axis) + // redo dropping of attribute _and_ removal of attribute toolbar.getRedoTool().dblclick() ah.verifyTickMarksDoNotExist("left") ah.verifyGridLinesDoNotExist("left") @@ -242,7 +228,6 @@ context("Test graph axes with various attribute types", () => { it("will add numeric attribute to x axis and numeric attribute to y axis with undo/redo", () => { cy.dragAttributeToTarget("table", arrayOfAttributes[3], "bottom") // Height => x-axis cy.dragAttributeToTarget("table", arrayOfAttributes[4], "left") // Mass => y-axis - cy.wait(2000) ah.verifyXAxisTickMarksDisplayed() ah.verifyYAxisTickMarksDisplayed() ah.verifyAxisTickLabels("bottom", arrayOfValues[3].values) @@ -257,26 +242,23 @@ context("Test graph axes with various attribute types", () => { ah.openAxisAttributeMenu("bottom") ah.removeAttributeFromAxis(arrayOfAttributes[3], "bottom") - // Undo the last change (remove attribute from bottom axis) cy.log("test undo/redo of add numeric attribute to x axis and categorical attribute to y axis") + // undo removal of attribute _and_ dropping of attribute toolbar.getUndoTool().dblclick() - cy.wait(2000) ah.verifyXAxisTickMarksDisplayed() ah.verifyYAxisTickMarksDisplayed() ah.verifyAxisTickLabels("bottom", arrayOfValues[3].values) ah.verifyAxisTickLabels("left", arrayOfValues[4].values) - // Redo the last change (remove attribute from bottom axis) + // redo dropping of attribute _and_ removal of attribute toolbar.getRedoTool().dblclick() ah.verifyTickMarksDoNotExist("left") ah.verifyGridLinesDoNotExist("left") }) it("will split an axis into identical sub axes when categorical attribute is on opposite split", () => { cy.dragAttributeToTarget("table", arrayOfAttributes[4], "bottom") // Mass => x-axis - cy.wait(500) cy.get("[data-testid=graph]").find("[data-testid=axis-bottom]").find(".sub-axis-wrapper").should("have.length", 1) cy.dragAttributeToTarget("table", arrayOfAttributes[7], "top") // Habitat => top split - cy.wait(500) cy.get("[data-testid=graph]").find("[data-testid=axis-bottom]").find(".sub-axis-wrapper").should("have.length", 3) cy.get("[data-testid=graph]").find("[data-testid=axis-bottom]").find(".sub-axis-wrapper").each((wrapper) => { cy.wrap(wrapper).find(".tick").should("have.length", 4) @@ -289,17 +271,13 @@ context("Test graph axes with various attribute types", () => { }) ah.openAxisAttributeMenu("top") ah.removeAttributeFromAxis(arrayOfAttributes[7], "top") - cy.wait(500) cy.get("[data-testid=graph]").find("[data-testid=axis-bottom]").find(".sub-axis-wrapper").should("have.length", 1) }) it("will test graph with numeric x-axis and two numeric y-attributes", () => { cy.dragAttributeToTarget("table", arrayOfAttributes[2], "bottom") // Lifespan => x-axis - cy.wait(500) cy.get("[data-testid=graph]").find("[data-testid=axis-bottom]").find(".sub-axis-wrapper").should("have.length", 1) cy.dragAttributeToTarget("table", arrayOfAttributes[3], "left") // Height => left split - cy.wait(500) cy.dragAttributeToTarget("table", arrayOfAttributes[5], "yplus") // Sleep => left split - cy.wait(500) // checks for multiple y-axis labels ah.verifyXAxisTickMarksDisplayed() @@ -334,37 +312,30 @@ context("Test graph axes with various attribute types", () => { // When there are no negative numeric values, such as in the case of Height, the domain for the primary // axis of a univariate plot showing bars should start at zero. cy.dragAttributeToTarget("table", arrayOfAttributes[3], "bottom") // Height => x-axis - cy.wait(500) ah.verifyXAxisTickMarksDisplayed() ah.verifyAxisTickLabel("bottom", "−0.5", 0) // Changing to bars and verifying axis adjustment cy.get("[data-testid=graph-display-config-button").click() - cy.wait(500) cy.get("[data-testid=bars-radio-button]").click() - cy.wait(500) ah.verifyAxisTickLabel("bottom", "0", 0) // Undo the change to bars (expect to revert to points) cy.log("test undo/redo for adjust axis domain when points are changed to bars") toolbar.getUndoTool().click() - cy.wait(500) // Verify the axis label reverts to the initial state for points ah.verifyAxisTickLabel("bottom", "−0.5", 0) // Redo the change to bars toolbar.getRedoTool().click() - cy.wait(500) // Verify the axis label adjusts correctly for bars again ah.verifyAxisTickLabel("bottom", "0", 0) // Switch back to points without undo/redo to clean up state cy.get("[data-testid=graph-display-config-button").click() - cy.wait(500) cy.get("[data-testid=points-radio-button]").click() - cy.wait(500) ah.verifyAxisTickLabel("bottom", "−0.5", 0) }) }) @@ -402,16 +373,13 @@ context("Test graph axes attribute menu", () => { // Undo the addition of the categorical attribute // Used force:true because Cypress fails locally at this step toolbar.getUndoTool().click({force:true}) - cy.wait(500) // Verify the x-axis reverts to its default state after undoing the attribute addition ah.verifyTickMarksDoNotExist("bottom") ah.verifyGridLinesDoNotExist("bottom") - // Redo the addition of the categorical attribute toolbar.getRedoTool().click() - cy.wait(500) // Adjust wait time as needed for the redo action to be processed // Verify the x-axis reflects the re-addition of the categorical attribute ah.verifyTickMarksDoNotExist("left") @@ -434,16 +402,14 @@ context("Test graph axes attribute menu", () => { // Perform an undo action to revert the addition of the numeric attribute cy.log("test undo/redo for add and remove numeric attribute to axis from attribute menu") toolbar.getUndoTool().click() - cy.wait(500) // Wait for the undo action to process // Verify the x-axis reverts to its default state after undoing the attribute addition ah.verifyDefaultAxisLabel("bottom") // Perform a redo action to reapply the addition of the numeric attribute toolbar.getRedoTool().click() - cy.wait(500) // Wait for the redo action to process - // Verify the x-axis reflects the readdition of the numeric attribute + // Verify the x-axis reflects the re-addition of the numeric attribute ah.verifyTickMarksDoNotExist("left") ah.verifyGridLinesDoNotExist("left") ah.verifyXAxisTickMarksDisplayed() @@ -466,16 +432,14 @@ context("Test graph axes attribute menu", () => { // Undo the addition of the categorical attribute cy.log("test undo/redo for add/remove categorical attribute to y axis from attribute menu") toolbar.getUndoTool().click() - cy.wait(500) // Wait for the undo action to process // Verify the y-axis reverts to its default state after undoing the attribute addition ah.verifyDefaultAxisLabel("left") // Redo the addition of the categorical attribute toolbar.getRedoTool().click() - cy.wait(500) // Wait for the redo action to process - // Verify the y-axis reflects the readdition of the categorical attribute + // Verify the y-axis reflects the re-addition of the categorical attribute ah.verifyTickMarksDoNotExist("bottom") ah.verifyGridLinesDoNotExist("bottom") ah.verifyYAxisTickMarksDisplayed(true) @@ -497,16 +461,14 @@ context("Test graph axes attribute menu", () => { // Undo the addition of the numeric attribute cy.log("test undo/redo add and remove numeric attribute to y axis from attribute menu") toolbar.getUndoTool().click() - cy.wait(500) // Verify the y-axis reverts to its default state after undoing the attribute addition ah.verifyDefaultAxisLabel("left") // Redo the addition of the numeric attribute toolbar.getRedoTool().click() - cy.wait(500) - // Verify the y-axis reflects the readdition of the numeric attribute + // Verify the y-axis reflects the re-addition of the numeric attribute ah.verifyTickMarksDoNotExist("bottom") ah.verifyGridLinesDoNotExist("bottom") ah.verifyYAxisTickMarksDisplayed() @@ -531,7 +493,6 @@ context("Test graph axes attribute menu", () => { it("will treat numeric attribute on y axis to categorical", () => { ah.openAxisAttributeMenu("left") ah.addAttributeToAxis(arrayOfAttributes[3], "left") - cy.wait(2000) ah.openAxisAttributeMenu("left") ah.treatAttributeAsCategorical("left") ah.verifyTickMarksDoNotExist("bottom") diff --git a/v3/cypress/e2e/calculator.spec.ts b/v3/cypress/e2e/calculator.spec.ts index 84c3147fc3..16698883ea 100644 --- a/v3/cypress/e2e/calculator.spec.ts +++ b/v3/cypress/e2e/calculator.spec.ts @@ -37,7 +37,7 @@ context("Calculator", () => { c.changeComponentTitle("calculator", newCalculatorName) c.getComponentTitle("calculator").should("have.text", newCalculatorName) - c.getIconFromToolshelf("calc").click() + c.getIconFromToolShelf("calc").click() c.checkComponentDoesNotExist("calculator") cy.log("Check undo/redo of close and open calculator component") @@ -50,7 +50,7 @@ context("Calculator", () => { toolbar.getRedoTool().click() c.checkComponentDoesNotExist("calculator") - c.getIconFromToolshelf("calc").click() + c.getIconFromToolShelf("calc").click() c.checkComponentExists("calculator") c.getComponentTitle("calculator").should("contain", newCalculatorName) }) @@ -71,7 +71,7 @@ context("Calculator", () => { toolbar.getRedoTool().click() c.checkComponentDoesNotExist("calculator") - c.getIconFromToolshelf("calc").click() + c.getIconFromToolShelf("calc").click() c.checkComponentExists("calculator") c.getComponentTitle("calculator").should("contain", newCalculatorName) }) diff --git a/v3/cypress/e2e/formula/formula-component.spec.ts b/v3/cypress/e2e/formula/formula-component.spec.ts index 2c379c473f..5677ede022 100644 --- a/v3/cypress/e2e/formula/formula-component.spec.ts +++ b/v3/cypress/e2e/formula/formula-component.spec.ts @@ -12,7 +12,7 @@ context("Formula Engine", () => { fh.editFormula("Formula", "a+2") fh.verifyValues("Formula", [3, 4, 5, 5, 2]) }) - it("Add and edit formula for an existng attribute", () => { + it("Add and edit formula for an existing attribute", () => { fh.visitURL("?sample=four&dashboard") fh.addFormula("b", "count(a)") fh.verifyValues("b", [4, 4, 4, 4, 4]) diff --git a/v3/cypress/e2e/graph.spec.ts b/v3/cypress/e2e/graph.spec.ts index dd4d77a419..9b9fd87a3e 100644 --- a/v3/cypress/e2e/graph.spec.ts +++ b/v3/cypress/e2e/graph.spec.ts @@ -26,7 +26,7 @@ context.skip("Test graph plot transitions", () => { plots.forEach(test => { it.skip(`${test.testName}`, () => { - c.getIconFromToolshelf("graph").click() + c.getIconFromToolShelf("graph").click() c.moveComponent("graph", 1000) test.axes.forEach(hash => { hash.checks.forEach(check => { @@ -70,7 +70,7 @@ context("Graph UI", () => { cy.log(`Initial CODAP Graph Count: ${initialCount}`) // perform an action that gets a new graph - c.getIconFromToolshelf("graph").click() + c.getIconFromToolShelf("graph").click() // cy.wait(1000) c.getComponentTitle("graph").should("contain", collectionName) c.getComponentTitle("graph", 1).should("contain", collectionName) @@ -90,12 +90,12 @@ context("Graph UI", () => { it("creates graphs with new collection names when existing ones are closed", () => { c.closeComponent("graph") c.checkComponentDoesNotExist("graph") - c.getIconFromToolshelf("graph").click() + c.getIconFromToolShelf("graph").click() c.getComponentTitle("graph").should("contain", collectionName) c.closeComponent("graph") c.checkComponentDoesNotExist("graph") - c.getIconFromToolshelf("graph").click() + c.getIconFromToolShelf("graph").click() c.getComponentTitle("graph").should("contain", collectionName) }) it("checks all graph tooltips", () => { @@ -277,7 +277,7 @@ context("Graph UI", () => { cy.get("[data-testid=parent-toggles-last]").click() cy.wait(250) cy.get("[data-testid=parent-toggles-last]").should("have.text", "☒ Last") - cy.get("[data-testid=parent-toggles-case-buttons-list]").find("button").then((buttons: HTMLButtonElement[]) => { + cy.get("[data-testid=parent-toggles-case-buttons-list]").find("button").then((buttons) => { const lastButtonIndex = buttons.length - 1 buttons.each((i: number, button: HTMLButtonElement) => { if (i !== lastButtonIndex) { @@ -533,12 +533,12 @@ context("Graph UI", () => { .trigger("mouseup", { force: true, view: win }) }) graph.getDisplayConfigButton().click() - cy.get("[data-testid=graph-bin-width-setting]").find("input").invoke("val").then((valueStr: string) => { - const valueNum = parseFloat(valueStr) + cy.get("[data-testid=graph-bin-width-setting]").find("input").invoke("val").then((value) => { + const valueNum = parseFloat(value as string) expect(valueNum).to.be.closeTo(2.75, 0.25) }) - cy.get("[data-testid=graph-bin-alignment-setting]").find("input").invoke("val").then((valueStr: string) => { - const valueNum = parseFloat(valueStr) + cy.get("[data-testid=graph-bin-alignment-setting]").find("input").invoke("val").then((value) => { + const valueNum = parseFloat(value as string) expect(valueNum).to.be.closeTo(4, 0.1) }) }) diff --git a/v3/cypress/e2e/hierarchical-table.spec.ts b/v3/cypress/e2e/hierarchical-table.spec.ts index 9d5bb78e09..ff53da69df 100644 --- a/v3/cypress/e2e/hierarchical-table.spec.ts +++ b/v3/cypress/e2e/hierarchical-table.spec.ts @@ -1,5 +1,7 @@ import { TableTileElements as table } from "../support/elements/table-tile" import hierarchical from '../fixtures/hierarchical.json' +type HierarchicalTest = typeof hierarchical.tests[number] & { only?: boolean } + const values = hierarchical.attributes context("hierarchical collections", () => { @@ -11,7 +13,7 @@ context("hierarchical collections", () => { cy.wait(2500) cy.log('Setup complete') }) - hierarchical.tests.forEach((h) => { + hierarchical.tests.forEach((h: HierarchicalTest) => { // FIXME: enable skipped tests const itOrSkip = h.skip ? it.skip : h.only ? it.only : it itOrSkip(`${h.testName}`, () => { diff --git a/v3/cypress/e2e/map.spec.ts b/v3/cypress/e2e/map.spec.ts index 4df2f61683..9428831617 100644 --- a/v3/cypress/e2e/map.spec.ts +++ b/v3/cypress/e2e/map.spec.ts @@ -28,20 +28,20 @@ context("Map UI", () => { cy.log("updates map title") cfm.openLocalDoc(filename1) - c.getIconFromToolshelf("map").click() + c.getIconFromToolShelf("map").click() c.getComponentTitle("map").should("have.text", componentName) c.changeComponentTitle("map", newComponentName) c.getComponentTitle("map").should("have.text", newComponentName) cy.log("creates maps with new component name") - c.getIconFromToolshelf("map").click() + c.getIconFromToolShelf("map").click() c.getComponentTitle("map").should("contain", componentName) c.getComponentTitle("map", 1).should("contain", componentName) }) it("checks all map tooltips", () => { cfm.openLocalDoc(filename1) - c.getIconFromToolshelf("map").click() + c.getIconFromToolShelf("map").click() c.selectTile("map", 0) toolbar.getToolShelfIcon("map").then($element => { @@ -78,7 +78,7 @@ context("Map UI", () => { // flaky test skipped in PR #1239, see PT #187534790 it.skip("checks numerical and categorical attributes for map legend", () => { cfm.openLocalDoc(filename2) - c.getIconFromToolshelf("map").click() + c.getIconFromToolShelf("map").click() cy.dragAttributeToTarget("attribute", arrayOfAttributes[0], "map") mlh.verifyLegendLabel(arrayOfAttributes[0]) @@ -117,7 +117,7 @@ context("Map UI", () => { }) it("checks show/hide selected/unselected/all map boundaries", () => { cfm.openLocalDoc(filename2) - c.getIconFromToolshelf("map").click() + c.getIconFromToolShelf("map").click() c.selectTile("map", 0) map.selectHideShowButton() @@ -142,7 +142,7 @@ context("Map UI", () => { }) it("checks show/hide selected/unselected/all map points", () => { cfm.openLocalDoc(filename1) - c.getIconFromToolshelf("map").click() + c.getIconFromToolShelf("map").click() c.selectTile("map", 0) map.selectHideShowButton() @@ -168,7 +168,7 @@ context("Map UI", () => { // flaky test skipped in PR #1239, see PT #187534790 it.skip("checks show/hide map boundaries with legend selections", () => { cfm.openLocalDoc(filename2) - c.getIconFromToolshelf("map").click() + c.getIconFromToolShelf("map").click() cy.dragAttributeToTarget("attribute", arrayOfAttributes[0], "map") mlh.verifyCategoricalLegend(arrayOfValues[0].values.length) @@ -209,7 +209,7 @@ context("Map UI", () => { // flaky test skipped in PR #1239, see PT #187534790 it.skip("checks show/hide map points with legend selections", () => { cfm.openLocalDoc(filename1) - c.getIconFromToolshelf("map").click() + c.getIconFromToolShelf("map").click() cy.wait(1000) cy.dragAttributeToTarget("attribute", arrayOfAttributes[2], "map") @@ -251,7 +251,7 @@ context("Map UI", () => { // flaky test skipped in PR #1239, see PT #187534790 it.skip("checks legend attribute menu", () => { cfm.openLocalDoc(filename2) - c.getIconFromToolshelf("map").click() + c.getIconFromToolShelf("map").click() cy.dragAttributeToTarget("attribute", arrayOfAttributes[0], "map") mlh.verifyLegendLabel(arrayOfAttributes[0]) @@ -280,7 +280,7 @@ context("Map UI", () => { it("shows connecting lines when Connecting Lines option is checked", () => { cfm.openLocalDoc(filename1) - c.getIconFromToolshelf("map").click() + c.getIconFromToolShelf("map").click() c.selectTile("map", 0) cy.wait(2000) cy.get("[data-testid=connecting-lines-map-1").find("path").should("have.length", 0) diff --git a/v3/cypress/e2e/plugin.spec.ts b/v3/cypress/e2e/plugin.spec.ts index 298cdb5460..da5cdf2f01 100644 --- a/v3/cypress/e2e/plugin.spec.ts +++ b/v3/cypress/e2e/plugin.spec.ts @@ -165,12 +165,12 @@ context("codap plugins", () => { webView.toggleAPITesterFilter() cy.log("Broadcast dataContextCountChanged notifications when dataset is added to document") - table.createNewTableFromToolshelf() + table.createNewTableFromToolShelf() webView.confirmAPITesterResponseContains(/"operation":\s"dataContextCountChanged/) webView.clearAPITesterResponses() cy.log("Broadcast dataContextDeleted notifications when dataset is deleted") - table.deleteDataSetFromToolshelf(1) + table.deleteDataSetFromToolShelf(1) webView.confirmAPITesterResponseContains(/"operation":\s"dataContextDeleted/) webView.confirmAPITesterResponseContains(/"deletedContext":\s"New\sDataset/) webView.clearAPITesterResponses() @@ -273,7 +273,7 @@ context("codap plugins", () => { cy.log("Broadcast notifications involving dragging") const url = `${Cypress.config("index")}?mouseSensor` cy.visit(url) - table.createNewTableFromToolshelf() + table.createNewTableFromToolShelf() table.addNewAttribute() table.addNewAttribute() openAPITester() diff --git a/v3/cypress/e2e/slider.spec.ts b/v3/cypress/e2e/slider.spec.ts index a1cd7c4e9f..d57dfd89bb 100644 --- a/v3/cypress/e2e/slider.spec.ts +++ b/v3/cypress/e2e/slider.spec.ts @@ -151,7 +151,7 @@ context("Slider UI", () => { slider.checkPlayButtonIsPaused() }) it("creates another slider from toolshelf", () => { - c.getIconFromToolshelf("slider").click() + c.getIconFromToolShelf("slider").click() c.getComponentTitle("slider").should("contain", sliderName) slider.getVariableName().should("have.text", sliderName) @@ -165,7 +165,7 @@ context("Slider UI", () => { }) it("checks editing variable name in one slider only affects that slider", () => { const newSliderName = "xyz" - c.getIconFromToolshelf("slider").click() + c.getIconFromToolShelf("slider").click() slider.changeVariableName(newSliderName, 1) c.getComponentTitle("slider", 0).should("contain", sliderName) @@ -175,14 +175,14 @@ context("Slider UI", () => { }) it("checks editing variable value in one slider only affects that slider", () => { const newVariableValue = "100" - c.getIconFromToolshelf("slider").click() + c.getIconFromToolShelf("slider").click() slider.changeVariableValue(newVariableValue, 1) slider.getVariableValue(0).should("contain", initialSliderValue) slider.getVariableValue(1).should("contain", newVariableValue) }) it("checks playing in one slider only plays that slider", () => { - c.getIconFromToolshelf("slider").click() + c.getIconFromToolShelf("slider").click() slider.setAnimationRate(3, 1) slider.checkPlayButtonIsPaused(0) @@ -205,7 +205,7 @@ context("Slider UI", () => { slider.checkPlayButtonIsPaused(1) }) it("creates sliders with incrementing names", () => { - c.getIconFromToolshelf("slider").click() + c.getIconFromToolShelf("slider").click() c.getComponentTitle("slider").should("contain", sliderName) slider.getVariableName().should("have.text", sliderName) @@ -217,7 +217,7 @@ context("Slider UI", () => { slider.getVariableValue(1).should("contain", initialSliderValue) slider.checkPlayButtonIsPaused(1) - c.getIconFromToolshelf("slider").click() + c.getIconFromToolShelf("slider").click() c.getComponentTitle("slider", 2).should("contain", "v3") slider.getVariableName(2).should("have.text", "v3") slider.getVariableValue(2).should("contain", initialSliderValue) @@ -226,7 +226,7 @@ context("Slider UI", () => { it("reuses slider names after existing ones are closed", () => { c.closeComponent("slider") c.checkComponentDoesNotExist("slider") - c.getIconFromToolshelf("slider").click() + c.getIconFromToolShelf("slider").click() c.getComponentTitle("slider").should("contain", "v1") slider.getVariableName().should("have.text", "v1") @@ -235,7 +235,7 @@ context("Slider UI", () => { c.closeComponent("slider") c.checkComponentDoesNotExist("slider") - c.getIconFromToolshelf("slider").click() + c.getIconFromToolShelf("slider").click() c.getComponentTitle("slider").should("contain", "v1") slider.getVariableName().should("have.text", "v1") diff --git a/v3/cypress/e2e/table.spec.ts b/v3/cypress/e2e/table.spec.ts index 1a6107deaa..9269237ddc 100644 --- a/v3/cypress/e2e/table.spec.ts +++ b/v3/cypress/e2e/table.spec.ts @@ -5,9 +5,9 @@ import { FormulaHelper as fh } from "../support/helpers/formula-helper" const numOfAttributes = 10 const firstRowIndex = 2 -let lastRowIndex = undefined -let middleRowIndex = undefined -let numOfCases = undefined +let lastRowIndex = -1 +let middleRowIndex = -1 +let numOfCases = "0" const collectionName = "Mammals" const renamedCollectionName = "Animals" const newCollectionName = "New Dataset" @@ -24,7 +24,7 @@ beforeEach(() => { cy.wait(1000) table.getNumOfAttributes().should("equal", numOfAttributes.toString()) table.getNumOfRows().then($cases => { - numOfCases = $cases + numOfCases = $cases ?? "0" lastRowIndex = Number($cases) - 1 middleRowIndex = Math.min(5, Math.floor(lastRowIndex / 2)) }) @@ -123,7 +123,8 @@ context("case table ui", () => { cy.get("[data-testid=dataset-description-input]").should("have.value", newDescription) }) it("select a case and delete the case from inspector menu", () => { - let initialRowCount, postDeleteRowCount + let initialRowCount = 0 + let postDeleteRowCount: number | undefined // Get initial row count table.getNumOfRows().then(rowCount => { @@ -164,8 +165,8 @@ context("case table ui", () => { }) }) it("select a case and delete unselected cases from inspector menu", () => { - let initialRowCount // Declare variable to hold initial row count - let postDeleteRowCount // Declare variable to hold row count after delete + let initialRowCount: number | undefined + let postDeleteRowCount: number | undefined // Get initial row count table.getNumOfRows().then(rowCount => { @@ -209,8 +210,8 @@ context("case table ui", () => { }) }) it("check delete all cases from inspector menu", () => { - let initialRowCount // Declare variable to hold initial row count - let postInsertRowCount // Declare variable to hold row count after delete + let initialRowCount: number | undefined + let postInsertRowCount: number | undefined // Get initial row count table.getNumOfRows().then(rowCount => { @@ -497,7 +498,7 @@ context("case table ui", () => { describe("index menu", () => { it("verify index menu insert case and delete case work", () => { - let initialRowCount, postInsertRowCount, postDeleteRowCount + let initialRowCount = 0, postInsertRowCount, postDeleteRowCount // Get initial row count table.getNumOfRows().then(rowCount => { @@ -682,7 +683,7 @@ context("case table ui", () => { table.getCaseTableGrid().scrollTo("bottom") table.openIndexMenuForRow(lastRowIndex) table.deleteCase() - numOfCases = (Number(numOfCases) - 1).toString() + numOfCases = `${Number(numOfCases) - 1}` // TODO: Add assertions here to verify the case is restored (PT ##187127871) // For example, check the number of rows or a specific row's content @@ -770,7 +771,7 @@ context("case table ui", () => { table.getCaseTableGrid().scrollTo("top") table.openIndexMenuForRow(firstRowIndex) table.deleteCase() - numOfCases = (Number(numOfCases) - 1).toString() + numOfCases = `${Number(numOfCases) - 1}` // Use the toolbar to undo the last action cy.log("check for undo/redo after deletion of first case") @@ -862,7 +863,7 @@ context("case table ui", () => { table.getCaseTableGrid().scrollTo("top") table.openIndexMenuForRow(middleRowIndex) table.deleteCase() - numOfCases = (Number(numOfCases) - 1).toString() + numOfCases = `${Number(numOfCases) - 1}` // Use the toolbar to undo the last action cy.log("check for undo/redo after deletion of case in the middle row") @@ -889,23 +890,23 @@ context("case table ui", () => { // See PT #187033159 }) it("creates tables with new collection name", () => { - table.createNewTableFromToolshelf() + table.createNewTableFromToolShelf() c.getComponentTitle("table").should("contain", collectionName) c.getComponentTitle("table", 1).should("contain", newCollectionName) - table.createNewTableFromToolshelf() + table.createNewTableFromToolShelf() c.getComponentTitle("table", 2).should("contain", newCollectionName) }) it("creates tables with new collection names when existing ones are closed", () => { c.closeComponent("table") c.checkComponentDoesNotExist("table") - table.createNewTableFromToolshelf() + table.createNewTableFromToolShelf() c.getComponentTitle("table").should("contain", newCollectionName) c.closeComponent("table") c.checkComponentDoesNotExist("table") - table.createNewTableFromToolshelf() + table.createNewTableFromToolShelf() c.getComponentTitle("table").should("contain", newCollectionName) }) it("closes and reopens existing case tables with undo and redo", () => { @@ -925,7 +926,7 @@ context("case table ui", () => { // Asserts table is closed again c.checkComponentDoesNotExist("table") - table.openExistingTableFromToolshelf(collectionName) + table.openExistingTableFromToolShelf(collectionName) c.getComponentTitle("table").should("contain", collectionName) }) it("checks all table tooltips", () => { diff --git a/v3/cypress/e2e/toolbar.spec.ts b/v3/cypress/e2e/toolbar.spec.ts index 8a15a43221..ebec431095 100644 --- a/v3/cypress/e2e/toolbar.spec.ts +++ b/v3/cypress/e2e/toolbar.spec.ts @@ -15,36 +15,36 @@ context("codap toolbar", () => { cy.log('Setup complete') }) it("will open a new table", () => { - c.getIconFromToolshelf("table").click() + c.getIconFromToolShelf("table").click() toolbar.getNewCaseTable().click() table.getCollection().should("be.visible") c.getComponentTitle("table").should("have.text", "New Dataset") - c.getIconFromToolshelf("table").click() - toolbar.getDatasetListedInToolshelf("New Dataset").should("be.visible") + c.getIconFromToolShelf("table").click() + toolbar.getDatasetListedInToolShelf("New Dataset").should("be.visible") }) it("will open a graph", () => { - c.getIconFromToolshelf("graph").click() + c.getIconFromToolShelf("graph").click() graph.getGraphTile().should("be.visible") // graphs with no associated data set should not have a title c.getComponentTitle("graph").should("have.text", "") }) it("will open a map", () => { - c.getIconFromToolshelf("map").click() + c.getIconFromToolShelf("map").click() map.getMapTile().should("be.visible") c.getComponentTitle("map").should("have.text", "Map") }) it("will open a slider", () => { - c.getIconFromToolshelf("slider").click() + c.getIconFromToolShelf("slider").click() slider.getSliderTile().should("be.visible") c.getComponentTitle("slider").should("have.text", "v1") }) it("will open a calculator", () => { - c.getIconFromToolshelf("calc").click() + c.getIconFromToolShelf("calc").click() calculator.getCalculatorTile().should("be.visible") c.getComponentTitle("calculator").should("have.text", "Calculator") }) it("plugin menu works", () => { - c.getIconFromToolshelf("plugins").should("exist").click() + c.getIconFromToolShelf("plugins").should("exist").click() toolbar.getPluginSelection().should("have.length", 9) webView.getTitle().should("not.exist") toolbar.getPluginSelection().eq(0).click() @@ -69,11 +69,11 @@ context("codap toolbar", () => { }) it('will show a list of open tiles when there is no data context', ()=>{ // Don't open a table as this automatically creates a data context - c.getIconFromToolshelf("graph").click() - c.getIconFromToolshelf("map").click() - c.getIconFromToolshelf("slider").click() - c.getIconFromToolshelf("calc").click() - c.getIconFromToolshelf("plugins").click() + c.getIconFromToolShelf("graph").click() + c.getIconFromToolShelf("map").click() + c.getIconFromToolShelf("slider").click() + c.getIconFromToolShelf("calc").click() + c.getIconFromToolShelf("plugins").click() toolbar.getPluginSelection().eq(0).click() //TODO need to add check for Text component toolbar.getTilesButton().click() @@ -92,7 +92,7 @@ context("codap toolbar", () => { toolbar.getTilesListMenuIcon().eq(4).should("have.class", "WebView") }) it('will show correct title for a new table', ()=>{ - c.getIconFromToolshelf("table").click() + c.getIconFromToolShelf("table").click() toolbar.getNewCaseTable().click() toolbar.getTilesButton().click() toolbar.getTilesListMenu().should("be.visible") diff --git a/v3/cypress/support/commands.ts b/v3/cypress/support/commands.ts index a9ed56413e..623f4ac99f 100644 --- a/v3/cypress/support/commands.ts +++ b/v3/cypress/support/commands.ts @@ -130,7 +130,7 @@ Cypress.Commands.add("dragAttributeToTarget", (source, attribute, target, target }) }) }) - cy.wait(2500) + cy.wait(1000) }) Cypress.Commands.add("clickToUnselect", (subject, options?: { delay: number }) => { diff --git a/v3/cypress/support/elements/axis-elements.ts b/v3/cypress/support/elements/axis-elements.ts index 0c7fa998fc..ad1c8ef1a7 100644 --- a/v3/cypress/support/elements/axis-elements.ts +++ b/v3/cypress/support/elements/axis-elements.ts @@ -2,7 +2,7 @@ export const AxisElements = { getGraphTile() { return cy.get(".codap-graph") }, - getAxisElement(axis) { + getAxisElement(axis: string) { switch (axis) { case "bottom": case "left": @@ -12,16 +12,16 @@ export const AxisElements = { return this.getGraphTile().find("[data-testid=axis-legend-attribute-button-legend]") } }, - getDroppableAxis(axis) { + getDroppableAxis(axis: string) { return this.getGraphTile().find(`[data-testid^=add-attribute-drop-${axis}]`) }, - getAxisLabel(axis) { + getAxisLabel(axis: string) { return this.getAxisElement(axis).find("[data-testid=attribute-label]") }, - getDefaultAxisLabel(axis) { + getDefaultAxisLabel(axis: string) { return this.getAxisElement(axis).find("[data-testid=empty-label]") }, - getTickMarks(axis, categorical = false) { + getTickMarks(axis: string, categorical = false) { switch (categorical) { case true: return this.getAxisElement(axis).find("[data-testid=tick]") @@ -29,20 +29,20 @@ export const AxisElements = { return this.getAxisElement(axis).find(".tick line") } }, - getTickMark(axis, index, categorical = false) { + getTickMark(axis: string, index: number, categorical = false) { return this.getTickMarks(axis, categorical).eq(index) }, - getTickLength(axis, attr, categorical = false) { + getTickLength(axis: string, attr: string, categorical = false) { return this.getTickMark(axis, 0, categorical).invoke("attr", attr).then(tickLength => { - return parseInt(tickLength, 10) + return parseInt(`${tickLength}`, 10) }) }, - getGridLineLength(axis, attr, categorical = false) { + getGridLineLength(axis: string, attr: string, categorical = false) { return this.getGridLine(axis, 0, categorical).invoke("attr", attr).then(lineLength => { - return parseInt(lineLength, 10) + return parseInt(`${lineLength}`, 10) }) }, - getGridLines(axis, categorical = false) { + getGridLines(axis: string, categorical = false) { switch (categorical) { case true: return this.getAxisElement(axis).find("[data-testid=category-on-axis] [data-testid=divider]") @@ -50,10 +50,10 @@ export const AxisElements = { return this.getAxisElement(axis).find(".tick line") } }, - getGridLine(axis, index, categorical = false) { + getGridLine(axis: string, index: number, categorical = false) { return this.getGridLines(axis, categorical).eq(index) }, - getAxisTickLabels(axis, categorical = false) { + getAxisTickLabels(axis: string, categorical = false) { switch (categorical) { case true: return this.getAxisElement(axis).find("[data-testid=category-on-axis] [data-testid=category-label]") @@ -61,22 +61,22 @@ export const AxisElements = { return this.getAxisElement(axis).find(".tick text") } }, - getAxisTickLabel(axis, index, categorical = false) { + getAxisTickLabel(axis: string, index: number, categorical = false) { return this.getAxisTickLabels(axis, categorical).eq(index) }, - isAxisTickLabelOrientationTransformed(axis, index, categorical = false) { + isAxisTickLabelOrientationTransformed(axis: string, index: number, categorical = false) { return this.getAxisTickLabels(axis, categorical).eq(index).invoke("attr", "transform").should("exist") }, - dragAttributeToAxis(name, axis) { + dragAttributeToAxis(name: string, axis: string) { cy.dragAttributeToTarget("graph", name, axis) }, - getAxisAttributeMenu(axis) { + getAxisAttributeMenu(axis: string) { return this.getGraphTile().find(`[data-testid=attribute-label-menu-${axis}]`) }, - getAxisAttributeMenuButton(axis) { + getAxisAttributeMenuButton(axis: string) { return this.getGraphTile().find(`[data-testid=axis-legend-attribute-button-${axis}]`) }, - getAttributeFromAttributeMenu(axis) { + getAttributeFromAttributeMenu(axis: string) { return this.getAxisAttributeMenu(axis).parent() } } diff --git a/v3/cypress/support/elements/calculator-tile.ts b/v3/cypress/support/elements/calculator-tile.ts index c6f2fcf334..5a37da5614 100644 --- a/v3/cypress/support/elements/calculator-tile.ts +++ b/v3/cypress/support/elements/calculator-tile.ts @@ -4,15 +4,15 @@ export const CalculatorTileElements = { getCalculatorTile() { return c.getComponentTile("calculator") }, - getCalcButton(button) { + getCalcButton(button: string) { return this.getCalculatorTile().find("[data-testid=calc-button]").contains(button) }, - enterExpression(expression) { + enterExpression(expression: string) { Array.from(expression).forEach(char => { this.getCalcButton(char).click() }) }, - checkCalculatorDisplay(answer) { + checkCalculatorDisplay(answer: string) { this.getCalculatorTile().find("[data-testid=calc-input]").should("have.text", answer) } } diff --git a/v3/cypress/support/elements/component-elements.ts b/v3/cypress/support/elements/component-elements.ts index 236afd4ab8..67a0f8c887 100644 --- a/v3/cypress/support/elements/component-elements.ts +++ b/v3/cypress/support/elements/component-elements.ts @@ -30,22 +30,22 @@ export const ComponentElements = { tableHideShowButton: "Show all cases or hide selected/unselected cases", tableRulerButton: "Make new attributes. Export case data." }, - getComponentSelector(component) { + getComponentSelector(component: string) { return cy.get(`.codap-component[data-testid$=${component}]`) }, - getComponentTile(component, index = 0) { + getComponentTile(component: string, index = 0) { return this.getComponentSelector(component).then(element => { return element.eq(index) }) }, - getComponentTitleBar(component, index = 0) { + getComponentTitleBar(component: string, index = 0) { return this.getComponentTile(component, index).find(".component-title-bar") }, - checkComponentFocused(component, focused = true, index = 0) { + checkComponentFocused(component: string, focused = true, index = 0) { const check = `${focused ? "" : "not."}have.class` this.getComponentTitleBar(component, index).should(check, "focusTile") }, - getComponentTitle(component, index = 0) { + getComponentTitle(component: string, index = 0) { return this.getComponentTile(component, index).find("[data-testid=title-text]") }, changeComponentTitle(component: string, title: string, index = 0) { @@ -55,32 +55,32 @@ export const ComponentElements = { getInspectorPanel() { return cy.get("[data-testid=inspector-panel]") }, - getMinimizeButton(component, index = 0) { + getMinimizeButton(component: string, index = 0) { return this.getComponentTile(component, index).find("[data-testid=component-minimize-button]") }, - getCloseButton(component, index = 0) { + getCloseButton(component: string, index = 0) { return this.getComponentTile(component, index).find("[data-testid=component-close-button]") }, - getResizeControl(component, index = 0) { + getResizeControl(component: string, index = 0) { return this.getComponentTile(component, index).find(".codap-component-corner.bottom-right") }, - checkToolTip(element, tooltipText) { + checkToolTip(element: JQuery, tooltipText: string) { cy.wrap(element).invoke("attr", "title").should("contain", tooltipText) }, - getIconFromToolshelf(component) { + getIconFromToolShelf(component: string) { return toolbar.getToolShelfIcon(component) }, - selectTile(component, index = 0) { + selectTile(component: string, index = 0) { cy.get(".codap-container").click("bottom") this.getComponentTile(component, index).click() }, - checkComponentDoesNotExist(component) { + checkComponentDoesNotExist(component: string) { this.getComponentSelector(component).should("not.exist") }, - checkComponentExists(component) { + checkComponentExists(component: string) { this.getComponentSelector(component).should("exist") }, - moveComponent(component, x, index = 0) { + moveComponent(component: string, x: number, index = 0) { this.getComponentTitle(component, index) .trigger("mousedown", { force: true }) .wait(100) @@ -88,7 +88,7 @@ export const ComponentElements = { .wait(100) .trigger("mouseup", { force: true }) }, - closeComponent(component, index = 0) { + closeComponent(component: string, index = 0) { this.selectTile(component, index) this.getCloseButton(component, index).click({ force: true }) } diff --git a/v3/cypress/support/elements/graph-legend-elements.ts b/v3/cypress/support/elements/graph-legend-elements.ts index bedc6ebfa8..8dfe381e22 100644 --- a/v3/cypress/support/elements/graph-legend-elements.ts +++ b/v3/cypress/support/elements/graph-legend-elements.ts @@ -11,7 +11,7 @@ export const GraphLegendElements = { getCategoricalLegendCategories() { return this.getLegend().find("[data-testid=legend-key]") }, - getCategoricalLegendCategory(name) { + getCategoricalLegendCategory(name: string) { return this.getCategoricalLegendCategories().contains(name) }, getNumericLegendCategories() { diff --git a/v3/cypress/support/elements/map-legend-elements.ts b/v3/cypress/support/elements/map-legend-elements.ts index 9694622aa8..6d81aa5a14 100644 --- a/v3/cypress/support/elements/map-legend-elements.ts +++ b/v3/cypress/support/elements/map-legend-elements.ts @@ -11,7 +11,7 @@ export const MapLegendElements = { getCategoricalLegendCategories() { return this.getLegend().find("[data-testid=legend-key]") }, - getCategoricalLegendCategory(name) { + getCategoricalLegendCategory(name: string) { return this.getCategoricalLegendCategories().contains(name) }, getNumericLegendCategories() { diff --git a/v3/cypress/support/elements/point-elements.ts b/v3/cypress/support/elements/point-elements.ts index b371f3e693..7de2dde956 100644 --- a/v3/cypress/support/elements/point-elements.ts +++ b/v3/cypress/support/elements/point-elements.ts @@ -2,16 +2,16 @@ export const PointElements = { getGraphTile() { return cy.get(".codap-graph") }, - getPointOnGraph(index) { + getPointOnGraph(index: number) { return this.getGraphTile().find(".graph-dot-area circle").eq(index) }, - selectPointOnGraph(index) { + selectPointOnGraph(index: number) { this.getPointOnGraph(index).click() }, unselectPointOnGraph() { this.getGraphTile().find(".graph-dot-area").click() }, - hoverOverPointOnGraph(index) { + hoverOverPointOnGraph(index: number) { this.getPointOnGraph(index).trigger('mouseover') }, getPointDataTip() { @@ -29,20 +29,20 @@ export const PointElements = { unselectAllPointsOnGraph() { this.getGraphTile().find(".graph-dot-area").click() }, - getPointSize(index) { + getPointSize(index: number) { return this.getPointOnGraph(index).invoke("attr", "r") }, - getPointColor(index) { + getPointColor(index: number) { return this.getPointOnGraph(index).invoke("attr", "style").then($style => { - return $style.substring($style.indexOf("fill:") + 1, $style.indexOf(")")) + return $style?.substring($style.indexOf("fill:") + 1, $style.indexOf(")")) }) }, - getPointStroke(index) { + getPointStroke(index: number) { return this.getPointOnGraph(index).invoke("attr", "style").then($style => { - return $style.substring($style.indexOf("stroke:") + 1, $style.indexOf(")")) + return $style?.substring($style.indexOf("stroke:") + 1, $style.indexOf(")")) }) }, - verifyGraphPointDataToolTip(tooltip) { + verifyGraphPointDataToolTip(tooltip: string) { cy.get("[data-testid=graph-point-data-tip]").should("have.text", tooltip) } } diff --git a/v3/cypress/support/elements/slider-tile.ts b/v3/cypress/support/elements/slider-tile.ts index 118c41d223..6229c110a1 100644 --- a/v3/cypress/support/elements/slider-tile.ts +++ b/v3/cypress/support/elements/slider-tile.ts @@ -10,7 +10,7 @@ export const SliderTileElements = { getVariableNameInput(index = 0) { return this.getSliderTile(index).find("[data-testid=slider-variable-name-text-input]") }, - changeVariableName(name, index = 0) { + changeVariableName(name: string, index = 0) { this.getVariableName(index).click() this.getVariableNameInput(index).clear() this.getVariableNameInput(index).type(`${name}{enter}`) @@ -21,7 +21,7 @@ export const SliderTileElements = { getVariableValueInput(index = 0) { return this.getSliderTile(index).find("[data-testid=slider-variable-value-text-input]") }, - changeVariableValue(value, index = 0) { + changeVariableValue(value: number | string, index = 0) { this.getVariableValueInput(index).click() this.getVariableValueInput(index).clear() this.getVariableValueInput(index).type(`${value}{enter})`) @@ -58,12 +58,12 @@ export const SliderTileElements = { getMultipleRestriction() { return c.getInspectorPanel().find("[data-testid=slider-restrict-multiples]") }, - setMultipleRestriction(multiple, index = 0) { + setMultipleRestriction(multiple: string, index = 0) { c.selectTile("slider", index) this.clickInspectorPanel() this.getMultipleRestriction().find("input").type(`${multiple}{enter}`) }, - checkMultipleRestriction(multiple, index = 0) { + checkMultipleRestriction(multiple: string, index = 0) { c.selectTile("slider", index) this.clickInspectorPanel() this.getMultipleRestriction().find("input").invoke("attr", "value").should("contain", multiple) @@ -72,12 +72,12 @@ export const SliderTileElements = { getAnimationRate() { return c.getInspectorPanel().find("[data-testid=slider-animation-rate]") }, - setAnimationRate(rate, index = 0) { + setAnimationRate(rate: number, index = 0) { c.selectTile("slider", index) this.clickInspectorPanel() this.getAnimationRate().find("input").type(`${rate}{enter}`) }, - checkAnimationRate(rate, index = 0) { + checkAnimationRate(rate: number, index = 0) { c.selectTile("slider", index) this.clickInspectorPanel() this.getAnimationRate().find("input").invoke("attr", "value").should("contain", rate) @@ -86,7 +86,7 @@ export const SliderTileElements = { getAnimationDirection() { return c.getInspectorPanel().find("[data-testid=slider-animation-direction]") }, - setAnimationDirection(direction, index = 0) { + setAnimationDirection(direction: string, index = 0) { c.selectTile("slider", index) this.clickInspectorPanel() this.getAnimationDirection().select(direction) @@ -95,7 +95,7 @@ export const SliderTileElements = { getAnimationRepetition() { return c.getInspectorPanel().find("[data-testid=slider-animation-repetition]") }, - setAnimationRepetition(repetition, index = 0) { + setAnimationRepetition(repetition: string, index = 0) { c.selectTile("slider", index) this.clickInspectorPanel() this.getAnimationRepetition().select(repetition) diff --git a/v3/cypress/support/elements/table-tile.ts b/v3/cypress/support/elements/table-tile.ts index cc522dc63a..3de9d17db9 100644 --- a/v3/cypress/support/elements/table-tile.ts +++ b/v3/cypress/support/elements/table-tile.ts @@ -1,4 +1,8 @@ import { ComponentElements as c } from "./component-elements" +type TestAttributes = Array<{ name: string, move: string }> +type TestValues = Record + +type OptString = string | null | undefined export const TableTileElements = { getTableTile(index = 0) { @@ -35,7 +39,7 @@ export const TableTileElements = { getColumnHeaders(collectionIndex = 1) { return this.getCollection(collectionIndex).find("[role=columnheader]") }, - getColumnHeader(index, collectionIndex = 1) { + getColumnHeader(index: number, collectionIndex = 1) { return this.getCollection(collectionIndex).find("[data-testid=codap-column-header-content]").eq(index) }, // doesn't work in more recent chakra versions @@ -62,10 +66,10 @@ export const TableTileElements = { cy.clickMenuItem("Insert Case") cy.wait(500) }, - insertCases(num_of_cases, location) { + insertCases(num_of_cases: number, location: string) { this.getIndexMenu().should("be.visible") cy.clickMenuItem("Insert Cases...") - cy.get("[data-testid=num-case-input] input").type(num_of_cases) + cy.get("[data-testid=num-case-input] input").type(`${num_of_cases}`) cy.get(`[data-testid="add-${location}"]`).click() cy.get("[data-testid=\"Insert Cases-button\"]").contains("Insert Cases").click() }, @@ -86,57 +90,57 @@ export const TableTileElements = { getAttributeHeader() { return cy.get("[data-testid^=codap-attribute-button]") }, - getAttribute(name, collectionIndex = 1) { + getAttribute(name: string, collectionIndex = 1) { return this.getCollection(collectionIndex).find(`[data-testid^="codap-attribute-button ${name}"]`) }, getAttributeInput(collectionIndex = 1) { return this.getCollection(collectionIndex).find("[data-testid=column-name-input]") }, - getCaseTableAttribute(name) { + getCaseTableAttribute(name: string) { return this.getTableTile().find(`[data-testid^="codap-attribute-button ${name}"]`) }, - openAttributeMenu(name, collectionIndex = 1) { + openAttributeMenu(name: string, collectionIndex = 1) { this.getAttribute(name, collectionIndex).click({force: true}) }, - getAttributeMenuItem(item) { + getAttributeMenuItem(item: string) { return cy.get("[data-testid=attribute-menu-list] button").contains(item) }, - selectMenuItemFromAttributeMenu(item) { + selectMenuItemFromAttributeMenu(item: string) { this.getAttributeMenuItem(item).click({ force: true }) }, - renameColumnName(newName) { + renameColumnName(newName: string) { cy.get("[data-testid=column-name-input]").wait(250).type(newName) }, // Edit Attribute Property Dialog - enterAttributeName(name) { + enterAttributeName(name: string) { cy.get("[data-testid=attr-name-input]").type(name) }, - enterAttributeDescription(text) { + enterAttributeDescription(text: string) { cy.get("[data-testid=attr-description-input]").type(text) }, - selectAttributeType(type) { + selectAttributeType(type: string) { cy.get("[data-testid=attr-type-select]").select(type) }, - enterAttributeUnit(unit) { + enterAttributeUnit(unit: string) { cy.get("[data-testid=attr-unit-input]").type(unit) }, - selectAttributePrecision(number) { - cy.get("[data-testid=attr-precision-select]").select(number) + selectAttributePrecision(precision: string) { + cy.get("[data-testid=attr-precision-select]").select(precision) }, - selectAttributeEditableState(state) { + selectAttributeEditableState(state: string) { cy.get("[data-testid=attr-editable-radio] span").contains(state).click() }, // Edit Dataset Information Dialog - enterInfoName(name) { + enterInfoName(name: string) { cy.get("[data-testid=dataset-name-input]").type(name) }, - enterInfoSource(source) { + enterInfoSource(source: string) { cy.get("[data-testid=dataset-source-input]").type(source) }, - enterInfoDate(date) { + enterInfoDate(date: string) { cy.get("[data-testid=dataset-date-input]").type(date) }, - enterInfoDescription(description) { + enterInfoDescription(description: string) { cy.get("[data-testid=dataset-description-input]").type(description) }, getApplyButton() { @@ -145,20 +149,21 @@ export const TableTileElements = { getCancelButton() { return cy.get("[data-testid=Cancel-button]") }, - editAttributeProperties(attr, name, description, type, unit, precision, editable) { + editAttributeProperties(attr: string, name?: OptString, description?: OptString, type?: OptString, + unit?: OptString, precision?: OptString, editable?: OptString) { this.openAttributeMenu(attr) this.selectMenuItemFromAttributeMenu("Edit Attribute Properties...") if (name !== "") { - this.enterAttributeName(`{selectAll}{backspace}${name}`, { force: true }) + this.enterAttributeName(`{selectAll}{backspace}${name}`) } if (description != null) { - this.enterAttributeDescription(`{selectAll}{backspace}${description}`, { force: true }) + this.enterAttributeDescription(`{selectAll}{backspace}${description}`) } if (type != null) { this.selectAttributeType(type) } if (unit != null) { - this.enterAttributeUnit(`{selectAll}{backspace}${unit}`, { force: true }) + this.enterAttributeUnit(`{selectAll}{backspace}${unit}`) } if (precision != null) { this.selectAttributePrecision(precision) @@ -168,7 +173,7 @@ export const TableTileElements = { } this.getApplyButton().click({force: true}) }, - editDatasetInformation(name, source, date, description) { + editDatasetInformation(name: string, source: string, date: string, description: string) { this.getDatasetInfoButton().click() if (name !== "") { this.enterInfoName(`{selectAll}{backspace}${name}`) @@ -188,7 +193,7 @@ export const TableTileElements = { return this.getCollection(collection).find(`[aria-rowindex="${row}"] [aria-colindex="${column}"]`) }, // returns the .cell-span within the cell - getCell(column: number, row: number, collectionIndex = 1) { + getCell(column: number | string, row: number | string, collectionIndex = 1) { return this.getCollection(collectionIndex).find(`[aria-rowindex="${row}"] [aria-colindex="${column}"] .cell-span`) }, verifyCellSwatchColor(row: number, column: number, rgbColorStr: string, collection = 1) { @@ -205,31 +210,31 @@ export const TableTileElements = { .invoke("getPropertyValue", "background") .should("contain", rgbColorStr) }, - verifyRowSelected(row) { + verifyRowSelected(row: number) { cy.get(`[data-testid=case-table] [aria-rowindex="${row}"]`).invoke("attr", "aria-selected") .should("contain", true) }, - verifyRowSelectedWithCellValue(cell) { + verifyRowSelectedWithCellValue(cell: string) { cy.get(`[data-testid=case-table] [aria-selected=true]`).should("contain", cell) }, showAllAttributes() { cy.get("[data-testid=hide-show-button]").click() cy.get("[data-testid=hide-show-menu-list]").find("button").contains("Show 1 Hidden Attribute").click() }, - createNewTableFromToolshelf() { - c.getIconFromToolshelf("table").click() + createNewTableFromToolShelf() { + c.getIconFromToolShelf("table").click() cy.get("[data-testid=tool-shelf-table-new]").click() }, - createNewClipboardTableFromToolshelf() { - c.getIconFromToolshelf("table").click() + createNewClipboardTableFromToolShelf() { + c.getIconFromToolShelf("table").click() cy.get("[data-testid=tool-shelf-table-new-clipboard]").click() }, - openExistingTableFromToolshelf(name: string) { - c.getIconFromToolshelf("table").click() + openExistingTableFromToolShelf(name: string) { + c.getIconFromToolShelf("table").click() cy.get(`[data-testid=tool-shelf-table-${name}]`).click() }, - deleteDataSetFromToolshelf(index = 0) { - c.getIconFromToolshelf("table").click() + deleteDataSetFromToolShelf(index = 0) { + c.getIconFromToolShelf("table").click() cy.get(`.tool-shelf-menu-trash-icon`).eq(index).click() cy.get(`.delete-data-set-button-delete`).click() }, @@ -272,7 +277,7 @@ export const TableTileElements = { selectItemFromRulerMenu(item: string) { this.getRulerMenuItem(item).click({ force: true }) }, - verifyAttributeValues(attributes, values, collectionIndex = 1) { + verifyAttributeValues(attributes: TestAttributes, values: TestValues, collectionIndex = 1) { attributes.forEach(a => { const attribute = a.name for (let rowIndex = 0; rowIndex < values[attribute].length; rowIndex++) { @@ -283,10 +288,10 @@ export const TableTileElements = { } }) }, - getAttributeValue(attribute, rowIndex, collectionIndex = 1) { + getAttributeValue(attribute: string, rowIndex: number, collectionIndex = 1) { return this.getAttribute(attribute, collectionIndex).parent().parent().then($header => { return cy.wrap($header).invoke("attr", "aria-colindex").then(colIndex => { - return this.getCell(colIndex, rowIndex, collectionIndex) + return this.getCell(colIndex!, rowIndex, collectionIndex) }) }) }, @@ -317,20 +322,20 @@ export const TableTileElements = { collapseAllGroups(collectionIndex = 1) { this.getCollapseAllGroupsButton(collectionIndex).click() }, - getCollapsedIndex(rowIndex, collectionIndex = 1) { + getCollapsedIndex(rowIndex: number, collectionIndex = 1) { return this.getIndexCellInRow(rowIndex, collectionIndex) }, - getRowExpandCollapseButton(rowIndex, collectionIndex = 1) { + getRowExpandCollapseButton(rowIndex: number, collectionIndex = 1) { return this.getCollection(collectionIndex).find(".spacer-mid-layer .expand-collapse-button img") .eq(Number(rowIndex)-2) }, - verifyRowCollapsedButton(rowIndex, collectionIndex = 1) { + verifyRowCollapsedButton(rowIndex: number, collectionIndex = 1) { this.getRowExpandCollapseButton(rowIndex, collectionIndex).should("have.class", "closed") }, - verifyRowExpandedButton(rowIndex, collectionIndex = 1) { + verifyRowExpandedButton(rowIndex: number, collectionIndex = 1) { this.getRowExpandCollapseButton(rowIndex, collectionIndex).should("have.class", "open") }, - verifyCollapsedRows(childCases, collectionIndex = 1) { + verifyCollapsedRows(childCases: string[], collectionIndex = 1) { for (let childCaseIndex = 0; childCaseIndex < childCases.length; childCaseIndex++) { this.getIndexCellInRow(childCaseIndex+2, collectionIndex).then(indexCell => { expect(childCases).to.include(indexCell.text()) @@ -342,57 +347,57 @@ export const TableTileElements = { .click({force:true}) cy.get("[data-testid=column-name-input]").type("{enter}") }, - deleteAttribute(attributeName, collectionIndex = 1) { + deleteAttribute(attributeName: string, collectionIndex = 1) { this.openAttributeMenu(attributeName, collectionIndex) this.selectMenuItemFromAttributeMenu("Delete Attribute") this.getAttribute(attributeName, collectionIndex).should("not.exist") }, - renameAttribute(attributeName, newAttributeName, collectionIndex = 1) { + renameAttribute(attributeName: string, newAttributeName: string, collectionIndex = 1) { this.openAttributeMenu(attributeName, collectionIndex) this.selectMenuItemFromAttributeMenu("Rename") this.renameColumnName(`${newAttributeName}{enter}`) // this.getAttribute(newAttributeName, collectionIndex).should("exist") }, - addFormula(attributeName, formula, collectionIndex = 1) { + addFormula(attributeName: string, formula: string, collectionIndex = 1) { this.openAttributeMenu(attributeName, collectionIndex) this.selectMenuItemFromAttributeMenu("Edit Formula...") this.addFormulaInModal(attributeName, formula) }, - editFormula(attributeName, formula, collectionIndex = 1) { + editFormula(attributeName: string, formula: string, collectionIndex = 1) { this.openAttributeMenu(attributeName, collectionIndex) this.selectMenuItemFromAttributeMenu("Edit Formula...") this.clearFormulaInModal(attributeName) this.addFormula(attributeName, formula, collectionIndex) }, - checkFormulaExists(attributeName, formula, collectionIndex = 1) { + checkFormulaExists(attributeName: string, formula: string, collectionIndex = 1) { this.openAttributeMenu(attributeName, collectionIndex) this.selectMenuItemFromAttributeMenu("Edit Formula...") this.checkFormulaInModal(attributeName, formula) }, - addFormulaInModal(attributeName, formula) { + addFormulaInModal(attributeName: string, formula: string) { cy.get("[data-testid=attr-name-input]").invoke("attr", "value").should("eq", attributeName) cy.get("[data-testid=attr-formula-input]").type(formula, {force:true}) cy.get("[data-testid=Apply-button]").click() cy.get("[data-testid=attr-name-input]").should("not.exist") }, - clearFormulaInModal(attributeName) { + clearFormulaInModal(attributeName: string) { cy.get("[data-testid=attr-name-input]").invoke("attr", "value").should("eq", attributeName) cy.get("[data-testid=attr-formula-input]").type(`{selectAll}{del}`) cy.get("[data-testid=Apply-button]").click() cy.get("[data-testid=attr-name-input]").should("not.exist") }, - checkFormulaInModal(attributeName, formula) { + checkFormulaInModal(attributeName: string, formula: string) { cy.get("[data-testid=attr-name-input]").invoke("attr", "value").should("eq", attributeName) cy.get("[data-testid=attr-formula-input]").should("have.text", formula) cy.get("[data-testid=Cancel-button]").click() cy.get("[data-testid=attr-name-input]").should("not.exist") }, - verifyFormulaValues(attribute, values, collectionIndex = 1) { + verifyFormulaValues(attribute: string, values: Array, collectionIndex = 1) { for (let rowIndex = 0; rowIndex < values.length; rowIndex++) { this.getAttributeValue(attribute, rowIndex+2, collectionIndex).should("have.text", values[rowIndex].toString()) } }, - verifyFormulaError(attribute, error, collectionIndex = 1) { + verifyFormulaError(attribute: string, error: any, collectionIndex = 1) { for (let rowIndex = 0; rowIndex < error.cases; rowIndex++) { this.getAttributeValue(attribute, rowIndex+2, collectionIndex).should("have.text", error.value) } diff --git a/v3/cypress/support/elements/toolbar-elements.ts b/v3/cypress/support/elements/toolbar-elements.ts index c6fd63d7e1..41062813c4 100644 --- a/v3/cypress/support/elements/toolbar-elements.ts +++ b/v3/cypress/support/elements/toolbar-elements.ts @@ -1,9 +1,9 @@ export const ToolbarElements = { - getToolshelfSelector(component) { + getToolShelfSelector(component: string) { return cy.get(`[data-testid=tool-shelf-button-${component}]`) }, - getToolShelfIcon(component) { - return this.getToolshelfSelector(component) + getToolShelfIcon(component: string) { + return this.getToolShelfSelector(component) }, getPluginSelection() { return cy.get(`.plugin-selection`) @@ -14,10 +14,10 @@ export const ToolbarElements = { getNewCaseTableFromClipboard() { return cy.get("[data-testid=tool-shelf-table-new]") }, - getDatasetListedInToolshelf(dataset) { + getDatasetListedInToolShelf(dataset: string) { return cy.get(`[data-testid="tool-shelf-table-${dataset}"]`) }, - getDeleteCaseTable(dataset) { + getDeleteCaseTable(dataset: string) { return cy.get(`[data-testid="tool-shelf-table-${dataset}"] .tool-shelf-menu-trash-icon`) }, getConfirmDeleteDatasetModal() { diff --git a/v3/cypress/support/elements/web-view-tile.ts b/v3/cypress/support/elements/web-view-tile.ts index 618f31d782..c60257ee8c 100644 --- a/v3/cypress/support/elements/web-view-tile.ts +++ b/v3/cypress/support/elements/web-view-tile.ts @@ -9,7 +9,7 @@ export const WebViewTileElements = { }, getIFrame() { // These functions were stolen from v2's commands.js - const getIframeDocument = (selector, position) => { + const getIframeDocument = (selector: string, position: number) => { return cy.get(selector).eq(position).get("iframe") // Cypress yields jQuery element, which has the real // DOM element under property "0". @@ -19,8 +19,8 @@ export const WebViewTileElements = { // https://on.cypress.io/its .its(`${position}.contentDocument`).should('exist') } - - const getIframeBody = (selector, position=0) => { + + const getIframeBody = (selector: string, position=0) => { // get the document return getIframeDocument(selector, position) // automatically retries until body is loaded diff --git a/v3/cypress/support/helpers/axis-helper.ts b/v3/cypress/support/helpers/axis-helper.ts index 38ca5d4cfe..488d6ea524 100644 --- a/v3/cypress/support/helpers/axis-helper.ts +++ b/v3/cypress/support/helpers/axis-helper.ts @@ -1,17 +1,17 @@ import { AxisElements as ae } from "../elements/axis-elements" export const AxisHelper = { - verifyDefaultAxisLabel(axis) { + verifyDefaultAxisLabel(axis: string) { ae.getDefaultAxisLabel(axis).should("have.text", "Click here, or drag an attribute here.") }, - verifyAxisLabel(axis, name) { + verifyAxisLabel(axis: string, name: string) { ae.getAxisLabel(axis).should("have.text", name) }, - verifyTickMarksDoNotExist(axis, categorical = false) { + verifyTickMarksDoNotExist(axis: string, categorical = false) { cy.log(`Check no tick marks for axis ${axis}`) ae.getTickMarks(axis, categorical).should("not.exist") }, - verifyGridLinesDoNotExist(axis, categorical = false) { + verifyGridLinesDoNotExist(axis: string, categorical = false) { cy.log(`Check no grid lines for axis ${axis}`) ae.getGridLines(axis, categorical).should("not.exist") }, @@ -63,38 +63,39 @@ export const AxisHelper = { expect($length).to.be.greaterThan(0) }) }, - verifyAxisTickLabels(axis, attributeValues, categorical = false) { + verifyAxisTickLabels(axis: string, attributeValues: string[], categorical = false) { ae.getAxisTickLabels(axis, categorical).should('have.length', attributeValues.length) - for (let index = 0; index < attributeValues; index++) { + for (let index = 0; index < attributeValues.length; index++) { this.verifyAxisTickLabel(axis, attributeValues[index], index, categorical) } }, - verifyAxisTickLabel(axis, attributeValue, index, categorical = false) { + verifyAxisTickLabel(axis: string, attributeValue: string, index: number, categorical = false) { + attributeValue = attributeValue.replace("-", "\u2212") // hyphen => unicode minus sign ae.getAxisTickLabel(axis, index, categorical).invoke("text").should("eq", attributeValue) }, - verifyRemoveAttributeDoesNotExist(axis) { + verifyRemoveAttributeDoesNotExist(axis: string) { ae.getAttributeFromAttributeMenu(axis).contains(`Remove`).should("not.exist") }, - verifyTreatAsOptionDoesNotExist(axis) { + verifyTreatAsOptionDoesNotExist(axis: string) { ae.getAttributeFromAttributeMenu(axis).contains(`Treat as`).should("not.exist") }, - verifyAxisMenuIsClosed(axis) { + verifyAxisMenuIsClosed(axis: string) { ae.getAttributeFromAttributeMenu(axis).find("div>div").should("not.be.visible") }, - openAxisAttributeMenu(axis) { + openAxisAttributeMenu(axis: string) { ae.getAxisAttributeMenu(axis).click() }, - addAttributeToAxis(name, axis) { + addAttributeToAxis(name: string, axis: string) { ae.getAttributeFromAttributeMenu(axis).contains(name).click() cy.wait(2000) }, - removeAttributeFromAxis(name, axis) { + removeAttributeFromAxis(name: string, axis: string) { ae.getAttributeFromAttributeMenu(axis).contains(`Remove`).click() }, - treatAttributeAsCategorical(axis) { + treatAttributeAsCategorical(axis: string) { ae.getAttributeFromAttributeMenu(axis).contains("Treat as Categorical").click() }, - treatAttributeAsNumeric(axis) { + treatAttributeAsNumeric(axis: string) { ae.getAttributeFromAttributeMenu(axis).contains("Treat as Numeric").click() } } diff --git a/v3/cypress/support/helpers/formula-helper.ts b/v3/cypress/support/helpers/formula-helper.ts index f774450d4f..6f8ac9c076 100644 --- a/v3/cypress/support/helpers/formula-helper.ts +++ b/v3/cypress/support/helpers/formula-helper.ts @@ -25,7 +25,7 @@ export const FormulaHelper = { addFormula(attributeName: string, formula: string, collectionIndex = 1) { table.addFormula(attributeName, formula, collectionIndex) }, - verifyValues(attributeName: string, values: object, collectionIndex = 1) { + verifyValues(attributeName: string, values: Array, collectionIndex = 1) { table.verifyFormulaValues(attributeName, values, collectionIndex) }, checkFormulaExists(attributeName: string, formula: string, collectionIndex = 1) { @@ -35,7 +35,7 @@ export const FormulaHelper = { table.editFormula(attributeName, formula, collectionIndex) }, createNewDataset() { - table.createNewTableFromToolshelf() + table.createNewTableFromToolShelf() }, insertCases(rowIndex: number, numOfCases: number) { table.openIndexMenuForRow(rowIndex) @@ -48,7 +48,7 @@ export const FormulaHelper = { slider.changeVariableValue(sliderValue) }, addSlider() { - c.getIconFromToolshelf("slider").click() + c.getIconFromToolShelf("slider").click() }, deleteSlider() { c.closeComponent("slider") diff --git a/v3/cypress/support/helpers/graph-legend-helper.ts b/v3/cypress/support/helpers/graph-legend-helper.ts index 026850009b..c36b6634d1 100644 --- a/v3/cypress/support/helpers/graph-legend-helper.ts +++ b/v3/cypress/support/helpers/graph-legend-helper.ts @@ -4,26 +4,26 @@ export const GraphLegendHelper = { verifyLegendDoesNotExist() { gle.getLegend().should("not.exist") }, - verifyLegendLabel(name) { + verifyLegendLabel(name: string) { gle.getLegendName().should("have.text", name) }, - verifyCategoricalLegend(num) { + verifyCategoricalLegend(num: number) { gle.getCategoricalLegendCategories().should("exist") gle.getCategoricalLegendCategories().should("have.length", num) }, verifyNumericLegend() { gle.getNumericLegendCategories().should("exist") }, - selectCategoryNameForCategoricalLegend(name) { + selectCategoryNameForCategoricalLegend(name: string) { gle.getCategoricalLegendCategory(name).click() }, - selectCategoryColorForCategoricalLegend(name) { + selectCategoryColorForCategoricalLegend(name: string) { gle.getCategoricalLegendCategory(name).parent().find("rect").click() }, unselectLegendCategory() { gle.getGraphTile().find(".plot-cell-background").eq(0).click({force:true}) }, - verifyCategoricalLegendKeySelected(name) { + verifyCategoricalLegendKeySelected(name: string) { gle.getCategoricalLegendCategory(name).parent().find("rect").should("have.class", "legend-rect-selected") }, verifyNumericLegendKeySelected() { @@ -39,25 +39,25 @@ export const GraphLegendHelper = { cy.wrap($category).should("not.have.class", "legend-rect-selected") }) }, - selectNumericLegendCategory(index) { + selectNumericLegendCategory(index: number) { gle.getNumericLegendCategories().eq(index).click() }, - verifyLegendQuintileSelected(index) { + verifyLegendQuintileSelected(index: number) { gle.getNumericLegendCategories().eq(index).should("have.class", "legend-rect-selected") }, - dragAttributeToPlot(name) { + dragAttributeToPlot(name: string) { cy.dragAttributeToTarget("table", name, "graph-plot") }, - dragAttributeToLegend(name) { + dragAttributeToLegend(name: string) { cy.dragAttributeToTarget("table", name, "graph-legend") }, openLegendMenu() { gle.getLegendAttributeMenu().click() }, - addAttributeToLegend(name) { + addAttributeToLegend(name: string) { gle.getAttributeFromLegendMenu().contains(name).click() }, - removeAttributeFromLegend(name) { + removeAttributeFromLegend(name: string) { gle.getAttributeFromLegendMenu().contains(`Remove Legend: ${name}`).click() }, treatLegendAttributeAsCategorical() { diff --git a/v3/cypress/support/helpers/map-legend-helper.ts b/v3/cypress/support/helpers/map-legend-helper.ts index f032b9aa2c..2a016ca5c5 100644 --- a/v3/cypress/support/helpers/map-legend-helper.ts +++ b/v3/cypress/support/helpers/map-legend-helper.ts @@ -4,29 +4,29 @@ export const MapLegendHelper = { verifyLegendDoesNotExist() { mle.getLegend().should("not.exist") }, - verifyLegendLabel(name) { + verifyLegendLabel(name: string) { mle.getLegendName().should("have.text", name) }, - verifyCategoricalLegend(num) { + verifyCategoricalLegend(num: number) { mle.getCategoricalLegendCategories().should("exist") mle.getCategoricalLegendCategories().should("have.length", num) }, verifyNumericLegend() { mle.getNumericLegendCategories().should("exist") }, - selectCategoryNameForCategoricalLegend(name) { + selectCategoryNameForCategoricalLegend(name: string) { mle.getCategoricalLegendCategory(name).click() }, - selectCategoryColorForCategoricalLegend(name) { + selectCategoryColorForCategoricalLegend(name: string) { mle.getCategoricalLegendCategory(name).parent().find("rect").click() }, unselectLegendCategory() { mle.getMapTile().find(".map-dot-area").eq(0).click({force:true}) }, - verifyCategoricalLegendKeySelected(name, num) { + verifyCategoricalLegendKeySelected(name: string, num: number) { mle.getCategoricalLegendCategory(name).parent().find("rect").should("have.class", "legend-rect-selected") }, - verifyNumericLegendKeySelected(num) { + verifyNumericLegendKeySelected(num: number) { mle.getNumericLegendCategories().should("have.class", "legend-rect-selected") }, verifyNoLegendCategorySelectedForCategoricalLegend() { @@ -39,22 +39,22 @@ export const MapLegendHelper = { cy.wrap($category).should("not.have.class", "legend-rect-selected") }) }, - selectNumericLegendCategory(index) { + selectNumericLegendCategory(index: number) { mle.getNumericLegendCategories().eq(index).click() }, - verifyLegendQuintileSelected(index) { + verifyLegendQuintileSelected(index: number) { mle.getNumericLegendCategories().eq(index).should("have.class", "legend-rect-selected") }, - dragAttributeToLegend(name) { + dragAttributeToLegend(name: string) { cy.dragAttributeToTarget("table", name, "map-legend") }, openLegendMenu() { mle.getLegendAttributeMenu().click() }, - addAttributeToLegend(name) { + addAttributeToLegend(name: string) { mle.getAttributeFromLegendMenu().contains(name).click() }, - removeAttributeFromLegend(name) { + removeAttributeFromLegend(name: string) { mle.getAttributeFromLegendMenu().contains(`Remove Legend: ${name}`).click() }, treatLegendAttributeAsCategorical() { diff --git a/v3/cypress/tsconfig.json b/v3/cypress/tsconfig.json index 8ce24df14b..b605197401 100644 --- a/v3/cypress/tsconfig.json +++ b/v3/cypress/tsconfig.json @@ -1,7 +1,8 @@ { "extends": "../tsconfig.json", "compilerOptions": { - "sourceMap": false + "sourceMap": false, + "types": ["cypress"] }, "include": [ "./**/*" diff --git a/v3/package.json b/v3/package.json index 155f4f02df..0ae3e734a8 100644 --- a/v3/package.json +++ b/v3/package.json @@ -56,7 +56,8 @@ "start:clean": "npm run clean:cache && npm start", "start:secure": "webpack serve", "start:secure:no-certs": "webpack serve --no-server-options-request-cert", - "build": "npm-run-all lint:build build:webpack", + "build": "npm-run-all lint:build build:cypress build:webpack", + "build:cypress": "tsc -p ./cypress/tsconfig.json", "build:webpack": "webpack --mode production", "clean:cache": "rimraf node_modules/.cache", "lint": "eslint --cache \"./src/**/*.{js,jsx,ts,tsx}\" \"./cypress/**/*.{js,jsx,ts,tsx}\"",