From a93757a8d9fab0f5d84306e26b7ac59dfd6799fb Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 27 Oct 2020 15:26:07 +0000 Subject: [PATCH] Fix cypress tests --- .../integration/createAutomation.spec.js | 37 +++---- .../integration/createComponents.spec.js | 96 ++++++++++--------- .../cypress/integration/createTable.spec.js | 10 +- .../cypress/integration/createView.spec.js | 37 +++---- packages/builder/cypress/support/commands.js | 66 ++++--------- .../AutomationPanel/AutomationPanel.svelte | 5 +- .../components/backend/DataTable/Table.svelte | 8 +- .../DataTable/popovers/RowPopover.svelte | 9 +- .../TableNavigator/TableDataImport.svelte | 10 +- .../popovers/EditTablePopover.svelte | 17 ++-- .../popovers/EditViewPopover.svelte | 7 +- .../common/Dropdowns/DropdownItem.svelte | 7 +- .../src/components/common/NavItem.svelte | 12 +-- .../userInterface/FrontendNavigatePane.svelte | 2 +- .../[application]/automate/_layout.svelte | 2 +- 15 files changed, 150 insertions(+), 175 deletions(-) diff --git a/packages/builder/cypress/integration/createAutomation.spec.js b/packages/builder/cypress/integration/createAutomation.spec.js index 67132c736b..92d1f907bd 100644 --- a/packages/builder/cypress/integration/createAutomation.spec.js +++ b/packages/builder/cypress/integration/createAutomation.spec.js @@ -14,35 +14,26 @@ context("Create a automation", () => { cy.createTestTableWithData() cy.contains("automate").click() - cy.contains("Create New Automation").click() + cy.get("[data-cy=new-automation]").click() cy.get(".modal").within(() => { cy.get("input").type("Add Row") - cy.get(".buttons") - .contains("Create") - .click() + cy.get(".buttons").contains("Create").click() }) // Add trigger - cy.get("[data-cy=add-automation-component]").click() - cy.get("[data-cy=ROW_SAVED]").click() - cy.get("[data-cy=automation-block-setup]").within(() => { - cy.get("select") - .first() - .select("dog") + cy.contains("Trigger").click() + cy.contains("Row Saved").click() + cy.get(".setup").within(() => { + cy.get("select").first().select("dog") }) // Create action - cy.get("[data-cy=CREATE_ROW]").click() - cy.get("[data-cy=automation-block-setup]").within(() => { - cy.get("select") - .first() - .select("dog") - cy.get("input") - .first() - .type("goodboy") - cy.get("input") - .eq(1) - .type("11") + cy.contains("Action").click() + cy.contains("Create Row").click() + cy.get(".setup").within(() => { + cy.get("select").first().select("dog") + cy.get("input").first().type("goodboy") + cy.get("input").eq(1).type("11") }) // Save @@ -50,11 +41,11 @@ context("Create a automation", () => { // Activate Automation cy.get("[data-cy=activate-automation]").click() - cy.get(".stop-button.highlighted").should("be.visible") + cy.get(".ri-stop-circle-fill.highlighted").should("be.visible") }) it("should add row when a new row is added", () => { - cy.contains("backend").click() + cy.contains("data").click() cy.addRow(["Rover", 15]) cy.reload() cy.contains("goodboy").should("have.text", "goodboy") diff --git a/packages/builder/cypress/integration/createComponents.spec.js b/packages/builder/cypress/integration/createComponents.spec.js index bf978d3e3a..6931fdb86b 100644 --- a/packages/builder/cypress/integration/createComponents.spec.js +++ b/packages/builder/cypress/integration/createComponents.spec.js @@ -1,54 +1,60 @@ -xcontext('Create Components', () => { +xcontext("Create Components", () => { + before(() => { + cy.server() + cy.visit("localhost:4001/_builder") + // https://on.cypress.io/type + cy.createApp("Table App", "Table App Description") + cy.createTable("dog", "name", "age") + cy.addRow("bob", "15") + }) - before(() => { - cy.server() - cy.visit('localhost:4001/_builder') - // https://on.cypress.io/type - cy.createApp('Table App', 'Table App Description') - cy.createTable('dog', 'name', 'age') - cy.addRow('bob', '15') - }) + // https://on.cypress.io/interacting-with-elements + it("should add a container", () => { + cy.navigateToFrontend() + cy.get(".switcher > :nth-child(2)").click() + cy.contains("Container").click() + }) + it("should add a headline", () => { + cy.addHeadlineComponent("An Amazing headline!") - // https://on.cypress.io/interacting-with-elements - it('should add a container', () => { - cy.contains('frontend').click() - cy.get('.switcher > :nth-child(2)').click() + getIframeBody().contains("An Amazing headline!") + }) + it("change the font size of the headline", () => { + cy.contains("Typography").click() + cy.get("[data-cy=font-size-prop-control]").click() + cy.contains("60px").click() + cy.contains("Design").click() - cy.contains('Container').click() - }) - it('should add a headline', () => { - cy.addHeadlineComponent('An Amazing headline!') - - getIframeBody().contains('An Amazing headline!') - }) - it('change the font size of the headline', () => { - cy.contains('Typography').click() - cy.get('[data-cy=font-size-prop-control]').click() - cy.contains("60px").click() - cy.contains('Design').click() - - getIframeBody().contains('An Amazing headline!').should('have.css', 'font-size', '60px') - }) + getIframeBody() + .contains("An Amazing headline!") + .should("have.css", "font-size", "60px") + }) }) const getIframeDocument = () => { - return cy - .get('iframe') - // Cypress yields jQuery element, which has the real - // DOM element under property "0". - // From the real DOM iframe element we can get - // the "document" element, it is stored in "contentDocument" property - // Cypress "its" command can access deep properties using dot notation - // https://on.cypress.io/its - .its('0.contentDocument').should('exist') + return ( + cy + .get("iframe") + // Cypress yields jQuery element, which has the real + // DOM element under property "0". + // From the real DOM iframe element we can get + // the "document" element, it is stored in "contentDocument" property + // Cypress "its" command can access deep properties using dot notation + // https://on.cypress.io/its + .its("0.contentDocument") + .should("exist") + ) } const getIframeBody = () => { - // get the document - return getIframeDocument() - // automatically retries until body is loaded - .its('body').should('not.be.undefined') - // wraps "body" DOM element to allow - // chaining more Cypress commands, like ".find(...)" - .then(cy.wrap) -} \ No newline at end of file + // get the document + return ( + getIframeDocument() + // automatically retries until body is loaded + .its("body") + .should("not.be.undefined") + // wraps "body" DOM element to allow + // chaining more Cypress commands, like ".find(...)" + .then(cy.wrap) + ) +} diff --git a/packages/builder/cypress/integration/createTable.spec.js b/packages/builder/cypress/integration/createTable.spec.js index 16ee67cc5b..bb812540ea 100644 --- a/packages/builder/cypress/integration/createTable.spec.js +++ b/packages/builder/cypress/integration/createTable.spec.js @@ -8,7 +8,7 @@ context("Create a Table", () => { cy.createTable("dog") // Check if Table exists - cy.get(".title span").should("have.text", "dog") + cy.get(".table-title h1").should("have.text", "dog") }) it("adds a new column to the table", () => { @@ -24,9 +24,7 @@ context("Create a Table", () => { it("updates a column on the table", () => { cy.contains("name").click() cy.get("[data-cy='edit-column-header']").click() - cy.get(".actions input") - .first() - .type("updated") + cy.get(".actions input").first().type("updated") // Unset table display column cy.contains("display column").click() cy.contains("Save Column").click() @@ -56,9 +54,7 @@ context("Create a Table", () => { }) it("deletes a table", () => { - cy.contains("div", "dog") - .get(".ri-more-line") - .click() + cy.contains(".nav-item", "dog").get(".actions").invoke("show").click() cy.get("[data-cy=delete-table]").click() cy.contains("Delete Table").click() cy.contains("dog").should("not.exist") diff --git a/packages/builder/cypress/integration/createView.spec.js b/packages/builder/cypress/integration/createView.spec.js index 697bc35143..553f4c4b98 100644 --- a/packages/builder/cypress/integration/createView.spec.js +++ b/packages/builder/cypress/integration/createView.spec.js @@ -22,7 +22,7 @@ context("Create a View", () => { cy.get("input").type("Test View") cy.contains("Save View").click() }) - cy.get(".title").contains("Test View") + cy.get(".table-title h1").contains("Test View") cy.get("thead th div").should($headers => { expect($headers).to.have.length(3) const headers = $headers.map((i, header) => Cypress.$(header).text()) @@ -33,14 +33,8 @@ context("Create a View", () => { it("filters the view by age over 10", () => { cy.contains("Filter").click() cy.contains("Add Filter").click() - cy.get(".menu-container") - .find("select") - .first() - .select("age") - cy.get(".menu-container") - .find("select") - .eq(1) - .select("More Than") + cy.get(".menu-container").find("select").first().select("age") + cy.get(".menu-container").find("select").eq(1).select("More Than") cy.get("input").type(18) cy.contains("Save").click() cy.get("tbody tr").should($values => { @@ -52,15 +46,9 @@ context("Create a View", () => { cy.contains("Calculate").click() // we may reinstate this - have commented this dropdown for now as there is only one option //cy.get(".menu-container").find("select").first().select("Statistics") - cy.get(".menu-container") - .find("select") - .eq(0) - .select("Statistics") + cy.get(".menu-container").find("select").eq(0).select("Statistics") cy.wait(50) - cy.get(".menu-container") - .find("select") - .eq(1) - .select("age") + cy.get(".menu-container").find("select").eq(1).select("age") cy.contains("Save").click() cy.get("thead th div").should($headers => { expect($headers).to.have.length(7) @@ -114,10 +102,11 @@ context("Create a View", () => { }) it("renames a view", () => { - cy.contains("[data-cy=table-nav-item]", "Test View") - .find(".ri-more-line") + cy.contains(".nav-item", "Test View") + .find(".actions") + .invoke("show") .click() - cy.contains("Edit").click() + cy.get("[data-cy=edit-view]").click() cy.get(".menu-container").within(() => { cy.get("input").type(" Updated") cy.contains("Save").click() @@ -126,11 +115,11 @@ context("Create a View", () => { }) it("deletes a view", () => { - cy.contains("[data-cy=table-nav-item]", "Test View Updated").click() - cy.contains("[data-cy=table-nav-item]", "Test View Updated") - .find(".ri-more-line") + cy.contains(".nav-item", "Test View Updated") + .find(".actions") + .invoke("show") .click() - cy.contains("Delete").click() + cy.get("[data-cy=delete-view]").click() cy.contains("Delete View").click() cy.contains("TestView Updated").should("not.be.visible") }) diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js index ece9565e18..fdc0b2f49c 100644 --- a/packages/builder/cypress/support/commands.js +++ b/packages/builder/cypress/support/commands.js @@ -31,9 +31,7 @@ Cypress.Commands.add("createApp", name => { .then($body => { if ($body.find("input[name=apiKey]").length) { // input was found, do something else here - cy.get("input[name=apiKey]") - .type(name) - .should("have.value", name) + cy.get("input[name=apiKey]").type(name).should("have.value", name) cy.contains("Next").click() } }) @@ -44,14 +42,10 @@ Cypress.Commands.add("createApp", name => { cy.contains("Next").click() - cy.get("input[name=username]") - .click() - .type("test") - cy.get("input[name=password]") - .click() - .type("test") + cy.get("input[name=username]").click().type("test") + cy.get("input[name=password]").click().type("test") cy.contains("Submit").click() - cy.contains("Create New Table", { + cy.get("[data-cy=new-table]", { timeout: 20000, }).should("be.visible") }) @@ -65,28 +59,22 @@ Cypress.Commands.add("createTestTableWithData", () => { Cypress.Commands.add("createTable", tableName => { // Enter table name - cy.contains("Create New Table").click() + cy.get("[data-cy=new-table]").click() cy.get(".modal").within(() => { - cy.get("input") - .first() - .type(tableName) - cy.get(".buttons") - .contains("Create") - .click() + cy.get("input").first().type(tableName) + cy.get(".buttons").contains("Create").click() }) cy.contains(tableName).should("be.visible") }) Cypress.Commands.add("addColumn", (tableName, columnName, type) => { // Select Table - cy.contains(tableName).click() + cy.contains(".nav-item", tableName).click() cy.contains("Create New Column").click() // Configure column cy.get(".menu-container").within(() => { - cy.get("input") - .first() - .type(columnName) + cy.get("input").first().type(columnName) // Unset table display column cy.contains("display column").click() cy.get("select").select(type) @@ -99,15 +87,11 @@ Cypress.Commands.add("addRow", values => { cy.get(".modal").within(() => { for (let i = 0; i < values.length; i++) { - cy.get("input") - .eq(i) - .type(values[i]) + cy.get("input").eq(i).type(values[i]) } // Save - cy.get(".buttons") - .contains("Create") - .click() + cy.get(".buttons").contains("Create").click() }) }) @@ -116,20 +100,12 @@ Cypress.Commands.add("createUser", (username, password, accessLevel) => { cy.get(".toprightnav > .settings").click() cy.contains("Users").click() - cy.get("[name=Name]") - .first() - .type(username) - cy.get("[name=Password]") - .first() - .type(password) - cy.get("select") - .first() - .select(accessLevel) + cy.get("[name=Name]").first().type(username) + cy.get("[name=Password]").first().type(password) + cy.get("select").first().select(accessLevel) // Save - cy.get(".inputs") - .contains("Create") - .click() + cy.get(".inputs").contains("Create").click() }) Cypress.Commands.add("addHeadlineComponent", text => { @@ -149,19 +125,15 @@ Cypress.Commands.add("addButtonComponent", () => { }) Cypress.Commands.add("navigateToFrontend", () => { - cy.contains("frontend").click() + cy.contains("design").click() }) Cypress.Commands.add("createScreen", (screenName, route) => { - cy.contains("Create New Screen").click() + cy.get("[data-cy=new-screen]").click() cy.get(".modal").within(() => { - cy.get("input") - .eq(0) - .type(screenName) + cy.get("input").eq(0).type(screenName) if (route) { - cy.get("input") - .eq(1) - .type(route) + cy.get("input").eq(1).type(route) } cy.contains("Create Screen").click() }) diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte index b6a2298a22..e09803e130 100644 --- a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte +++ b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte @@ -11,7 +11,10 @@

Automations

- +
diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte index 38ef221e86..85a52efacb 100644 --- a/packages/builder/src/components/backend/DataTable/Table.svelte +++ b/packages/builder/src/components/backend/DataTable/Table.svelte @@ -43,7 +43,7 @@
-
+

{title}

{#if loading}
@@ -125,19 +125,19 @@ gap: var(--spacing-l); } - .title { + .table-title { height: 24px; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } - .title h1 { + .table-title h1 { font-size: var(--font-size-m); font-weight: 500; margin: 0; } - .title > div { + .table-title > div { margin-left: var(--spacing-xs); } diff --git a/packages/builder/src/components/backend/DataTable/popovers/RowPopover.svelte b/packages/builder/src/components/backend/DataTable/popovers/RowPopover.svelte index b20af655a1..c1c091555e 100644 --- a/packages/builder/src/components/backend/DataTable/popovers/RowPopover.svelte +++ b/packages/builder/src/components/backend/DataTable/popovers/RowPopover.svelte @@ -36,11 +36,16 @@
- + + on:click={showDelete} + data-cy="delete-row" /> - import { Heading, Body, Button, Select, Label } from "@budibase/bbui" + import { Select, Label } from "@budibase/bbui" import { notifier } from "builderStore/store/notifications" import { FIELDS } from "constants/backend" import api from "builderStore/api" - const BYTES_IN_KB = 1000 const BYTES_IN_MB = 1000000 const FILE_SIZE_LIMIT = BYTES_IN_MB * 1 @@ -70,15 +69,16 @@ const fileArray = Array.from(evt.target.files) if (fileArray.some(file => file.size >= FILE_SIZE_LIMIT)) { notifier.danger( - `Files cannot exceed ${FILE_SIZE_LIMIT / - BYTES_IN_MB}MB. Please try again with smaller files.` + `Files cannot exceed ${ + FILE_SIZE_LIMIT / BYTES_IN_MB + }MB. Please try again with smaller files.` ) return } // Read CSV as plain text to upload alongside schema let reader = new FileReader() - reader.addEventListener("load", function(e) { + reader.addEventListener("load", function (e) { csvString = e.target.result files = fileArray validateCSV() diff --git a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte index d5a88d85d7..3d7fee0b09 100644 --- a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte +++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte @@ -29,11 +29,9 @@ function showModal() { const screens = $store.screens - templateScreens = screens.filter( - (screen) => screen.autoTableId === table._id - ) + templateScreens = screens.filter(screen => screen.autoTableId === table._id) willBeDeleted = ["All table data"].concat( - templateScreens.map((screen) => `Screen ${screen.props._instanceName}`) + templateScreens.map(screen => `Screen ${screen.props._instanceName}`) ) hideEditor() confirmDeleteDialog.show() @@ -57,7 +55,7 @@ const tableName = evt.target.value if ( originalName !== tableName && - $backendUiStore.models?.some((model) => model.name === tableName) + $backendUiStore.models?.some(model => model.name === tableName) ) { error = `Table with name ${tableName} already exists. Please choose another name.` return @@ -87,11 +85,16 @@
{:else} - + + on:click={showModal} + data-cy="delete-table" /> {/if} diff --git a/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte b/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte index 347f03ac22..22fe6b4e86 100644 --- a/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte +++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte @@ -62,10 +62,15 @@
{:else} - + {/if} diff --git a/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte b/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte index 459c318349..66a384fc90 100644 --- a/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte +++ b/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte @@ -5,7 +5,12 @@ export let disabled -
+
{#if icon}{/if}
{title}
diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte index 8cbfa63499..b0f90a10a9 100644 --- a/packages/builder/src/components/common/NavItem.svelte +++ b/packages/builder/src/components/common/NavItem.svelte @@ -11,7 +11,7 @@