+
+ {{ error }}
+
+
+
diff --git a/ee/spec/frontend/issues/list/components/issues_list_app_spec.js b/ee/spec/frontend/issues/list/components/issues_list_app_spec.js
index c0eb82cc9fb19e8e44e4d7047e6f53cd379fa759..81f54f7dda6dae2121e9fe12577f0f1fe2e27cc3 100644
--- a/ee/spec/frontend/issues/list/components/issues_list_app_spec.js
+++ b/ee/spec/frontend/issues/list/components/issues_list_app_spec.js
@@ -9,7 +9,9 @@ import waitForPromises from 'helpers/wait_for_promises';
import { getIssuesCountsQueryResponse, getIssuesQueryResponse } from 'jest/issues/list/mock_data';
import { convertToGraphQLId } from '~/graphql_shared/utils';
import IssuableList from '~/vue_shared/issuable/list/components/issuable_list_root.vue';
-import { CREATED_DESC } from '~/issues/list/constants';
+import { CREATED_DESC, TYPE_TOKEN_OBJECTIVE_OPTION } from '~/issues/list/constants';
+import CEIssuesListApp from '~/issues/list/components/issues_list_app.vue';
+import { WORK_ITEM_TYPE_ENUM_OBJECTIVE } from '~/work_items/constants';
import {
TOKEN_TYPE_ASSIGNEE,
TOKEN_TYPE_AUTHOR,
@@ -52,6 +54,7 @@ describe('EE IssuesListApp component', () => {
hasIssueWeightsFeature: true,
hasIterationsFeature: true,
hasScopedLabelsFeature: true,
+ hasOkrsFeature: true,
initialEmail: 'email@example.com',
initialSort: CREATED_DESC,
isAnonymousSearchDisabled: false,
@@ -75,8 +78,11 @@ describe('EE IssuesListApp component', () => {
const findIssuableList = () => wrapper.findComponent(IssuableList);
+ const findIssueListApp = () => wrapper.findComponent(CEIssuesListApp);
+
const mountComponent = ({
provide = {},
+ okrsMvc = false,
issuesQueryResponse = jest.fn().mockResolvedValue(defaultQueryResponse),
issuesCountsQueryResponse = jest.fn().mockResolvedValue(getIssuesCountsQueryResponse),
} = {}) => {
@@ -89,6 +95,9 @@ describe('EE IssuesListApp component', () => {
return mount(IssuesListApp, {
apolloProvider,
provide: {
+ glFeatures: {
+ okrsMvc,
+ },
...defaultProvide,
...provide,
},
@@ -113,6 +122,58 @@ describe('EE IssuesListApp component', () => {
});
});
+ describe('workItemTypes', () => {
+ describe.each`
+ hasOkrsFeature | okrsMvc | eeWorkItemTypes | message
+ ${false} | ${true} | ${[]} | ${'NOT include'}
+ ${true} | ${false} | ${[]} | ${'NOT include'}
+ ${true} | ${true} | ${[WORK_ITEM_TYPE_ENUM_OBJECTIVE]} | ${'include'}
+ `(
+ 'when hasOkrsFeature is "$hasOkrsFeature" and okrsMvc is "$okrsMvc"',
+ ({ hasOkrsFeature, okrsMvc, eeWorkItemTypes, message }) => {
+ beforeEach(() => {
+ wrapper = mountComponent({
+ provide: {
+ hasOkrsFeature,
+ },
+ okrsMvc,
+ });
+ });
+
+ it(`should ${message} objective in work item types`, () => {
+ expect(findIssueListApp().props('eeWorkItemTypes')).toMatchObject(eeWorkItemTypes);
+ });
+ },
+ );
+ });
+
+ describe('typeTokenOptions', () => {
+ describe.each`
+ hasOkrsFeature | okrsMvc | eeWorkItemTypeTokens | message
+ ${false} | ${true} | ${[]} | ${'NOT include'}
+ ${true} | ${false} | ${[]} | ${'NOT include'}
+ ${true} | ${true} | ${[TYPE_TOKEN_OBJECTIVE_OPTION]} | ${'include'}
+ `(
+ 'when hasOkrsFeature is "$hasOkrsFeature" and okrsMvc is "$okrsMvc"',
+ ({ hasOkrsFeature, okrsMvc, eeWorkItemTypeTokens, message }) => {
+ beforeEach(() => {
+ wrapper = mountComponent({
+ provide: {
+ hasOkrsFeature,
+ },
+ okrsMvc,
+ });
+ });
+
+ it(`should ${message} objective in type tokens`, () => {
+ expect(findIssueListApp().props('eeTypeTokenOptions')).toMatchObject(
+ eeWorkItemTypeTokens,
+ );
+ });
+ },
+ );
+ });
+
describe('tokens', () => {
const mockCurrentUser = {
id: 1,
diff --git a/ee/spec/frontend/work_items/components/create_work_item_objective_spec.js b/ee/spec/frontend/work_items/components/create_work_item_objective_spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..1bff2cb3121c03adae347fab717fa6527ac5872b
--- /dev/null
+++ b/ee/spec/frontend/work_items/components/create_work_item_objective_spec.js
@@ -0,0 +1,118 @@
+import Vue, { nextTick } from 'vue';
+import VueApollo from 'vue-apollo';
+import { GlAlert, GlFormInput } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import CreateWorkItemObjective from 'ee/work_items/components/create_work_item_objective.vue';
+import projectWorkItemTypesQuery from '~/work_items/graphql/project_work_item_types.query.graphql';
+import createWorkItemMutation from '~/work_items/graphql/create_work_item.mutation.graphql';
+import { projectWorkItemTypesQueryResponse, createWorkItemMutationResponse } from '../mock_data';
+
+Vue.use(VueApollo);
+
+describe('Create work item Objective component', () => {
+ let wrapper;
+ let fakeApollo;
+
+ const querySuccessHandler = jest.fn().mockResolvedValue(projectWorkItemTypesQueryResponse);
+ const createWorkItemSuccessHandler = jest.fn().mockResolvedValue(createWorkItemMutationResponse);
+ const errorHandler = jest.fn().mockRejectedValue('Houston, we have a problem');
+
+ const findAlert = () => wrapper.findComponent(GlAlert);
+ const findTitleInput = () => wrapper.findComponent(GlFormInput);
+ const findCreateButton = () => wrapper.find('[data-testid="create-button"]');
+
+ const createComponent = ({
+ data = {},
+ props = {},
+ queryHandler = querySuccessHandler,
+ mutationHandler = createWorkItemSuccessHandler,
+ fetchByIid = false,
+ } = {}) => {
+ fakeApollo = createMockApollo(
+ [
+ [projectWorkItemTypesQuery, queryHandler],
+ [createWorkItemMutation, mutationHandler],
+ ],
+ {},
+ { typePolicies: { Project: { merge: true } } },
+ );
+ wrapper = shallowMount(CreateWorkItemObjective, {
+ apolloProvider: fakeApollo,
+ data() {
+ return {
+ ...data,
+ };
+ },
+ propsData: {
+ ...props,
+ },
+ mocks: {
+ $router: {
+ go: jest.fn(),
+ },
+ },
+ provide: {
+ fullPath: 'full-path',
+ glFeatures: {
+ useIidInWorkItemsPath: fetchByIid,
+ },
+ },
+ });
+ };
+
+ afterEach(() => {
+ wrapper.destroy();
+ fakeApollo = null;
+ });
+
+ it('does not render error by default', () => {
+ createComponent();
+
+ expect(findAlert().exists()).toBe(false);
+ });
+
+ it('renders a disabled Create button when title input is empty', () => {
+ createComponent();
+
+ expect(findCreateButton().props('disabled')).toBe(true);
+ });
+
+ it('hides the alert on dismissing the error', async () => {
+ createComponent({ data: { error: true } });
+
+ expect(findAlert().exists()).toBe(true);
+
+ findAlert().vm.$emit('dismiss');
+ await nextTick();
+
+ expect(findAlert().exists()).toBe(false);
+ });
+
+ describe('when title input field has a text', () => {
+ beforeEach(async () => {
+ const mockTitle = 'Test title';
+ createComponent();
+ await waitForPromises();
+ findTitleInput().vm.$emit('input', mockTitle);
+ });
+
+ it('renders a enabled Create button', () => {
+ expect(findCreateButton().props('disabled')).toBe(false);
+ });
+ });
+
+ it('shows an alert on mutation error', async () => {
+ createComponent({ mutationHandler: errorHandler });
+ await waitForPromises();
+
+ findTitleInput().vm.$emit('input', 'some title');
+ wrapper.find('form').trigger('submit');
+ await waitForPromises();
+
+ expect(findAlert().text()).toBe(
+ 'Something went wrong when creating work item. Please try again.',
+ );
+ });
+});
diff --git a/ee/spec/frontend/work_items/mock_data.js b/ee/spec/frontend/work_items/mock_data.js
new file mode 100644
index 0000000000000000000000000000000000000000..a8bb2cf4330d98b2d4fc5b848e0a8db980f7665c
--- /dev/null
+++ b/ee/spec/frontend/work_items/mock_data.js
@@ -0,0 +1,50 @@
+export const projectWorkItemTypesQueryResponse = {
+ data: {
+ workspace: {
+ id: 'gid://gitlab/WorkItem/1',
+ workItemTypes: {
+ nodes: [
+ { id: 'gid://gitlab/WorkItems::Type/1', name: 'Issue' },
+ { id: 'gid://gitlab/WorkItems::Type/2', name: 'Incident' },
+ { id: 'gid://gitlab/WorkItems::Type/3', name: 'Task' },
+ ],
+ },
+ },
+ },
+};
+
+export const createWorkItemMutationResponse = {
+ data: {
+ workItemCreate: {
+ __typename: 'WorkItemCreatePayload',
+ workItem: {
+ __typename: 'WorkItem',
+ id: 'gid://gitlab/WorkItem/1',
+ iid: '1',
+ title: 'Updated title',
+ state: 'OPEN',
+ description: 'description',
+ confidential: false,
+ createdAt: '2022-08-03T12:41:54Z',
+ closedAt: null,
+ project: {
+ __typename: 'Project',
+ id: '1',
+ fullPath: 'test-project-path',
+ },
+ workItemType: {
+ __typename: 'WorkItemType',
+ id: 'gid://gitlab/WorkItems::Type/5',
+ name: 'Task',
+ iconName: 'issue-type-task',
+ },
+ userPermissions: {
+ deleteWorkItem: false,
+ updateWorkItem: false,
+ },
+ widgets: [],
+ },
+ errors: [],
+ },
+ },
+};
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 3995ce97c92608956e99bc947e6c72d71809cd68..e396237cca5e6f02e32b83244a456e741f1c76be 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -46359,6 +46359,9 @@ msgstr ""
msgid "WorkItem|Collapse tasks"
msgstr ""
+msgid "WorkItem|Create Objective"
+msgstr ""
+
msgid "WorkItem|Create task"
msgstr ""