gitlab-org--gitlab-foss/spec/frontend/environments/new_environment_item_spec.js

518 lines
16 KiB
JavaScript

import VueApollo from 'vue-apollo';
import Vue from 'vue';
import { GlCollapse, GlIcon } from '@gitlab/ui';
import createMockApollo from 'helpers/mock_apollo_helper';
import { mountExtended, extendedWrapper } from 'helpers/vue_test_utils_helper';
import { stubTransition } from 'helpers/stub_transition';
import { formatDate, getTimeago } from '~/lib/utils/datetime_utility';
import { __, s__, sprintf } from '~/locale';
import EnvironmentItem from '~/environments/components/new_environment_item.vue';
import Deployment from '~/environments/components/deployment.vue';
import DeployBoardWrapper from '~/environments/components/deploy_board_wrapper.vue';
import { resolvedEnvironment, rolloutStatus } from './graphql/mock_data';
Vue.use(VueApollo);
describe('~/environments/components/new_environment_item.vue', () => {
let wrapper;
const createApolloProvider = () => {
return createMockApollo();
};
const createWrapper = ({ propsData = {}, apolloProvider } = {}) =>
mountExtended(EnvironmentItem, {
apolloProvider,
propsData: { environment: resolvedEnvironment, ...propsData },
provide: { helpPagePath: '/help', projectId: '1' },
stubs: { transition: stubTransition() },
});
const findDeployment = () => wrapper.findComponent(Deployment);
const expandCollapsedSection = async () => {
const button = wrapper.findByRole('button', { name: __('Expand') });
await button.trigger('click');
return button;
};
afterEach(() => {
wrapper?.destroy();
});
it('displays the name when not in a folder', () => {
wrapper = createWrapper({ apolloProvider: createApolloProvider() });
const name = wrapper.findByRole('link', { name: resolvedEnvironment.name });
expect(name.exists()).toBe(true);
});
it('displays the name minus the folder prefix when in a folder', () => {
wrapper = createWrapper({
propsData: { inFolder: true },
apolloProvider: createApolloProvider(),
});
const name = wrapper.findByRole('link', { name: resolvedEnvironment.nameWithoutType });
expect(name.exists()).toBe(true);
});
it('truncates the name if it is very long', () => {
const environment = {
...resolvedEnvironment,
name:
'this is a really long name that should be truncated because otherwise it would look strange in the UI',
};
wrapper = createWrapper({ propsData: { environment }, apolloProvider: createApolloProvider() });
const name = wrapper.findByRole('link', {
name: (text) => environment.name.startsWith(text.slice(0, -1)),
});
expect(name.exists()).toBe(true);
expect(name.text()).toHaveLength(80);
});
describe('tier', () => {
it('displays the tier of the environment when defined in yaml', () => {
wrapper = createWrapper({ apolloProvider: createApolloProvider() });
const tier = wrapper.findByTitle(s__('Environment|Deployment tier'));
expect(tier.text()).toBe(resolvedEnvironment.lastDeployment.tierInYaml);
});
it('does not display the tier if not defined in yaml', () => {
const environment = {
...resolvedEnvironment,
lastDeployment: {
...resolvedEnvironment.lastDeployment,
tierInYaml: null,
},
};
wrapper = createWrapper({
propsData: { environment },
apolloProvider: createApolloProvider(),
});
const tier = wrapper.findByTitle(s__('Environment|Deployment tier'));
expect(tier.exists()).toBe(false);
});
});
describe('url', () => {
it('shows a link for the url if one is present', () => {
wrapper = createWrapper({ apolloProvider: createApolloProvider() });
const url = wrapper.findByRole('link', { name: s__('Environments|Open live environment') });
expect(url.attributes('href')).toEqual(resolvedEnvironment.externalUrl);
});
it('does not show a link for the url if one is missing', () => {
wrapper = createWrapper({
propsData: { environment: { ...resolvedEnvironment, externalUrl: '' } },
apolloProvider: createApolloProvider(),
});
const url = wrapper.findByRole('link', { name: s__('Environments|Open live environment') });
expect(url.exists()).toBe(false);
});
});
describe('actions', () => {
it('shows a dropdown if there are actions to perform', () => {
wrapper = createWrapper({ apolloProvider: createApolloProvider() });
const actions = wrapper.findByRole('button', { name: __('Deploy to...') });
expect(actions.exists()).toBe(true);
});
it('does not show a dropdown if there are no actions to perform', () => {
wrapper = createWrapper({
propsData: {
environment: {
...resolvedEnvironment,
lastDeployment: null,
},
apolloProvider: createApolloProvider(),
},
});
const actions = wrapper.findByRole('button', { name: __('Deploy to...') });
expect(actions.exists()).toBe(false);
});
it('passes all the actions down to the action component', () => {
wrapper = createWrapper({ apolloProvider: createApolloProvider() });
const action = wrapper.findByRole('menuitem', { name: 'deploy-staging' });
expect(action.exists()).toBe(true);
});
});
describe('stop', () => {
it('shows a buton to stop the environment if the environment is available', () => {
wrapper = createWrapper({ apolloProvider: createApolloProvider() });
const stop = wrapper.findByRole('button', { name: s__('Environments|Stop environment') });
expect(stop.exists()).toBe(true);
});
it('does not show a buton to stop the environment if the environment is stopped', () => {
wrapper = createWrapper({
propsData: { environment: { ...resolvedEnvironment, canStop: false } },
apolloProvider: createApolloProvider(),
});
const stop = wrapper.findByRole('button', { name: s__('Environments|Stop environment') });
expect(stop.exists()).toBe(false);
});
});
describe('rollback', () => {
it('shows the option to rollback/re-deploy if available', () => {
wrapper = createWrapper({ apolloProvider: createApolloProvider() });
const rollback = wrapper.findByRole('menuitem', {
name: s__('Environments|Re-deploy to environment'),
});
expect(rollback.exists()).toBe(true);
});
it('does not show the option to rollback/re-deploy if not available', () => {
wrapper = createWrapper({
propsData: { environment: { ...resolvedEnvironment, lastDeployment: null } },
apolloProvider: createApolloProvider(),
});
const rollback = wrapper.findByRole('menuitem', {
name: s__('Environments|Re-deploy to environment'),
});
expect(rollback.exists()).toBe(false);
});
});
describe('pin', () => {
describe('with autostop', () => {
let environment;
beforeEach(() => {
environment = {
...resolvedEnvironment,
autoStopAt: new Date(Date.now() + 100000).toString(),
};
wrapper = createWrapper({
propsData: {
environment,
},
apolloProvider: createApolloProvider(),
});
});
it('shows the option to pin the environment if there is an autostop date', () => {
const pin = wrapper.findByRole('menuitem', { name: __('Prevent auto-stopping') });
expect(pin.exists()).toBe(true);
});
it('shows when the environment auto stops', () => {
const autoStop = wrapper.findByTitle(formatDate(environment.autoStopAt));
expect(autoStop.text()).toBe('in 1 minute');
});
});
describe('without autostop', () => {
beforeEach(() => {
wrapper = createWrapper({ apolloProvider: createApolloProvider() });
});
it('does not show the option to pin the environment if there is no autostop date', () => {
wrapper = createWrapper({ apolloProvider: createApolloProvider() });
const pin = wrapper.findByRole('menuitem', { name: __('Prevent auto-stopping') });
expect(pin.exists()).toBe(false);
});
it('does not show when the environment auto stops', () => {
const autoStop = wrapper.findByText(
sprintf(s__('Environment|Auto stop %{time}'), {
time: getTimeago().format(resolvedEnvironment.autoStopAt),
}),
);
expect(autoStop.exists()).toBe(false);
});
});
describe('with past autostop', () => {
let environment;
beforeEach(() => {
environment = {
...resolvedEnvironment,
autoStopAt: new Date(Date.now() - 100000).toString(),
};
wrapper = createWrapper({
propsData: {
environment,
},
apolloProvider: createApolloProvider(),
});
});
it('does not show the option to pin the environment if there is no autostop date', () => {
wrapper = createWrapper({ apolloProvider: createApolloProvider() });
const pin = wrapper.findByRole('menuitem', { name: __('Prevent auto-stopping') });
expect(pin.exists()).toBe(false);
});
it('does not show when the environment auto stops', () => {
const autoStop = wrapper.findByText(
sprintf(s__('Environment|Auto stop %{time}'), {
time: getTimeago().format(environment.autoStopAt),
}),
);
expect(autoStop.exists()).toBe(false);
});
});
});
describe('monitoring', () => {
it('shows the link to monitoring if metrics are set up', () => {
wrapper = createWrapper({
propsData: { environment: { ...resolvedEnvironment, metricsPath: '/metrics' } },
apolloProvider: createApolloProvider(),
});
const rollback = wrapper.findByRole('menuitem', { name: __('Monitoring') });
expect(rollback.exists()).toBe(true);
});
it('does not show the link to monitoring if metrics are not set up', () => {
wrapper = createWrapper({ apolloProvider: createApolloProvider() });
const rollback = wrapper.findByRole('menuitem', { name: __('Monitoring') });
expect(rollback.exists()).toBe(false);
});
});
describe('terminal', () => {
it('shows the link to the terminal if set up', () => {
wrapper = createWrapper({
propsData: { environment: { ...resolvedEnvironment, terminalPath: '/terminal' } },
apolloProvider: createApolloProvider(),
});
const rollback = wrapper.findByRole('menuitem', { name: __('Terminal') });
expect(rollback.exists()).toBe(true);
});
it('does not show the link to the terminal if not set up', () => {
wrapper = createWrapper({ apolloProvider: createApolloProvider() });
const rollback = wrapper.findByRole('menuitem', { name: __('Terminal') });
expect(rollback.exists()).toBe(false);
});
});
describe('delete', () => {
it('shows the button to delete the environment if possible', () => {
wrapper = createWrapper({
propsData: {
environment: { ...resolvedEnvironment, canDelete: true, deletePath: '/terminal' },
},
apolloProvider: createApolloProvider(),
});
const rollback = wrapper.findByRole('menuitem', {
name: s__('Environments|Delete environment'),
});
expect(rollback.exists()).toBe(true);
});
it('does not show the button to delete the environment if not possible', () => {
wrapper = createWrapper({ apolloProvider: createApolloProvider() });
const rollback = wrapper.findByRole('menuitem', {
name: s__('Environments|Delete environment'),
});
expect(rollback.exists()).toBe(false);
});
});
describe('collapse', () => {
let icon;
let collapse;
let environmentName;
beforeEach(() => {
wrapper = createWrapper({ apolloProvider: createApolloProvider() });
collapse = wrapper.findComponent(GlCollapse);
icon = wrapper.findComponent(GlIcon);
environmentName = wrapper.findByText(resolvedEnvironment.name);
});
it('is collapsed by default', () => {
expect(collapse.attributes('visible')).toBeUndefined();
expect(icon.props('name')).toBe('chevron-lg-right');
expect(environmentName.classes('gl-font-weight-bold')).toBe(false);
});
it('opens on click', async () => {
expect(findDeployment().isVisible()).toBe(false);
const button = await expandCollapsedSection();
expect(button.attributes('aria-label')).toBe(__('Collapse'));
expect(collapse.attributes('visible')).toBe('visible');
expect(icon.props('name')).toBe('chevron-lg-down');
expect(environmentName.classes('gl-font-weight-bold')).toBe(true);
expect(findDeployment().isVisible()).toBe(true);
});
});
describe('last deployment', () => {
it('should pass the last deployment to the deployment component when it exists', () => {
wrapper = createWrapper({ apolloProvider: createApolloProvider() });
const deployment = findDeployment();
expect(deployment.props('deployment')).toEqual(resolvedEnvironment.lastDeployment);
});
it('should not show the last deployment when it is missing', () => {
const environment = {
...resolvedEnvironment,
lastDeployment: null,
};
wrapper = createWrapper({
propsData: { environment },
apolloProvider: createApolloProvider(),
});
const deployment = findDeployment();
expect(deployment.exists()).toBe(false);
});
});
describe('upcoming deployment', () => {
it('should pass the upcoming deployment to the deployment component when it exists', () => {
const upcomingDeployment = resolvedEnvironment.lastDeployment;
const environment = { ...resolvedEnvironment, lastDeployment: null, upcomingDeployment };
wrapper = createWrapper({
propsData: { environment },
apolloProvider: createApolloProvider(),
});
const deployment = findDeployment();
expect(deployment.props('deployment')).toEqual(upcomingDeployment);
});
it('should not show the upcoming deployment when it is missing', () => {
const environment = {
...resolvedEnvironment,
lastDeployment: null,
upcomingDeployment: null,
};
wrapper = createWrapper({
propsData: { environment },
apolloProvider: createApolloProvider(),
});
const deployment = findDeployment();
expect(deployment.exists()).toBe(false);
});
});
describe('empty state', () => {
it('should link to documentation', async () => {
const environment = {
...resolvedEnvironment,
lastDeployment: null,
upcomingDeployment: null,
};
wrapper = createWrapper({
propsData: { environment },
apolloProvider: createApolloProvider(),
});
await expandCollapsedSection();
const text = s__(
'Environments|There are no deployments for this environment yet. Learn more about setting up deployments.',
);
const emptyState = wrapper.findByText((_content, element) => element.textContent === text);
const link = extendedWrapper(emptyState).findByRole('link');
expect(link.attributes('href')).toBe('/help');
});
it('should not link to the documentation when there are deployments', async () => {
wrapper = createWrapper({
apolloProvider: createApolloProvider(),
});
await expandCollapsedSection();
const text = s__(
'Environments|There are no deployments for this environment yet. Learn more about setting up deployments.',
);
const emptyState = wrapper.findByText((_content, element) => element.textContent === text);
expect(emptyState.exists()).toBe(false);
});
});
describe('deploy boards', () => {
it('should show a deploy board if the environment has a rollout status', async () => {
const environment = {
...resolvedEnvironment,
rolloutStatus,
};
wrapper = createWrapper({
propsData: { environment },
apolloProvider: createApolloProvider(),
});
await expandCollapsedSection();
const deployBoard = wrapper.findComponent(DeployBoardWrapper);
expect(deployBoard.exists()).toBe(true);
expect(deployBoard.props('rolloutStatus')).toBe(rolloutStatus);
});
it('should not show a deploy board if the environment has no rollout status', async () => {
wrapper = createWrapper({
apolloProvider: createApolloProvider(),
});
await expandCollapsedSection();
const deployBoard = wrapper.findComponent(DeployBoardWrapper);
expect(deployBoard.exists()).toBe(false);
});
});
});