diff options
Diffstat (limited to 'spec/frontend/feature_flags/components/form_spec.js')
-rw-r--r-- | spec/frontend/feature_flags/components/form_spec.js | 47 |
1 files changed, 26 insertions, 21 deletions
diff --git a/spec/frontend/feature_flags/components/form_spec.js b/spec/frontend/feature_flags/components/form_spec.js index 3a057aedde9..a05e23a4250 100644 --- a/spec/frontend/feature_flags/components/form_spec.js +++ b/spec/frontend/feature_flags/components/form_spec.js @@ -1,9 +1,10 @@ -import { uniqueId } from 'lodash'; +import { GlFormTextarea, GlFormCheckbox, GlButton, GlToggle } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; -import { GlFormTextarea, GlFormCheckbox, GlButton } from '@gitlab/ui'; +import { uniqueId } from 'lodash'; +import { extendedWrapper } from 'helpers/vue_test_utils_helper'; import Api from '~/api'; -import Form from '~/feature_flags/components/form.vue'; import EnvironmentsDropdown from '~/feature_flags/components/environments_dropdown.vue'; +import Form from '~/feature_flags/components/form.vue'; import Strategy from '~/feature_flags/components/strategy.vue'; import { ROLLOUT_STRATEGY_ALL_USERS, @@ -14,7 +15,6 @@ import { NEW_VERSION_FLAG, } from '~/feature_flags/constants'; import RelatedIssuesRoot from '~/related_issues/components/related_issues_root.vue'; -import ToggleButton from '~/vue_shared/components/toggle_button.vue'; import { featureFlag, userList, allUsersStrategy } from '../mock_data'; jest.mock('~/api.js'); @@ -35,14 +35,19 @@ describe('feature flag form', () => { }, }; + const findAddNewScopeRow = () => wrapper.findByTestId('add-new-scope'); + const findGlToggle = () => wrapper.find(GlToggle); + const factory = (props = {}, provide = {}) => { - wrapper = shallowMount(Form, { - propsData: { ...requiredProps, ...props }, - provide: { - ...requiredInjections, - ...provide, - }, - }); + wrapper = extendedWrapper( + shallowMount(Form, { + propsData: { ...requiredProps, ...props }, + provide: { + ...requiredInjections, + ...provide, + }, + }), + ); }; beforeEach(() => { @@ -102,13 +107,13 @@ describe('feature flag form', () => { }); it('should render scopes table with a new row ', () => { - expect(wrapper.find('.js-add-new-scope').exists()).toBe(true); + expect(findAddNewScopeRow().exists()).toBe(true); }); describe('status toggle', () => { describe('without filled text input', () => { it('should add a new scope with the text value empty and the status', () => { - wrapper.find(ToggleButton).vm.$emit('change', true); + findGlToggle().vm.$emit('change', true); expect(wrapper.vm.formScopes).toHaveLength(1); expect(wrapper.vm.formScopes[0].active).toEqual(true); @@ -121,7 +126,7 @@ describe('feature flag form', () => { it('should be disabled if the feature flag is not active', (done) => { wrapper.setProps({ active: false }); wrapper.vm.$nextTick(() => { - expect(wrapper.find(ToggleButton).props('disabledInput')).toBe(true); + expect(findGlToggle().props('disabled')).toBe(true); done(); }); }); @@ -166,11 +171,11 @@ describe('feature flag form', () => { describe('scopes', () => { it('should be possible to remove a scope', () => { - expect(wrapper.find('.js-feature-flag-delete').exists()).toEqual(true); + expect(wrapper.findByTestId('feature-flag-delete').exists()).toEqual(true); }); it('renders empty row to add a new scope', () => { - expect(wrapper.find('.js-add-new-scope').exists()).toEqual(true); + expect(findAddNewScopeRow().exists()).toEqual(true); }); it('renders the user id checkbox', () => { @@ -186,7 +191,7 @@ describe('feature flag form', () => { describe('update scope', () => { describe('on click on toggle', () => { it('should update the scope', () => { - wrapper.find(ToggleButton).vm.$emit('change', false); + findGlToggle().vm.$emit('change', false); expect(wrapper.vm.formScopes[0].active).toBe(false); }); @@ -195,7 +200,7 @@ describe('feature flag form', () => { wrapper.setProps({ active: false }); wrapper.vm.$nextTick(() => { - expect(wrapper.find(ToggleButton).props('disabledInput')).toBe(true); + expect(findGlToggle().props('disabled')).toBe(true); done(); }); }); @@ -294,7 +299,7 @@ describe('feature flag form', () => { const row = wrapper.findAll('.gl-responsive-table-row').at(2); expect(row.find(EnvironmentsDropdown).vm.disabled).toBe(true); - expect(row.find(ToggleButton).vm.disabledInput).toBe(true); + expect(row.find(GlToggle).props('disabled')).toBe(true); expect(row.find('.js-delete-scope').exists()).toBe(false); }); }); @@ -347,10 +352,10 @@ describe('feature flag form', () => { return wrapper.vm.$nextTick(); }) .then(() => { - wrapper.find('.js-add-new-scope').find(ToggleButton).vm.$emit('change', true); + findAddNewScopeRow().find(GlToggle).vm.$emit('change', true); }) .then(() => { - wrapper.find(ToggleButton).vm.$emit('change', true); + findGlToggle().vm.$emit('change', true); return wrapper.vm.$nextTick(); }) |