2021-03-11 19:13:27 +05:30
|
|
|
import { GlAlert, GlFormSelect, GlLink, GlToken, GlButton } from '@gitlab/ui';
|
2022-04-04 11:22:00 +05:30
|
|
|
import { mount } from '@vue/test-utils';
|
|
|
|
import Vue, { nextTick } from 'vue';
|
2021-01-03 14:25:43 +05:30
|
|
|
import { last } from 'lodash';
|
2021-03-11 19:13:27 +05:30
|
|
|
import Vuex from 'vuex';
|
2021-01-29 00:20:46 +05:30
|
|
|
import Api from '~/api';
|
2021-03-11 19:13:27 +05:30
|
|
|
import NewEnvironmentsDropdown from '~/feature_flags/components/new_environments_dropdown.vue';
|
|
|
|
import Strategy from '~/feature_flags/components/strategy.vue';
|
|
|
|
import StrategyParameters from '~/feature_flags/components/strategy_parameters.vue';
|
2021-01-03 14:25:43 +05:30
|
|
|
import {
|
|
|
|
PERCENT_ROLLOUT_GROUP_ID,
|
|
|
|
ROLLOUT_STRATEGY_ALL_USERS,
|
|
|
|
ROLLOUT_STRATEGY_PERCENT_ROLLOUT,
|
|
|
|
ROLLOUT_STRATEGY_FLEXIBLE_ROLLOUT,
|
|
|
|
ROLLOUT_STRATEGY_USER_ID,
|
|
|
|
ROLLOUT_STRATEGY_GITLAB_USER_LIST,
|
|
|
|
} from '~/feature_flags/constants';
|
2021-03-11 19:13:27 +05:30
|
|
|
import createStore from '~/feature_flags/store/new';
|
2021-01-03 14:25:43 +05:30
|
|
|
|
|
|
|
import { userList } from '../mock_data';
|
|
|
|
|
2021-01-29 00:20:46 +05:30
|
|
|
jest.mock('~/api');
|
|
|
|
|
2021-01-03 14:25:43 +05:30
|
|
|
const provide = {
|
|
|
|
strategyTypeDocsPagePath: 'link-to-strategy-docs',
|
|
|
|
environmentsScopeDocsPath: 'link-scope-docs',
|
|
|
|
environmentsEndpoint: '',
|
|
|
|
};
|
|
|
|
|
2022-04-04 11:22:00 +05:30
|
|
|
Vue.use(Vuex);
|
2021-01-29 00:20:46 +05:30
|
|
|
|
2021-01-03 14:25:43 +05:30
|
|
|
describe('Feature flags strategy', () => {
|
|
|
|
let wrapper;
|
|
|
|
|
2022-08-27 11:52:29 +05:30
|
|
|
const findStrategyParameters = () => wrapper.findComponent(StrategyParameters);
|
|
|
|
const findDocsLinks = () => wrapper.findAllComponents(GlLink);
|
2021-01-03 14:25:43 +05:30
|
|
|
|
|
|
|
const factory = (
|
|
|
|
opts = {
|
|
|
|
propsData: {
|
|
|
|
strategy: {},
|
|
|
|
index: 0,
|
|
|
|
},
|
|
|
|
provide,
|
|
|
|
},
|
|
|
|
) => {
|
2022-04-04 11:22:00 +05:30
|
|
|
wrapper = mount(Strategy, { store: createStore({ projectId: '1' }), ...opts });
|
2021-01-03 14:25:43 +05:30
|
|
|
};
|
|
|
|
|
2021-01-29 00:20:46 +05:30
|
|
|
beforeEach(() => {
|
|
|
|
Api.searchFeatureFlagUserLists.mockResolvedValue({ data: [userList] });
|
|
|
|
});
|
|
|
|
|
2021-01-03 14:25:43 +05:30
|
|
|
describe('helper links', () => {
|
|
|
|
const propsData = { strategy: {}, index: 0, userLists: [userList] };
|
|
|
|
factory({ propsData, provide });
|
|
|
|
|
|
|
|
it('should display 2 helper links', () => {
|
|
|
|
const links = findDocsLinks();
|
|
|
|
expect(links.exists()).toBe(true);
|
|
|
|
expect(links.at(0).attributes('href')).toContain('docs');
|
|
|
|
expect(links.at(1).attributes('href')).toContain('docs');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe.each`
|
|
|
|
name
|
|
|
|
${ROLLOUT_STRATEGY_ALL_USERS}
|
|
|
|
${ROLLOUT_STRATEGY_PERCENT_ROLLOUT}
|
|
|
|
${ROLLOUT_STRATEGY_FLEXIBLE_ROLLOUT}
|
|
|
|
${ROLLOUT_STRATEGY_USER_ID}
|
|
|
|
${ROLLOUT_STRATEGY_GITLAB_USER_LIST}
|
|
|
|
`('with strategy $name', ({ name }) => {
|
|
|
|
let propsData;
|
|
|
|
let strategy;
|
|
|
|
|
2022-04-04 11:22:00 +05:30
|
|
|
beforeEach(async () => {
|
2021-01-03 14:25:43 +05:30
|
|
|
strategy = { name, parameters: {}, scopes: [] };
|
|
|
|
propsData = { strategy, index: 0 };
|
|
|
|
factory({ propsData, provide });
|
2022-04-04 11:22:00 +05:30
|
|
|
await nextTick();
|
2021-01-03 14:25:43 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
it('should set the select to match the strategy name', () => {
|
2022-08-27 11:52:29 +05:30
|
|
|
expect(wrapper.findComponent(GlFormSelect).element.value).toBe(name);
|
2021-01-03 14:25:43 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
it('should emit a change if the parameters component does', () => {
|
|
|
|
findStrategyParameters().vm.$emit('change', { name, parameters: { test: 'parameters' } });
|
|
|
|
expect(last(wrapper.emitted('change'))).toEqual([
|
|
|
|
{ name, parameters: { test: 'parameters' } },
|
|
|
|
]);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('with the gradualRolloutByUserId strategy', () => {
|
|
|
|
let strategy;
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
strategy = {
|
|
|
|
name: ROLLOUT_STRATEGY_PERCENT_ROLLOUT,
|
|
|
|
parameters: { percentage: '50', groupId: 'default' },
|
|
|
|
scopes: [{ environmentScope: 'production' }],
|
|
|
|
};
|
|
|
|
const propsData = { strategy, index: 0 };
|
|
|
|
factory({ propsData, provide });
|
|
|
|
});
|
|
|
|
|
|
|
|
it('shows an alert asking users to consider using flexibleRollout instead', () => {
|
2022-08-27 11:52:29 +05:30
|
|
|
expect(wrapper.findComponent(GlAlert).text()).toContain(
|
2021-01-03 14:25:43 +05:30
|
|
|
'Consider using the more flexible "Percent rollout" strategy instead.',
|
|
|
|
);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('with a strategy', () => {
|
|
|
|
describe('with a single environment scope defined', () => {
|
|
|
|
let strategy;
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
strategy = {
|
|
|
|
name: ROLLOUT_STRATEGY_PERCENT_ROLLOUT,
|
|
|
|
parameters: { percentage: '50', groupId: 'default' },
|
|
|
|
scopes: [{ environmentScope: 'production' }],
|
|
|
|
};
|
|
|
|
const propsData = { strategy, index: 0 };
|
|
|
|
factory({ propsData, provide });
|
|
|
|
});
|
|
|
|
|
2022-04-04 11:22:00 +05:30
|
|
|
it('should revert to all-environments scope when last scope is removed', async () => {
|
2022-08-27 11:52:29 +05:30
|
|
|
const token = wrapper.findComponent(GlToken);
|
2021-01-03 14:25:43 +05:30
|
|
|
token.vm.$emit('close');
|
2022-04-04 11:22:00 +05:30
|
|
|
await nextTick();
|
2022-08-27 11:52:29 +05:30
|
|
|
expect(wrapper.findAllComponents(GlToken)).toHaveLength(0);
|
2022-04-04 11:22:00 +05:30
|
|
|
expect(last(wrapper.emitted('change'))).toEqual([
|
|
|
|
{
|
|
|
|
name: ROLLOUT_STRATEGY_PERCENT_ROLLOUT,
|
|
|
|
parameters: { percentage: '50', groupId: PERCENT_ROLLOUT_GROUP_ID },
|
|
|
|
scopes: [{ environmentScope: '*' }],
|
|
|
|
},
|
|
|
|
]);
|
2021-01-03 14:25:43 +05:30
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('with an all-environments scope defined', () => {
|
|
|
|
let strategy;
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
strategy = {
|
|
|
|
name: ROLLOUT_STRATEGY_PERCENT_ROLLOUT,
|
|
|
|
parameters: { percentage: '50', groupId: PERCENT_ROLLOUT_GROUP_ID },
|
|
|
|
scopes: [{ environmentScope: '*' }],
|
|
|
|
};
|
|
|
|
const propsData = { strategy, index: 0 };
|
|
|
|
factory({ propsData, provide });
|
|
|
|
});
|
|
|
|
|
2022-04-04 11:22:00 +05:30
|
|
|
it('should change the parameters if a different strategy is chosen', async () => {
|
2022-08-27 11:52:29 +05:30
|
|
|
const select = wrapper.findComponent(GlFormSelect);
|
2021-01-03 14:25:43 +05:30
|
|
|
select.setValue(ROLLOUT_STRATEGY_ALL_USERS);
|
2022-04-04 11:22:00 +05:30
|
|
|
await nextTick();
|
|
|
|
expect(last(wrapper.emitted('change'))).toEqual([
|
|
|
|
{
|
|
|
|
name: ROLLOUT_STRATEGY_ALL_USERS,
|
|
|
|
parameters: {},
|
|
|
|
scopes: [{ environmentScope: '*' }],
|
|
|
|
},
|
|
|
|
]);
|
2021-01-03 14:25:43 +05:30
|
|
|
});
|
|
|
|
|
2022-04-04 11:22:00 +05:30
|
|
|
it('should display selected scopes', async () => {
|
2022-08-27 11:52:29 +05:30
|
|
|
const dropdown = wrapper.findComponent(NewEnvironmentsDropdown);
|
2021-01-03 14:25:43 +05:30
|
|
|
dropdown.vm.$emit('add', 'production');
|
2022-04-04 11:22:00 +05:30
|
|
|
await nextTick();
|
2022-08-27 11:52:29 +05:30
|
|
|
expect(wrapper.findAllComponents(GlToken)).toHaveLength(1);
|
|
|
|
expect(wrapper.findComponent(GlToken).text()).toBe('production');
|
2021-01-03 14:25:43 +05:30
|
|
|
});
|
|
|
|
|
2022-04-04 11:22:00 +05:30
|
|
|
it('should display all selected scopes', async () => {
|
2022-08-27 11:52:29 +05:30
|
|
|
const dropdown = wrapper.findComponent(NewEnvironmentsDropdown);
|
2021-01-03 14:25:43 +05:30
|
|
|
dropdown.vm.$emit('add', 'production');
|
|
|
|
dropdown.vm.$emit('add', 'staging');
|
2022-04-04 11:22:00 +05:30
|
|
|
await nextTick();
|
2022-08-27 11:52:29 +05:30
|
|
|
const tokens = wrapper.findAllComponents(GlToken);
|
2022-04-04 11:22:00 +05:30
|
|
|
expect(tokens).toHaveLength(2);
|
|
|
|
expect(tokens.at(0).text()).toBe('production');
|
|
|
|
expect(tokens.at(1).text()).toBe('staging');
|
2021-01-03 14:25:43 +05:30
|
|
|
});
|
|
|
|
|
2022-04-04 11:22:00 +05:30
|
|
|
it('should emit selected scopes', async () => {
|
2022-08-27 11:52:29 +05:30
|
|
|
const dropdown = wrapper.findComponent(NewEnvironmentsDropdown);
|
2021-01-03 14:25:43 +05:30
|
|
|
dropdown.vm.$emit('add', 'production');
|
2022-04-04 11:22:00 +05:30
|
|
|
await nextTick();
|
|
|
|
expect(last(wrapper.emitted('change'))).toEqual([
|
|
|
|
{
|
|
|
|
name: ROLLOUT_STRATEGY_PERCENT_ROLLOUT,
|
|
|
|
parameters: { percentage: '50', groupId: PERCENT_ROLLOUT_GROUP_ID },
|
|
|
|
scopes: [
|
|
|
|
{ environmentScope: '*', shouldBeDestroyed: true },
|
|
|
|
{ environmentScope: 'production' },
|
|
|
|
],
|
|
|
|
},
|
|
|
|
]);
|
2021-01-03 14:25:43 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
it('should emit a delete if the delete button is clicked', () => {
|
2022-08-27 11:52:29 +05:30
|
|
|
wrapper.findComponent(GlButton).vm.$emit('click');
|
2021-01-03 14:25:43 +05:30
|
|
|
expect(wrapper.emitted('delete')).toEqual([[]]);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('without scopes defined', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
const strategy = {
|
|
|
|
name: ROLLOUT_STRATEGY_PERCENT_ROLLOUT,
|
|
|
|
parameters: { percentage: '50', groupId: PERCENT_ROLLOUT_GROUP_ID },
|
|
|
|
scopes: [],
|
|
|
|
};
|
|
|
|
const propsData = { strategy, index: 0 };
|
|
|
|
factory({ propsData, provide });
|
|
|
|
});
|
|
|
|
|
2022-04-04 11:22:00 +05:30
|
|
|
it('should display selected scopes', async () => {
|
2022-08-27 11:52:29 +05:30
|
|
|
const dropdown = wrapper.findComponent(NewEnvironmentsDropdown);
|
2021-01-03 14:25:43 +05:30
|
|
|
dropdown.vm.$emit('add', 'production');
|
2022-04-04 11:22:00 +05:30
|
|
|
await nextTick();
|
2022-08-27 11:52:29 +05:30
|
|
|
expect(wrapper.findAllComponents(GlToken)).toHaveLength(1);
|
|
|
|
expect(wrapper.findComponent(GlToken).text()).toBe('production');
|
2021-01-03 14:25:43 +05:30
|
|
|
});
|
|
|
|
|
2022-04-04 11:22:00 +05:30
|
|
|
it('should display all selected scopes', async () => {
|
2022-08-27 11:52:29 +05:30
|
|
|
const dropdown = wrapper.findComponent(NewEnvironmentsDropdown);
|
2021-01-03 14:25:43 +05:30
|
|
|
dropdown.vm.$emit('add', 'production');
|
|
|
|
dropdown.vm.$emit('add', 'staging');
|
2022-04-04 11:22:00 +05:30
|
|
|
await nextTick();
|
2022-08-27 11:52:29 +05:30
|
|
|
const tokens = wrapper.findAllComponents(GlToken);
|
2022-04-04 11:22:00 +05:30
|
|
|
expect(tokens).toHaveLength(2);
|
|
|
|
expect(tokens.at(0).text()).toBe('production');
|
|
|
|
expect(tokens.at(1).text()).toBe('staging');
|
2021-01-03 14:25:43 +05:30
|
|
|
});
|
|
|
|
|
2022-04-04 11:22:00 +05:30
|
|
|
it('should emit selected scopes', async () => {
|
2022-08-27 11:52:29 +05:30
|
|
|
const dropdown = wrapper.findComponent(NewEnvironmentsDropdown);
|
2021-01-03 14:25:43 +05:30
|
|
|
dropdown.vm.$emit('add', 'production');
|
2022-04-04 11:22:00 +05:30
|
|
|
await nextTick();
|
|
|
|
expect(last(wrapper.emitted('change'))).toEqual([
|
|
|
|
{
|
|
|
|
name: ROLLOUT_STRATEGY_PERCENT_ROLLOUT,
|
|
|
|
parameters: { percentage: '50', groupId: PERCENT_ROLLOUT_GROUP_ID },
|
|
|
|
scopes: [{ environmentScope: 'production' }],
|
|
|
|
},
|
|
|
|
]);
|
2021-01-03 14:25:43 +05:30
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|