Fix environments related tests

Ensure the tests are passing successfully in Vue 3.

app/assets/javascripts/environments/components/empty_state.vue

 <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

@@ -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

@@ -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

 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() });
-    expect(alert.exists()).toBe(true);
-    expect(alert.props('environment')).toBe(environment);
+    createWrapper({ propsData: { environment }, apolloProvider: createApolloProvider() });
+    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() });
-    expect(alert.exists()).toBe(false);
+  it('does not show an alert if one is opened', () => {
+    createWrapper({ apolloProvider: createApolloProvider() });
+    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() });
-    expect(approval.props()).toMatchObject({
+    createWrapper({ propsData: { environment }, apolloProvider: createApolloProvider() });
+    expect(findApproval().props()).toMatchObject({
       requiredApprovalCount: 2,
       deploymentWebPath: upcomingDeployment.webPath,
     });

spec/frontend/environments/canary_update_modal_spec.js

-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

 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);
-        await findForm().trigger('submit');
-        expect(showsFormLoading()).toBe(true);
+        expect(findForm().props('loading')).toBe(false);
+        findForm().vm.$emit('submit');
+        await nextTick();
+        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

-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

 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(),
       });
-      const rollback = wrapper.findByRole('button', {
-        name: 'Re-deploy to environment',
-      });
-
+      await waitForPromises();
+      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);
-      const button = 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(findDeployment().props('visible')).toBe(false);
+      await expandCollapsedSection();
+      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);
     });
   });