1 files changed, 28 insertions, 6 deletions

diff --git a/spec/frontend/environments/new_environment_folder_spec.js b/spec/frontend/environments/new_environment_folder_spec.js
index 27d27d5869a..6823c88a5a1 100644
--- a/spec/frontend/environments/new_environment_folder_spec.js
+++ b/spec/frontend/environments/new_environment_folder_spec.js
@@ -1,10 +1,13 @@
 import VueApollo from 'vue-apollo';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import { GlCollapse, GlIcon } from '@gitlab/ui';
+import waitForPromises from 'helpers/wait_for_promises';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
+import { stubTransition } from 'helpers/stub_transition';
 import { __, s__ } from '~/locale';
 import EnvironmentsFolder from '~/environments/components/new_environment_folder.vue';
+import EnvironmentItem from '~/environments/components/new_environment_item.vue';
 import { resolvedEnvironmentsApp, resolvedFolder } from './graphql/mock_data';
 
 Vue.use(VueApollo);
@@ -25,13 +28,20 @@ describe('~/environments/components/new_environments_folder.vue', () => {
   };
 
   const createWrapper = (propsData, apolloProvider) =>
-    mountExtended(EnvironmentsFolder, { apolloProvider, propsData });
+    mountExtended(EnvironmentsFolder, {
+      apolloProvider,
+      propsData,
+      stubs: { transition: stubTransition() },
+    });
 
-  beforeEach(() => {
+  beforeEach(async () => {
     environmentFolderMock = jest.fn();
     [nestedEnvironment] = resolvedEnvironmentsApp.environments;
     environmentFolderMock.mockReturnValue(resolvedFolder);
     wrapper = createWrapper({ nestedEnvironment }, createApolloProvider());
+
+    await nextTick();
+    await waitForPromises();
     folderName = wrapper.findByText(nestedEnvironment.name);
     button = wrapper.findByRole('button', { name: __('Expand') });
   });
@@ -57,7 +67,8 @@ describe('~/environments/components/new_environments_folder.vue', () => {
       const link = findLink();
 
       expect(collapse.attributes('visible')).toBeUndefined();
-      expect(icons.wrappers.map((i) => i.props('name'))).toEqual(['angle-right', 'folder-o']);
+      const iconNames = icons.wrappers.map((i) => i.props('name')).slice(0, 2);
+      expect(iconNames).toEqual(['angle-right', 'folder-o']);
       expect(folderName.classes('gl-font-weight-bold')).toBe(false);
       expect(link.exists()).toBe(false);
     });
@@ -68,10 +79,21 @@ describe('~/environments/components/new_environments_folder.vue', () => {
       const link = findLink();
 
       expect(button.attributes('aria-label')).toBe(__('Collapse'));
-      expect(collapse.attributes('visible')).toBe('true');
-      expect(icons.wrappers.map((i) => i.props('name'))).toEqual(['angle-down', 'folder-open']);
+      expect(collapse.attributes('visible')).toBe('visible');
+      const iconNames = icons.wrappers.map((i) => i.props('name')).slice(0, 2);
+      expect(iconNames).toEqual(['angle-down', 'folder-open']);
       expect(folderName.classes('gl-font-weight-bold')).toBe(true);
       expect(link.attributes('href')).toBe(nestedEnvironment.latest.folderPath);
     });
+
+    it('displays all environments when opened', async () => {
+      await button.trigger('click');
+
+      const names = resolvedFolder.environments.map((e) =>
+        expect.stringMatching(e.nameWithoutType),
+      );
+      const environments = wrapper.findAllComponents(EnvironmentItem).wrappers.map((w) => w.text());
+      expect(environments).toEqual(expect.arrayContaining(names));
+    });
   });
 });