Merge branch 'master' into snake-casesnake-case

3 files changed, 68 insertions, 6 deletions

diff --git a/spec/javascripts/vue_shared/components/confirmation_input_spec.js b/spec/javascripts/vue_shared/components/confirmation_input_spec.js
new file mode 100644
index 00000000000..a6a12614e77
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/confirmation_input_spec.js
@@ -0,0 +1,63 @@
+import Vue from 'vue';
+import confirmationInput from '~/vue_shared/components/confirmation_input.vue';
+import mountComponent from '../../helpers/vue_mount_component_helper';
+
+describe('Confirmation input component', () => {
+  const Component = Vue.extend(confirmationInput);
+  const props = {
+    inputId: 'dummy-id',
+    confirmationKey: 'confirmation-key',
+    confirmationValue: 'confirmation-value',
+  };
+  let vm;
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('props', () => {
+    beforeEach(() => {
+      vm = mountComponent(Component, props);
+    });
+
+    it('sets id of the input field to inputId', () => {
+      expect(vm.$refs.enteredValue.id).toBe(props.inputId);
+    });
+
+    it('sets name of the input field to confirmationKey', () => {
+      expect(vm.$refs.enteredValue.name).toBe(props.confirmationKey);
+    });
+  });
+
+  describe('computed', () => {
+    describe('inputLabel', () => {
+      it('escapes confirmationValue by default', () => {
+        vm = mountComponent(Component, { ...props, confirmationValue: 'n<e></e>ds escap"ng' });
+        expect(vm.inputLabel).toBe('Type <code>n&lt;e&gt;&lt;/e&gt;ds escap&quot;ng</code> to confirm:');
+      });
+
+      it('does not escape confirmationValue if escapeValue is false', () => {
+        vm = mountComponent(Component, { ...props, confirmationValue: 'n<e></e>ds escap"ng', shouldEscapeConfirmationValue: false });
+        expect(vm.inputLabel).toBe('Type <code>n<e></e>ds escap"ng</code> to confirm:');
+      });
+    });
+  });
+
+  describe('methods', () => {
+    describe('hasCorrectValue', () => {
+      beforeEach(() => {
+        vm = mountComponent(Component, props);
+      });
+
+      it('returns false if entered value is incorrect', () => {
+        vm.$refs.enteredValue.value = 'incorrect';
+        expect(vm.hasCorrectValue()).toBe(false);
+      });
+
+      it('returns true if entered value is correct', () => {
+        vm.$refs.enteredValue.value = props.confirmationValue;
+        expect(vm.hasCorrectValue()).toBe(true);
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/vue_shared/components/modal_spec.js b/spec/javascripts/vue_shared/components/modal_spec.js
index fe75a86cac8..a5f9c75be4e 100644
--- a/spec/javascripts/vue_shared/components/modal_spec.js
+++ b/spec/javascripts/vue_shared/components/modal_spec.js
@@ -25,7 +25,7 @@ describe('Modal', () => {
     });
 
     describe('with id', () => {
-      it('does not render a primary button', () => {
+      describe('does not render a primary button', () => {
         beforeEach(() => {
           vm = mountComponent(modalComponent, {
             id: 'my-modal',
diff --git a/spec/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker_spec.js b/spec/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker_spec.js
index 20363e78094..2de108da2ac 100644
--- a/spec/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker_spec.js
+++ b/spec/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker_spec.js
@@ -21,22 +21,21 @@ describe('collapsedGroupedDatePicker', () => {
     });
   });
 
-  it('toggleCollapse events', () => {
-    const toggleCollapse = jasmine.createSpy();
-
+  describe('toggleCollapse events', () => {
     beforeEach((done) => {
+      spyOn(vm, 'toggleSidebar');
       vm.minDate = new Date('07/17/2016');
       Vue.nextTick(done);
     });
 
     it('should emit when sidebar is toggled', () => {
       vm.$el.querySelector('.gutter-toggle').click();
-      expect(toggleCollapse).toHaveBeenCalled();
+      expect(vm.toggleSidebar).toHaveBeenCalled();
     });
 
     it('should emit when collapsed-calendar-icon is clicked', () => {
       vm.$el.querySelector('.sidebar-collapsed-icon').click();
-      expect(toggleCollapse).toHaveBeenCalled();
+      expect(vm.toggleSidebar).toHaveBeenCalled();
     });
   });