Add latest changes from gitlab-org/gitlab@master

8 files changed, 673 insertions, 58 deletions

diff --git a/spec/frontend/ci_secure_files/components/metadata/__snapshots__/modal_spec.js.snap b/spec/frontend/ci_secure_files/components/metadata/__snapshots__/modal_spec.js.snap
new file mode 100644
index 00000000000..b2084e3a7de
--- /dev/null
+++ b/spec/frontend/ci_secure_files/components/metadata/__snapshots__/modal_spec.js.snap
@@ -0,0 +1,386 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Secure File Metadata Modal when a .cer file is supplied matches cer the snapshot 1`] = `
+<div
+  category="primary"
+  hide-footer=""
+>
+  <div
+    data-testid="slot-modal-title"
+  >
+    myfile.cer Metadata
+  </div>
+  <div
+    data-testid="slot-default"
+  >
+     
+    <table
+      aria-busy="false"
+      aria-colcount="2"
+      class="table b-table gl-table"
+      role="table"
+    >
+      <!---->
+      <!---->
+      <thead
+        class=""
+        role="rowgroup"
+      >
+        <!---->
+        <tr
+          class=""
+          role="row"
+        >
+          <th
+            aria-colindex="1"
+            class="hidden"
+            role="columnheader"
+            scope="col"
+          >
+            <div>
+              Item Name
+            </div>
+          </th>
+          <th
+            aria-colindex="2"
+            class="hidden"
+            role="columnheader"
+            scope="col"
+          >
+            <div>
+              Item Data
+            </div>
+          </th>
+        </tr>
+      </thead>
+      <tbody
+        role="rowgroup"
+      >
+        <!---->
+        <tr
+          class=""
+          role="row"
+        >
+          <td
+            aria-colindex="1"
+            class=""
+            role="cell"
+          >
+            <strong>
+              Name
+            </strong>
+          </td>
+          <td
+            aria-colindex="2"
+            class=""
+            role="cell"
+          >
+            
+    Apple Distribution: Team Name (ABC123XYZ)
+  
+          </td>
+        </tr>
+        <tr
+          class=""
+          role="row"
+        >
+          <td
+            aria-colindex="1"
+            class=""
+            role="cell"
+          >
+            <strong>
+              Serial
+            </strong>
+          </td>
+          <td
+            aria-colindex="2"
+            class=""
+            role="cell"
+          >
+            
+    33669367788748363528491290218354043267
+  
+          </td>
+        </tr>
+        <tr
+          class=""
+          role="row"
+        >
+          <td
+            aria-colindex="1"
+            class=""
+            role="cell"
+          >
+            <strong>
+              Team
+            </strong>
+          </td>
+          <td
+            aria-colindex="2"
+            class=""
+            role="cell"
+          >
+            
+    Team Name (ABC123XYZ)
+  
+          </td>
+        </tr>
+        <tr
+          class=""
+          role="row"
+        >
+          <td
+            aria-colindex="1"
+            class=""
+            role="cell"
+          >
+            <strong>
+              Issuer
+            </strong>
+          </td>
+          <td
+            aria-colindex="2"
+            class=""
+            role="cell"
+          >
+            
+    Apple Worldwide Developer Relations Certification Authority - G3
+  
+          </td>
+        </tr>
+        <tr
+          class=""
+          role="row"
+        >
+          <td
+            aria-colindex="1"
+            class=""
+            role="cell"
+          >
+            <strong>
+              Expires at
+            </strong>
+          </td>
+          <td
+            aria-colindex="2"
+            class=""
+            role="cell"
+          >
+            
+    April 26, 2022 at 7:20:40 PM GMT
+  
+          </td>
+        </tr>
+        <!---->
+        <!---->
+      </tbody>
+      <!---->
+    </table>
+  </div>
+</div>
+`;
+
+exports[`Secure File Metadata Modal when a .mobileprovision file is supplied matches the mobileprovision snapshot 1`] = `
+<div
+  category="primary"
+  hide-footer=""
+>
+  <div
+    data-testid="slot-modal-title"
+  >
+    sample.mobileprovision Metadata
+  </div>
+  <div
+    data-testid="slot-default"
+  >
+     
+    <table
+      aria-busy="false"
+      aria-colcount="2"
+      class="table b-table gl-table"
+      role="table"
+    >
+      <!---->
+      <!---->
+      <thead
+        class=""
+        role="rowgroup"
+      >
+        <!---->
+        <tr
+          class=""
+          role="row"
+        >
+          <th
+            aria-colindex="1"
+            class="hidden"
+            role="columnheader"
+            scope="col"
+          >
+            <div>
+              Item Name
+            </div>
+          </th>
+          <th
+            aria-colindex="2"
+            class="hidden"
+            role="columnheader"
+            scope="col"
+          >
+            <div>
+              Item Data
+            </div>
+          </th>
+        </tr>
+      </thead>
+      <tbody
+        role="rowgroup"
+      >
+        <!---->
+        <tr
+          class=""
+          role="row"
+        >
+          <td
+            aria-colindex="1"
+            class=""
+            role="cell"
+          >
+            <strong>
+              UUID
+            </strong>
+          </td>
+          <td
+            aria-colindex="2"
+            class=""
+            role="cell"
+          >
+            
+    6b9fcce1-b9a9-4b37-b2ce-ec4da2044abf
+  
+          </td>
+        </tr>
+        <tr
+          class=""
+          role="row"
+        >
+          <td
+            aria-colindex="1"
+            class=""
+            role="cell"
+          >
+            <strong>
+              Platforms
+            </strong>
+          </td>
+          <td
+            aria-colindex="2"
+            class=""
+            role="cell"
+          >
+            
+    iOS
+  
+          </td>
+        </tr>
+        <tr
+          class=""
+          role="row"
+        >
+          <td
+            aria-colindex="1"
+            class=""
+            role="cell"
+          >
+            <strong>
+              Team
+            </strong>
+          </td>
+          <td
+            aria-colindex="2"
+            class=""
+            role="cell"
+          >
+            
+    Team Name (ABC123XYZ)
+  
+          </td>
+        </tr>
+        <tr
+          class=""
+          role="row"
+        >
+          <td
+            aria-colindex="1"
+            class=""
+            role="cell"
+          >
+            <strong>
+              App
+            </strong>
+          </td>
+          <td
+            aria-colindex="2"
+            class=""
+            role="cell"
+          >
+            
+    iOS Demo - match Development com.gitlab.ios-demo
+  
+          </td>
+        </tr>
+        <tr
+          class=""
+          role="row"
+        >
+          <td
+            aria-colindex="1"
+            class=""
+            role="cell"
+          >
+            <strong>
+              Certificates
+            </strong>
+          </td>
+          <td
+            aria-colindex="2"
+            class=""
+            role="cell"
+          >
+            
+    33669367788748363528491290218354043267
+  
+          </td>
+        </tr>
+        <tr
+          class=""
+          role="row"
+        >
+          <td
+            aria-colindex="1"
+            class=""
+            role="cell"
+          >
+            <strong>
+              Expires at
+            </strong>
+          </td>
+          <td
+            aria-colindex="2"
+            class=""
+            role="cell"
+          >
+            
+    August 1, 2023 at 11:15:13 PM GMT
+  
+          </td>
+        </tr>
+        <!---->
+        <!---->
+      </tbody>
+      <!---->
+    </table>
+  </div>
+</div>
+`;
diff --git a/spec/frontend/ci_secure_files/components/metadata/button_spec.js b/spec/frontend/ci_secure_files/components/metadata/button_spec.js
new file mode 100644
index 00000000000..4ac5b3325d4
--- /dev/null
+++ b/spec/frontend/ci_secure_files/components/metadata/button_spec.js
@@ -0,0 +1,49 @@
+import { GlButton } from '@gitlab/ui';
+import { mount } from '@vue/test-utils';
+import Button from '~/ci_secure_files/components/metadata/button.vue';
+import { secureFiles } from '../../mock_data';
+
+const secureFileWithoutMetadata = secureFiles[0];
+const secureFileWithMetadata = secureFiles[2];
+const modalId = 'metadataModalId';
+
+describe('Secure File Metadata Button', () => {
+  let wrapper;
+
+  const findButton = () => wrapper.findComponent(GlButton);
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const createWrapper = (secureFile = {}, admin = false) => {
+    wrapper = mount(Button, {
+      propsData: {
+        admin,
+        modalId,
+        secureFile,
+      },
+    });
+  };
+
+  describe('metadata button visibility', () => {
+    it.each`
+      visibility | admin    | fileName
+      ${true}    | ${true}  | ${secureFileWithMetadata}
+      ${false}   | ${false} | ${secureFileWithMetadata}
+      ${false}   | ${false} | ${secureFileWithoutMetadata}
+      ${false}   | ${false} | ${secureFileWithoutMetadata}
+    `(
+      'button visibility is $visibility when admin equals $admin and $fileName.name is suppled',
+      ({ visibility, admin, fileName }) => {
+        createWrapper(fileName, admin);
+        expect(findButton().exists()).toBe(visibility);
+
+        if (visibility) {
+          expect(findButton().isVisible()).toBe(true);
+          expect(findButton().attributes('aria-label')).toBe('View File Metadata');
+        }
+      },
+    );
+  });
+});
diff --git a/spec/frontend/ci_secure_files/components/metadata/modal_spec.js b/spec/frontend/ci_secure_files/components/metadata/modal_spec.js
new file mode 100644
index 00000000000..230507d32d7
--- /dev/null
+++ b/spec/frontend/ci_secure_files/components/metadata/modal_spec.js
@@ -0,0 +1,78 @@
+import { GlModal } from '@gitlab/ui';
+import { mount } from '@vue/test-utils';
+import { stubComponent, RENDER_ALL_SLOTS_TEMPLATE } from 'helpers/stub_component';
+import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
+
+import Modal from '~/ci_secure_files/components/metadata/modal.vue';
+
+import { secureFiles } from '../../mock_data';
+
+const cerFile = secureFiles[2];
+const mobileprovisionFile = secureFiles[3];
+const modalId = 'metadataModalId';
+
+describe('Secure File Metadata Modal', () => {
+  let wrapper;
+  let trackingSpy;
+
+  const createWrapper = (secureFile = {}) => {
+    wrapper = mount(Modal, {
+      stubs: {
+        GlModal: stubComponent(GlModal, {
+          template: RENDER_ALL_SLOTS_TEMPLATE,
+        }),
+      },
+      propsData: {
+        modalId,
+        name: secureFile.name,
+        metadata: secureFile.metadata,
+        fileExtension: secureFile.file_extension,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    trackingSpy = mockTracking(undefined, undefined, jest.spyOn);
+  });
+
+  afterEach(() => {
+    unmockTracking();
+    wrapper.destroy();
+  });
+
+  describe('when a .cer file is supplied', () => {
+    it('matches cer the snapshot', () => {
+      createWrapper(cerFile);
+      expect(wrapper.element).toMatchSnapshot();
+    });
+  });
+
+  describe('when a .mobileprovision file is supplied', () => {
+    it('matches the mobileprovision snapshot', () => {
+      createWrapper(mobileprovisionFile);
+      expect(wrapper.element).toMatchSnapshot();
+    });
+  });
+
+  describe('event tracking', () => {
+    it('sends cer tracking information when the modal is loaded', () => {
+      createWrapper(cerFile);
+      expect(trackingSpy).toHaveBeenCalledWith(undefined, 'load_secure_file_metadata_cer', {});
+      expect(trackingSpy).not.toHaveBeenCalledWith(
+        undefined,
+        'load_secure_file_metadata_mobileprovision',
+        {},
+      );
+    });
+
+    it('sends mobileprovision tracking information when the modal is loaded', () => {
+      createWrapper(mobileprovisionFile);
+      expect(trackingSpy).toHaveBeenCalledWith(
+        undefined,
+        'load_secure_file_metadata_mobileprovision',
+        {},
+      );
+      expect(trackingSpy).not.toHaveBeenCalledWith(undefined, 'load_secure_file_metadata_cer', {});
+    });
+  });
+});
diff --git a/spec/frontend/ci_secure_files/mock_data.js b/spec/frontend/ci_secure_files/mock_data.js
index 5a9e16d1ad6..f532b468fb9 100644
--- a/spec/frontend/ci_secure_files/mock_data.js
+++ b/spec/frontend/ci_secure_files/mock_data.js
@@ -4,15 +4,72 @@ export const secureFiles = [
     name: 'myfile.jks',
     checksum: '16630b189ab34b2e3504f4758e1054d2e478deda510b2b08cc0ef38d12e80aac',
     checksum_algorithm: 'sha256',
-    permissions: 'read_only',
     created_at: '2022-02-22T22:22:22.222Z',
+    file_extension: 'jks',
+    metadata: null,
   },
   {
     id: 2,
     name: 'myotherfile.jks',
     checksum: '16630b189ab34b2e3504f4758e1054d2e478deda510b2b08cc0ef38d12e80aa2',
     checksum_algorithm: 'sha256',
-    permissions: 'execute',
     created_at: '2022-02-22T22:22:22.222Z',
+    file_extension: 'jks',
+    metadata: null,
+  },
+  {
+    id: 3,
+    name: 'myfile.cer',
+    checksum: '16630b189ab34b2e3504f4758e1054d2e478deda510b2b08cc0ef38d12e80aa2',
+    checksum_algorithm: 'sha256',
+    created_at: '2022-02-22T22:22:22.222Z',
+    file_extension: 'cer',
+    expires_at: '2022-04-26T19:20:40.000Z',
+    metadata: {
+      id: '33669367788748363528491290218354043267',
+      issuer: {
+        C: 'US',
+        O: 'Apple Inc.',
+        CN: 'Apple Worldwide Developer Relations Certification Authority',
+        OU: 'G3',
+      },
+      subject: {
+        C: 'US',
+        O: 'Team Name',
+        CN: 'Apple Distribution: Team Name (ABC123XYZ)',
+        OU: 'ABC123XYZ',
+        UID: 'ABC123XYZ',
+      },
+      expires_at: '2022-04-26T19:20:40.000Z',
+    },
+  },
+  {
+    id: 4,
+    name: 'sample.mobileprovision',
+    checksum: '9e194bbde00d57c64b6640ed2c9e166d76b4c79d9dbd49770f95be56678f2a62',
+    checksum_algorithm: 'sha256',
+    created_at: '2022-11-15T19:29:57.577Z',
+    expires_at: '2023-08-01T23:15:13.000Z',
+    metadata: {
+      id: '6b9fcce1-b9a9-4b37-b2ce-ec4da2044abf',
+      app_id: 'match Development com.gitlab.ios-demo',
+      devices: ['00008101-001454860C10001E'],
+      team_id: ['ABC123XYZ'],
+      app_name: 'iOS Demo',
+      platforms: ['iOS'],
+      team_name: 'Team Name',
+      expires_at: '2023-08-01T18:15:13.000-05:00',
+      entitlements: {
+        'get-task-allow': true,
+        'application-identifier': 'N7SYAN8PX8.com.gitlab.ios-demo',
+        'keychain-access-groups': ['ABC123XYZ.*', 'com.apple.token'],
+        'com.apple.developer.game-center': true,
+        'com.apple.developer.team-identifier': 'ABC123XYZ',
+      },
+      app_id_prefix: ['ABC123XYZ'],
+      xcode_managed: false,
+      certificate_ids: ['33669367788748363528491290218354043267'],
+    },
+    file_extension: 'mobileprovision',
   },
 ];
diff --git a/spec/frontend/merge_requests/components/target_project_dropdown_spec.js b/spec/frontend/merge_requests/components/compare_dropdown_spec.js
index 3fddbe7ae21..fecb82aaa5e 100644
--- a/spec/frontend/merge_requests/components/target_project_dropdown_spec.js
+++ b/spec/frontend/merge_requests/components/compare_dropdown_spec.js
@@ -3,23 +3,28 @@ import { GlCollapsibleListbox } from '@gitlab/ui';
 import MockAdapter from 'axios-mock-adapter';
 import waitForPromises from 'helpers/wait_for_promises';
 import axios from '~/lib/utils/axios_utils';
-import TargetProjectDropdown from '~/merge_requests/components/target_project_dropdown.vue';
+import CompareDropdown from '~/merge_requests/components/compare_dropdown.vue';
 
 let wrapper;
 let mock;
 
-function factory() {
-  wrapper = mount(TargetProjectDropdown, {
-    provide: {
-      targetProjectsPath: '/gitlab-org/gitlab/target_projects',
-      currentProject: { value: 1, text: 'gitlab-org/gitlab' },
+function factory(propsData = {}) {
+  wrapper = mount(CompareDropdown, {
+    propsData: {
+      endpoint: '/gitlab-org/gitlab/target_projects',
+      default: { value: 1, text: 'gitlab-org/gitlab' },
+      dropdownHeader: 'Select',
+      inputId: 'input_id',
+      inputName: 'input_name',
+      isProject: true,
+      ...propsData,
     },
   });
 }
 
 const findDropdown = () => wrapper.findComponent(GlCollapsibleListbox);
 
-describe('Merge requests target project dropdown component', () => {
+describe('Merge requests compare dropdown component', () => {
   beforeEach(() => {
     mock = new MockAdapter(axios);
     mock.onGet('/gitlab-org/gitlab/target_projects').reply(200, [
@@ -77,4 +82,22 @@ describe('Merge requests target project dropdown component', () => {
 
     expect(mock.history.get[1].params).toEqual({ search: 'test' });
   });
+
+  it('renders static data', async () => {
+    factory({
+      endpoint: undefined,
+      staticData: [
+        {
+          value: '10',
+          text: 'GitLab Org',
+        },
+      ],
+    });
+
+    wrapper.find('[data-testid="base-dropdown-toggle"]').trigger('click');
+
+    await waitForPromises();
+
+    expect(wrapper.findAll('li').length).toBe(1);
+  });
 });
diff --git a/spec/frontend/work_items/components/widget_wrapper_spec.js b/spec/frontend/work_items/components/widget_wrapper_spec.js
new file mode 100644
index 00000000000..a87233300fc
--- /dev/null
+++ b/spec/frontend/work_items/components/widget_wrapper_spec.js
@@ -0,0 +1,46 @@
+import { nextTick } from 'vue';
+import { GlAlert, GlButton } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import WidgetWrapper from '~/work_items/components/widget_wrapper.vue';
+
+describe('WidgetWrapper component', () => {
+  let wrapper;
+
+  const createComponent = ({ error } = {}) => {
+    wrapper = shallowMountExtended(WidgetWrapper, { propsData: { error } });
+  };
+
+  const findAlert = () => wrapper.findComponent(GlAlert);
+  const findToggleButton = () => wrapper.findComponent(GlButton);
+  const findWidgetBody = () => wrapper.findByTestId('widget-body');
+
+  it('is expanded by default', () => {
+    createComponent();
+
+    expect(findToggleButton().props('icon')).toBe('chevron-lg-up');
+    expect(findWidgetBody().exists()).toBe(true);
+  });
+
+  it('collapses on click toggle button', async () => {
+    createComponent();
+    findToggleButton().vm.$emit('click');
+    await nextTick();
+
+    expect(findToggleButton().props('icon')).toBe('chevron-lg-down');
+    expect(findWidgetBody().exists()).toBe(false);
+  });
+
+  it('shows alert when list loading fails', () => {
+    const error = 'Some error';
+    createComponent({ error });
+
+    expect(findAlert().text()).toBe(error);
+  });
+
+  it('emits event when dismissing the alert', () => {
+    createComponent({ error: 'error' });
+    findAlert().vm.$emit('dismiss');
+
+    expect(wrapper.emitted('dismissAlert')).toEqual([[]]);
+  });
+});
diff --git a/spec/frontend/work_items/components/work_item_links/work_item_links_spec.js b/spec/frontend/work_items/components/work_item_links/work_item_links_spec.js
index a61de78c623..aedf6bf2e2c 100644
--- a/spec/frontend/work_items/components/work_item_links/work_item_links_spec.js
+++ b/spec/frontend/work_items/components/work_item_links/work_item_links_spec.js
@@ -1,5 +1,4 @@
 import Vue, { nextTick } from 'vue';
-import { GlAlert } from '@gitlab/ui';
 import VueApollo from 'vue-apollo';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
@@ -8,6 +7,7 @@ import setWindowLocation from 'helpers/set_window_location_helper';
 import { stubComponent } from 'helpers/stub_component';
 import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import issueDetailsQuery from 'ee_else_ce/work_items/graphql/get_issue_details.query.graphql';
+import WidgetWrapper from '~/work_items/components/widget_wrapper.vue';
 import WorkItemLinks from '~/work_items/components/work_item_links/work_item_links.vue';
 import WorkItemLinkChild from '~/work_items/components/work_item_links/work_item_link_child.vue';
 import WorkItemDetailModal from '~/work_items/components/work_item_detail_modal.vue';
@@ -127,12 +127,12 @@ describe('WorkItemLinks', () => {
       },
     });
 
+    wrapper.vm.$refs.wrapper.show = jest.fn();
+
     await waitForPromises();
   };
 
-  const findAlert = () => wrapper.findComponent(GlAlert);
-  const findToggleButton = () => wrapper.findByTestId('toggle-links');
-  const findLinksBody = () => wrapper.findByTestId('links-body');
+  const findWidgetWrapper = () => wrapper.findComponent(WidgetWrapper);
   const findEmptyState = () => wrapper.findByTestId('links-empty');
   const findToggleFormDropdown = () => wrapper.findByTestId('toggle-form');
   const findToggleAddFormButton = () => wrapper.findByTestId('toggle-add-form');
@@ -142,31 +142,14 @@ describe('WorkItemLinks', () => {
   const findAddLinksForm = () => wrapper.findByTestId('add-links-form');
   const findChildrenCount = () => wrapper.findByTestId('children-count');
 
-  beforeEach(async () => {
-    await createComponent();
-  });
-
   afterEach(() => {
-    wrapper.destroy();
     mockApollo = null;
     setWindowLocation('');
   });
 
-  it('is expanded by default', () => {
-    expect(findToggleButton().props('icon')).toBe('chevron-lg-up');
-    expect(findLinksBody().exists()).toBe(true);
-  });
-
-  it('collapses on click toggle button', async () => {
-    findToggleButton().vm.$emit('click');
-    await nextTick();
-
-    expect(findToggleButton().props('icon')).toBe('chevron-lg-down');
-    expect(findLinksBody().exists()).toBe(false);
-  });
-
   describe('add link form', () => {
     it('displays add work item form on click add dropdown then add existing button and hides form on cancel', async () => {
+      await createComponent();
       findToggleFormDropdown().vm.$emit('click');
       findToggleAddFormButton().vm.$emit('click');
       await nextTick();
@@ -181,6 +164,7 @@ describe('WorkItemLinks', () => {
     });
 
     it('displays create work item form on click add dropdown then create button and hides form on cancel', async () => {
+      await createComponent();
       findToggleFormDropdown().vm.$emit('click');
       findToggleCreateFormButton().vm.$emit('click');
       await nextTick();
@@ -207,8 +191,8 @@ describe('WorkItemLinks', () => {
     });
   });
 
-  it('renders all hierarchy widget children', () => {
-    expect(findLinksBody().exists()).toBe(true);
+  it('renders all hierarchy widget children', async () => {
+    await createComponent();
 
     expect(findWorkItemLinkChildItems()).toHaveLength(4);
   });
@@ -219,15 +203,13 @@ describe('WorkItemLinks', () => {
       fetchHandler: jest.fn().mockRejectedValue(new Error(errorMessage)),
     });
 
-    await nextTick();
-
-    expect(findAlert().exists()).toBe(true);
-    expect(findAlert().text()).toBe(errorMessage);
+    expect(findWidgetWrapper().props('error')).toBe(errorMessage);
   });
 
-  it('displays number if children', () => {
-    expect(findChildrenCount().exists()).toBe(true);
+  it('displays number of children', async () => {
+    await createComponent();
 
+    expect(findChildrenCount().exists()).toBe(true);
     expect(findChildrenCount().text()).toContain('4');
   });
 
diff --git a/spec/frontend/work_items/components/work_item_links/work_item_tree_spec.js b/spec/frontend/work_items/components/work_item_links/work_item_tree_spec.js
index 156f06a0d5e..0236fe2e60d 100644
--- a/spec/frontend/work_items/components/work_item_links/work_item_tree_spec.js
+++ b/spec/frontend/work_items/components/work_item_links/work_item_tree_spec.js
@@ -23,8 +23,6 @@ describe('WorkItemTree', () => {
   let getWorkItemQueryHandler;
   let wrapper;
 
-  const findToggleButton = () => wrapper.findByTestId('toggle-tree');
-  const findTreeBody = () => wrapper.findByTestId('tree-body');
   const findEmptyState = () => wrapper.findByTestId('tree-empty');
   const findToggleFormSplitButton = () => wrapper.findComponent(OkrActionsSplitButton);
   const findForm = () => wrapper.findComponent(WorkItemLinksForm);
@@ -64,36 +62,25 @@ describe('WorkItemTree', () => {
         projectPath: 'test/project',
       },
     });
+
+    wrapper.vm.$refs.wrapper.show = jest.fn();
   };
 
-  beforeEach(() => {
+  it('displays Add button', () => {
     createComponent();
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
 
-  it('is expanded by default and displays Add button', () => {
-    expect(findToggleButton().props('icon')).toBe('chevron-lg-up');
-    expect(findTreeBody().exists()).toBe(true);
     expect(findToggleFormSplitButton().exists()).toBe(true);
   });
 
-  it('collapses on click toggle button', async () => {
-    findToggleButton().vm.$emit('click');
-    await nextTick();
-
-    expect(findToggleButton().props('icon')).toBe('chevron-lg-down');
-    expect(findTreeBody().exists()).toBe(false);
-  });
-
   it('displays empty state if there are no children', () => {
     createComponent({ children: [] });
+
     expect(findEmptyState().exists()).toBe(true);
   });
 
   it('renders all hierarchy widget children', () => {
+    createComponent();
+
     const workItemLinkChildren = findWorkItemLinkChildItems();
     expect(workItemLinkChildren).toHaveLength(4);
     expect(workItemLinkChildren.at(0).props().childItem.confidential).toBe(
@@ -102,6 +89,8 @@ describe('WorkItemTree', () => {
   });
 
   it('does not display form by default', () => {
+    createComponent();
+
     expect(findForm().exists()).toBe(false);
   });
 
@@ -114,6 +103,8 @@ describe('WorkItemTree', () => {
   `(
     'when selecting $option from split button, renders the form passing $formType and $childType',
     async ({ event, formType, childType }) => {
+      createComponent();
+
       findToggleFormSplitButton().vm.$emit(event);
       await nextTick();
 
@@ -128,13 +119,16 @@ describe('WorkItemTree', () => {
   );
 
   it('remove event on child triggers `removeChild` event', () => {
+    createComponent();
     const firstChild = findWorkItemLinkChildItems().at(0);
+
     firstChild.vm.$emit('removeChild', 'gid://gitlab/WorkItem/2');
 
     expect(wrapper.emitted('removeChild')).toEqual([['gid://gitlab/WorkItem/2']]);
   });
 
   it('emits `show-modal` on `click` event', () => {
+    createComponent();
     const firstChild = findWorkItemLinkChildItems().at(0);
     const event = {
       childItem: 'gid://gitlab/WorkItem/2',