2020-11-24 15:15:51 +05:30
|
|
|
import { shallowMount } from '@vue/test-utils';
|
2021-03-11 19:13:27 +05:30
|
|
|
import ActionsButton from '~/vue_shared/components/actions_button.vue';
|
2020-11-24 15:15:51 +05:30
|
|
|
import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
|
|
|
|
import WebIdeLink from '~/vue_shared/components/web_ide_link.vue';
|
|
|
|
|
2021-09-04 01:27:46 +05:30
|
|
|
const TEST_EDIT_URL = '/gitlab-test/test/-/edit/main/';
|
|
|
|
const TEST_WEB_IDE_URL = '/-/ide/project/gitlab-test/test/edit/main/-/';
|
2020-11-24 15:15:51 +05:30
|
|
|
const TEST_GITPOD_URL = 'https://gitpod.test/';
|
|
|
|
|
2021-01-03 14:25:43 +05:30
|
|
|
const ACTION_EDIT = {
|
|
|
|
href: TEST_EDIT_URL,
|
|
|
|
key: 'edit',
|
|
|
|
text: 'Edit',
|
|
|
|
secondaryText: 'Edit this file only.',
|
|
|
|
tooltip: '',
|
|
|
|
attrs: {
|
|
|
|
'data-qa-selector': 'edit_button',
|
2021-09-30 23:02:18 +05:30
|
|
|
'data-track-action': 'click_consolidated_edit',
|
|
|
|
'data-track-label': 'edit',
|
2021-01-03 14:25:43 +05:30
|
|
|
},
|
|
|
|
};
|
|
|
|
const ACTION_EDIT_CONFIRM_FORK = {
|
|
|
|
...ACTION_EDIT,
|
|
|
|
href: '#modal-confirm-fork-edit',
|
|
|
|
handle: expect.any(Function),
|
|
|
|
};
|
2020-11-24 15:15:51 +05:30
|
|
|
const ACTION_WEB_IDE = {
|
|
|
|
href: TEST_WEB_IDE_URL,
|
|
|
|
key: 'webide',
|
|
|
|
secondaryText: 'Quickly and easily edit multiple files in your project.',
|
|
|
|
tooltip: '',
|
|
|
|
text: 'Web IDE',
|
|
|
|
attrs: {
|
|
|
|
'data-qa-selector': 'web_ide_button',
|
2021-09-30 23:02:18 +05:30
|
|
|
'data-track-action': 'click_consolidated_edit_ide',
|
|
|
|
'data-track-label': 'web_ide',
|
2020-11-24 15:15:51 +05:30
|
|
|
},
|
|
|
|
};
|
2021-01-03 14:25:43 +05:30
|
|
|
const ACTION_WEB_IDE_CONFIRM_FORK = {
|
2020-11-24 15:15:51 +05:30
|
|
|
...ACTION_WEB_IDE,
|
2021-01-03 14:25:43 +05:30
|
|
|
href: '#modal-confirm-fork-webide',
|
2020-11-24 15:15:51 +05:30
|
|
|
handle: expect.any(Function),
|
|
|
|
};
|
2021-01-03 14:25:43 +05:30
|
|
|
const ACTION_WEB_IDE_EDIT_FORK = { ...ACTION_WEB_IDE, text: 'Edit fork in Web IDE' };
|
2020-11-24 15:15:51 +05:30
|
|
|
const ACTION_GITPOD = {
|
|
|
|
href: TEST_GITPOD_URL,
|
|
|
|
key: 'gitpod',
|
|
|
|
secondaryText: 'Launch a ready-to-code development environment for your project.',
|
|
|
|
tooltip: 'Launch a ready-to-code development environment for your project.',
|
|
|
|
text: 'Gitpod',
|
|
|
|
attrs: {
|
|
|
|
'data-qa-selector': 'gitpod_button',
|
|
|
|
},
|
|
|
|
};
|
|
|
|
const ACTION_GITPOD_ENABLE = {
|
|
|
|
...ACTION_GITPOD,
|
|
|
|
href: '#modal-enable-gitpod',
|
|
|
|
handle: expect.any(Function),
|
|
|
|
};
|
|
|
|
|
|
|
|
describe('Web IDE link component', () => {
|
|
|
|
let wrapper;
|
|
|
|
|
|
|
|
function createComponent(props) {
|
|
|
|
wrapper = shallowMount(WebIdeLink, {
|
|
|
|
propsData: {
|
2021-01-03 14:25:43 +05:30
|
|
|
editUrl: TEST_EDIT_URL,
|
2020-11-24 15:15:51 +05:30
|
|
|
webIdeUrl: TEST_WEB_IDE_URL,
|
|
|
|
gitpodUrl: TEST_GITPOD_URL,
|
|
|
|
...props,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
wrapper.destroy();
|
|
|
|
});
|
|
|
|
|
|
|
|
const findActionsButton = () => wrapper.find(ActionsButton);
|
|
|
|
const findLocalStorageSync = () => wrapper.find(LocalStorageSync);
|
|
|
|
|
2021-01-03 14:25:43 +05:30
|
|
|
it.each([
|
|
|
|
{
|
|
|
|
props: {},
|
|
|
|
expectedActions: [ACTION_WEB_IDE, ACTION_EDIT],
|
|
|
|
},
|
2021-10-27 15:23:28 +05:30
|
|
|
{
|
|
|
|
props: { webIdeText: 'Test Web IDE' },
|
|
|
|
expectedActions: [{ ...ACTION_WEB_IDE_EDIT_FORK, text: 'Test Web IDE' }, ACTION_EDIT],
|
|
|
|
},
|
2021-01-03 14:25:43 +05:30
|
|
|
{
|
|
|
|
props: { isFork: true },
|
|
|
|
expectedActions: [ACTION_WEB_IDE_EDIT_FORK, ACTION_EDIT],
|
|
|
|
},
|
|
|
|
{
|
|
|
|
props: { needsToFork: true },
|
|
|
|
expectedActions: [ACTION_WEB_IDE_CONFIRM_FORK, ACTION_EDIT_CONFIRM_FORK],
|
|
|
|
},
|
|
|
|
{
|
|
|
|
props: { showWebIdeButton: false, showGitpodButton: true, gitpodEnabled: true },
|
|
|
|
expectedActions: [ACTION_EDIT, ACTION_GITPOD],
|
|
|
|
},
|
|
|
|
{
|
|
|
|
props: { showWebIdeButton: false, showGitpodButton: true, gitpodEnabled: false },
|
|
|
|
expectedActions: [ACTION_EDIT, ACTION_GITPOD_ENABLE],
|
|
|
|
},
|
|
|
|
{
|
|
|
|
props: { showGitpodButton: true, gitpodEnabled: false },
|
|
|
|
expectedActions: [ACTION_WEB_IDE, ACTION_EDIT, ACTION_GITPOD_ENABLE],
|
|
|
|
},
|
2021-10-27 15:23:28 +05:30
|
|
|
{
|
|
|
|
props: { showEditButton: false, showGitpodButton: true, gitpodText: 'Test Gitpod' },
|
|
|
|
expectedActions: [ACTION_WEB_IDE, { ...ACTION_GITPOD_ENABLE, text: 'Test Gitpod' }],
|
|
|
|
},
|
2021-01-03 14:25:43 +05:30
|
|
|
{
|
|
|
|
props: { showEditButton: false },
|
|
|
|
expectedActions: [ACTION_WEB_IDE],
|
|
|
|
},
|
|
|
|
])('renders actions with appropriately for given props', ({ props, expectedActions }) => {
|
2020-11-24 15:15:51 +05:30
|
|
|
createComponent(props);
|
|
|
|
|
|
|
|
expect(findActionsButton().props('actions')).toEqual(expectedActions);
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('with multiple actions', () => {
|
|
|
|
beforeEach(() => {
|
2021-01-03 14:25:43 +05:30
|
|
|
createComponent({
|
|
|
|
showEditButton: false,
|
|
|
|
showWebIdeButton: true,
|
|
|
|
showGitpodButton: true,
|
|
|
|
gitpodEnabled: true,
|
|
|
|
});
|
2020-11-24 15:15:51 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
it('selected Web IDE by default', () => {
|
|
|
|
expect(findActionsButton().props()).toMatchObject({
|
|
|
|
actions: [ACTION_WEB_IDE, ACTION_GITPOD],
|
|
|
|
selectedKey: ACTION_WEB_IDE.key,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should set selection with local storage value', async () => {
|
|
|
|
expect(findActionsButton().props('selectedKey')).toBe(ACTION_WEB_IDE.key);
|
|
|
|
|
|
|
|
findLocalStorageSync().vm.$emit('input', ACTION_GITPOD.key);
|
|
|
|
|
|
|
|
await wrapper.vm.$nextTick();
|
|
|
|
|
|
|
|
expect(findActionsButton().props('selectedKey')).toBe(ACTION_GITPOD.key);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should update local storage when selection changes', async () => {
|
|
|
|
expect(findLocalStorageSync().props('value')).toBe(ACTION_WEB_IDE.key);
|
|
|
|
|
|
|
|
findActionsButton().vm.$emit('select', ACTION_GITPOD.key);
|
|
|
|
|
|
|
|
await wrapper.vm.$nextTick();
|
|
|
|
|
|
|
|
expect(findActionsButton().props('selectedKey')).toBe(ACTION_GITPOD.key);
|
|
|
|
expect(findLocalStorageSync().props('value')).toBe(ACTION_GITPOD.key);
|
|
|
|
});
|
|
|
|
});
|
2021-11-18 22:05:49 +05:30
|
|
|
|
|
|
|
describe('edit actions', () => {
|
|
|
|
it.each([
|
|
|
|
{
|
|
|
|
props: { showWebIdeButton: true, showEditButton: false },
|
|
|
|
expectedEventPayload: 'ide',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
props: { showWebIdeButton: false, showEditButton: true },
|
|
|
|
expectedEventPayload: 'simple',
|
|
|
|
},
|
|
|
|
])(
|
|
|
|
'emits the correct event when an action handler is called',
|
|
|
|
async ({ props, expectedEventPayload }) => {
|
|
|
|
createComponent({ ...props, needsToFork: true });
|
|
|
|
|
|
|
|
findActionsButton().props('actions')[0].handle();
|
|
|
|
|
|
|
|
expect(wrapper.emitted('edit')).toEqual([[expectedEventPayload]]);
|
|
|
|
},
|
|
|
|
);
|
|
|
|
});
|
2020-11-24 15:15:51 +05:30
|
|
|
});
|