2022-01-27 15:14:51 +00:00
|
|
|
import { GlCollapse } from '@gitlab/ui';
|
2022-01-19 18:14:01 +00:00
|
|
|
import { mountExtended } from 'helpers/vue_test_utils_helper';
|
2022-01-24 18:14:42 +00:00
|
|
|
import { useFakeDate } from 'helpers/fake_date';
|
2022-01-27 15:14:51 +00:00
|
|
|
import { stubTransition } from 'helpers/stub_transition';
|
|
|
|
import { formatDate } from '~/lib/utils/datetime_utility';
|
|
|
|
import { __, s__ } from '~/locale';
|
2022-01-21 18:12:45 +00:00
|
|
|
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
|
2022-01-19 18:14:01 +00:00
|
|
|
import Deployment from '~/environments/components/deployment.vue';
|
2022-02-03 06:15:26 +00:00
|
|
|
import Commit from '~/environments/components/commit.vue';
|
2022-01-19 18:14:01 +00:00
|
|
|
import DeploymentStatusBadge from '~/environments/components/deployment_status_badge.vue';
|
|
|
|
import { resolvedEnvironment } from './graphql/mock_data';
|
|
|
|
|
|
|
|
describe('~/environments/components/deployment.vue', () => {
|
2022-01-24 18:14:42 +00:00
|
|
|
useFakeDate(2022, 0, 8, 16);
|
|
|
|
|
2022-02-03 06:15:26 +00:00
|
|
|
let deployment;
|
2022-01-19 18:14:01 +00:00
|
|
|
let wrapper;
|
|
|
|
|
2022-02-03 06:15:26 +00:00
|
|
|
beforeEach(() => {
|
|
|
|
deployment = resolvedEnvironment.lastDeployment;
|
|
|
|
});
|
|
|
|
|
2022-01-19 18:14:01 +00:00
|
|
|
const createWrapper = ({ propsData = {} } = {}) =>
|
|
|
|
mountExtended(Deployment, {
|
|
|
|
propsData: {
|
2022-01-20 18:14:18 +00:00
|
|
|
deployment,
|
2022-01-19 18:14:01 +00:00
|
|
|
...propsData,
|
|
|
|
},
|
2022-01-27 15:14:51 +00:00
|
|
|
stubs: { transition: stubTransition() },
|
2022-01-19 18:14:01 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
wrapper?.destroy();
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('status', () => {
|
|
|
|
it('should pass the deployable status to the badge', () => {
|
|
|
|
wrapper = createWrapper();
|
2022-01-20 18:14:18 +00:00
|
|
|
expect(wrapper.findComponent(DeploymentStatusBadge).props('status')).toBe(deployment.status);
|
2022-01-19 18:14:01 +00:00
|
|
|
});
|
|
|
|
});
|
2022-01-20 15:11:58 +00:00
|
|
|
|
|
|
|
describe('latest', () => {
|
|
|
|
it('should show a badge if the deployment is latest', () => {
|
|
|
|
wrapper = createWrapper({ propsData: { latest: true } });
|
|
|
|
|
|
|
|
const badge = wrapper.findByText(s__('Deployment|Latest Deployed'));
|
|
|
|
|
|
|
|
expect(badge.exists()).toBe(true);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should not show a badge if the deployment is not latest', () => {
|
|
|
|
wrapper = createWrapper();
|
|
|
|
|
|
|
|
const badge = wrapper.findByText(s__('Deployment|Latest Deployed'));
|
|
|
|
|
|
|
|
expect(badge.exists()).toBe(false);
|
|
|
|
});
|
|
|
|
});
|
2022-01-20 18:14:18 +00:00
|
|
|
|
|
|
|
describe('iid', () => {
|
|
|
|
const findIid = () => wrapper.findByTitle(s__('Deployment|Deployment ID'));
|
|
|
|
const findDeploymentIcon = () => wrapper.findComponent({ ref: 'deployment-iid-icon' });
|
|
|
|
|
|
|
|
describe('is present', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
wrapper = createWrapper();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should show the iid', () => {
|
|
|
|
const iid = findIid();
|
|
|
|
expect(iid.exists()).toBe(true);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should show an icon for the iid', () => {
|
|
|
|
const deploymentIcon = findDeploymentIcon();
|
|
|
|
expect(deploymentIcon.props('name')).toBe('deployments');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('is not present', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
wrapper = createWrapper({ propsData: { deployment: { ...deployment, iid: '' } } });
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should not show the iid', () => {
|
|
|
|
const iid = findIid();
|
|
|
|
expect(iid.exists()).toBe(false);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should not show an icon for the iid', () => {
|
|
|
|
const deploymentIcon = findDeploymentIcon();
|
|
|
|
expect(deploymentIcon.exists()).toBe(false);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2022-01-21 18:12:45 +00:00
|
|
|
|
|
|
|
describe('shortSha', () => {
|
|
|
|
describe('is present', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
wrapper = createWrapper();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('shows the short SHA for the commit of the deployment', () => {
|
|
|
|
const sha = wrapper.findByTitle(__('Commit SHA'));
|
|
|
|
|
|
|
|
expect(sha.exists()).toBe(true);
|
|
|
|
expect(sha.text()).toBe(deployment.commit.shortId);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('shows the commit icon', () => {
|
|
|
|
const icon = wrapper.findComponent({ ref: 'deployment-commit-icon' });
|
|
|
|
expect(icon.props('name')).toBe('commit');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('shows a copy button for the sha', () => {
|
|
|
|
const button = wrapper.findComponent(ClipboardButton);
|
|
|
|
expect(button.props()).toMatchObject({
|
|
|
|
text: deployment.commit.shortId,
|
|
|
|
title: __('Copy commit SHA'),
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('is not present', () => {
|
|
|
|
it('does not show the short SHA for the commit of the deployment', () => {
|
|
|
|
wrapper = createWrapper({
|
|
|
|
propsData: {
|
|
|
|
deployment: {
|
|
|
|
...deployment,
|
|
|
|
commit: null,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
|
|
|
const sha = wrapper.findByTestId('deployment-commit-sha');
|
|
|
|
expect(sha.exists()).toBe(false);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2022-01-24 18:14:42 +00:00
|
|
|
|
|
|
|
describe('created at time', () => {
|
|
|
|
describe('is present', () => {
|
|
|
|
it('shows the timestamp the deployment was deployed at', () => {
|
|
|
|
wrapper = createWrapper();
|
|
|
|
const date = wrapper.findByTitle(formatDate(deployment.createdAt));
|
|
|
|
|
|
|
|
expect(date.text()).toBe('1 day ago');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
describe('is not present', () => {
|
|
|
|
it('does not show the timestamp', () => {
|
2022-02-07 18:16:03 +00:00
|
|
|
wrapper = createWrapper({ propsData: { deployment: { ...deployment, createdAt: null } } });
|
2022-01-24 18:14:42 +00:00
|
|
|
const date = wrapper.findByTitle(formatDate(deployment.createdAt));
|
|
|
|
|
|
|
|
expect(date.exists()).toBe(false);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2022-01-27 15:14:51 +00:00
|
|
|
|
2022-02-03 06:15:26 +00:00
|
|
|
describe('commit message', () => {
|
|
|
|
describe('with commit', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
wrapper = createWrapper();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('shows the commit component', () => {
|
|
|
|
const commit = wrapper.findComponent(Commit);
|
|
|
|
expect(commit.props('commit')).toBe(deployment.commit);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('without a commit', () => {
|
|
|
|
it('displays nothing', () => {
|
|
|
|
const noCommit = {
|
|
|
|
...deployment,
|
|
|
|
commit: null,
|
|
|
|
};
|
|
|
|
wrapper = createWrapper({ propsData: { deployment: noCommit } });
|
|
|
|
|
|
|
|
const commit = wrapper.findComponent(Commit);
|
|
|
|
expect(commit.exists()).toBe(false);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2022-01-27 15:14:51 +00:00
|
|
|
describe('collapse', () => {
|
|
|
|
let collapse;
|
|
|
|
let button;
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
wrapper = createWrapper();
|
|
|
|
collapse = wrapper.findComponent(GlCollapse);
|
|
|
|
button = wrapper.findComponent({ ref: 'details-toggle' });
|
|
|
|
});
|
|
|
|
|
|
|
|
it('is collapsed by default', () => {
|
|
|
|
expect(collapse.attributes('visible')).toBeUndefined();
|
|
|
|
expect(button.props('icon')).toBe('expand-down');
|
|
|
|
expect(button.text()).toBe(__('Show details'));
|
|
|
|
});
|
|
|
|
|
|
|
|
it('opens on click', async () => {
|
|
|
|
await button.trigger('click');
|
|
|
|
|
|
|
|
expect(button.text()).toBe(__('Hide details'));
|
|
|
|
expect(button.props('icon')).toBe('expand-up');
|
|
|
|
expect(collapse.attributes('visible')).toBe('visible');
|
2022-02-07 18:16:03 +00:00
|
|
|
|
|
|
|
const username = wrapper.findByRole('link', { name: `@${deployment.user.username}` });
|
|
|
|
|
|
|
|
expect(username.attributes('href')).toBe(deployment.user.path);
|
2022-02-10 00:15:43 +00:00
|
|
|
const job = wrapper.findByRole('link', { name: deployment.deployable.name });
|
|
|
|
expect(job.attributes('href')).toBe(deployment.deployable.buildPath);
|
|
|
|
const apiBadge = wrapper.findByText(__('API'));
|
|
|
|
expect(apiBadge.exists()).toBe(false);
|
2022-02-15 18:14:39 +00:00
|
|
|
|
|
|
|
const branchLabel = wrapper.findByText(__('Branch'));
|
|
|
|
expect(branchLabel.exists()).toBe(true);
|
|
|
|
const tagLabel = wrapper.findByText(__('Tag'));
|
|
|
|
expect(tagLabel.exists()).toBe(false);
|
|
|
|
const ref = wrapper.findByRole('link', { name: deployment.ref.name });
|
|
|
|
expect(ref.attributes('href')).toBe(deployment.ref.refPath);
|
2022-02-10 00:15:43 +00:00
|
|
|
});
|
|
|
|
});
|
2022-02-15 18:14:39 +00:00
|
|
|
|
|
|
|
describe('with tagged deployment', () => {
|
|
|
|
beforeEach(async () => {
|
|
|
|
wrapper = createWrapper({ propsData: { deployment: { ...deployment, tag: true } } });
|
|
|
|
await wrapper.findComponent({ ref: 'details-toggle' }).trigger('click');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('shows tag instead of branch', () => {
|
|
|
|
const refLabel = wrapper.findByText(__('Tag'));
|
|
|
|
expect(refLabel.exists()).toBe(true);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2022-02-10 00:15:43 +00:00
|
|
|
describe('with API deployment', () => {
|
|
|
|
beforeEach(async () => {
|
|
|
|
wrapper = createWrapper({ propsData: { deployment: { ...deployment, deployable: null } } });
|
|
|
|
await wrapper.findComponent({ ref: 'details-toggle' }).trigger('click');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('shows API instead of a job name', () => {
|
|
|
|
const apiBadge = wrapper.findByText(__('API'));
|
|
|
|
expect(apiBadge.exists()).toBe(true);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
describe('without a job path', () => {
|
|
|
|
beforeEach(async () => {
|
|
|
|
wrapper = createWrapper({
|
|
|
|
propsData: {
|
|
|
|
deployment: { ...deployment, deployable: { name: deployment.deployable.name } },
|
|
|
|
},
|
|
|
|
});
|
|
|
|
await wrapper.findComponent({ ref: 'details-toggle' }).trigger('click');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('shows a span instead of a link', () => {
|
2022-02-15 18:14:39 +00:00
|
|
|
const job = wrapper.findByTitle(deployment.deployable.name);
|
2022-02-10 00:15:43 +00:00
|
|
|
expect(job.attributes('href')).toBeUndefined();
|
2022-01-27 15:14:51 +00:00
|
|
|
});
|
|
|
|
});
|
2022-01-19 18:14:01 +00:00
|
|
|
});
|