findVarUsage add tests and cleanup

src/variables/editor/editor-test.js

@@ -1,7 +1,7 @@
 import { assert } from 'chai'
 import { VariableEditorVM } from './editor'
-import { findVarUsage } from './findVarUsage'
-import { testPages, expectedHtml } from './testPages'
+import { findVarUsage } from './util/findVarUsage'
+import { testPages, expectedGreedyHtml, expectedExplicitHtml } from './util/testPages'
 
 import 'steal-mocha'
 
@@ -12,17 +12,24 @@ describe('<editor>', () => {
     beforeEach(() => {
       vm = new VariableEditorVM()
     })
-    it('smoketest', () => {
-      assert.equal(vm.initialVariable, undefined, 'should start with no initial variables')
+    it('smoke test', () => {
+      assert.equal(vm.initialVariable, undefined, 'should start with no initial variable')
     })
   })
 
   describe('findVarUsage', () => {
-    it('gathers usage on Page, Field, and Button level property values using variables', function () {
+    it.only('gathers Greedy variable usage based on case insensitive variable name, aka "foo" and "foo123".', function () {
       const { pageCount, html } = findVarUsage('Foo', testPages)
 
       assert.equal(pageCount, 3, 'should return pageCount for variable usage across pages, fields, macros, buttons, and logic')
-      assert.equal(html, expectedHtml, 'should return html message for found locations')
+      assert.equal(html, expectedGreedyHtml, 'should return html message for found locations')
+    })
+
+    it('gathers Explicit variable usage based on case insensitive variable name, aka just "foo".', function () {
+      const { pageCount, html } = findVarUsage('Foo', testPages)
+
+      assert.equal(pageCount, 2, 'should return pageCount for variable usage across pages, fields, macros, buttons, and logic')
+      assert.equal(html, expectedExplicitHtml, 'should return html message for found locations')
     })
   })
 })

src/variables/editor/editor.js

@@ -2,7 +2,7 @@ import DefineMap from 'can-define/map/map'
 import Component from 'can-component'
 import template from './editor.stache'
 import constants from '~/src/models/constants'
-import { findVarUsage } from './findVarUsage'
+import { findVarUsage } from './util/findVarUsage'
 
 export const VariableEditorVM = DefineMap.extend('VariableEditorVM', {
   /*
@@ -117,6 +117,10 @@ export const VariableEditorVM = DefineMap.extend('VariableEditorVM', {
     }
   },
 
+  useExplicitSearch: {
+    default: false
+  },
+
   emitVariable () {
     if (this._willEmit) {
       return
@@ -153,14 +157,13 @@ export const VariableEditorVM = DefineMap.extend('VariableEditorVM', {
 
   onFindVarUsage () {
     // use the initially loaded name in case they've edited it in the form before checking usage
-    const variableName = this.initialVarName
-    const searchPages = this.guide.pages || {}
-    const { pageCount, html } = findVarUsage(variableName, searchPages)
-
-    this.variableUsageHtml = html
+    const varName = this.initialVarName
+    const pages = this.guide.sortedPages || []
+    const useExplicitSearch = this.useExplicitSearch
 
-    // courtesy return for testing
-    return { pageCount, html }
+    const results = findVarUsage(varName, pages, useExplicitSearch)
+    console.log('results', results)
+    return results
   }
 })
 

src/variables/editor/util/findVarUsage.js

@@ -0,0 +1,72 @@
+import DefineMap from 'can-define/map/map'
+import { pageProps, fieldProps, buttonProps } from './propsLists'
+
+const getRegEx = (varName, useExplicitSearch) => {
+  const lowerCaseVarName = varName.toLowerCase()
+
+  const parens = `\\(${lowerCaseVarName}\\)`
+  const percent = `\\%${lowerCaseVarName}\\%`
+  const brackets = `\\[${lowerCaseVarName}\\]`
+  const noTrailingQuotes = `${lowerCaseVarName}(?!")`
+  const implicitPrep = `(?<!")${lowerCaseVarName}`
+
+  const implicitRegEx = new RegExp(`${implicitPrep}&${noTrailingQuotes}|${parens}|${percent}|${brackets}|${lowerCaseVarName}`, 'gi')
+  const greedyRegEx = new RegExp(`${noTrailingQuotes}|${parens}|${percent}|${brackets}|${lowerCaseVarName}`, 'gi')
+
+  return useExplicitSearch ? implicitRegEx : greedyRegEx
+}
+
+const getMatches = (page, regEx) => { // pages or fields or buttons
+  const foundMatches = { page: [], fields: [], buttons: [] }
+  // check top level page properties
+  for (const entry of pageProps) {
+    const prop = entry.key
+    const testValue = page[prop]
+
+    const matches = testValue.match(regEx)
+
+    if (matches && matches.length) {
+      foundMatches.page.push(entry.display)
+    }
+  }
+
+  for (const field of page.fields) {
+    for (const entry of fieldProps) {
+      const prop = entry.key
+      const testValue = field[prop]
+
+      const matches = testValue.match(regEx)
+
+      if (matches && matches.length) {
+        foundMatches.fields.push(entry.display)
+      }
+    }
+  }
+
+  for (const button of page.buttons) {
+    for (const entry of buttonProps) {
+      const prop = entry.key
+      const testValue = button[prop]
+
+      const matches = testValue.match(regEx)
+
+      if (matches && matches.length) {
+        foundMatches.buttons.push(entry.display)
+      }
+    }
+  }
+
+  return foundMatches
+}
+
+export const findVarUsage = (varName, pages, useExplicitSearch) => {
+  const regEx = getRegEx(varName, useExplicitSearch)
+  const matches = new DefineMap({})
+
+  for (const page of pages) {
+    matches[page.name] = getMatches(page, regEx)
+  }
+
+  console.log('final matches', matches)
+  return matches
+}

src/variables/editor/util/propsLists.js

@@ -0,0 +1,27 @@
+export const pageProps = [
+  { key: 'name', type: 'macro', display: 'Page Name' },
+  { key: 'text', type: 'macro', display: 'Question Text' },
+  { key: 'repeatVar', type: 'string', display: 'Counting Variable' },
+  { key: 'outerLoopVar', type: 'string', display: 'Outer Loop Variable' },
+  { key: 'learn', type: 'macro', display: 'LearnMore Prompt' },
+  { key: 'help', type: 'macro', display: 'LearnMore Response' },
+  { key: 'helpReader', type: 'macro', display: 'Video Transcript' },
+  { key: 'codeBefore', type: 'logic', display: 'Before Logic' },
+  { key: 'codeAfter', type: 'logic', display: 'After Logic' }
+]
+
+export const fieldProps = [
+  { key: 'label', type: 'macro', display: 'Field Label' },
+  { key: 'name', type: 'string', display: 'Field Variable' },
+  { key: 'value', type: 'macro', display: 'Field Default Value' },
+  { key: 'invalidPrompt', type: 'macro', display: 'Field Custom Invalid Prompt' },
+  { key: 'sample', type: 'macro', display: 'Field Sample Value' }
+]
+
+export const buttonProps = [
+  { key: 'label', type: 'macro', display: 'Button Label' },
+  { key: 'name', type: 'string', display: 'Button Variable Name' },
+  { key: 'value', type: 'macro', display: 'Button Default Value' },
+  { key: 'repeatVar', type: 'string', display: 'Button Counting Variable' },
+  { key: 'url', type: 'macro', display: 'Button URL' }
+]