1 files changed, 65 insertions, 0 deletions
diff --git a/spec/frontend/integrations/edit/components/active_toggle_spec.js b/spec/frontend/integrations/edit/components/active_toggle_spec.js
new file mode 100644
index 00000000000..8a11c200c15
--- /dev/null
+++ b/spec/frontend/integrations/edit/components/active_toggle_spec.js
@@ -0,0 +1,65 @@
+import { mount } from '@vue/test-utils';
+import ActiveToggle from '~/integrations/edit/components/active_toggle.vue';
+import { GlToggle } from '@gitlab/ui';
+
+const GL_TOGGLE_ACTIVE_CLASS = 'is-checked';
+
+describe('ActiveToggle', () => {
+  let wrapper;
+
+  const defaultProps = {
+    initialActivated: true,
+    disabled: false,
+  };
+
+  const createComponent = props => {
+    wrapper = mount(ActiveToggle, {
+      propsData: Object.assign({}, defaultProps, props),
+    });
+  };
+
+  afterEach(() => {
+    if (wrapper) wrapper.destroy();
+  });
+
+  const findGlToggle = () => wrapper.find(GlToggle);
+  const findButtonInToggle = () => findGlToggle().find('button');
+  const findInputInToggle = () => findGlToggle().find('input');
+
+  describe('template', () => {
+    describe('initialActivated is false', () => {
+      it('renders GlToggle as inactive', () => {
+        createComponent({
+          initialActivated: false,
+        });
+
+        expect(findGlToggle().exists()).toBe(true);
+        expect(findButtonInToggle().classes()).not.toContain(GL_TOGGLE_ACTIVE_CLASS);
+        expect(findInputInToggle().attributes('value')).toBe('false');
+      });
+    });
+
+    describe('initialActivated is true', () => {
+      beforeEach(() => {
+        createComponent();
+      });
+
+      it('renders GlToggle as active', () => {
+        expect(findGlToggle().exists()).toBe(true);
+        expect(findButtonInToggle().classes()).toContain(GL_TOGGLE_ACTIVE_CLASS);
+        expect(findInputInToggle().attributes('value')).toBe('true');
+      });
+
+      describe('on toggle click', () => {
+        it('switches the form value', () => {
+          findButtonInToggle().trigger('click');
+
+          wrapper.vm.$nextTick(() => {
+            expect(findButtonInToggle().classes()).not.toContain(GL_TOGGLE_ACTIVE_CLASS);
+            expect(findInputInToggle().attributes('value')).toBe('false');
+          });
+        });
+      });
+    });
+  });
+});