summaryrefslogtreecommitdiff
path: root/spec/frontend/design_management/pages/design
diff options
context:
space:
mode:
Diffstat (limited to 'spec/frontend/design_management/pages/design')
-rw-r--r--spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap116
-rw-r--r--spec/frontend/design_management/pages/design/index_spec.js137
2 files changed, 124 insertions, 129 deletions
diff --git a/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap b/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap
index 76e481ee518..65c4811536e 100644
--- a/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap
+++ b/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap
@@ -16,7 +16,7 @@ exports[`Design management design index page renders design index 1`] = `
<!---->
<design-presentation-stub
- discussions="[object Object]"
+ discussions="[object Object],[object Object]"
image="test.jpg"
imagename="test.jpg"
scale="1"
@@ -33,58 +33,86 @@ exports[`Design management design index page renders design index 1`] = `
class="image-notes"
>
<h2
- class="gl-font-size-20-deprecated-no-really-do-not-use-me font-weight-bold mt-0"
+ class="gl-font-weight-bold gl-mt-0"
>
- My precious issue
-
+ My precious issue
+
</h2>
<a
- class="text-tertiary text-decoration-none mb-3 d-block"
+ class="gl-text-gray-600 gl-text-decoration-none gl-mb-6 gl-display-block"
href="full-issue-url"
>
ull-issue-path
</a>
<participants-stub
- class="mb-4"
+ class="gl-mb-4"
numberoflessparticipants="7"
participants="[object Object]"
/>
- <div
- class="design-discussion-wrapper"
+ <!---->
+
+ <design-discussion-stub
+ data-testid="unresolved-discussion"
+ designid="test"
+ discussion="[object Object]"
+ discussionwithopenform=""
+ markdownpreviewpath="//preview_markdown?target_type=Issue"
+ noteableid="design-id"
+ />
+
+ <gl-button-stub
+ category="tertiary"
+ class="link-inherit-color gl-text-black-normal gl-text-decoration-none gl-font-weight-bold gl-mb-4"
+ data-testid="resolved-comments"
+ icon="chevron-right"
+ id="resolved-comments"
+ size="medium"
+ variant="link"
>
- <div
- class="badge badge-pill"
- type="button"
- >
- 1
- </div>
+ Resolved Comments (1)
+
+ </gl-button-stub>
+
+ <gl-popover-stub
+ container="popovercontainer"
+ cssclasses=""
+ placement="top"
+ show="true"
+ target="resolved-comments"
+ title="Resolved Comments"
+ >
+ <p>
+
+ Comments you resolve can be viewed and unresolved by going to the "Resolved Comments" section below
+
+ </p>
- <div
- class="design-discussion bordered-box position-relative"
- data-qa-selector="design_discussion_content"
+ <a
+ href="#"
+ rel="noopener noreferrer"
+ target="_blank"
>
- <design-note-stub
- class=""
- markdownpreviewpath="//preview_markdown?target_type=Issue"
- note="[object Object]"
- />
-
- <div
- class="reply-wrapper"
- >
- <reply-placeholder-stub
- buttontext="Reply..."
- class="qa-discussion-reply"
- />
- </div>
- </div>
- </div>
+ Learn more about resolving comments
+ </a>
+ </gl-popover-stub>
+
+ <gl-collapse-stub
+ class="gl-mt-3"
+ >
+ <design-discussion-stub
+ data-testid="resolved-discussion"
+ designid="test"
+ discussion="[object Object]"
+ discussionwithopenform=""
+ markdownpreviewpath="//preview_markdown?target_type=Issue"
+ noteableid="design-id"
+ />
+ </gl-collapse-stub>
- <!---->
</div>
</div>
`;
@@ -152,33 +180,37 @@ exports[`Design management design index page with error GlAlert is rendered in c
class="image-notes"
>
<h2
- class="gl-font-size-20-deprecated-no-really-do-not-use-me font-weight-bold mt-0"
+ class="gl-font-weight-bold gl-mt-0"
>
- My precious issue
-
+ My precious issue
+
</h2>
<a
- class="text-tertiary text-decoration-none mb-3 d-block"
+ class="gl-text-gray-600 gl-text-decoration-none gl-mb-6 gl-display-block"
href="full-issue-url"
>
ull-issue-path
</a>
<participants-stub
- class="mb-4"
+ class="gl-mb-4"
numberoflessparticipants="7"
participants="[object Object]"
/>
<h2
- class="new-discussion-disclaimer gl-font-base m-0"
+ class="new-discussion-disclaimer gl-font-base gl-m-0 gl-mb-4"
+ data-testid="new-discussion-disclaimer"
>
- Click the image where you'd like to start a new discussion
-
+ Click the image where you'd like to start a new discussion
+
</h2>
+
+ <!---->
+
</div>
</div>
`;
diff --git a/spec/frontend/design_management/pages/design/index_spec.js b/spec/frontend/design_management/pages/design/index_spec.js
index 9e2f071a983..430cf8722fe 100644
--- a/spec/frontend/design_management/pages/design/index_spec.js
+++ b/spec/frontend/design_management/pages/design/index_spec.js
@@ -1,13 +1,12 @@
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import VueRouter from 'vue-router';
import { GlAlert } from '@gitlab/ui';
import { ApolloMutation } from 'vue-apollo';
import createFlash from '~/flash';
import DesignIndex from '~/design_management/pages/design/index.vue';
-import DesignDiscussion from '~/design_management/components/design_notes/design_discussion.vue';
+import DesignSidebar from '~/design_management/components/design_sidebar.vue';
import DesignReplyForm from '~/design_management/components/design_notes/design_reply_form.vue';
-import Participants from '~/sidebar/components/participants/participants.vue';
import createImageDiffNoteMutation from '~/design_management/graphql/mutations/createImageDiffNote.mutation.graphql';
-import updateActiveDiscussionMutation from '~/design_management/graphql/mutations/update_active_discussion.mutation.graphql';
import design from '../../mock_data/design';
import mockResponseWithDesigns from '../../mock_data/designs';
import mockResponseNoDesigns from '../../mock_data/no_designs';
@@ -17,6 +16,9 @@ import {
DESIGN_VERSION_NOT_EXIST_ERROR,
} from '~/design_management/utils/error_messages';
import { DESIGNS_ROUTE_NAME } from '~/design_management/router/constants';
+import createRouter from '~/design_management/router';
+import * as utils from '~/design_management/utils/design_management_utils';
+import { DESIGN_DETAIL_LAYOUT_CLASSLIST } from '~/design_management/constants';
jest.mock('~/flash');
jest.mock('mousetrap', () => ({
@@ -24,8 +26,13 @@ jest.mock('mousetrap', () => ({
unbind: jest.fn(),
}));
+const localVue = createLocalVue();
+localVue.use(VueRouter);
+
describe('Design management design index page', () => {
let wrapper;
+ let router;
+
const newComment = 'new comment';
const annotationCoordinates = {
x: 10,
@@ -53,23 +60,12 @@ describe('Design management design index page', () => {
},
};
- const updateActiveDiscussionMutationVariables = {
- mutation: updateActiveDiscussionMutation,
- variables: {
- id: design.discussions.nodes[0].notes.nodes[0].id,
- source: 'discussion',
- },
- };
-
const mutate = jest.fn().mockResolvedValue();
- const routerPush = jest.fn();
- const findDiscussions = () => wrapper.findAll(DesignDiscussion);
const findDiscussionForm = () => wrapper.find(DesignReplyForm);
- const findParticipants = () => wrapper.find(Participants);
- const findDiscussionsWrapper = () => wrapper.find('.image-notes');
+ const findSidebar = () => wrapper.find(DesignSidebar);
- function createComponent(loading = false, data = {}, { routeQuery = {} } = {}) {
+ function createComponent(loading = false, data = {}) {
const $apollo = {
queries: {
design: {
@@ -79,20 +75,14 @@ describe('Design management design index page', () => {
mutate,
};
- const $router = {
- push: routerPush,
- };
-
- const $route = {
- query: routeQuery,
- };
+ router = createRouter();
wrapper = shallowMount(DesignIndex, {
propsData: { id: '1' },
- mocks: { $apollo, $router, $route },
+ mocks: { $apollo },
stubs: {
ApolloMutation,
- DesignDiscussion,
+ DesignSidebar,
},
data() {
return {
@@ -104,6 +94,8 @@ describe('Design management design index page', () => {
...data,
};
},
+ localVue,
+ router,
});
}
@@ -111,6 +103,23 @@ describe('Design management design index page', () => {
wrapper.destroy();
});
+ describe('when navigating', () => {
+ it('applies fullscreen layout', () => {
+ const mockEl = {
+ classList: {
+ add: jest.fn(),
+ remove: jest.fn(),
+ },
+ };
+ jest.spyOn(utils, 'getPageLayoutElement').mockReturnValue(mockEl);
+ createComponent(true);
+
+ wrapper.vm.$router.push('/designs/test');
+ expect(mockEl.classList.add).toHaveBeenCalledTimes(1);
+ expect(mockEl.classList.add).toHaveBeenCalledWith(...DESIGN_DETAIL_LAYOUT_CLASSLIST);
+ });
+ });
+
it('sets loading state', () => {
createComponent(true);
@@ -124,63 +133,13 @@ describe('Design management design index page', () => {
expect(wrapper.find(GlAlert).exists()).toBe(false);
});
- it('renders participants', () => {
- createComponent(false, { design });
-
- expect(findParticipants().exists()).toBe(true);
- });
-
- it('passes the correct amount of participants to the Participants component', () => {
+ it('passes correct props to sidebar component', () => {
createComponent(false, { design });
- expect(findParticipants().props('participants')).toHaveLength(1);
- });
-
- describe('when has no discussions', () => {
- beforeEach(() => {
- createComponent(false, {
- design: {
- ...design,
- discussions: {
- nodes: [],
- },
- },
- });
- });
-
- it('does not render discussions', () => {
- expect(findDiscussions().exists()).toBe(false);
- });
-
- it('renders a message about possibility to create a new discussion', () => {
- expect(wrapper.find('.new-discussion-disclaimer').exists()).toBe(true);
- });
- });
-
- describe('when has discussions', () => {
- beforeEach(() => {
- createComponent(false, { design });
- });
-
- it('renders correct amount of discussions', () => {
- expect(findDiscussions()).toHaveLength(1);
- });
-
- it('sends a mutation to set an active discussion when clicking on a discussion', () => {
- findDiscussions()
- .at(0)
- .trigger('click');
-
- expect(mutate).toHaveBeenCalledWith(updateActiveDiscussionMutationVariables);
- });
-
- it('sends a mutation to reset an active discussion when clicking outside of discussion', () => {
- findDiscussionsWrapper().trigger('click');
-
- expect(mutate).toHaveBeenCalledWith({
- ...updateActiveDiscussionMutationVariables,
- variables: { id: undefined, source: 'discussion' },
- });
+ expect(findSidebar().props()).toEqual({
+ design,
+ markdownPreviewPath: '//preview_markdown?target_type=Issue',
+ resolvedDiscussionsExpanded: false,
});
});
@@ -269,31 +228,35 @@ describe('Design management design index page', () => {
describe('with no designs', () => {
it('redirects to /designs', () => {
createComponent(true);
+ router.push = jest.fn();
wrapper.vm.onDesignQueryResult({ data: mockResponseNoDesigns, loading: false });
return wrapper.vm.$nextTick().then(() => {
expect(createFlash).toHaveBeenCalledTimes(1);
expect(createFlash).toHaveBeenCalledWith(DESIGN_NOT_FOUND_ERROR);
- expect(routerPush).toHaveBeenCalledTimes(1);
- expect(routerPush).toHaveBeenCalledWith({ name: DESIGNS_ROUTE_NAME });
+ expect(router.push).toHaveBeenCalledTimes(1);
+ expect(router.push).toHaveBeenCalledWith({ name: DESIGNS_ROUTE_NAME });
});
});
});
describe('when no design exists for given version', () => {
it('redirects to /designs', () => {
- // attempt to query for a version of the design that doesn't exist
- createComponent(true, {}, { routeQuery: { version: '999' } });
+ createComponent(true);
wrapper.setData({
allVersions: mockAllVersions,
});
+ // attempt to query for a version of the design that doesn't exist
+ router.push({ query: { version: '999' } });
+ router.push = jest.fn();
+
wrapper.vm.onDesignQueryResult({ data: mockResponseWithDesigns, loading: false });
return wrapper.vm.$nextTick().then(() => {
expect(createFlash).toHaveBeenCalledTimes(1);
expect(createFlash).toHaveBeenCalledWith(DESIGN_VERSION_NOT_EXIST_ERROR);
- expect(routerPush).toHaveBeenCalledTimes(1);
- expect(routerPush).toHaveBeenCalledWith({ name: DESIGNS_ROUTE_NAME });
+ expect(router.push).toHaveBeenCalledTimes(1);
+ expect(router.push).toHaveBeenCalledWith({ name: DESIGNS_ROUTE_NAME });
});
});
});
View Lorry Controller Status