fix(advanced-variable): use advanced variable when advanced variable …

…delimiters are provided
ToucanToco · Aug 31, 2020 · 916d0e7 · 916d0e7
1 parent f2d6ccc
commit 916d0e7
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 26 deletions.
diff --git a/src/components/stepforms/widgets/VariableInputs/VariableChooser.vue b/src/components/stepforms/widgets/VariableInputs/VariableChooser.vue
@@ -29,7 +29,9 @@
           <span class="widget-variable-chooser__option-value">{{ availableVariable.value }}</span>
         </div>
       </div>
-      <div class="widget-advanced-variable" @click="addAdvancedVariable">Add variable</div>
+      <div v-if="isAdvanced" class="widget-advanced-variable" @click="addAdvancedVariable">
+        Advanced variable
+      </div>
     </div>
   </popover>
 </template>
@@ -52,6 +54,9 @@ export default class VariableChooser extends Vue {
   @Prop({ default: false })
   isMultiple!: boolean;
 
+  @Prop({ default: false })
+  isAdvanced!: boolean;
+
   @Prop({ default: () => [] })
   selectedVariables!: string[];
 

diff --git a/src/components/stepforms/widgets/VariableInputs/VariableInputBase.vue b/src/components/stepforms/widgets/VariableInputs/VariableInputBase.vue
@@ -23,6 +23,7 @@
       :available-variables="availableVariables"
       :is-opened="isChoosingVariable"
       :is-multiple="isMultiple"
+      :is-advanced="advancedVariableDelimiters"
       :value="value"
       :selected-variables="selectedVariables"
       @addAdvancedVariable="openAdvancedVariableModal"
@@ -65,12 +66,12 @@ export default class VariableInputBase extends Vue {
   @Prop({ default: () => [] })
   availableVariables!: VariablesBucket;
 
-  @Prop({ default: () => false })
-  useAdvancedVariable!: boolean;
-
   @Prop({ default: () => ({ start: '{{', end: '}}' }) })
   variableDelimiters!: VariableDelimiters;
 
+  @Prop({ default: null })
+  advancedVariableDelimiters!: VariableDelimiters;
+
   @Prop({ default: false })
   hasArrow!: boolean;
 
@@ -93,7 +94,8 @@ export default class VariableInputBase extends Vue {
    */
   get canBeVariable() {
     return (
-      (this.availableVariables && this.availableVariables.length > 0) || this.useAdvancedVariable
+      (this.availableVariables && this.availableVariables.length > 0) ||
+      this.advancedVariableDelimiters
     );
   }
 

diff --git a/stories/variable.js b/stories/variable.js
@@ -220,8 +220,8 @@ stories.add('wrapping a widget with advanced variable', () => ({
       <Multiselect 
         v-model="value" 
         :available-variables="availableVariables"
-        :variableDelimiters="variableDelimiters"
-        :use-advanced-variable="useAdvancedVariable"
+        :variable-delimiters="variableDelimiters"
+        :advanced-variable-delimiters="advancedVariableDelimiters"
         :options="options"
       />
       <pre>{{ value }}</pre>
@@ -234,9 +234,9 @@ stories.add('wrapping a widget with advanced variable', () => ({
     return {
       value: undefined,
       options: ['foo', 'bar', 'helloworld'],
-      useAdvancedVariable: true,
       availableVariables: SAMPLE_VARIABLES,
       variableDelimiters: { start: '{{', end: '}}' },
+      advancedVariableDelimiters: { start: '<<<', end: '>>>' },
     };
   },
 }));
@@ -246,8 +246,8 @@ stories.add('wrapping a widget with advanced variable and no variables', () => (
     <div>
       <Multiselect 
         v-model="value" 
-        :variableDelimiters="variableDelimiters"
-        :use-advanced-variable="useAdvancedVariable"
+        :variable-delimiters="variableDelimiters"
+        :advanced-variable-delimiters="advancedVariableDelimiters"
         :options="options"
       />
       <pre>{{ value }}</pre>
@@ -260,8 +260,8 @@ stories.add('wrapping a widget with advanced variable and no variables', () => (
     return {
       value: undefined,
       options: ['foo', 'bar', 'helloworld'],
-      useAdvancedVariable: true,
       variableDelimiters: { start: '{{', end: '}}' },
+      advancedVariableDelimiters: { start: '<<<', end: '>>>' },
     };
   },
-}));
+}));
diff --git a/tests/unit/variable-chooser.spec.ts b/tests/unit/variable-chooser.spec.ts
@@ -80,24 +80,30 @@ describe('Variable Chooser', () => {
     });
   });
 
-  it('should always display an "Advanced variable" option ...', () => {
-    expect(wrapper.find('.widget-advanced-variable').exists()).toBe(true);
-  });
+  describe('when is advanced', () => {
+    beforeEach(() => {
+      wrapper.setProps({ isAdvanced: true });
+    });
 
-  it('... even without other values', async () => {
-    wrapper.setProps({ availableVariables: [] });
-    await wrapper.vm.$nextTick();
-    expect(wrapper.find('.widget-advanced-variable').exists()).toBe(true);
-  });
+    it('should display an "Advanced variable" option ...', () => {
+      expect(wrapper.find('.widget-advanced-variable').exists()).toBe(true);
+    });
 
-  describe('when clicking on "Advanced variable"', () => {
-    beforeEach(async () => {
-      wrapper.find('.widget-advanced-variable').trigger('click');
+    it('... even without other values', async () => {
+      wrapper.setProps({ availableVariables: [] });
       await wrapper.vm.$nextTick();
+      expect(wrapper.find('.widget-advanced-variable').exists()).toBe(true);
     });
 
-    it('should emit advancedVariable', () => {
-      expect(wrapper.emitted('addAdvancedVariable')).toHaveLength(1);
+    describe('when clicking on "Advanced variable"', () => {
+      beforeEach(async () => {
+        wrapper.find('.widget-advanced-variable').trigger('click');
+        await wrapper.vm.$nextTick();
+      });
+
+      it('should emit advancedVariable', () => {
+        expect(wrapper.emitted('addAdvancedVariable')).toHaveLength(1);
+      });
     });
   });
 

diff --git a/tests/unit/variable-input-base.spec.ts b/tests/unit/variable-input-base.spec.ts
@@ -79,7 +79,7 @@ describe('Variable Input', () => {
       });
 
       it('... except if advanced variable is allowed', async () => {
-        wrapper.setProps({ useAdvancedVariable: true });
+        wrapper.setProps({ advancedVariableDelimiters: { start: '{{', end: '}}' } });
         await wrapper.vm.$nextTick();
         expect(wrapper.find('.widget-variable__toggle').exists()).toBe(true);
       });