diff options
Diffstat (limited to 'spec/frontend/profile/preferences/components')
4 files changed, 299 insertions, 0 deletions
diff --git a/spec/frontend/profile/preferences/components/__snapshots__/integration_view_spec.js.snap b/spec/frontend/profile/preferences/components/__snapshots__/integration_view_spec.js.snap new file mode 100644 index 00000000000..2fd1fd6a04e --- /dev/null +++ b/spec/frontend/profile/preferences/components/__snapshots__/integration_view_spec.js.snap @@ -0,0 +1,67 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`IntegrationView component should render IntegrationView properly 1`] = ` +<div + name="sourcegraph" +> + <label + class="label-bold" + > + + Foo + + </label> + + <gl-link-stub + class="has-tooltip" + href="http://foo.com/help" + title="More information" + > + <gl-icon-stub + class="vertical-align-middle" + name="question-o" + size="16" + /> + </gl-link-stub> + + <div + class="form-group form-check" + data-testid="profile-preferences-integration-form-group" + > + <input + data-testid="profile-preferences-integration-hidden-field" + name="user[foo_enabled]" + type="hidden" + value="0" + /> + + <input + class="form-check-input" + data-testid="profile-preferences-integration-checkbox" + id="user_foo_enabled" + name="user[foo_enabled]" + type="checkbox" + value="1" + /> + + <label + class="form-check-label" + for="user_foo_enabled" + > + + Enable foo + + </label> + + <gl-form-text-stub + tag="div" + textvariant="muted" + > + <integration-help-text-stub + message="Click %{linkStart}Foo%{linkEnd}!" + messageurl="http://foo.com" + /> + </gl-form-text-stub> + </div> +</div> +`; diff --git a/spec/frontend/profile/preferences/components/__snapshots__/profile_preferences_spec.js.snap b/spec/frontend/profile/preferences/components/__snapshots__/profile_preferences_spec.js.snap new file mode 100644 index 00000000000..4df92cf86a5 --- /dev/null +++ b/spec/frontend/profile/preferences/components/__snapshots__/profile_preferences_spec.js.snap @@ -0,0 +1,51 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ProfilePreferences component should render ProfilePreferences properly 1`] = ` +<div + class="row gl-mt-3 js-preferences-form" +> + <div + class="col-sm-12" + > + <hr + data-testid="profile-preferences-integrations-rule" + /> + </div> + + <div + class="col-lg-4 profile-settings-sidebar" + > + <h4 + class="gl-mt-0" + data-testid="profile-preferences-integrations-heading" + > + + Integrations + + </h4> + + <p> + + Customize integrations with third party services. + + </p> + </div> + + <div + class="col-lg-8" + > + <integration-view-stub + config="[object Object]" + helplink="http://foo.com/help" + message="Click %{linkStart}Foo%{linkEnd}!" + messageurl="http://foo.com" + /> + <integration-view-stub + config="[object Object]" + helplink="http://bar.com/help" + message="Click %{linkStart}Bar%{linkEnd}!" + messageurl="http://bar.com" + /> + </div> +</div> +`; 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(); + }); +}); diff --git a/spec/frontend/profile/preferences/components/profile_preferences_spec.js b/spec/frontend/profile/preferences/components/profile_preferences_spec.js new file mode 100644 index 00000000000..fcc27d8faaf --- /dev/null +++ b/spec/frontend/profile/preferences/components/profile_preferences_spec.js @@ -0,0 +1,57 @@ +import { shallowMount } from '@vue/test-utils'; + +import ProfilePreferences from '~/profile/preferences/components/profile_preferences.vue'; +import IntegrationView from '~/profile/preferences/components/integration_view.vue'; +import { integrationViews, userFields } from '../mock_data'; + +describe('ProfilePreferences component', () => { + let wrapper; + const defaultProvide = { + integrationViews: [], + userFields, + }; + + function createComponent(options = {}) { + const { props = {}, provide = {} } = options; + return shallowMount(ProfilePreferences, { + provide: { + ...defaultProvide, + ...provide, + }, + propsData: props, + }); + } + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + it('should not render Integrations section', () => { + wrapper = createComponent(); + const views = wrapper.findAll(IntegrationView); + const divider = wrapper.find('[data-testid="profile-preferences-integrations-rule"]'); + const heading = wrapper.find('[data-testid="profile-preferences-integrations-heading"]'); + + expect(divider.exists()).toBe(false); + expect(heading.exists()).toBe(false); + expect(views).toHaveLength(0); + }); + + it('should render Integration section', () => { + wrapper = createComponent({ provide: { integrationViews } }); + const divider = wrapper.find('[data-testid="profile-preferences-integrations-rule"]'); + const heading = wrapper.find('[data-testid="profile-preferences-integrations-heading"]'); + const views = wrapper.findAll(IntegrationView); + + expect(divider.exists()).toBe(true); + expect(heading.exists()).toBe(true); + expect(views).toHaveLength(integrationViews.length); + }); + + it('should render ProfilePreferences properly', () => { + wrapper = createComponent({ provide: { integrationViews } }); + + expect(wrapper.element).toMatchSnapshot(); + }); +}); |