From 1d56d9a2ce7bc38da56f121bec6c826acada9f43 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Mon, 24 Aug 2020 15:48:34 +0100
Subject: [PATCH] cypress tests, lint, feature complete

---
 .../cypress/integration/createView.spec.js    | 61 +++++++++++----
 .../builder/src/builderStore/store/backend.js | 26 ++-----
 .../builder/src/builderStore/store/index.js   |  3 -
 .../database/DataTable/ViewDataTable.svelte   | 12 +--
 .../modals/RecordFieldControl.svelte          | 16 +---
 .../DataTable/popovers/Calculate.svelte       |  2 +-
 .../DataTable/popovers/GroupBy.svelte         |  2 +-
 .../nav/ModelNavigator/ModelNavigator.svelte  |  8 +-
 .../server/src/api/controllers/view/index.js  |  4 +-
 .../__snapshots__/viewBuilder.spec.js.snap    | 62 +++++++++++----
 .../view/tests/viewBuilder.spec.js            | 11 ++-
 .../src/api/controllers/view/viewBuilder.js   | 77 +++++++++++--------
 .../tests/__snapshots__/view.spec.js.snap     | 48 +++++-------
 .../server/src/api/routes/tests/view.spec.js  | 13 ++--
 14 files changed, 197 insertions(+), 148 deletions(-)

