From 80970ba0356ab70ba8c1897abd735a625a63d85e Mon Sep 17 00:00:00 2001 From: Martin McKeaveney Date: Wed, 19 Aug 2020 16:43:04 +0100 Subject: [PATCH] full cypress suite for custom views --- .../cypress/integration/createView.spec.js | 85 +++++++++++++++++++ packages/builder/package.json | 2 +- .../builder/src/builderStore/store/backend.js | 4 - .../database/DataTable/ModelDataTable.svelte | 1 + .../database/DataTable/Table.svelte | 10 +-- .../database/DataTable/ViewDataTable.svelte | 7 +- .../DataTable/modals/DeleteView.svelte | 4 +- .../DataTable/popovers/Calculate.svelte | 6 +- .../database/DataTable/popovers/Column.svelte | 2 +- .../DataTable/popovers/GroupBy.svelte | 10 +-- .../database/DataTable/popovers/Row.svelte | 2 +- .../database/DataTable/popovers/View.svelte | 6 +- .../nav/ModelNavigator/EditView.svelte | 2 +- .../nav/ModelNavigator/ListItem.svelte | 2 +- packages/builder/yarn.lock | 8 +- 15 files changed, 114 insertions(+), 37 deletions(-) create mode 100644 packages/builder/cypress/integration/createView.spec.js diff --git a/packages/builder/cypress/integration/createView.spec.js b/packages/builder/cypress/integration/createView.spec.js new file mode 100644 index 0000000000..b605135ad4 --- /dev/null +++ b/packages/builder/cypress/integration/createView.spec.js @@ -0,0 +1,85 @@ +context('Create a View', () => { + before(() => { + cy.visit('localhost:4001/_builder') + cy.createApp('View App', 'View App Description') + cy.createTable('data') + cy.addColumn('data', 'group', 'Plain Text') + cy.addColumn('data', 'age', 'Number') + cy.addColumn('data', 'rating', 'Number') + + cy.addRecord(["Students", 25, 1]) + cy.addRecord(["Students", 20, 3]) + cy.addRecord(["Students", 18, 6]) + cy.addRecord(["Students", 25, 2]) + cy.addRecord(["Teachers", 49, 5]) + cy.addRecord(["Teachers", 36, 3]) + }) + + + it('creates a stats view based on age', () => { + cy.contains("Create New View").click() + cy.get("[placeholder='View Name']").type("Test View") + cy.contains("Save View").click() + cy.get("thead th").should(($headers) => { + expect($headers).to.have.length(7) + const headers = $headers.map((i, header) => Cypress.$(header).text()) + expect(headers.get()).to.deep.eq([ + "group", + "sum", + "min", + "max", + "sumsqr", + "count", + "avg", + ]) + }) + cy.get("tbody td").should(($values) => { + const values = $values.map((i, value) => Cypress.$(value).text()) + expect(values.get()).to.deep.eq([ + "null", + "173", + "18", + "49", + "5671", + "6", + "28.833333333333332" + ]) + }) + }) + + it('groups the stats view by group', () => { + cy.contains("Group By").click() + cy.get("select").select("group") + cy.contains("Save").click() + cy.contains("Students").should("be.visible") + cy.contains("Teachers").should("be.visible") + + cy.get("tbody tr").first().find("td").should(($values) => { + const values = $values.map((i, value) => Cypress.$(value).text()) + expect(values.get()).to.deep.eq([ + "Students", + "88", + "18", + "25", + "1974", + "4", + "22" + ]) + }) + }) + + it('renames a view', () => { + cy.contains("[data-cy=model-nav-item]", "Test View").find(".ri-more-line").click() + cy.contains("Edit").click() + cy.get("[placeholder='View Name']").type(" Updated") + cy.contains("Save").click() + cy.contains("Test View Updated").should("be.visible") + }) + + it('deletes a view', () => { + cy.contains("[data-cy=model-nav-item]", "Test View Updated").find(".ri-more-line").click() + cy.contains("Delete").click() + cy.get(".content").contains("button", "Delete").click() + cy.contains("TestView Updated").should("not.be.visible") + }) +}) diff --git a/packages/builder/package.json b/packages/builder/package.json index 5b77a06687..c9e8cca9be 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -57,7 +57,7 @@ ] }, "dependencies": { - "@budibase/bbui": "^1.24.0", + "@budibase/bbui": "^1.24.1", "@budibase/client": "^0.1.17", "@budibase/colorpicker": "^1.0.1", "@nx-js/compiler-util": "^2.0.0", diff --git a/packages/builder/src/builderStore/store/backend.js b/packages/builder/src/builderStore/store/backend.js index a5a79ead64..80f931686b 100644 --- a/packages/builder/src/builderStore/store/backend.js +++ b/packages/builder/src/builderStore/store/backend.js @@ -118,10 +118,6 @@ export const getBackendUiStore = () => { }), delete: async view => { await api.delete(`/api/views/${view}`) - store.update(state => { - store.actions.models.select(state.models[0]) - return state - }) await store.actions.models.fetch() }, save: async view => { diff --git a/packages/builder/src/components/database/DataTable/ModelDataTable.svelte b/packages/builder/src/components/database/DataTable/ModelDataTable.svelte index 2b1f9288c4..e8cc1b6bab 100644 --- a/packages/builder/src/components/database/DataTable/ModelDataTable.svelte +++ b/packages/builder/src/components/database/DataTable/ModelDataTable.svelte @@ -176,6 +176,7 @@ .popovers { display: flex; + gap: var(--spacing-l); } .no-data { diff --git a/packages/builder/src/components/database/DataTable/Table.svelte b/packages/builder/src/components/database/DataTable/Table.svelte index 5d519cd7c8..02d6814222 100644 --- a/packages/builder/src/components/database/DataTable/Table.svelte +++ b/packages/builder/src/components/database/DataTable/Table.svelte @@ -105,15 +105,6 @@ vertical-align: middle; } - .edit-header { - width: 100px; - cursor: default; - } - - .edit-header:hover { - color: var(--ink); - } - th:hover { color: var(--blue); cursor: pointer; @@ -142,6 +133,7 @@ .popovers { display: flex; + gap: var(--spacing-l); } .no-data { diff --git a/packages/builder/src/components/database/DataTable/ViewDataTable.svelte b/packages/builder/src/components/database/DataTable/ViewDataTable.svelte index b42aec4b91..220b099fda 100644 --- a/packages/builder/src/components/database/DataTable/ViewDataTable.svelte +++ b/packages/builder/src/components/database/DataTable/ViewDataTable.svelte @@ -21,7 +21,7 @@ let COLUMNS = [ { - name: "Group", + name: "group", key: "key", }, { @@ -54,9 +54,10 @@ let data = [] - $: !view.name.startsWith("all_") && fetchViewData(view) + $: ({ name, groupBy } = view) + $: !name.startsWith("all_") && fetchViewData(name, groupBy) - async function fetchViewData({ name, groupBy }) { + async function fetchViewData(name, groupBy) { let QUERY_VIEW_URL = `/api/views/${name}?stats=true` if (groupBy) { QUERY_VIEW_URL += `&group=${groupBy}` diff --git a/packages/builder/src/components/database/DataTable/modals/DeleteView.svelte b/packages/builder/src/components/database/DataTable/modals/DeleteView.svelte index 5eef223013..6d8f3b7455 100644 --- a/packages/builder/src/components/database/DataTable/modals/DeleteView.svelte +++ b/packages/builder/src/components/database/DataTable/modals/DeleteView.svelte @@ -1,4 +1,5 @@
- +
Calculate
diff --git a/packages/builder/src/components/database/DataTable/popovers/Column.svelte b/packages/builder/src/components/database/DataTable/popovers/Column.svelte index c0619fe68a..6628675627 100644 --- a/packages/builder/src/components/database/DataTable/popovers/Column.svelte +++ b/packages/builder/src/components/database/DataTable/popovers/Column.svelte @@ -1,6 +1,6 @@
- +
Group By

Group By

+