1 files changed, 84 insertions, 0 deletions
diff --git a/spec/frontend/pipelines/graph/job_group_dropdown_spec.js b/spec/frontend/pipelines/graph/job_group_dropdown_spec.js
new file mode 100644
index 00000000000..b323e1d8a06
--- /dev/null
+++ b/spec/frontend/pipelines/graph/job_group_dropdown_spec.js
@@ -0,0 +1,84 @@
+import { shallowMount } from '@vue/test-utils';
+import JobGroupDropdown from '~/pipelines/components/graph/job_group_dropdown.vue';
+
+describe('job group dropdown component', () => {
+  const group = {
+    jobs: [
+      {
+        id: 4256,
+        name: '<img src=x onerror=alert(document.domain)>',
+        status: {
+          icon: 'status_success',
+          text: 'passed',
+          label: 'passed',
+          tooltip: 'passed',
+          group: 'success',
+          details_path: '/root/ci-mock/builds/4256',
+          has_details: true,
+          action: {
+            icon: 'retry',
+            title: 'Retry',
+            path: '/root/ci-mock/builds/4256/retry',
+            method: 'post',
+          },
+        },
+      },
+      {
+        id: 4299,
+        name: 'test',
+        status: {
+          icon: 'status_success',
+          text: 'passed',
+          label: 'passed',
+          tooltip: 'passed',
+          group: 'success',
+          details_path: '/root/ci-mock/builds/4299',
+          has_details: true,
+          action: {
+            icon: 'retry',
+            title: 'Retry',
+            path: '/root/ci-mock/builds/4299/retry',
+            method: 'post',
+          },
+        },
+      },
+    ],
+    name: 'rspec:linux',
+    size: 2,
+    status: {
+      icon: 'status_success',
+      text: 'passed',
+      label: 'passed',
+      tooltip: 'passed',
+      group: 'success',
+      details_path: '/root/ci-mock/builds/4256',
+      has_details: true,
+      action: {
+        icon: 'retry',
+        title: 'Retry',
+        path: '/root/ci-mock/builds/4256/retry',
+        method: 'post',
+      },
+    },
+  };
+
+  let wrapper;
+  const findButton = () => wrapper.find('button');
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  beforeEach(() => {
+    wrapper = shallowMount(JobGroupDropdown, { propsData: { group } });
+  });
+
+  it('renders button with group name and size', () => {
+    expect(findButton().text()).toContain(group.name);
+    expect(findButton().text()).toContain(group.size);
+  });
+
+  it('renders dropdown with jobs', () => {
+    expect(wrapper.findAll('.scrollable-menu>ul>li').length).toBe(group.jobs.length);
+  });
+});