1 files changed, 124 insertions, 0 deletions
diff --git a/spec/frontend/profile/preferences/components/integration_view_spec.js b/spec/frontend/profile/preferences/components/integration_view_spec.js
new file mode 100644
index 00000000000..5d55a089119
--- /dev/null
+++ b/spec/frontend/profile/preferences/components/integration_view_spec.js
@@ -0,0 +1,124 @@
+import { shallowMount } from '@vue/test-utils';
+
+import { GlFormText } from '@gitlab/ui';
+import IntegrationView from '~/profile/preferences/components/integration_view.vue';
+import IntegrationHelpText from '~/vue_shared/components/integrations_help_text.vue';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import { integrationViews, userFields } from '../mock_data';
+
+const viewProps = convertObjectPropsToCamelCase(integrationViews[0]);
+
+describe('IntegrationView component', () => {
+  let wrapper;
+  const defaultProps = {
+    config: {
+      title: 'Foo',
+      label: 'Enable foo',
+      formName: 'foo_enabled',
+    },
+    ...viewProps,
+  };
+
+  function createComponent(options = {}) {
+    const { props = {}, provide = {} } = options;
+    return shallowMount(IntegrationView, {
+      provide: {
+        userFields,
+        ...provide,
+      },
+      propsData: {
+        ...defaultProps,
+        ...props,
+      },
+    });
+  }
+
+  function findCheckbox() {
+    return wrapper.find('[data-testid="profile-preferences-integration-checkbox"]');
+  }
+  function findFormGroup() {
+    return wrapper.find('[data-testid="profile-preferences-integration-form-group"]');
+  }
+  function findHiddenField() {
+    return wrapper.find('[data-testid="profile-preferences-integration-hidden-field"]');
+  }
+  function findFormGroupLabel() {
+    return wrapper.find('[data-testid="profile-preferences-integration-form-group"] label');
+  }
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('should render the title correctly', () => {
+    wrapper = createComponent();
+
+    expect(wrapper.find('label.label-bold').text()).toBe('Foo');
+  });
+
+  it('should render the form correctly', () => {
+    wrapper = createComponent();
+
+    expect(findFormGroup().exists()).toBe(true);
+    expect(findHiddenField().exists()).toBe(true);
+    expect(findCheckbox().exists()).toBe(true);
+    expect(findCheckbox().attributes('id')).toBe('user_foo_enabled');
+    expect(findCheckbox().attributes('name')).toBe('user[foo_enabled]');
+  });
+
+  it('should have the checkbox value to be set to 1', () => {
+    wrapper = createComponent();
+
+    expect(findCheckbox().attributes('value')).toBe('1');
+  });
+
+  it('should have the hidden value to be set to 0', () => {
+    wrapper = createComponent();
+
+    expect(findHiddenField().attributes('value')).toBe('0');
+  });
+
+  it('should set the checkbox value to be true', () => {
+    wrapper = createComponent();
+
+    expect(findCheckbox().element.checked).toBe(true);
+  });
+
+  it('should set the checkbox value to be false when false is provided', () => {
+    wrapper = createComponent({
+      provide: {
+        userFields: {
+          foo_enabled: false,
+        },
+      },
+    });
+
+    expect(findCheckbox().element.checked).toBe(false);
+  });
+
+  it('should set the checkbox value to be false when not provided', () => {
+    wrapper = createComponent({ provide: { userFields: {} } });
+
+    expect(findCheckbox().element.checked).toBe(false);
+  });
+
+  it('should render the help text', () => {
+    wrapper = createComponent();
+
+    expect(wrapper.find(GlFormText).exists()).toBe(true);
+    expect(wrapper.find(IntegrationHelpText).exists()).toBe(true);
+  });
+
+  it('should render the label correctly', () => {
+    wrapper = createComponent();
+
+    expect(findFormGroupLabel().text()).toBe('Enable foo');
+  });
+
+  it('should render IntegrationView properly', () => {
+    wrapper = createComponent();
+
+    expect(wrapper.element).toMatchSnapshot();
+  });
+});