diff --git a/packages/builder/cypress/integration/createView.spec.js b/packages/builder/cypress/integration/createView.spec.js
index b605135ad4..69433cb6cc 100644
--- a/packages/builder/cypress/integration/createView.spec.js
+++ b/packages/builder/cypress/integration/createView.spec.js
@@ -1,4 +1,7 @@
+
 context('Create a View', () => {
+    const TOTAL_RECORDS = 6
+
     before(() => {
         cy.visit('localhost:4001/_builder')
         cy.createApp('View App', 'View App Description')
@@ -7,6 +10,7 @@ context('Create a View', () => {
         cy.addColumn('data', 'age', 'Number')
         cy.addColumn('data', 'rating', 'Number')
 
+        // 6 Records
         cy.addRecord(["Students", 25, 1])
         cy.addRecord(["Students", 20, 3])
         cy.addRecord(["Students", 18, 6])
@@ -15,11 +19,39 @@ context('Create a View', () => {
         cy.addRecord(["Teachers", 36, 3])
     })
 
-
-    it('creates a stats view based on age', () => {
+    it('creates a view', () => {
       cy.contains("Create New View").click()
       cy.get("[placeholder='View Name']").type("Test View")
       cy.contains("Save View").click()
+      cy.get(".title").contains("Test View")
+      cy.get("thead th").should(($headers) => {
+        expect($headers).to.have.length(3)
+        const headers = $headers.map((i, header) => Cypress.$(header).text())
+        expect(headers.get()).to.deep.eq([
+          "group",
+          "age",
+          "rating"
+        ])
+      })
+    });
+
+    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("input[placeholder='age']").type(18)
+      cy.contains("Save").click()
+      cy.get("tbody tr").should(($values) => {
+        expect($values).to.have.length(5)
+      })
+    });
+
+    it('creates a stats calculation view based on age', () => {
+      cy.contains("Calculate").click()
+      cy.get(".menu-container").find("select").first().select("Statistics")
+      cy.get(".menu-container").find("select").eq(1).select("age")
+      cy.contains("Save").click()
       cy.get("thead th").should(($headers) => {
         expect($headers).to.have.length(7)
         const headers = $headers.map((i, header) => Cypress.$(header).text())
@@ -28,8 +60,8 @@ context('Create a View', () => {
           "sum",
           "min",
           "max",
-          "sumsqr",
           "count",
+          "sumsqr",
           "avg",
         ])
       })
@@ -37,17 +69,17 @@ context('Create a View', () => {
         const values = $values.map((i, value) => Cypress.$(value).text())
         expect(values.get()).to.deep.eq([
           "null",
-          "173",
-          "18",
+          "155",
+          "20",
           "49",
-          "5671",
-          "6",
-          "28.833333333333332"
+          "5",
+          "5347",
+          "31"
         ])
       })
     })
 
-    it('groups the stats view by group', () => {
+    it('groups the view by group', () => {
       cy.contains("Group By").click()
       cy.get("select").select("group")
       cy.contains("Save").click()
@@ -58,12 +90,12 @@ context('Create a View', () => {
         const values = $values.map((i, value) => Cypress.$(value).text())
         expect(values.get()).to.deep.eq([
           "Students",
-          "88",
-          "18",
+          "70",
+          "20",
           "25",
-          "1974",
-          "4",
-          "22"
+          "3",
+          "1650",
+          "23.333333333333332"
         ])
       })
     })
@@ -77,6 +109,7 @@ context('Create a View', () => {
     })
 
     it('deletes a view', () => {
+      cy.contains("[data-cy=model-nav-item]", "Test View Updated").click()
       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()
diff --git a/packages/builder/src/builderStore/store/backend.js b/packages/builder/src/builderStore/store/backend.js
index 24955fafc2..fec21a467e 100644
--- a/packages/builder/src/builderStore/store/backend.js
+++ b/packages/builder/src/builderStore/store/backend.js
@@ -9,10 +9,6 @@ const INITIAL_BACKEND_UI_STATE = {
   selectedDatabase: {},
   selectedModel: {},
   draftModel: {},
-  tabs: {
-    SETUP_PANEL: "SETUP",
-    NAVIGATION_PANEL: "NAVIGATE",
-  },
 }
 
 export const getBackendUiStore = () => {
@@ -128,7 +124,12 @@ export const getBackendUiStore = () => {
       },
       save: async view => {
         const response = await api.post(`/api/views`, view)
-        const viewMeta = await response.json()
+        const json = await response.json()
+
+        const viewMeta = {
+          name: view.name,
+          ...json,
+        }
 
         store.update(state => {
           const viewModel = state.models.find(
@@ -136,13 +137,10 @@ export const getBackendUiStore = () => {
           )
 
           if (view.originalName) delete viewModel.views[view.originalName]
-          viewModel.views[view.name] = viewMeta 
+          viewModel.views[view.name] = viewMeta
 
           state.models = state.models
-          state.selectedView = {
-            name: view.name,
-            ...viewMeta
-          }
+          state.selectedView = viewMeta
           return state
         })
       },
@@ -159,11 +157,3 @@ export const getBackendUiStore = () => {
 
   return store
 }
-
-// Store Actions
-export const createDatabaseForApp = store => appInstance => {
-  store.update(state => {
-    state.appInstances.push(appInstance)
-    return state
-  })
-}
diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js
index f5849c480a..c97eb48f25 100644
--- a/packages/builder/src/builderStore/store/index.js
+++ b/packages/builder/src/builderStore/store/index.js
@@ -1,7 +1,6 @@
 import { values, cloneDeep } from "lodash/fp"
 import { get_capitalised_name } from "../../helpers"
 import { backendUiStore } from "builderStore"
-import * as backendStoreActions from "./backend"
 import { writable, get } from "svelte/store"
 import api from "../api"
 import { DEFAULT_PAGES_OBJECT } from "../../constants"
@@ -50,8 +49,6 @@ export const getStore = () => {
 
   store.setPackage = setPackage(store, initial)
 
-  store.createDatabaseForApp = backendStoreActions.createDatabaseForApp(store)
-
   store.saveScreen = saveScreen(store)
   store.setCurrentScreen = setCurrentScreen(store)
   store.setCurrentPage = setCurrentPage(store)
diff --git a/packages/builder/src/components/database/DataTable/ViewDataTable.svelte b/packages/builder/src/components/database/DataTable/ViewDataTable.svelte
index 2346186409..11e0f85601 100644
--- a/packages/builder/src/components/database/DataTable/ViewDataTable.svelte
+++ b/packages/builder/src/components/database/DataTable/ViewDataTable.svelte
@@ -19,19 +19,21 @@
   import GroupByPopover from "./popovers/GroupBy.svelte"
   import FilterPopover from "./popovers/Filter.svelte"
 
-
   export let view = {}
 
   let data = []
 
-  $: ({ name, groupBy, filters, field } = view)
+  $: name = view.name
+  $: filters = view.filters
+  $: field = view.field
+  $: groupBy = view.groupBy
   $: !name.startsWith("all_") && filters && fetchViewData(name, field, groupBy)
 
   async function fetchViewData(name, field, groupBy) {
-    const params = new URLSearchParams();
+    const params = new URLSearchParams()
 
-    if (field) params.set("stats", true); 
-    if (groupBy) params.set("group", groupBy); 
+    if (field) params.set("stats", true)
+    if (groupBy) params.set("group", groupBy)
 
     let QUERY_VIEW_URL = `/api/views/${name}?${params}`
 
diff --git a/packages/builder/src/components/database/DataTable/modals/RecordFieldControl.svelte b/packages/builder/src/components/database/DataTable/modals/RecordFieldControl.svelte
index 8c3a6b858e..38d5d62064 100644
--- a/packages/builder/src/components/database/DataTable/modals/RecordFieldControl.svelte
+++ b/packages/builder/src/components/database/DataTable/modals/RecordFieldControl.svelte
@@ -1,33 +1,25 @@
 <script>
   import { Input, Select } from "@budibase/bbui"
 
-  export let value
   export let meta
+  export let value = meta.type === "boolean" ? false : ""
 
-  const isSelect = meta =>
+  let isSelect =
     meta.type === "string" &&
     meta.constraints &&
     meta.constraints.inclusion &&
     meta.constraints.inclusion.length > 0
-
   let type = determineInputType(meta)
-  let options = determineOptions(meta)
-
-  value = value || type === "checkbox" ? false : ""
 
   function determineInputType(meta) {
     if (meta.type === "datetime") return "date"
     if (meta.type === "number") return "number"
     if (meta.type === "boolean") return "checkbox"
-    if (isSelect(meta)) return "select"
+    if (isSelect) return "select"
 
     return "text"
   }
 
-  function determineOptions(meta) {
-    return isSelect(meta) ? meta.constraints.inclusion : []
-  }
-
   const handleInput = event => {
     if (event.target.type === "checkbox") {
       value = event.target.checked
@@ -46,7 +38,7 @@
 {#if type === 'select'}
   <Select thin secondary data-cy="{meta.name}-select" bind:value>
     <option />
-    {#each options as opt}
+    {#each meta.constraints.inclusion as opt}
       <option value={opt}>{opt}</option>
     {/each}
   </Select>
diff --git a/packages/builder/src/components/database/DataTable/popovers/Calculate.svelte b/packages/builder/src/components/database/DataTable/popovers/Calculate.svelte
index d0945c7d98..f43fec7ccb 100644
--- a/packages/builder/src/components/database/DataTable/popovers/Calculate.svelte
+++ b/packages/builder/src/components/database/DataTable/popovers/Calculate.svelte
@@ -15,7 +15,7 @@
     {
       name: "Statistics",
       key: "stats",
-    }
+    },
   ]
 
   export let view = {}
diff --git a/packages/builder/src/components/database/DataTable/popovers/GroupBy.svelte b/packages/builder/src/components/database/DataTable/popovers/GroupBy.svelte
index 23471f0cd2..1efef31a48 100644
--- a/packages/builder/src/components/database/DataTable/popovers/GroupBy.svelte
+++ b/packages/builder/src/components/database/DataTable/popovers/GroupBy.svelte
@@ -73,7 +73,7 @@
 
   .input-group-row {
     display: grid;
-    grid-template-columns: 50px 1fr 20px 1fr;
+    grid-template-columns: 75px 1fr 20px 1fr;
     gap: var(--spacing-s);
     margin-bottom: var(--spacing-l);
     align-items: center;
diff --git a/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte b/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte
index 0947fc944e..a055c0dc67 100644
--- a/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte
+++ b/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte
@@ -47,10 +47,10 @@
                 selected={selectedView === viewName}
                 title={viewName}
                 icon="ri-eye-line"
-                on:click={() => selectView({
-                    name: viewName,
-                    ...model.views[viewName],
-                  })}>
+                on:click={() => (selectedView === viewName ? {} : selectView({
+                        name: viewName,
+                        ...model.views[viewName],
+                      }))}>
                 <EditViewPopover
                   view={{ name: viewName, ...model.views[viewName] }} />
               </ListItem>
diff --git a/packages/server/src/api/controllers/view/index.js b/packages/server/src/api/controllers/view/index.js
index 8831fe571c..a45132c2af 100644
--- a/packages/server/src/api/controllers/view/index.js
+++ b/packages/server/src/api/controllers/view/index.js
@@ -46,10 +46,10 @@ const controller = {
     // add views to model document
     const model = await db.get(ctx.request.body.modelId)
     if (!model.views) model.views = {}
-    if (!view.meta.schema) { 
+    if (!view.meta.schema) {
       view.meta.schema = model.schema
     }
-    model.views[viewToSave.name] = view.meta 
+    model.views[viewToSave.name] = view.meta
 
     if (originalName) {
       delete model.views[originalName]
diff --git a/packages/server/src/api/controllers/view/tests/__snapshots__/viewBuilder.spec.js.snap b/packages/server/src/api/controllers/view/tests/__snapshots__/viewBuilder.spec.js.snap
index 758bf7e623..7f862357d1 100644
--- a/packages/server/src/api/controllers/view/tests/__snapshots__/viewBuilder.spec.js.snap
+++ b/packages/server/src/api/controllers/view/tests/__snapshots__/viewBuilder.spec.js.snap
@@ -1,5 +1,46 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`viewBuilder Calculate creates a view with the calculation statistics schema 1`] = `
+Object {
+  "map": "function (doc) {
+      if (doc.modelId === \\"14f1c4e94d6a47b682ce89d35d4c78b0\\" ) {
+        emit(doc[\\"_id\\"], doc[\\"myField\\"]);
+      }
+    }",
+  "meta": Object {
+    "calculation": "stats",
+    "field": "myField",
+    "filters": Array [],
+    "groupBy": undefined,
+    "modelId": "14f1c4e94d6a47b682ce89d35d4c78b0",
+    "schema": Object {
+      "avg": Object {
+        "type": "number",
+      },
+      "count": Object {
+        "type": "number",
+      },
+      "group": Object {
+        "type": "string",
+      },
+      "max": Object {
+        "type": "number",
+      },
+      "min": Object {
+        "type": "number",
+      },
+      "sum": Object {
+        "type": "number",
+      },
+      "sumsqr": Object {
+        "type": "number",
+      },
+    },
+  },
+  "reduce": "_stats",
+}
+`;
+
 exports[`viewBuilder Filter creates a view with multiple filters and conjunctions 1`] = `
 Object {
   "map": "function (doc) {
@@ -8,6 +49,7 @@ Object {
       }
     }",
   "meta": Object {
+    "calculation": undefined,
     "field": undefined,
     "filters": Array [
       Object {
@@ -24,16 +66,8 @@ Object {
     ],
     "groupBy": undefined,
     "modelId": "14f1c4e94d6a47b682ce89d35d4c78b0",
-    "schema": Object {
-      "avg": "number",
-      "count": "number",
-      "max": "number",
-      "min": "number",
-      "sum": "number",
-      "sumsqr": "number",
-    },
+    "schema": undefined,
   },
-  "reduce": "_stats",
 }
 `;
 
@@ -45,18 +79,12 @@ Object {
       }
     }",
   "meta": Object {
+    "calculation": undefined,
     "field": "score",
     "filters": Array [],
     "groupBy": "age",
     "modelId": "14f1c4e94d6a47b682ce89d35d4c78b0",
-    "schema": Object {
-      "avg": "number",
-      "count": "number",
-      "max": "number",
-      "min": "number",
-      "sum": "number",
-      "sumsqr": "number",
-    },
+    "schema": undefined,
   },
   "reduce": "_stats",
 }
diff --git a/packages/server/src/api/controllers/view/tests/viewBuilder.spec.js b/packages/server/src/api/controllers/view/tests/viewBuilder.spec.js
index 6c49100f10..555c5e71fb 100644
--- a/packages/server/src/api/controllers/view/tests/viewBuilder.spec.js
+++ b/packages/server/src/api/controllers/view/tests/viewBuilder.spec.js
@@ -1,10 +1,10 @@
-const statsViewTemplate = require("../viewBuilder");
+const viewTemplate = require("../viewBuilder");
 
 describe("viewBuilder", () => {
 
   describe("Filter", () => {
     it("creates a view with multiple filters and conjunctions", () => {
-      expect(statsViewTemplate({
+      expect(viewTemplate({
         "name": "Test View",
         "modelId": "14f1c4e94d6a47b682ce89d35d4c78b0",
         "filters": [{
@@ -22,17 +22,20 @@ describe("viewBuilder", () => {
   })
 
   describe("Calculate", () => {
-      expect(statsViewTemplate({
+    it("creates a view with the calculation statistics schema", () => {
+      expect(viewTemplate({
         "name": "Calculate View",
         "field": "myField",
+        "calculation": "stats",
         "modelId": "14f1c4e94d6a47b682ce89d35d4c78b0",
         "filters": []
       })).toMatchSnapshot()
+    })
   })
 
   describe("Group By", () => {
     it("creates a view emitting the group by field", () => {
-      expect(statsViewTemplate({
+      expect(viewTemplate({
         "name": "Test Scores Grouped By Age",
         "modelId": "14f1c4e94d6a47b682ce89d35d4c78b0",
         "groupBy": "age",
diff --git a/packages/server/src/api/controllers/view/viewBuilder.js b/packages/server/src/api/controllers/view/viewBuilder.js
index 9e7dc83a41..9ea22bfce0 100644
--- a/packages/server/src/api/controllers/view/viewBuilder.js
+++ b/packages/server/src/api/controllers/view/viewBuilder.js
@@ -12,27 +12,27 @@ const TOKEN_MAP = {
 const SCHEMA_MAP = {
   stats: {
     group: {
-      type: "string"
+      type: "string",
     },
-    sum: { 
-      type: "number"
+    sum: {
+      type: "number",
     },
-    min: { 
-      type: "number"
+    min: {
+      type: "number",
     },
-    max: { 
-      type: "number"
+    max: {
+      type: "number",
     },
-    count: { 
-      type: "number"
+    count: {
+      type: "number",
     },
-    sumsqr: { 
-      type: "number"
+    sumsqr: {
+      type: "number",
     },
-    avg: { 
-      type: "number"
-    }
-  }
+    avg: {
+      type: "number",
+    },
+  },
 }
 
 /**
@@ -45,37 +45,46 @@ function parseFilterExpression(filters) {
   const expression = []
 
   for (let filter of filters) {
-    if (filter.conjunction) expression.push(TOKEN_MAP[filter.conjunction]);
+    if (filter.conjunction) expression.push(TOKEN_MAP[filter.conjunction])
 
     if (filter.condition === "CONTAINS") {
       expression.push(
-        `doc["${filter.key}"].${TOKEN_MAP[filter.condition]}("${
-        filter.value
-      }")`)
-      return
+        `doc["${filter.key}"].${TOKEN_MAP[filter.condition]}("${filter.value}")`
+      )
+    } else {
+      expression.push(
+        `doc["${filter.key}"] ${TOKEN_MAP[filter.condition]} "${filter.value}"`
+      )
     }
-
-    expression.push(`doc["${filter.key}"] ${TOKEN_MAP[filter.condition]} "${
-      filter.value
-    }"`)
   }
 
   return expression.join(" ")
 }
 
+/**
+ * Returns a CouchDB compliant emit() expression that is used to emit the
+ * correct key/value pairs for custom views.
+ * @param {String?} field - field to use for calculations, if any
+ * @param {String?} groupBy - field to group calculation results on, if any
+ */
 function parseEmitExpression(field, groupBy) {
   if (field) return `emit(doc["${groupBy || "_id"}"], doc["${field}"]);`
   return `emit(doc._id);`
 }
 
-function viewTemplate({ 
-  field, 
-  modelId, 
-  groupBy, 
-  filters = [],
-  calculation
-}) {
-  const parsedFilters = parseFilterExpression(filters) 
+/**
+ * Return a fully parsed CouchDB compliant view definition
+ * that will be stored in the design document in the database.
+ *
+ * @param {Object} viewDefinition - the JSON definition for a custom view.
+ * field: field that calculations will be performed on
+ * modelId: modelId of the model this view was created from
+ * groupBy: field that calculations will be grouped by. Field must be present for this to be useful
+ * filters: Array of filter objects containing predicates that are parsed into a JS expression
+ * calculation: an optional calculation to be performed over the view data.
+ */
+function viewTemplate({ field, modelId, groupBy, filters = [], calculation }) {
+  const parsedFilters = parseFilterExpression(filters)
   const filterExpression = parsedFilters ? `&& ${parsedFilters}` : ""
 
   const emitExpression = parseEmitExpression(field, groupBy)
@@ -89,14 +98,14 @@ function viewTemplate({
       groupBy,
       filters,
       schema: SCHEMA_MAP[calculation],
-      calculation
+      calculation,
     },
     map: `function (doc) {
       if (doc.modelId === "${modelId}" ${filterExpression}) {
         ${emitExpression}
       }
     }`,
-    ...reduction
+    ...reduction,
   }
 }
 
diff --git a/packages/server/src/api/routes/tests/__snapshots__/view.spec.js.snap b/packages/server/src/api/routes/tests/__snapshots__/view.spec.js.snap
index 96ce281ee1..bee6418224 100644
--- a/packages/server/src/api/routes/tests/__snapshots__/view.spec.js.snap
+++ b/packages/server/src/api/routes/tests/__snapshots__/view.spec.js.snap
@@ -3,15 +3,13 @@
 exports[`/views query returns data for the created view 1`] = `
 Array [
   Object {
-    "key": null,
-    "value": Object {
-      "avg": 2333.3333333333335,
-      "count": 3,
-      "max": 4000,
-      "min": 1000,
-      "sum": 7000,
-      "sumsqr": 21000000,
-    },
+    "avg": 2333.3333333333335,
+    "count": 3,
+    "group": null,
+    "max": 4000,
+    "min": 1000,
+    "sum": 7000,
+    "sumsqr": 21000000,
   },
 ]
 `;
@@ -19,26 +17,22 @@ Array [
 exports[`/views query returns data for the created view using a group by 1`] = `
 Array [
   Object {
-    "key": "One",
-    "value": Object {
-      "avg": 1500,
-      "count": 2,
-      "max": 2000,
-      "min": 1000,
-      "sum": 3000,
-      "sumsqr": 5000000,
-    },
+    "avg": 1500,
+    "count": 2,
+    "group": "One",
+    "max": 2000,
+    "min": 1000,
+    "sum": 3000,
+    "sumsqr": 5000000,
   },
   Object {
-    "key": "Two",
-    "value": Object {
-      "avg": 4000,
-      "count": 1,
-      "max": 4000,
-      "min": 4000,
-      "sum": 4000,
-      "sumsqr": 16000000,
-    },
+    "avg": 4000,
+    "count": 1,
+    "group": "Two",
+    "max": 4000,
+    "min": 4000,
+    "sum": 4000,
+    "sumsqr": 16000000,
   },
 ]
 `;
diff --git a/packages/server/src/api/routes/tests/view.spec.js b/packages/server/src/api/routes/tests/view.spec.js
index 24948da3bc..a8daa73f64 100644
--- a/packages/server/src/api/routes/tests/view.spec.js
+++ b/packages/server/src/api/routes/tests/view.spec.js
@@ -66,13 +66,14 @@ describe("/views", () => {
         TestView: {
           field: "Price",
           modelId: model._id,
+          filters: [],
           schema: {
-            sum: "number",
-            min: "number",
-            max: "number",
-            count: "number",
-            sumsqr: "number",
-            avg: "number"
+            name: {
+              type: "text",
+              constraints: {
+                type: "string" 
+              }
+            }
           }
         }
       });