Add latest changes from gitlab-org/gitlab@14-5-stable-eev14.5.0-rc42

4 files changed, 141 insertions, 0 deletions

diff --git a/spec/frontend/work_items/components/app_spec.js b/spec/frontend/work_items/components/app_spec.js
new file mode 100644
index 00000000000..95034085493
--- /dev/null
+++ b/spec/frontend/work_items/components/app_spec.js
@@ -0,0 +1,24 @@
+import { shallowMount } from '@vue/test-utils';
+import App from '~/work_items/components/app.vue';
+
+describe('Work Items Application', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMount(App, {
+      stubs: {
+        'router-view': true,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders a component', () => {
+    createComponent();
+
+    expect(wrapper.exists()).toBe(true);
+  });
+});
diff --git a/spec/frontend/work_items/mock_data.js b/spec/frontend/work_items/mock_data.js
new file mode 100644
index 00000000000..efb4aa2feb2
--- /dev/null
+++ b/spec/frontend/work_items/mock_data.js
@@ -0,0 +1,17 @@
+export const workItemQueryResponse = {
+  workItem: {
+    __typename: 'WorkItem',
+    id: '1',
+    type: 'FEATURE',
+    widgets: {
+      __typename: 'WorkItemWidgetConnection',
+      nodes: [
+        {
+          __typename: 'TitleWidget',
+          type: 'TITLE',
+          contentText: 'Test',
+        },
+      ],
+    },
+  },
+};
diff --git a/spec/frontend/work_items/pages/work_item_root_spec.js b/spec/frontend/work_items/pages/work_item_root_spec.js
new file mode 100644
index 00000000000..64d02baed36
--- /dev/null
+++ b/spec/frontend/work_items/pages/work_item_root_spec.js
@@ -0,0 +1,70 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import VueApollo from 'vue-apollo';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import workItemQuery from '~/work_items/graphql/work_item.query.graphql';
+import WorkItemsRoot from '~/work_items/pages/work_item_root.vue';
+import { workItemQueryResponse } from '../mock_data';
+
+const localVue = createLocalVue();
+localVue.use(VueApollo);
+
+const WORK_ITEM_ID = '1';
+
+describe('Work items root component', () => {
+  let wrapper;
+  let fakeApollo;
+
+  const findTitle = () => wrapper.find('[data-testid="title"]');
+
+  const createComponent = ({ queryResponse = workItemQueryResponse } = {}) => {
+    fakeApollo = createMockApollo();
+    fakeApollo.clients.defaultClient.cache.writeQuery({
+      query: workItemQuery,
+      variables: {
+        id: WORK_ITEM_ID,
+      },
+      data: queryResponse,
+    });
+
+    wrapper = shallowMount(WorkItemsRoot, {
+      propsData: {
+        id: WORK_ITEM_ID,
+      },
+      localVue,
+      apolloProvider: fakeApollo,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    fakeApollo = null;
+  });
+
+  it('renders the title if title is in the widgets list', () => {
+    createComponent();
+
+    expect(findTitle().exists()).toBe(true);
+    expect(findTitle().text()).toBe('Test');
+  });
+
+  it('does not render the title if title is not in the widgets list', () => {
+    const queryResponse = {
+      workItem: {
+        ...workItemQueryResponse.workItem,
+        widgets: {
+          __typename: 'WorkItemWidgetConnection',
+          nodes: [
+            {
+              __typename: 'SomeOtherWidget',
+              type: 'OTHER',
+              contentText: 'Test',
+            },
+          ],
+        },
+      },
+    };
+    createComponent({ queryResponse });
+
+    expect(findTitle().exists()).toBe(false);
+  });
+});
diff --git a/spec/frontend/work_items/router_spec.js b/spec/frontend/work_items/router_spec.js
new file mode 100644
index 00000000000..0a57eab753f
--- /dev/null
+++ b/spec/frontend/work_items/router_spec.js
@@ -0,0 +1,30 @@
+import { mount } from '@vue/test-utils';
+import App from '~/work_items/components/app.vue';
+import WorkItemsRoot from '~/work_items/pages/work_item_root.vue';
+import { createRouter } from '~/work_items/router';
+
+describe('Work items router', () => {
+  let wrapper;
+
+  const createComponent = async (routeArg) => {
+    const router = createRouter('/work_item');
+    if (routeArg !== undefined) {
+      await router.push(routeArg);
+    }
+
+    wrapper = mount(App, {
+      router,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    window.location.hash = '';
+  });
+
+  it('renders work item on `/1` route', async () => {
+    await createComponent('/1');
+
+    expect(wrapper.find(WorkItemsRoot).exists()).toBe(true);
+  });
+});