debian-mirror-gitlab/spec/frontend/feature_flags/components/form_spec.js

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

153 lines
4.3 KiB
JavaScript
Raw Normal View History

2021-09-30 23:02:18 +05:30
import { GlButton } from '@gitlab/ui';
2021-01-03 14:25:43 +05:30
import { shallowMount } from '@vue/test-utils';
2022-04-04 11:22:00 +05:30
import { nextTick } from 'vue';
2021-03-11 19:13:27 +05:30
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
2021-01-03 14:25:43 +05:30
import Api from '~/api';
2021-03-11 19:13:27 +05:30
import Form from '~/feature_flags/components/form.vue';
2021-01-03 14:25:43 +05:30
import Strategy from '~/feature_flags/components/strategy.vue';
import {
ROLLOUT_STRATEGY_ALL_USERS,
ROLLOUT_STRATEGY_PERCENT_ROLLOUT,
} from '~/feature_flags/constants';
import RelatedIssuesRoot from '~/related_issues/components/related_issues_root.vue';
import { featureFlag, userList, allUsersStrategy } from '../mock_data';
jest.mock('~/api.js');
describe('feature flag form', () => {
let wrapper;
const requiredProps = {
cancelPath: 'feature_flags',
submitText: 'Create',
};
const requiredInjections = {
environmentsEndpoint: '/environments.json',
projectId: '1',
};
const factory = (props = {}, provide = {}) => {
2021-03-11 19:13:27 +05:30
wrapper = extendedWrapper(
shallowMount(Form, {
propsData: { ...requiredProps, ...props },
provide: {
...requiredInjections,
...provide,
},
}),
);
2021-01-03 14:25:43 +05:30
};
beforeEach(() => {
Api.fetchFeatureFlagUserLists.mockResolvedValue({ data: [] });
});
afterEach(() => {
wrapper.destroy();
});
it('should render provided submitText', () => {
factory(requiredProps);
expect(wrapper.find('.js-ff-submit').text()).toEqual(requiredProps.submitText);
});
it('should render provided cancelPath', () => {
factory(requiredProps);
expect(wrapper.find('.js-ff-cancel').attributes('href')).toEqual(requiredProps.cancelPath);
});
it('does not render the related issues widget without the featureFlagIssuesEndpoint', () => {
factory(requiredProps);
2022-08-27 11:52:29 +05:30
expect(wrapper.findComponent(RelatedIssuesRoot).exists()).toBe(false);
2021-01-03 14:25:43 +05:30
});
it('renders the related issues widget when the featureFlagIssuesEndpoint is provided', () => {
factory(
{},
{
...requiredInjections,
featureFlagIssuesEndpoint: '/some/endpoint',
},
);
2022-08-27 11:52:29 +05:30
expect(wrapper.findComponent(RelatedIssuesRoot).exists()).toBe(true);
2021-01-03 14:25:43 +05:30
});
describe('without provided data', () => {
beforeEach(() => {
factory(requiredProps);
});
it('should render name input text', () => {
expect(wrapper.find('#feature-flag-name').exists()).toBe(true);
});
it('should render description textarea', () => {
expect(wrapper.find('#feature-flag-description').exists()).toBe(true);
});
});
describe('with strategies', () => {
beforeEach(() => {
Api.fetchFeatureFlagUserLists.mockResolvedValue({ data: [userList] });
factory({
...requiredProps,
name: featureFlag.name,
description: featureFlag.description,
active: true,
strategies: [
{
type: ROLLOUT_STRATEGY_PERCENT_ROLLOUT,
parameters: { percentage: '30' },
scopes: [],
},
{
type: ROLLOUT_STRATEGY_ALL_USERS,
parameters: {},
scopes: [{ environment_scope: 'review/*' }],
},
],
});
});
it('should show the strategy component', () => {
2022-08-27 11:52:29 +05:30
const strategy = wrapper.findComponent(Strategy);
2021-01-03 14:25:43 +05:30
expect(strategy.exists()).toBe(true);
expect(strategy.props('strategy')).toEqual({
type: ROLLOUT_STRATEGY_PERCENT_ROLLOUT,
parameters: { percentage: '30' },
scopes: [],
});
});
it('should show one strategy component per strategy', () => {
2022-08-27 11:52:29 +05:30
expect(wrapper.findAllComponents(Strategy)).toHaveLength(2);
2021-01-03 14:25:43 +05:30
});
2022-04-04 11:22:00 +05:30
it('adds an all users strategy when clicking the Add button', async () => {
2022-08-27 11:52:29 +05:30
wrapper.findComponent(GlButton).vm.$emit('click');
2021-01-03 14:25:43 +05:30
2022-04-04 11:22:00 +05:30
await nextTick();
2022-08-27 11:52:29 +05:30
const strategies = wrapper.findAllComponents(Strategy);
2021-01-03 14:25:43 +05:30
2022-04-04 11:22:00 +05:30
expect(strategies).toHaveLength(3);
expect(strategies.at(2).props('strategy')).toEqual(allUsersStrategy);
2021-01-03 14:25:43 +05:30
});
2022-04-04 11:22:00 +05:30
it('should remove a strategy on delete', async () => {
2021-01-03 14:25:43 +05:30
const strategy = {
type: ROLLOUT_STRATEGY_PERCENT_ROLLOUT,
parameters: { percentage: '30' },
scopes: [],
};
2022-08-27 11:52:29 +05:30
wrapper.findComponent(Strategy).vm.$emit('delete');
2022-04-04 11:22:00 +05:30
await nextTick();
2022-08-27 11:52:29 +05:30
expect(wrapper.findAllComponents(Strategy)).toHaveLength(1);
expect(wrapper.findComponent(Strategy).props('strategy')).not.toEqual(strategy);
2021-01-03 14:25:43 +05:30
});
});
});