Commit 71bfccc6 authored by Andrew Fontaine's avatar Andrew Fontaine Committed by Kushal Pandya

Port Feature Flags Table Tests to VTU

Using vue test utils instead of raw mounting things for speed.
parent aef85a4f
......@@ -140,7 +140,7 @@ export default {
v-if="canUserRotateToken"
v-gl-tooltip.hover
:title="$options.regenerateInstanceIdTooltip"
class="input-group-text js-ff-rotate-token-button"
class="input-group-text"
@click="rotateToken"
>
<icon name="retry" />
......
......@@ -175,7 +175,7 @@ export default {
<input
type="text"
class="js-env-input form-control pl-4"
class="form-control pl-4 js-env-input"
:aria-label="placeholder"
:value="filter"
:placeholder="placeholder"
......
import { shallowMount, createLocalVue } from '@vue/test-utils';
import { GlButton } from '@gitlab/ui';
import component from 'ee/feature_flags/components/configure_feature_flags_modal.vue';
const localVue = createLocalVue();
......@@ -31,8 +32,8 @@ describe('Configure Feature Flags Modal', () => {
describe('rotate token', () => {
it('should emit a `token` event on click', () => {
wrapper.find('.js-ff-rotate-token-button').trigger('click');
expect(wrapper.emitted('token')).not.toBeEmpty();
wrapper.find(GlButton).vm.$emit('click');
expect(wrapper.emitted('token')).toEqual([[]]);
});
it('should display an error if there is a rotate error', () => {
......
......@@ -77,13 +77,12 @@ describe('Edit feature flag form', () => {
});
describe('with error', () => {
it('should render the error', done => {
it('should render the error', () => {
store.dispatch('edit/receiveUpdateFeatureFlagError', { message: ['The name is required'] });
wrapper.vm.$nextTick(() => {
return wrapper.vm.$nextTick(() => {
expect(wrapper.find('.alert-danger').exists()).toEqual(true);
expect(wrapper.find('.alert-danger').text()).toContain('The name is required');
done();
});
});
});
......
import MockAdapter from 'axios-mock-adapter';
import { createLocalVue, mount } from '@vue/test-utils';
import { GlLoadingIcon } from '@gitlab/ui';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import { GlLoadingIcon, GlButton } from '@gitlab/ui';
import EnvironmentsDropdown from 'ee/feature_flags/components/environments_dropdown.vue';
import { TEST_HOST } from 'spec/test_constants';
import axios from '~/lib/utils/axios_utils';
......@@ -12,7 +12,7 @@ describe('Feature flags > Environments dropdown ', () => {
let mock;
const factory = props => {
wrapper = mount(localVue.extend(EnvironmentsDropdown), {
wrapper = shallowMount(EnvironmentsDropdown, {
localVue,
propsData: {
endpoint: `${TEST_HOST}/environments.json'`,
......@@ -78,28 +78,29 @@ describe('Feature flags > Environments dropdown ', () => {
expect(wrapper.vm.showSuggestions).toEqual(true);
});
it('emits even when a suggestion is clicked', () => {
jest.spyOn(wrapper.vm, '$emit');
it('emits event when a suggestion is clicked', () => {
const button = wrapper
.findAll(GlButton)
.filter(b => b.text() === 'production')
.at(0);
button.vm.$emit('click');
wrapper.find('ul button').trigger('click');
expect(wrapper.vm.$emit).toHaveBeenCalledWith('selectEnvironment', 'production');
expect(wrapper.emitted('selectEnvironment')).toEqual([['production']]);
});
});
});
});
describe('on click clear button', () => {
beforeEach(() => {
wrapper.find('.js-clear-search-input').trigger('click');
});
describe('on click clear button', () => {
beforeEach(() => {
wrapper.find(GlButton).vm.$emit('click');
});
it('resets filter value', () => {
expect(wrapper.vm.filter).toEqual('');
});
it('resets filter value', () => {
expect(wrapper.vm.filter).toEqual('');
});
it('closes list of suggestions', () => {
expect(wrapper.vm.showSuggestions).toEqual(false);
it('closes list of suggestions', () => {
expect(wrapper.vm.showSuggestions).toEqual(false);
});
});
});
});
......@@ -115,10 +116,12 @@ describe('Feature flags > Environments dropdown ', () => {
});
it('emits create event', () => {
jest.spyOn(wrapper.vm, '$emit');
wrapper.find('.js-create-button').trigger('click');
wrapper
.findAll(GlButton)
.at(1)
.vm.$emit('click');
expect(wrapper.vm.$emit).toHaveBeenCalledWith('createClicked', 'production');
expect(wrapper.emitted('createClicked')).toEqual([['production']]);
});
});
});
import _ from 'underscore';
import { createLocalVue, mount } from '@vue/test-utils';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import { GlFormTextarea, GlFormCheckbox } from '@gitlab/ui';
import Form from 'ee/feature_flags/components/form.vue';
import EnvironmentsDropdown from 'ee/feature_flags/components/environments_dropdown.vue';
......@@ -33,7 +33,7 @@ describe('feature flag form', () => {
const factory = (props = {}) => {
const localVue = createLocalVue();
wrapper = mount(localVue.extend(Form), {
wrapper = shallowMount(Form, {
localVue,
propsData: props,
provide: {
......@@ -183,7 +183,7 @@ describe('feature flag form', () => {
describe('deleting an existing scope', () => {
beforeEach(() => {
wrapper.find('.js-delete-scope').trigger('click');
wrapper.find('.js-delete-scope').vm.$emit('click');
});
it('should add `shouldBeDestroyed` key the clicked scope', () => {
......@@ -218,7 +218,7 @@ describe('feature flag form', () => {
],
});
wrapper.find('.js-delete-scope').trigger('click');
wrapper.find('.js-delete-scope').vm.$emit('click');
expect(wrapper.vm.formScopes).toEqual([]);
});
......@@ -280,7 +280,7 @@ describe('feature flag form', () => {
.setSelected();
};
beforeEach(done => {
beforeEach(() => {
factory({
...requiredProps,
name: 'feature_flag_1',
......@@ -300,10 +300,10 @@ describe('feature flag form', () => {
],
});
wrapper.vm.$nextTick(done, done.fail);
return wrapper.vm.$nextTick();
});
it('should emit handleSubmit with the updated data', done => {
it('should emit handleSubmit with the updated data', () => {
wrapper.find('#feature-flag-name').setValue('feature_flag_2');
wrapper
......@@ -318,7 +318,7 @@ describe('feature flag form', () => {
wrapper.find(ToggleButton).vm.$emit('change', true);
wrapper.vm
return wrapper.vm
.$nextTick()
.then(() => {
......@@ -333,7 +333,7 @@ describe('feature flag form', () => {
return wrapper.vm.$nextTick();
})
.then(() => {
wrapper.find({ ref: 'submitButton' }).trigger('click');
wrapper.find({ ref: 'submitButton' }).vm.$emit('click');
const data = wrapper.emitted().handleSubmit[0][0];
......@@ -373,9 +373,7 @@ describe('feature flag form', () => {
rolloutUserIds: '',
},
]);
})
.then(done)
.catch(done.fail);
});
});
});
});
......
import Vuex from 'vuex';
import Vue from 'vue';
import { createLocalVue, mount } from '@vue/test-utils';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import Form from 'ee/feature_flags/components/form.vue';
import newModule from 'ee/feature_flags/store/modules/new';
import NewFeatureFlag from 'ee/feature_flags/components/new_feature_flag.vue';
......@@ -19,7 +18,7 @@ describe('New feature flag form', () => {
});
const factory = () => {
wrapper = mount(localVue.extend(NewFeatureFlag), {
wrapper = shallowMount(NewFeatureFlag, {
localVue,
propsData: {
endpoint: 'feature_flags.json',
......@@ -40,12 +39,11 @@ describe('New feature flag form', () => {
});
describe('with error', () => {
it('should render the error', done => {
it('should render the error', () => {
store.dispatch('new/receiveCreateFeatureFlagError', { message: ['The name is required'] });
Vue.nextTick(() => {
return wrapper.vm.$nextTick(() => {
expect(wrapper.find('.alert').exists()).toEqual(true);
expect(wrapper.find('.alert').text()).toContain('The name is required');
done();
});
});
});
......@@ -59,17 +57,16 @@ describe('New feature flag form', () => {
});
it('should render default * row', () => {
expect(wrapper.vm.scopes).toEqual([
{
id: expect.any(String),
environmentScope: '*',
active: true,
rolloutStrategy: ROLLOUT_STRATEGY_ALL_USERS,
rolloutPercentage: DEFAULT_PERCENT_ROLLOUT,
rolloutUserIds: [],
},
]);
const defaultScope = {
id: expect.any(String),
environmentScope: '*',
active: true,
rolloutStrategy: ROLLOUT_STRATEGY_ALL_USERS,
rolloutPercentage: DEFAULT_PERCENT_ROLLOUT,
rolloutUserIds: [],
};
expect(wrapper.vm.scopes).toEqual([defaultScope]);
expect(wrapper.find('.js-scope-all').exists()).toEqual(true);
expect(wrapper.find(Form).props('scopes')).toContainEqual(defaultScope);
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment