Skip to content
Snippets Groups Projects
Unverified Commit e4491b67 authored by Natalia Tepluhina's avatar Natalia Tepluhina Committed by GitLab
Browse files

Merge branch '480437-fix-spec-frontend-environments-new_environment_item_spec-js' into 'master' 

Fix `spec/frontend/environments/*_spec.js` for Vue 3 migartion

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/167587



Merged-by: default avatarNatalia Tepluhina <ntepluhina@gitlab.com>
Approved-by: default avatarVanessa Otto <votto@gitlab.com>
Approved-by: default avatarNatalia Tepluhina <ntepluhina@gitlab.com>
Reviewed-by: default avatarAnna Vovchenko <avovchenko@gitlab.com>
Reviewed-by: default avatarVanessa Otto <votto@gitlab.com>
Co-authored-by: default avatarAnna Vovchenko <avovchenko@gitlab.com>
parents 359ec852 b4dd3861
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 164 additions and 244 deletions
app/assets/javascripts/environments/components/empty_state.vue
+ 14
− 5
View file @ e4491b67
<script>
import emptyEntironmentsSvgPath from '@gitlab/svgs/dist/illustrations/empty-state/empty-environment-md.svg';
import emptyEnvironmentsSvgPath from '@gitlab/svgs/dist/illustrations/empty-state/empty-environment-md.svg';
import { GlButton, GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui';
import { s__ } from '~/locale';
 
@@ -40,14 +40,14 @@ export default {
newEnvironmentButtonLabel: s__('Environments|Create an environment'),
enablingReviewButtonLabel: s__('Environments|Enable review apps'),
},
emptyEntironmentsSvgPath,
emptyEnvironmentsSvgPath,
};
</script>
<template>
<gl-empty-state
class="gl-mx-auto gl-max-w-limited"
:title="title"
:svg-path="$options.emptyEntironmentsSvgPath"
:svg-path="$options.emptyEnvironmentsSvgPath"
>
<template #description>
<gl-sprintf :message="content">
@@ -57,10 +57,19 @@ export default {
</gl-sprintf>
</template>
<template v-if="!hasTerm" #actions>
<gl-button class="gl-mx-2 gl-mb-3" :href="newEnvironmentPath" variant="confirm">
<gl-button
class="gl-mx-2 gl-mb-3"
:href="newEnvironmentPath"
variant="confirm"
data-testid="new-environment-button"
>
{{ $options.i18n.newEnvironmentButtonLabel }}
</gl-button>
<gl-button class="gl-mx-2 gl-mb-3" @click="$emit('enable-review')">
<gl-button
class="gl-mx-2 gl-mb-3"
data-testid="enable-review-button"
@click="$emit('enable-review')"
>
{{ $options.i18n.enablingReviewButtonLabel }}
</gl-button>
</template>
app/assets/javascripts/environments/components/environments_app.vue
+ 2
− 2
View file @ e4491b67
@@ -42,7 +42,6 @@ export default {
GlTabs,
},
apollo: {
// eslint-disable-next-line @gitlab/vue-no-undef-apollo-properties
environmentApp: {
query: environmentAppQuery,
variables() {
@@ -93,6 +92,7 @@ export default {
data() {
const { page = '1', search = '', scope } = queryToObject(window.location.search);
return {
environmentApp: null,
interval: undefined,
isReviewAppModalVisible: false,
isStopStaleEnvModalVisible: false,
@@ -207,7 +207,7 @@ export default {
window.addEventListener('popstate', this.syncPageFromQueryParams);
window.addEventListener('popstate', this.syncSearchFromQueryParams);
},
destroyed() {
beforeDestroy() {
window.removeEventListener('popstate', this.syncPageFromQueryParams);
window.removeEventListener('popstate', this.syncSearchFromQueryParams);
this.$apollo.queries.environmentApp.stopPolling();
app/assets/javascripts/environments/components/new_environment_item.vue
+ 5
− 1
View file @ e4491b67
@@ -216,7 +216,11 @@ export default {
>
</div>
<div class="gl-flex gl-items-center">
<p v-if="canShowAutoStopDate" class="gl-mb-0 gl-mr-5 gl-text-sm gl-text-gray-700">
<p
v-if="canShowAutoStopDate"
class="gl-mb-0 gl-mr-5 gl-text-sm gl-text-gray-700"
data-testid="auto-stop-time"
>
<gl-sprintf :message="$options.i18n.autoStopIn">
<template #time>
<time-ago-tooltip :time="environment.autoStopAt" css-class="gl-font-bold" />
ee/spec/frontend/environments/new_environment_item_spec.js
+ 18
− 23
View file @ e4491b67
import VueApollo from 'vue-apollo';
import Vue, { nextTick } from 'vue';
import Vue from 'vue';
import createMockApollo from 'helpers/mock_apollo_helper';
import { mountExtended } from 'helpers/vue_test_utils_helper';
import { stubTransition } from 'helpers/stub_transition';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import EnvironmentItem from '~/environments/components/new_environment_item.vue';
import EnvironmentAlert from 'ee/environments/components/environment_alert.vue';
import EnvironmentApproval from 'ee/environments/components/environment_approval.vue';
@@ -13,8 +12,6 @@ Vue.use(VueApollo);
 
describe('~/environments/components/new_environment_item.vue', () => {
let wrapper;
let alert;
let approval;
 
const createApolloProvider = () => {
return createMockApollo([
@@ -41,35 +38,33 @@ describe('~/environments/components/new_environment_item.vue', () => {
]);
};
 
const createWrapper = async ({ propsData = {}, apolloProvider } = {}) => {
wrapper = mountExtended(EnvironmentItem, {
const createWrapper = ({ propsData = {}, apolloProvider } = {}) => {
wrapper = shallowMountExtended(EnvironmentItem, {
apolloProvider,
propsData: { environment: resolvedEnvironment, ...propsData },
provide: { helpPagePath: '/help', projectId: '1', projectPath: '/1' },
stubs: { transition: stubTransition() },
stubs: { EnvironmentAlert, EnvironmentApproval },
});
await nextTick();
alert = wrapper.findComponent(EnvironmentAlert);
approval = wrapper.findComponent(EnvironmentApproval);
};
 
it('shows an alert if one is opened', async () => {
const findAlert = () => wrapper.findComponent(EnvironmentAlert);
const findApproval = () => wrapper.findComponent(EnvironmentApproval);
it('shows an alert if one is opened', () => {
const environment = { ...resolvedEnvironment, hasOpenedAlert: true };
await createWrapper({ propsData: { environment }, apolloProvider: createApolloProvider() });
createWrapper({ propsData: { environment }, apolloProvider: createApolloProvider() });
 
expect(alert.exists()).toBe(true);
expect(alert.props('environment')).toBe(environment);
expect(findAlert().exists()).toBe(true);
expect(findAlert().props('environment')).toBe(environment);
});
 
it('does not show an alert if one is opened', async () => {
await createWrapper({ apolloProvider: createApolloProvider() });
it('does not show an alert if one is opened', () => {
createWrapper({ apolloProvider: createApolloProvider() });
 
expect(alert.exists()).toBe(false);
expect(findAlert().exists()).toBe(false);
});
 
it('provides necessary data to environment-approval component', async () => {
it('provides necessary data to environment-approval component', () => {
const upcomingDeployment = resolvedEnvironment.lastDeployment;
const environment = {
...resolvedEnvironment,
@@ -77,9 +72,9 @@ describe('~/environments/components/new_environment_item.vue', () => {
upcomingDeployment,
requiredApprovalCount: 2,
};
await createWrapper({ propsData: { environment }, apolloProvider: createApolloProvider() });
createWrapper({ propsData: { environment }, apolloProvider: createApolloProvider() });
 
expect(approval.props()).toMatchObject({
expect(findApproval().props()).toMatchObject({
requiredApprovalCount: 2,
deploymentWebPath: upcomingDeployment.webPath,
});
spec/frontend/environments/canary_update_modal_spec.js
+ 6
− 5
View file @ e4491b67
import { GlAlert, GlModal } from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import { GlAlert, GlModal, GlSprintf } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import waitForPromises from 'helpers/wait_for_promises';
import CanaryUpdateModal from '~/environments/components/canary_update_modal.vue';
@@ -14,7 +14,7 @@ describe('/environments/components/canary_update_modal.vue', () => {
 
const createComponent = () => {
mutate = jest.fn().mockResolvedValue();
wrapper = mount(CanaryUpdateModal, {
wrapper = shallowMount(CanaryUpdateModal, {
propsData: {
environment: {
name: 'staging',
@@ -26,6 +26,7 @@ describe('/environments/components/canary_update_modal.vue', () => {
mocks: {
$apollo: { mutate },
},
stubs: { GlSprintf },
});
modal = wrapper.findComponent(GlModal);
};
@@ -88,7 +89,7 @@ describe('/environments/components/canary_update_modal.vue', () => {
mutate.mockResolvedValue({ data: { environmentsCanaryIngressUpdate: { errors: ['error'] } } });
modal.vm.$emit('primary');
 
await nextTick();
await waitForPromises();
 
expect(findAlert().text()).toBe('error');
});
@@ -107,7 +108,7 @@ describe('/environments/components/canary_update_modal.vue', () => {
mutate.mockResolvedValue({ data: { environmentsCanaryIngressUpdate: { errors: ['error'] } } });
modal.vm.$emit('primary');
 
await nextTick();
await waitForPromises();
 
const alert = findAlert();
alert.vm.$emit('dismiss');
spec/frontend/environments/edit_environment_spec.js
+ 14
− 32
View file @ e4491b67
import { GlLoadingIcon } from '@gitlab/ui';
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import VueApollo from 'vue-apollo';
import { mountExtended } from 'helpers/vue_test_utils_helper';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import waitForPromises from 'helpers/wait_for_promises';
import EditEnvironment from '~/environments/components/edit_environment.vue';
import EnvironmentForm from '~/environments/components/environment_form.vue';
import { createAlert } from '~/alert';
import { visitUrl } from '~/lib/utils/url_utility';
import getEnvironment from '~/environments/graphql/queries/environment.query.graphql';
@@ -63,7 +64,7 @@ describe('~/environments/components/edit.vue', () => {
};
 
const createWrapperWithApollo = async ({ mutationHandler = updateEnvironmentSuccess } = {}) => {
wrapper = mountExtended(EditEnvironment, {
wrapper = shallowMountExtended(EditEnvironment, {
propsData: { environment: {} },
provide: {
...provide,
@@ -74,12 +75,9 @@ describe('~/environments/components/edit.vue', () => {
await waitForPromises();
};
 
const findNameInput = () => wrapper.findByLabelText('Name');
const findExternalUrlInput = () => wrapper.findByLabelText('External URL');
const findForm = () => wrapper.findByRole('form', { name: 'Edit environment' });
const findForm = () => wrapper.findComponent(EnvironmentForm);
 
const showsLoading = () => wrapper.findComponent(GlLoadingIcon).exists();
const showsFormLoading = () => wrapper.findByTestId('save-environment').props('loading');
 
describe('default', () => {
it('performs the environment apollo query', () => {
@@ -94,31 +92,14 @@ describe('~/environments/components/edit.vue', () => {
 
it('sets the title to Edit environment', async () => {
await createWrapperWithApollo();
const header = wrapper.findByRole('heading', { name: 'Edit environment' });
expect(header.exists()).toBe(true);
});
it('renders a disabled "Name" field', async () => {
await createWrapperWithApollo();
const nameInput = findNameInput();
expect(nameInput.attributes().disabled).toBe('disabled');
expect(nameInput.element.value).toBe(environment.name);
});
it('renders an "External URL" field', async () => {
await createWrapperWithApollo();
const urlInput = findExternalUrlInput();
expect(urlInput.element.value).toBe(environment.externalUrl);
expect(findForm().props('title')).toBe('Edit environment');
});
});
 
describe('on submit', () => {
it('performs the updateEnvironment apollo mutation', async () => {
await createWrapperWithApollo();
await findForm().trigger('submit');
findForm().vm.$emit('submit');
 
expect(updateEnvironmentSuccess).toHaveBeenCalled();
});
@@ -129,15 +110,16 @@ describe('~/environments/components/edit.vue', () => {
});
 
it('shows loader after form is submitted', async () => {
expect(showsFormLoading()).toBe(false);
expect(findForm().props('loading')).toBe(false);
 
await findForm().trigger('submit');
findForm().vm.$emit('submit');
await nextTick();
 
expect(showsFormLoading()).toBe(true);
expect(findForm().props('loading')).toBe(true);
});
 
it('submits the updated environment on submit', async () => {
await findForm().trigger('submit');
findForm().vm.$emit('submit');
await waitForPromises();
 
expect(visitUrl).toHaveBeenCalledWith(environmentUpdateSuccess.environment.path);
@@ -152,11 +134,11 @@ describe('~/environments/components/edit.vue', () => {
});
 
it('shows errors on error', async () => {
await findForm().trigger('submit');
findForm().vm.$emit('submit');
await waitForPromises();
 
expect(createAlert).toHaveBeenCalledWith({ message: 'uh oh!' });
expect(showsFormLoading()).toBe(false);
expect(findForm().props('loading')).toBe(false);
});
});
});
spec/frontend/environments/empty_state_spec.js
+ 24
− 57
View file @ e4491b67
import { mountExtended } from 'helpers/vue_test_utils_helper';
import { GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import EmptyState from '~/environments/components/empty_state.vue';
import { ENVIRONMENTS_SCOPE } from '~/environments/constants';
 
@@ -8,29 +9,20 @@ const NEW_PATH = '/new';
describe('~/environments/components/empty_state.vue', () => {
let wrapper;
 
const findNewEnvironmentLink = () =>
wrapper.findByRole('link', {
name: 'Create an environment',
});
const findDocsLink = () =>
wrapper.findByRole('link', {
name: 'Learn more',
});
const finfEnablingReviewButton = () =>
wrapper.findByRole('button', {
name: 'Enable review apps',
});
const findEmptyState = () => wrapper.findComponent(GlEmptyState);
const findDocsLink = () => wrapper.findComponent(GlLink);
const findNewEnvironmentButton = () => wrapper.findByTestId('new-environment-button');
const findEnablingReviewButton = () => wrapper.findByTestId('enable-review-button');
 
const createWrapper = ({ propsData = {} } = {}) =>
mountExtended(EmptyState, {
shallowMountExtended(EmptyState, {
propsData: {
scope: ENVIRONMENTS_SCOPE.AVAILABLE,
helpPath: HELP_PATH,
...propsData,
},
provide: { newEnvironmentPath: NEW_PATH },
stubs: { GlSprintf },
});
 
describe('without search term', () => {
@@ -38,36 +30,24 @@ describe('~/environments/components/empty_state.vue', () => {
wrapper = createWrapper();
});
 
it('shows an empty state environments', () => {
const title = wrapper.findByRole('heading', {
name: 'Get started with environments',
});
expect(title.exists()).toBe(true);
it('shows an empty state environments with the correct title', () => {
expect(findEmptyState().props('title')).toBe('Get started with environments');
});
 
it('shows a link to the the help path', () => {
const link = findDocsLink();
expect(link.attributes('href')).toBe(HELP_PATH);
expect(findDocsLink().attributes('href')).toBe(HELP_PATH);
});
 
it('shows a link to creating a new environment', () => {
const link = findNewEnvironmentLink();
expect(link.attributes('href')).toBe(NEW_PATH);
it('shows a button to create a new environment', () => {
expect(findNewEnvironmentButton().attributes('href')).toBe(NEW_PATH);
});
 
it('shows a button to enable review apps', () => {
const button = finfEnablingReviewButton();
expect(button.exists()).toBe(true);
expect(findEnablingReviewButton().exists()).toBe(true);
});
 
it('should emit enable review', () => {
const button = finfEnablingReviewButton();
button.vm.$emit('click');
it('emits enable review event', () => {
findEnablingReviewButton().vm.$emit('click');
 
expect(wrapper.emitted('enable-review')).toBeDefined();
});
@@ -78,34 +58,21 @@ describe('~/environments/components/empty_state.vue', () => {
wrapper = createWrapper({ propsData: { hasTerm: true } });
});
 
it('should show text about searching', () => {
const header = wrapper.findByRole('heading', {
name: 'No results found',
});
expect(header.exists()).toBe(true);
const text = wrapper.findByText('Edit your search and try again');
expect(text.exists()).toBe(true);
it('shows text about searching', () => {
expect(findEmptyState().props('title')).toBe('No results found');
expect(findEmptyState().text()).toBe('Edit your search and try again');
});
 
it('hides the documentation link', () => {
const link = findDocsLink();
expect(link.exists()).toBe(false);
expect(findDocsLink().exists()).toBe(false);
});
 
it('hide a link to create a new environment', () => {
const link = findNewEnvironmentLink();
expect(link.exists()).toBe(false);
it('hides a button to create a new environment', () => {
expect(findNewEnvironmentButton().exists()).toBe(false);
});
 
it('hide a button to enable review apps', () => {
const button = finfEnablingReviewButton();
expect(button.exists()).toBe(false);
it('hides a button to enable review apps', () => {
expect(findEnablingReviewButton().exists()).toBe(false);
});
});
});
spec/frontend/environments/new_environment_item_spec.js
+ 81
− 119
View file @ e4491b67
import VueApollo from 'vue-apollo';
import Vue from 'vue';
import { GlCollapse, GlIcon } from '@gitlab/ui';
import { GlCollapse, GlLink, GlSprintf, GlButton } 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 { getTimeago, localeDateFormat } from '~/lib/utils/datetime_utility';
import { sprintf } from '~/locale';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import waitForPromises from 'helpers/wait_for_promises';
import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
import EnvironmentItem from '~/environments/components/new_environment_item.vue';
import EnvironmentActions from '~/environments/components/environment_actions.vue';
import Rollback from '~/environments/components/environment_rollback.vue';
import ExternalUrl from '~/environments/components/environment_external_url.vue';
import StopComponent from '~/environments/components/environment_stop.vue';
import Pin from '~/environments/components/environment_pin.vue';
import Terminal from '~/environments/components/environment_terminal_button.vue';
import Delete from '~/environments/components/environment_delete.vue';
import Deployment from '~/environments/components/deployment.vue';
import DeployBoardWrapper from '~/environments/components/deploy_board_wrapper.vue';
import { resolvedEnvironment, rolloutStatus } from './graphql/mock_data';
@@ -22,7 +27,7 @@ describe('~/environments/components/new_environment_item.vue', () => {
};
 
const createWrapper = ({ propsData = {}, provideData = {}, apolloProvider } = {}) =>
mountExtended(EnvironmentItem, {
shallowMountExtended(EnvironmentItem, {
apolloProvider,
propsData: { environment: resolvedEnvironment, ...propsData },
provide: {
@@ -31,24 +36,23 @@ describe('~/environments/components/new_environment_item.vue', () => {
projectPath: '/1',
...provideData,
},
stubs: { transition: stubTransition() },
stubs: { GlSprintf, TimeAgoTooltip, GlCollapse },
});
 
const findDeployment = () => wrapper.findComponent(Deployment);
const findActions = () => wrapper.findComponent(EnvironmentActions);
const findNameLink = () => wrapper.findComponent(GlLink);
const findCollapse = () => wrapper.findComponent(GlCollapse);
 
const expandCollapsedSection = async () => {
const button = wrapper.findByRole('button', { name: 'Expand' });
await button.trigger('click');
return button;
const button = wrapper.findComponent(GlButton);
await button.vm.$emit('click');
};
 
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);
expect(findNameLink().text()).toBe(resolvedEnvironment.name);
});
 
it('displays the name minus the folder prefix when in a folder', () => {
@@ -57,8 +61,7 @@ describe('~/environments/components/new_environment_item.vue', () => {
apolloProvider: createApolloProvider(),
});
 
const name = wrapper.findByRole('link', { name: resolvedEnvironment.nameWithoutType });
expect(name.exists()).toBe(true);
expect(findNameLink().text()).toBe(resolvedEnvironment.nameWithoutType);
});
 
it('truncates the name if it is very long', () => {
@@ -68,11 +71,7 @@ describe('~/environments/components/new_environment_item.vue', () => {
};
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);
expect(findNameLink().text()).toHaveLength(80);
});
 
describe('tier', () => {
@@ -103,13 +102,13 @@ describe('~/environments/components/new_environment_item.vue', () => {
});
});
 
describe('url', () => {
describe('external url', () => {
const findExternalUrl = () => wrapper.findComponent(ExternalUrl);
it('shows a link for the url if one is present', () => {
wrapper = createWrapper({ apolloProvider: createApolloProvider() });
 
const url = wrapper.findByRole('link', { name: 'Open live environment' });
expect(url.attributes('href')).toEqual(resolvedEnvironment.externalUrl);
expect(findExternalUrl().props('externalUrl')).toEqual(resolvedEnvironment.externalUrl);
});
 
it('does not show a link for the url if one is missing', () => {
@@ -118,9 +117,7 @@ describe('~/environments/components/new_environment_item.vue', () => {
apolloProvider: createApolloProvider(),
});
 
const url = wrapper.findByRole('link', { name: 'Open live environment' });
expect(url.exists()).toBe(false);
expect(findExternalUrl().exists()).toBe(false);
});
});
 
@@ -155,12 +152,12 @@ describe('~/environments/components/new_environment_item.vue', () => {
});
 
describe('stop', () => {
const findStopComponent = () => wrapper.findComponent(StopComponent);
it('shows a button to stop the environment if the environment is available', () => {
wrapper = createWrapper({ apolloProvider: createApolloProvider() });
 
const stop = wrapper.findByRole('button', { name: 'Stop environment' });
expect(stop.exists()).toBe(true);
expect(findStopComponent().props('environment')).toBe(resolvedEnvironment);
});
 
it('does not show a button to stop the environment if the environment is stopped', () => {
@@ -169,38 +166,40 @@ describe('~/environments/components/new_environment_item.vue', () => {
apolloProvider: createApolloProvider(),
});
 
const stop = wrapper.findByRole('button', { name: 'Stop environment' });
expect(stop.exists()).toBe(false);
expect(findStopComponent().exists()).toBe(false);
});
});
 
describe('rollback', () => {
it('shows the option to rollback/re-deploy if available', () => {
it('renders rollback component with the correct props when lastDeployment is available', async () => {
wrapper = createWrapper({ apolloProvider: createApolloProvider() });
const rollback = wrapper.findByRole('button', {
name: 'Re-deploy to environment',
await waitForPromises();
const rollback = wrapper.findComponent(Rollback);
expect(rollback.props()).toEqual({
environment: resolvedEnvironment,
isLastDeployment: true,
retryUrl: resolvedEnvironment.lastDeployment.deployable.retryPath,
graphql: true,
});
expect(rollback.exists()).toBe(true);
});
 
it('does not show the option to rollback/re-deploy if not available', () => {
it("doesn't render rollback component when lastDeployment is not available", async () => {
wrapper = createWrapper({
propsData: { environment: { ...resolvedEnvironment, lastDeployment: null } },
apolloProvider: createApolloProvider(),
});
await waitForPromises();
 
const rollback = wrapper.findByRole('button', {
name: 'Re-deploy to environment',
});
const rollback = wrapper.findComponent(Rollback);
expect(rollback.exists()).toBe(false);
});
});
 
describe('pin', () => {
const findPin = () => wrapper.findComponent(Pin);
const findAutoStopTime = () => wrapper.findByTestId('auto-stop-time');
describe('with autostop', () => {
let environment;
 
@@ -218,17 +217,11 @@ describe('~/environments/components/new_environment_item.vue', () => {
});
 
it('shows the option to pin the environment if there is an autostop date', () => {
const pin = wrapper.findByRole('button', { name: 'Prevent auto-stopping' });
expect(pin.exists()).toBe(true);
expect(findPin().props('autoStopUrl')).toBe(resolvedEnvironment.cancelAutoStopPath);
});
 
it('shows when the environment auto stops', () => {
const autoStop = wrapper.findByTitle(
localeDateFormat.asDateTimeFull.format(environment.autoStopAt),
);
expect(autoStop.text()).toBe('in 1 minute');
it('shows time when the environment auto stops', () => {
expect(findAutoStopTime().text()).toBe('Auto stop in 1 minute');
});
});
 
@@ -240,19 +233,11 @@ describe('~/environments/components/new_environment_item.vue', () => {
it('does not show the option to pin the environment if there is no autostop date', () => {
wrapper = createWrapper({ apolloProvider: createApolloProvider() });
 
const pin = wrapper.findByRole('button', { name: 'Prevent auto-stopping' });
expect(pin.exists()).toBe(false);
expect(findPin().exists()).toBe(false);
});
 
it('does not show when the environment auto stops', () => {
const autoStop = wrapper.findByText(
sprintf('Auto stop %{time}', {
time: getTimeago().format(resolvedEnvironment.autoStopAt),
}),
);
expect(autoStop.exists()).toBe(false);
expect(findAutoStopTime().exists()).toBe(false);
});
});
 
@@ -275,100 +260,84 @@ describe('~/environments/components/new_environment_item.vue', () => {
it('does not show the option to pin the environment if there is no autostop date', () => {
wrapper = createWrapper({ apolloProvider: createApolloProvider() });
 
const pin = wrapper.findByRole('button', { name: 'Prevent auto-stopping' });
expect(pin.exists()).toBe(false);
expect(findPin().exists()).toBe(false);
});
 
it('does not show when the environment auto stops', () => {
const autoStop = wrapper.findByText(
sprintf('Auto stop %{time}', {
time: getTimeago().format(environment.autoStopAt),
}),
);
expect(autoStop.exists()).toBe(false);
expect(findAutoStopTime().exists()).toBe(false);
});
});
});
 
describe('terminal', () => {
const findTerminal = () => wrapper.findComponent(Terminal);
it('shows the link to the terminal if set up', () => {
wrapper = createWrapper({
propsData: { environment: { ...resolvedEnvironment, terminalPath: '/terminal' } },
apolloProvider: createApolloProvider(),
});
 
const terminal = wrapper.findByRole('link', { name: 'Terminal' });
expect(terminal.exists()).toBe(true);
expect(findTerminal().props('terminalPath')).toEqual('/terminal');
});
 
it('does not show the link to the terminal if not set up', () => {
wrapper = createWrapper({ apolloProvider: createApolloProvider() });
 
const terminal = wrapper.findByRole('link', { name: 'Terminal' });
expect(terminal.exists()).toBe(false);
expect(findTerminal().exists()).toBe(false);
});
});
 
describe('delete', () => {
const findDelete = () => wrapper.findComponent(Delete);
it('shows the button to delete the environment if possible', () => {
const deletableEnvironment = {
...resolvedEnvironment,
canDelete: true,
deletePath: '/terminal',
};
wrapper = createWrapper({
propsData: {
environment: { ...resolvedEnvironment, canDelete: true, deletePath: '/terminal' },
environment: deletableEnvironment,
},
apolloProvider: createApolloProvider(),
});
 
const deleteTrigger = wrapper.findByRole('button', {
name: 'Delete environment',
});
expect(deleteTrigger.exists()).toBe(true);
expect(findDelete().props('environment')).toEqual(deletableEnvironment);
});
 
it('does not show the button to delete the environment if not possible', () => {
wrapper = createWrapper({ apolloProvider: createApolloProvider() });
 
const deleteTrigger = wrapper.findByRole('button', {
name: 'Delete environment',
});
expect(deleteTrigger.exists()).toBe(false);
expect(findDelete().exists()).toBe(false);
});
});
 
describe('collapse', () => {
let icon;
let collapse;
let environmentName;
const findCollapseButton = () => wrapper.findComponent(GlButton);
 
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.props('visible')).toBe(false);
expect(icon.props('name')).toBe('chevron-lg-right');
expect(environmentName.classes('gl-font-bold')).toBe(false);
expect(findCollapse().props('visible')).toBe(false);
expect(findCollapseButton().props('icon')).toBe('chevron-lg-right');
expect(findNameLink().classes('gl-font-bold')).toBe(false);
});
 
it('opens on click', async () => {
expect(findDeployment().isVisible()).toBe(false);
expect(findDeployment().props('visible')).toBe(false);
 
const button = await expandCollapsedSection();
await expandCollapsedSection();
 
expect(button.attributes('aria-label')).toBe('Collapse');
expect(button.props('category')).toBe('secondary');
expect(collapse.props('visible')).toBe(true);
expect(icon.props('name')).toBe('chevron-lg-down');
expect(environmentName.classes('gl-font-bold')).toBe(true);
expect(findDeployment().isVisible()).toBe(true);
expect(findCollapseButton().attributes('aria-label')).toBe('Collapse');
expect(findCollapseButton().props('icon')).toBe('chevron-lg-down');
expect(findNameLink().classes('gl-font-bold')).toBe(true);
expect(findCollapse().props('visible')).toBe(true);
expect(findDeployment().props('visible')).toBe(true);
});
});
describe('last deployment', () => {
@@ -438,13 +407,10 @@ describe('~/environments/components/new_environment_item.vue', () => {
 
await expandCollapsedSection();
 
const text =
'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');
expect(findCollapse().text()).toBe(
'There are no deployments for this environment yet. Learn more about setting up deployments.',
);
expect(findCollapse().findComponent(GlLink).attributes('href')).toBe('/help');
});
 
it('should not link to the documentation when there are deployments', async () => {
@@ -454,11 +420,7 @@ describe('~/environments/components/new_environment_item.vue', () => {
 
await expandCollapsedSection();
 
const text =
'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);
expect(findCollapse().findComponent(GlLink).exists()).toBe(false);
});
});
 
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment