1 files changed, 101 insertions, 0 deletions
diff --git a/spec/frontend/vue_mr_widget/deployment/deployment_list_spec.js b/spec/frontend/vue_mr_widget/deployment/deployment_list_spec.js
new file mode 100644
index 00000000000..dd0c483b28a
--- /dev/null
+++ b/spec/frontend/vue_mr_widget/deployment/deployment_list_spec.js
@@ -0,0 +1,101 @@
+import { mount } from '@vue/test-utils';
+import { zip } from 'lodash';
+import { trimText } from 'helpers/text_helper';
+import Deployment from '~/vue_merge_request_widget/components/deployment/deployment.vue';
+import DeploymentList from '~/vue_merge_request_widget/components/deployment/deployment_list.vue';
+import MrCollapsibleExtension from '~/vue_merge_request_widget/components/mr_collapsible_extension.vue';
+import { mockStore } from '../mock_data';
+
+const DEFAULT_PROPS = {
+  showVisualReviewAppLink: false,
+  hasDeploymentMetrics: false,
+  deploymentClass: 'js-pre-deployment',
+};
+
+describe('~/vue_merge_request_widget/components/deployment/deployment_list.vue', () => {
+  let wrapper;
+  let propsData;
+
+  const factory = (props = {}) => {
+    propsData = {
+      ...DEFAULT_PROPS,
+      deployments: mockStore.deployments,
+      ...props,
+    };
+    wrapper = mount(DeploymentList, {
+      propsData,
+    });
+  };
+
+  afterEach(() => {
+    wrapper?.destroy?.();
+    wrapper = null;
+  });
+
+  describe('with few deployments', () => {
+    beforeEach(() => {
+      factory();
+    });
+
+    it('shows all deployments', () => {
+      const deploymentWrappers = wrapper.findAllComponents(Deployment);
+      expect(wrapper.findComponent(MrCollapsibleExtension).exists()).toBe(false);
+      expect(deploymentWrappers).toHaveLength(propsData.deployments.length);
+
+      zip(deploymentWrappers.wrappers, propsData.deployments).forEach(
+        ([deploymentWrapper, deployment]) => {
+          expect(deploymentWrapper.props('deployment')).toEqual(deployment);
+          expect(deploymentWrapper.props()).toMatchObject({
+            showVisualReviewApp: DEFAULT_PROPS.showVisualReviewAppLink,
+            showMetrics: DEFAULT_PROPS.hasDeploymentMetrics,
+          });
+          expect(deploymentWrapper.classes(DEFAULT_PROPS.deploymentClass)).toBe(true);
+          expect(deploymentWrapper.text()).toEqual(expect.any(String));
+          expect(deploymentWrapper.text()).not.toBe('');
+        },
+      );
+    });
+  });
+  describe('with many deployments', () => {
+    let deployments;
+    let collapsibleExtension;
+
+    beforeEach(() => {
+      deployments = [
+        ...mockStore.deployments,
+        ...mockStore.deployments.map((deployment) => ({
+          ...deployment,
+          id: deployment.id + mockStore.deployments.length,
+        })),
+      ];
+      factory({ deployments });
+
+      collapsibleExtension = wrapper.findComponent(MrCollapsibleExtension);
+    });
+
+    it('shows collapsed deployments', () => {
+      expect(collapsibleExtension.exists()).toBe(true);
+      expect(trimText(collapsibleExtension.text())).toBe(
+        `${deployments.length} environments impacted. View all environments.`,
+      );
+    });
+    it('shows all deployments on click', async () => {
+      await collapsibleExtension.find('button').trigger('click');
+      const deploymentWrappers = wrapper.findAllComponents(Deployment);
+      expect(deploymentWrappers).toHaveLength(deployments.length);
+
+      zip(deploymentWrappers.wrappers, propsData.deployments).forEach(
+        ([deploymentWrapper, deployment]) => {
+          expect(deploymentWrapper.props('deployment')).toEqual(deployment);
+          expect(deploymentWrapper.props()).toMatchObject({
+            showVisualReviewApp: DEFAULT_PROPS.showVisualReviewAppLink,
+            showMetrics: DEFAULT_PROPS.hasDeploymentMetrics,
+          });
+          expect(deploymentWrapper.classes(DEFAULT_PROPS.deploymentClass)).toBe(true);
+          expect(deploymentWrapper.text()).toEqual(expect.any(String));
+          expect(deploymentWrapper.text()).not.toBe('');
+        },
+      );
+    });
+  });
+});