diff options
Diffstat (limited to 'spec/frontend/design_management')
20 files changed, 94 insertions, 78 deletions
diff --git a/spec/frontend/design_management/components/delete_button_spec.js b/spec/frontend/design_management/components/delete_button_spec.js index 961f5bdd2ae..8f7d8e0b214 100644 --- a/spec/frontend/design_management/components/delete_button_spec.js +++ b/spec/frontend/design_management/components/delete_button_spec.js @@ -1,5 +1,5 @@ -import { shallowMount } from '@vue/test-utils'; import { GlButton, GlModal, GlModalDirective } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; import BatchDeleteButton from '~/design_management/components/delete_button.vue'; describe('Batch delete button component', () => { diff --git a/spec/frontend/design_management/components/design_notes/design_discussion_spec.js b/spec/frontend/design_management/components/design_notes/design_discussion_spec.js index 77fc70e08d1..92e188f4bcc 100644 --- a/spec/frontend/design_management/components/design_notes/design_discussion_spec.js +++ b/spec/frontend/design_management/components/design_notes/design_discussion_spec.js @@ -1,14 +1,14 @@ -import { mount } from '@vue/test-utils'; import { GlLoadingIcon } from '@gitlab/ui'; -import notes from '../../mock_data/notes'; +import { mount } from '@vue/test-utils'; import DesignDiscussion from '~/design_management/components/design_notes/design_discussion.vue'; import DesignNote from '~/design_management/components/design_notes/design_note.vue'; import DesignReplyForm from '~/design_management/components/design_notes/design_reply_form.vue'; +import ToggleRepliesWidget from '~/design_management/components/design_notes/toggle_replies_widget.vue'; import createNoteMutation from '~/design_management/graphql/mutations/create_note.mutation.graphql'; import toggleResolveDiscussionMutation from '~/design_management/graphql/mutations/toggle_resolve_discussion.mutation.graphql'; import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue'; -import ToggleRepliesWidget from '~/design_management/components/design_notes/toggle_replies_widget.vue'; import mockDiscussion from '../../mock_data/discussion'; +import notes from '../../mock_data/notes'; const defaultMockDiscussion = { id: '0', diff --git a/spec/frontend/design_management/components/design_notes/design_note_spec.js b/spec/frontend/design_management/components/design_notes/design_note_spec.js index 043091e3dc2..1cd556eabb4 100644 --- a/spec/frontend/design_management/components/design_notes/design_note_spec.js +++ b/spec/frontend/design_management/components/design_notes/design_note_spec.js @@ -1,9 +1,9 @@ import { shallowMount } from '@vue/test-utils'; import { ApolloMutation } from 'vue-apollo'; import DesignNote from '~/design_management/components/design_notes/design_note.vue'; -import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; -import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; import DesignReplyForm from '~/design_management/components/design_notes/design_reply_form.vue'; +import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; +import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; const scrollIntoViewMock = jest.fn(); const note = { diff --git a/spec/frontend/design_management/components/design_notes/toggle_replies_widget_spec.js b/spec/frontend/design_management/components/design_notes/toggle_replies_widget_spec.js index 7eda294d2d3..f87228663b6 100644 --- a/spec/frontend/design_management/components/design_notes/toggle_replies_widget_spec.js +++ b/spec/frontend/design_management/components/design_notes/toggle_replies_widget_spec.js @@ -1,7 +1,7 @@ -import { shallowMount } from '@vue/test-utils'; import { GlIcon, GlButton, GlLink } from '@gitlab/ui'; -import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; +import { shallowMount } from '@vue/test-utils'; import ToggleRepliesWidget from '~/design_management/components/design_notes/toggle_replies_widget.vue'; +import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; import notes from '../../mock_data/notes'; describe('Toggle replies widget component', () => { diff --git a/spec/frontend/design_management/components/design_overlay_spec.js b/spec/frontend/design_management/components/design_overlay_spec.js index a026cc39c84..d3119be7159 100644 --- a/spec/frontend/design_management/components/design_overlay_spec.js +++ b/spec/frontend/design_management/components/design_overlay_spec.js @@ -1,8 +1,8 @@ import { mount } from '@vue/test-utils'; import DesignOverlay from '~/design_management/components/design_overlay.vue'; +import { ACTIVE_DISCUSSION_SOURCE_TYPES } from '~/design_management/constants'; import updateActiveDiscussion from '~/design_management/graphql/mutations/update_active_discussion.mutation.graphql'; import notes from '../mock_data/notes'; -import { ACTIVE_DISCUSSION_SOURCE_TYPES } from '~/design_management/constants'; const mutate = jest.fn(() => Promise.resolve()); diff --git a/spec/frontend/design_management/components/design_presentation_spec.js b/spec/frontend/design_management/components/design_presentation_spec.js index 31fd154dc4b..edf8b965153 100644 --- a/spec/frontend/design_management/components/design_presentation_spec.js +++ b/spec/frontend/design_management/components/design_presentation_spec.js @@ -1,7 +1,7 @@ -import { nextTick } from 'vue'; import { shallowMount } from '@vue/test-utils'; -import DesignPresentation from '~/design_management/components/design_presentation.vue'; +import { nextTick } from 'vue'; import DesignOverlay from '~/design_management/components/design_overlay.vue'; +import DesignPresentation from '~/design_management/components/design_presentation.vue'; const mockOverlayData = { overlayDimensions: { diff --git a/spec/frontend/design_management/components/design_scaler_spec.js b/spec/frontend/design_management/components/design_scaler_spec.js index 40f53e8d0bf..8a123b2d1e5 100644 --- a/spec/frontend/design_management/components/design_scaler_spec.js +++ b/spec/frontend/design_management/components/design_scaler_spec.js @@ -1,5 +1,5 @@ -import { shallowMount } from '@vue/test-utils'; import { GlButton } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; import DesignScaler from '~/design_management/components/design_scaler.vue'; describe('Design management design scaler component', () => { diff --git a/spec/frontend/design_management/components/design_sidebar_spec.js b/spec/frontend/design_management/components/design_sidebar_spec.js index 60266883fcd..8eb993ec7b5 100644 --- a/spec/frontend/design_management/components/design_sidebar_spec.js +++ b/spec/frontend/design_management/components/design_sidebar_spec.js @@ -1,12 +1,12 @@ -import { shallowMount } from '@vue/test-utils'; import { GlCollapse, GlPopover } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; import Cookies from 'js-cookie'; +import DesignDiscussion from '~/design_management/components/design_notes/design_discussion.vue'; import DesignSidebar from '~/design_management/components/design_sidebar.vue'; +import DesignTodoButton from '~/design_management/components/design_todo_button.vue'; +import updateActiveDiscussionMutation from '~/design_management/graphql/mutations/update_active_discussion.mutation.graphql'; import Participants from '~/sidebar/components/participants/participants.vue'; -import DesignDiscussion from '~/design_management/components/design_notes/design_discussion.vue'; import design from '../mock_data/design'; -import updateActiveDiscussionMutation from '~/design_management/graphql/mutations/update_active_discussion.mutation.graphql'; -import DesignTodoButton from '~/design_management/components/design_todo_button.vue'; const scrollIntoViewMock = jest.fn(); HTMLElement.prototype.scrollIntoView = scrollIntoViewMock; diff --git a/spec/frontend/design_management/components/design_todo_button_spec.js b/spec/frontend/design_management/components/design_todo_button_spec.js index 9ebc6ca26a2..20686d0ae6c 100644 --- a/spec/frontend/design_management/components/design_todo_button_spec.js +++ b/spec/frontend/design_management/components/design_todo_button_spec.js @@ -1,8 +1,8 @@ import { shallowMount, mount } from '@vue/test-utils'; -import TodoButton from '~/vue_shared/components/todo_button.vue'; import DesignTodoButton from '~/design_management/components/design_todo_button.vue'; import createDesignTodoMutation from '~/design_management/graphql/mutations/create_design_todo.mutation.graphql'; import todoMarkDoneMutation from '~/graphql_shared/mutations/todo_mark_done.mutation.graphql'; +import TodoButton from '~/vue_shared/components/todo_button.vue'; import mockDesign from '../mock_data/design'; const mockDesignWithPendingTodos = { @@ -111,7 +111,7 @@ describe('Design management design todo button', () => { }); it('renders correct button text', () => { - expect(wrapper.text()).toBe('Add a To Do'); + expect(wrapper.text()).toBe('Add a to do'); }); describe('when clicked', () => { diff --git a/spec/frontend/design_management/components/image_spec.js b/spec/frontend/design_management/components/image_spec.js index 52d60b04a8a..765d902f9a6 100644 --- a/spec/frontend/design_management/components/image_spec.js +++ b/spec/frontend/design_management/components/image_spec.js @@ -1,5 +1,5 @@ -import { shallowMount } from '@vue/test-utils'; import { GlIcon } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; import DesignImage from '~/design_management/components/image.vue'; describe('Design management large image component', () => { diff --git a/spec/frontend/design_management/components/list/__snapshots__/item_spec.js.snap b/spec/frontend/design_management/components/list/__snapshots__/item_spec.js.snap index 36a2ffd19c3..8fe3e92360a 100644 --- a/spec/frontend/design_management/components/list/__snapshots__/item_spec.js.snap +++ b/spec/frontend/design_management/components/list/__snapshots__/item_spec.js.snap @@ -26,9 +26,10 @@ exports[`Design management list item component with notes renders item with mult <img alt="test" - class="gl-display-block gl-mx-auto gl-max-w-full mh-100 design-img" + class="gl-display-block gl-mx-auto gl-max-w-full gl-max-h-full design-img" data-qa-filename="test" data-qa-selector="design_image" + data-testid="design-img-1" src="" /> </gl-intersection-observer-stub> @@ -43,6 +44,8 @@ exports[`Design management list item component with notes renders item with mult <span class="gl-font-weight-bold str-truncated-100" data-qa-selector="design_file_name" + data-testid="design-img-filename-1" + title="test" > test </span> @@ -100,9 +103,10 @@ exports[`Design management list item component with notes renders item with sing <img alt="test" - class="gl-display-block gl-mx-auto gl-max-w-full mh-100 design-img" + class="gl-display-block gl-mx-auto gl-max-w-full gl-max-h-full design-img" data-qa-filename="test" data-qa-selector="design_image" + data-testid="design-img-1" src="" /> </gl-intersection-observer-stub> @@ -117,6 +121,8 @@ exports[`Design management list item component with notes renders item with sing <span class="gl-font-weight-bold str-truncated-100" data-qa-selector="design_file_name" + data-testid="design-img-filename-1" + title="test" > test </span> diff --git a/spec/frontend/design_management/components/list/item_spec.js b/spec/frontend/design_management/components/list/item_spec.js index 55c6ecbc26b..caf0f8bb5bc 100644 --- a/spec/frontend/design_management/components/list/item_spec.js +++ b/spec/frontend/design_management/components/list/item_spec.js @@ -1,6 +1,7 @@ -import { createLocalVue, shallowMount } from '@vue/test-utils'; import { GlIcon, GlLoadingIcon, GlIntersectionObserver } from '@gitlab/ui'; +import { createLocalVue, shallowMount } from '@vue/test-utils'; import VueRouter from 'vue-router'; +import { extendedWrapper } from 'helpers/vue_test_utils_helper'; import Item from '~/design_management/components/list/item.vue'; const localVue = createLocalVue(); @@ -17,8 +18,11 @@ const DESIGN_VERSION_EVENT = { describe('Design management list item component', () => { let wrapper; + const imgId = 1; + const imgFilename = 'test'; - const findDesignEvent = () => wrapper.find('[data-testid="designEvent"]'); + const findDesignEvent = () => wrapper.findByTestId('design-event'); + const findImgFilename = (id = imgId) => wrapper.findByTestId(`design-img-filename-${id}`); const findEventIcon = () => findDesignEvent().find(GlIcon); const findLoadingIcon = () => wrapper.find(GlLoadingIcon); @@ -28,25 +32,27 @@ describe('Design management list item component', () => { isUploading = false, imageLoading = false, } = {}) { - wrapper = shallowMount(Item, { - localVue, - router, - propsData: { - id: 1, - filename: 'test', - image: 'http://via.placeholder.com/300', - isUploading, - event, - notesCount, - updatedAt: '01-01-2019', - }, - data() { - return { - imageLoading, - }; - }, - stubs: ['router-link'], - }); + wrapper = extendedWrapper( + shallowMount(Item, { + localVue, + router, + propsData: { + id: imgId, + filename: imgFilename, + image: 'http://via.placeholder.com/300', + isUploading, + event, + notesCount, + updatedAt: '01-01-2019', + }, + data() { + return { + imageLoading, + }; + }, + stubs: ['router-link'], + }), + ); } afterEach(() => { @@ -75,6 +81,10 @@ describe('Design management list item component', () => { return wrapper.vm.$nextTick(); }); + it('renders a tooltip', () => { + expect(findImgFilename().attributes('title')).toEqual(imgFilename); + }); + describe('before image is loaded', () => { it('renders loading spinner', () => { expect(wrapper.find(GlLoadingIcon)).toExist(); diff --git a/spec/frontend/design_management/components/toolbar/index_spec.js b/spec/frontend/design_management/components/toolbar/index_spec.js index 6ac088a2c53..44c865d976d 100644 --- a/spec/frontend/design_management/components/toolbar/index_spec.js +++ b/spec/frontend/design_management/components/toolbar/index_spec.js @@ -1,8 +1,8 @@ +import { GlButton } from '@gitlab/ui'; import { createLocalVue, shallowMount } from '@vue/test-utils'; import VueRouter from 'vue-router'; -import { GlButton } from '@gitlab/ui'; -import Toolbar from '~/design_management/components/toolbar/index.vue'; import DeleteButton from '~/design_management/components/delete_button.vue'; +import Toolbar from '~/design_management/components/toolbar/index.vue'; import { DESIGNS_ROUTE_NAME } from '~/design_management/router/constants'; const localVue = createLocalVue(); diff --git a/spec/frontend/design_management/components/upload/button_spec.js b/spec/frontend/design_management/components/upload/button_spec.js index ea738496ad6..d123db43ce6 100644 --- a/spec/frontend/design_management/components/upload/button_spec.js +++ b/spec/frontend/design_management/components/upload/button_spec.js @@ -1,5 +1,5 @@ -import { shallowMount } from '@vue/test-utils'; import { GlButton } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; import UploadButton from '~/design_management/components/upload/button.vue'; describe('Design management upload button component', () => { diff --git a/spec/frontend/design_management/components/upload/design_version_dropdown_spec.js b/spec/frontend/design_management/components/upload/design_version_dropdown_spec.js index d841aabf2f3..1b01a363688 100644 --- a/spec/frontend/design_management/components/upload/design_version_dropdown_spec.js +++ b/spec/frontend/design_management/components/upload/design_version_dropdown_spec.js @@ -1,5 +1,5 @@ -import { shallowMount } from '@vue/test-utils'; import { GlDropdown, GlDropdownItem, GlSprintf } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; import DesignVersionDropdown from '~/design_management/components/upload/design_version_dropdown.vue'; import mockAllVersions from './mock_data/all_versions'; diff --git a/spec/frontend/design_management/pages/design/index_spec.js b/spec/frontend/design_management/pages/design/index_spec.js index 9c11af28cf0..11c88c3d0f5 100644 --- a/spec/frontend/design_management/pages/design/index_spec.js +++ b/spec/frontend/design_management/pages/design/index_spec.js @@ -1,32 +1,32 @@ -import { shallowMount, createLocalVue } from '@vue/test-utils'; -import VueRouter from 'vue-router'; import { GlAlert } from '@gitlab/ui'; +import { shallowMount, createLocalVue } from '@vue/test-utils'; import { ApolloMutation } from 'vue-apollo'; +import VueRouter from 'vue-router'; import { mockTracking, unmockTracking } from 'helpers/tracking_helper'; -import createFlash from '~/flash'; import Api from '~/api'; -import DesignIndex from '~/design_management/pages/design/index.vue'; -import DesignSidebar from '~/design_management/components/design_sidebar.vue'; import DesignPresentation from '~/design_management/components/design_presentation.vue'; +import DesignSidebar from '~/design_management/components/design_sidebar.vue'; +import { DESIGN_DETAIL_LAYOUT_CLASSLIST } from '~/design_management/constants'; import createImageDiffNoteMutation from '~/design_management/graphql/mutations/create_image_diff_note.mutation.graphql'; import updateActiveDiscussion from '~/design_management/graphql/mutations/update_active_discussion.mutation.graphql'; +import DesignIndex from '~/design_management/pages/design/index.vue'; +import createRouter from '~/design_management/router'; +import { DESIGNS_ROUTE_NAME, DESIGN_ROUTE_NAME } from '~/design_management/router/constants'; +import * as utils from '~/design_management/utils/design_management_utils'; import { DESIGN_NOT_FOUND_ERROR, DESIGN_VERSION_NOT_EXIST_ERROR, } from '~/design_management/utils/error_messages'; -import { DESIGNS_ROUTE_NAME, DESIGN_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'; -import design from '../../mock_data/design'; -import mockResponseWithDesigns from '../../mock_data/designs'; -import mockResponseNoDesigns from '../../mock_data/no_designs'; -import mockAllVersions from '../../mock_data/all_versions'; import { DESIGN_TRACKING_PAGE_NAME, DESIGN_SNOWPLOW_EVENT_TYPES, DESIGN_USAGE_PING_EVENT_TYPES, } from '~/design_management/utils/tracking'; +import createFlash from '~/flash'; +import mockAllVersions from '../../mock_data/all_versions'; +import design from '../../mock_data/design'; +import mockResponseWithDesigns from '../../mock_data/designs'; +import mockResponseNoDesigns from '../../mock_data/no_designs'; jest.mock('~/flash'); jest.mock('~/api.js'); diff --git a/spec/frontend/design_management/pages/index_spec.js b/spec/frontend/design_management/pages/index_spec.js index 7d28d6f6d11..4f162ca8e7f 100644 --- a/spec/frontend/design_management/pages/index_spec.js +++ b/spec/frontend/design_management/pages/index_spec.js @@ -1,27 +1,32 @@ -import { nextTick } from 'vue'; +import { GlEmptyState } from '@gitlab/ui'; import { createLocalVue, shallowMount } from '@vue/test-utils'; +import { nextTick } from 'vue'; import VueApollo, { ApolloMutation } from 'vue-apollo'; -import VueDraggable from 'vuedraggable'; import VueRouter from 'vue-router'; -import { GlEmptyState } from '@gitlab/ui'; +import VueDraggable from 'vuedraggable'; import createMockApollo from 'helpers/mock_apollo_helper'; import { mockTracking, unmockTracking } from 'helpers/tracking_helper'; -import getDesignListQuery from 'shared_queries/design_management/get_design_list.query.graphql'; import permissionsQuery from 'shared_queries/design_management/design_permissions.query.graphql'; -import Index from '~/design_management/pages/index.vue'; -import uploadDesignMutation from '~/design_management/graphql/mutations/upload_design.mutation.graphql'; -import DesignDestroyer from '~/design_management/components/design_destroyer.vue'; -import DesignDropzone from '~/vue_shared/components/upload_dropzone/upload_dropzone.vue'; +import getDesignListQuery from 'shared_queries/design_management/get_design_list.query.graphql'; import DeleteButton from '~/design_management/components/delete_button.vue'; +import DesignDestroyer from '~/design_management/components/design_destroyer.vue'; import Design from '~/design_management/components/list/item.vue'; +import moveDesignMutation from '~/design_management/graphql/mutations/move_design.mutation.graphql'; +import uploadDesignMutation from '~/design_management/graphql/mutations/upload_design.mutation.graphql'; +import Index from '~/design_management/pages/index.vue'; +import createRouter from '~/design_management/router'; import { DESIGNS_ROUTE_NAME } from '~/design_management/router/constants'; +import * as utils from '~/design_management/utils/design_management_utils'; import { EXISTING_DESIGN_DROP_MANY_FILES_MESSAGE, EXISTING_DESIGN_DROP_INVALID_FILENAME_MESSAGE, } from '~/design_management/utils/error_messages'; +import { + DESIGN_TRACKING_PAGE_NAME, + DESIGN_SNOWPLOW_EVENT_TYPES, +} from '~/design_management/utils/tracking'; import createFlash from '~/flash'; -import createRouter from '~/design_management/router'; -import * as utils from '~/design_management/utils/design_management_utils'; +import DesignDropzone from '~/vue_shared/components/upload_dropzone/upload_dropzone.vue'; import { designListQueryResponse, designUploadMutationCreatedResponse, @@ -31,11 +36,6 @@ import { reorderedDesigns, moveDesignMutationResponseWithErrors, } from '../mock_data/apollo_mock'; -import moveDesignMutation from '~/design_management/graphql/mutations/move_design.mutation.graphql'; -import { - DESIGN_TRACKING_PAGE_NAME, - DESIGN_SNOWPLOW_EVENT_TYPES, -} from '~/design_management/utils/tracking'; jest.mock('~/flash.js'); const mockPageEl = { diff --git a/spec/frontend/design_management/router_spec.js b/spec/frontend/design_management/router_spec.js index 0b4e68eea78..ac5e6895408 100644 --- a/spec/frontend/design_management/router_spec.js +++ b/spec/frontend/design_management/router_spec.js @@ -2,8 +2,8 @@ import { mount, createLocalVue } from '@vue/test-utils'; import { nextTick } from 'vue'; import VueRouter from 'vue-router'; import App from '~/design_management/components/app.vue'; -import Designs from '~/design_management/pages/index.vue'; import DesignDetail from '~/design_management/pages/design/index.vue'; +import Designs from '~/design_management/pages/index.vue'; import createRouter from '~/design_management/router'; import { DESIGNS_ROUTE_NAME, DESIGN_ROUTE_NAME } from '~/design_management/router/constants'; import '~/commons/bootstrap'; diff --git a/spec/frontend/design_management/utils/cache_update_spec.js b/spec/frontend/design_management/utils/cache_update_spec.js index 2fb08c3ef05..7327cf00abd 100644 --- a/spec/frontend/design_management/utils/cache_update_spec.js +++ b/spec/frontend/design_management/utils/cache_update_spec.js @@ -10,8 +10,8 @@ import { ADD_IMAGE_DIFF_NOTE_ERROR, UPDATE_IMAGE_DIFF_NOTE_ERROR, } from '~/design_management/utils/error_messages'; -import design from '../mock_data/design'; import createFlash from '~/flash'; +import design from '../mock_data/design'; jest.mock('~/flash.js'); diff --git a/spec/frontend/design_management/utils/design_management_utils_spec.js b/spec/frontend/design_management/utils/design_management_utils_spec.js index 368448ead10..5b7f99e9d96 100644 --- a/spec/frontend/design_management/utils/design_management_utils_spec.js +++ b/spec/frontend/design_management/utils/design_management_utils_spec.js @@ -8,9 +8,9 @@ import { extractDesign, extractDesignNoteId, } from '~/design_management/utils/design_management_utils'; -import mockResponseNoDesigns from '../mock_data/no_designs'; -import mockResponseWithDesigns from '../mock_data/designs'; import mockDesign from '../mock_data/design'; +import mockResponseWithDesigns from '../mock_data/designs'; +import mockResponseNoDesigns from '../mock_data/no_designs'; jest.mock('lodash/uniqueId', () => () => 1); |