stub bindings

packages/builder/package.json

@@ -16,38 +16,7 @@
     "cy:test": "start-server-and-test cy:setup http://localhost:4001/_builder cy:run"
   },
   "jest": {
-    "globals": {
-      "GLOBALS": {
-        "client": "web"
-      }
-    },
-    "testURL": "http://jest-breaks-if-this-does-not-exist",
-    "moduleNameMapper": {
-      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/internals/mocks/fileMock.js",
-      "\\.(css|less|sass|scss)$": "identity-obj-proxy",
-      "components(.*)$": "<rootDir>/src/components$1",
-      "builderStore(.*)$": "<rootDir>/src/builderStore$1"
-    },
-    "moduleFileExtensions": [
-      "js",
-      "svelte"
-    ],
-    "moduleDirectories": [
-      "node_modules"
-    ],
-    "transform": {
-      "^.+js$": "babel-jest",
-      "^.+.svelte$": "svelte-jester"
-    },
-    "transformIgnorePatterns": [
-      "/node_modules/(?!svelte).+\\.js$"
-    ],
-    "modulePathIgnorePatterns": [
-      "<rootDir>/cypress/"
-    ],
-    "setupFilesAfterEnv": [
-      "@testing-library/jest-dom/extend-expect"
-    ]
+   "testEnvironment": "node"
   },
   "eslintConfig": {
     "extends": [
@@ -86,12 +55,12 @@
     "@sveltech/routify": "1.7.11",
     "@testing-library/jest-dom": "^5.11.0",
     "@testing-library/svelte": "^3.0.0",
-    "babel-jest": "^24.8.0",
+    "babel-jest": "^26.2.2",
     "browser-sync": "^2.26.7",
     "cypress": "^4.8.0",
     "eslint-plugin-cypress": "^2.11.1",
     "http-proxy-middleware": "^0.19.1",
-    "jest": "^24.8.0",
+    "jest": "^26.2.2",
     "ncp": "^2.0.0",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",

packages/builder/src/builderStore/fetchBindableProperties.js

@@ -1,3 +1,23 @@
+const stubBindings = [
+  {
+    // type: instance represents a bindable property of a component
+    type: "instance",
+    instance: {} /** a component instance **/,
+    // how the binding expression persists, and is used in the app at runtime
+    runtimeBinding: "state.<component instance Id>.<component property name>",
+    // how the binding exressions looks to the user of the builder
+    readableBinding: "<component instance name>",
+  },
+  {
+    type: "context",
+    instance: { /** a component instance **/},
+    // how the binding expression persists, and is used in the app at runtime
+    runtimeBinding: "context._parent.<key of model/record>",
+    // how the binding exressions looks to the user of the builder
+    readableBinding: "<component instance name>.<model/view name>.<key>",
+  },
+]
+
 export default function({ componentInstanceId, screen, components, models }) {
   const { target, targetAncestors, bindableInstances, bindableContexts } = walk(
     {
@@ -70,7 +90,7 @@ const walk = ({ instance, targetId, components, models, result }) => {
     // found it
     result.target = instance
   } else {
-    if (instance.bindable) {
+    if (component.bindable) {
       // pushing all components in here initially
       // but this will not be correct, as some of
       // these components will be in another context
@@ -78,12 +98,10 @@ const walk = ({ instance, targetId, components, models, result }) => {
       // so we will filter in another metod
       result.bindableInstances.push({
         instance,
-        prop: instance.bindable,
+        prop: component.bindable,
       })
     }
   }
-  console.log(instance._component)
-  console.debug(components)
   // a component that provides context to it's children
   const contextualInstance = component.context && instance[component.context]
 
@@ -98,7 +116,7 @@ const walk = ({ instance, targetId, components, models, result }) => {
   for (let child of instance._children || []) {
     result.parentMap[child._id] = parentInstance._id
     result.currentAncestors.push(instance)
-    walk({ instance, targetId, components, models, result })
+    walk({ instance: child, targetId, components, models, result })
     result.currentAncestors.pop()
   }
 

packages/builder/tests/binding.spec.js

@@ -1,20 +1,26 @@
-import fetchbindableProperties from "../src/builderStore/fetchBindableProperties"
-
+import fetchBindableProperties from "../src/builderStore/fetchBindableProperties"
 describe("fetch bindable properties", () => {
 
   it("should return bindable properties from screen components", () => {
-    const result = fetchbindableProperties({
+    const result = fetchBindableProperties({
       componentInstanceId: "heading-id",
       ...testData()
     })
     const componentBinding = result.find(r => r.instance._id === "search-input-id")
+    console.debug(componentBinding)
+    console.debug("result:" + JSON.stringify(result))
     expect(componentBinding).toBeDefined()
     expect(componentBinding.type).toBe("instance")
     expect(componentBinding.runtimeBinding).toBe("state.search-input-id.value")
   })
 
   it("should not return bindable components when not in their context", () => {
-
+    const result = fetchBindableProperties({
+      componentInstanceId: "heading-id",
+      ...testData()
+    })
+    const componentBinding = result.find(r => r.instance._id === "list-item-input-id")
+    expect(componentBinding).not.toBeDefined()
   })
 
   it("should return model schema, when inside a context", () => {
@@ -70,7 +76,13 @@ const testData = () => {
               _instanceName: "list item heading",
               _component: "@budibase/standard-components/heading",
               text: "hello"
-            }
+            },
+            {
+              _id: "list-item-input-id",
+              _instanceName: "List Item Input",
+              _component: "@budibase/standard-components/input",
+              value: "list item"
+            },
           ]
         },
       ]
@@ -78,7 +90,7 @@ const testData = () => {
   }
 
   const models = [{
-    id: "test-model-id",
+    _id: "test-model-id",
     name: "Test Model",
       schema: {
         name: {