diff options
Diffstat (limited to 'spec/frontend/design_management')
16 files changed, 68 insertions, 56 deletions
diff --git a/spec/frontend/design_management/components/delete_button_spec.js b/spec/frontend/design_management/components/delete_button_spec.js index e3907fdbe15..cee1eec792d 100644 --- a/spec/frontend/design_management/components/delete_button_spec.js +++ b/spec/frontend/design_management/components/delete_button_spec.js @@ -6,8 +6,8 @@ import BatchDeleteButton from '~/design_management/components/delete_button.vue' describe('Batch delete button component', () => { let wrapper; - const findButton = () => wrapper.find(GlButton); - const findModal = () => wrapper.find(GlModal); + const findButton = () => wrapper.findComponent(GlButton); + const findModal = () => wrapper.findComponent(GlModal); function createComponent({ isDeleting = false } = {}, { slots = {} } = {}) { wrapper = shallowMount(BatchDeleteButton, { 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 77935fbde11..2091e1e08dd 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 @@ -26,13 +26,13 @@ describe('Design discussions component', () => { const originalGon = window.gon; let wrapper; - const findDesignNotes = () => wrapper.findAll(DesignNote); - const findReplyPlaceholder = () => wrapper.find(ReplyPlaceholder); - const findReplyForm = () => wrapper.find(DesignReplyForm); - const findRepliesWidget = () => wrapper.find(ToggleRepliesWidget); + const findDesignNotes = () => wrapper.findAllComponents(DesignNote); + const findReplyPlaceholder = () => wrapper.findComponent(ReplyPlaceholder); + const findReplyForm = () => wrapper.findComponent(DesignReplyForm); + const findRepliesWidget = () => wrapper.findComponent(ToggleRepliesWidget); const findResolveButton = () => wrapper.find('[data-testid="resolve-button"]'); const findResolvedMessage = () => wrapper.find('[data-testid="resolved-message"]'); - const findResolveLoadingIcon = () => wrapper.find(GlLoadingIcon); + const findResolveLoadingIcon = () => wrapper.findComponent(GlLoadingIcon); const findResolveCheckbox = () => wrapper.find('[data-testid="resolve-checkbox"]'); const findApolloMutation = () => wrapper.findComponent(ApolloMutation); @@ -307,7 +307,7 @@ describe('Design discussions component', () => { expect( wrapper - .findAll(DesignNote) + .findAllComponents(DesignNote) .wrappers.every((designNote) => designNote.classes('gl-bg-blue-50')), ).toBe(true); }, @@ -351,7 +351,7 @@ describe('Design discussions component', () => { createComponent(); findReplyPlaceholder().vm.$emit('focus'); - expect(wrapper.emitted('open-form')).toBeTruthy(); + expect(wrapper.emitted('open-form')).toHaveLength(1); }); describe('when user is not logged in', () => { 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 1f84fde9f7f..28833b4af5c 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 @@ -100,7 +100,7 @@ describe('Design note component', () => { note, }); - expect(wrapper.find(TimeAgoTooltip).exists()).toBe(true); + expect(wrapper.findComponent(TimeAgoTooltip).exists()).toBe(true); }); it('should not render edit icon when user does not have a permission', () => { diff --git a/spec/frontend/design_management/components/design_notes/design_reply_form_spec.js b/spec/frontend/design_management/components/design_notes/design_reply_form_spec.js index d2d1fe6b2d8..f7ce742b933 100644 --- a/spec/frontend/design_management/components/design_notes/design_reply_form_spec.js +++ b/spec/frontend/design_management/components/design_notes/design_reply_form_spec.js @@ -15,9 +15,9 @@ describe('Design reply form component', () => { let wrapper; const findTextarea = () => wrapper.find('textarea'); - const findSubmitButton = () => wrapper.find({ ref: 'submitButton' }); - const findCancelButton = () => wrapper.find({ ref: 'cancelButton' }); - const findModal = () => wrapper.find({ ref: 'cancelCommentModal' }); + const findSubmitButton = () => wrapper.findComponent({ ref: 'submitButton' }); + const findCancelButton = () => wrapper.findComponent({ ref: 'cancelButton' }); + const findModal = () => wrapper.findComponent({ ref: 'cancelCommentModal' }); function createComponent(props = {}, mountOptions = {}) { wrapper = mount(DesignReplyForm, { @@ -42,6 +42,18 @@ describe('Design reply form component', () => { expect(findTextarea().element).toEqual(document.activeElement); }); + it('renders "Attach a file or image" button in markdown toolbar', () => { + createComponent(); + + expect(wrapper.find('[data-testid="button-attach-file"]').exists()).toBe(true); + }); + + it('renders file upload progress container', () => { + createComponent(); + + expect(wrapper.find('.comment-toolbar .uploading-container').exists()).toBe(true); + }); + it('renders button text as "Comment" when creating a comment', () => { createComponent(); 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 f87228663b6..41129e2b58d 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 @@ -8,10 +8,10 @@ describe('Toggle replies widget component', () => { let wrapper; const findToggleWrapper = () => wrapper.find('[data-testid="toggle-comments-wrapper"]'); - const findIcon = () => wrapper.find(GlIcon); - const findButton = () => wrapper.find(GlButton); - const findAuthorLink = () => wrapper.find(GlLink); - const findTimeAgo = () => wrapper.find(TimeAgoTooltip); + const findIcon = () => wrapper.findComponent(GlIcon); + const findButton = () => wrapper.findComponent(GlButton); + const findAuthorLink = () => wrapper.findComponent(GlLink); + const findTimeAgo = () => wrapper.findComponent(TimeAgoTooltip); function createComponent(props = {}) { wrapper = shallowMount(ToggleRepliesWidget, { diff --git a/spec/frontend/design_management/components/design_scaler_spec.js b/spec/frontend/design_management/components/design_scaler_spec.js index a04e2ebda5b..e1a66cea329 100644 --- a/spec/frontend/design_management/components/design_scaler_spec.js +++ b/spec/frontend/design_management/components/design_scaler_spec.js @@ -6,7 +6,7 @@ import DesignScaler from '~/design_management/components/design_scaler.vue'; describe('Design management design scaler component', () => { let wrapper; - const getButtons = () => wrapper.findAll(GlButton); + const getButtons = () => wrapper.findAllComponents(GlButton); const getDecreaseScaleButton = () => getButtons().at(0); const getResetScaleButton = () => getButtons().at(1); const getIncreaseScaleButton = () => getButtons().at(2); diff --git a/spec/frontend/design_management/components/design_sidebar_spec.js b/spec/frontend/design_management/components/design_sidebar_spec.js index f13796138bd..af995f75ddc 100644 --- a/spec/frontend/design_management/components/design_sidebar_spec.js +++ b/spec/frontend/design_management/components/design_sidebar_spec.js @@ -32,12 +32,12 @@ describe('Design management design sidebar component', () => { const originalGon = window.gon; let wrapper; - const findDiscussions = () => wrapper.findAll(DesignDiscussion); + const findDiscussions = () => wrapper.findAllComponents(DesignDiscussion); const findFirstDiscussion = () => findDiscussions().at(0); const findUnresolvedDiscussions = () => wrapper.findAll('[data-testid="unresolved-discussion"]'); const findResolvedDiscussions = () => wrapper.findAll('[data-testid="resolved-discussion"]'); - const findParticipants = () => wrapper.find(Participants); - const findResolvedCommentsToggle = () => wrapper.find(GlAccordionItem); + const findParticipants = () => wrapper.findComponent(Participants); + const findResolvedCommentsToggle = () => wrapper.findComponent(GlAccordionItem); const findNewDiscussionDisclaimer = () => wrapper.find('[data-testid="new-discussion-disclaimer"]'); @@ -87,7 +87,7 @@ describe('Design management design sidebar component', () => { it('renders To-Do button', () => { createComponent(); - expect(wrapper.find(DesignTodoButton).exists()).toBe(true); + expect(wrapper.findComponent(DesignTodoButton).exists()).toBe(true); }); describe('when has no discussions', () => { 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 73661c9fcb0..b3afcefe1ed 100644 --- a/spec/frontend/design_management/components/design_todo_button_spec.js +++ b/spec/frontend/design_management/components/design_todo_button_spec.js @@ -57,7 +57,7 @@ describe('Design management design todo button', () => { }); it('renders TodoButton component', () => { - expect(wrapper.find(TodoButton).exists()).toBe(true); + expect(wrapper.findComponent(TodoButton).exists()).toBe(true); }); describe('when design has a pending todo', () => { diff --git a/spec/frontend/design_management/components/image_spec.js b/spec/frontend/design_management/components/image_spec.js index 65ee0ae6238..8163cb0d87a 100644 --- a/spec/frontend/design_management/components/image_spec.js +++ b/spec/frontend/design_management/components/image_spec.js @@ -71,7 +71,7 @@ describe('Design management large image component', () => { image.trigger('error'); await nextTick(); expect(image.isVisible()).toBe(false); - expect(wrapper.find(GlIcon).element).toMatchSnapshot(); + expect(wrapper.findComponent(GlIcon).element).toMatchSnapshot(); }); describe('zoom', () => { diff --git a/spec/frontend/design_management/components/list/item_spec.js b/spec/frontend/design_management/components/list/item_spec.js index e00dda2015e..66d3f883960 100644 --- a/spec/frontend/design_management/components/list/item_spec.js +++ b/spec/frontend/design_management/components/list/item_spec.js @@ -23,8 +23,8 @@ describe('Design management list item component', () => { 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); + const findEventIcon = () => findDesignEvent().findComponent(GlIcon); + const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon); function createComponent({ notesCount = 0, @@ -74,7 +74,7 @@ describe('Design management list item component', () => { beforeEach(async () => { createComponent(); image = wrapper.find('img'); - glIntersectionObserver = wrapper.find(GlIntersectionObserver); + glIntersectionObserver = wrapper.findComponent(GlIntersectionObserver); glIntersectionObserver.vm.$emit('appear'); await nextTick(); @@ -86,7 +86,7 @@ describe('Design management list item component', () => { describe('before image is loaded', () => { it('renders loading spinner', () => { - expect(wrapper.find(GlLoadingIcon).exists()).toBe(true); + expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true); }); }); @@ -105,7 +105,7 @@ describe('Design management list item component', () => { image.trigger('error'); await nextTick(); expect(image.isVisible()).toBe(false); - expect(wrapper.find(GlIcon).element).toMatchSnapshot(); + expect(wrapper.findComponent(GlIcon).element).toMatchSnapshot(); }); describe('when imageV432x230 and image provided', () => { diff --git a/spec/frontend/design_management/components/toolbar/index_spec.js b/spec/frontend/design_management/components/toolbar/index_spec.js index 412f3de911e..b6137ba2eee 100644 --- a/spec/frontend/design_management/components/toolbar/index_spec.js +++ b/spec/frontend/design_management/components/toolbar/index_spec.js @@ -85,35 +85,35 @@ describe('Design management toolbar component', () => { createComponent(); await nextTick(); - expect(wrapper.find(DeleteButton).exists()).toBe(true); + expect(wrapper.findComponent(DeleteButton).exists()).toBe(true); }); it('does not render delete button on non-latest version', async () => { createComponent(false, true, { isLatestVersion: false }); await nextTick(); - expect(wrapper.find(DeleteButton).exists()).toBe(false); + expect(wrapper.findComponent(DeleteButton).exists()).toBe(false); }); it('does not render delete button when user is not logged in', async () => { createComponent(false, false); await nextTick(); - expect(wrapper.find(DeleteButton).exists()).toBe(false); + expect(wrapper.findComponent(DeleteButton).exists()).toBe(false); }); it('emits `delete` event on deleteButton `delete-selected-designs` event', async () => { createComponent(); await nextTick(); - wrapper.find(DeleteButton).vm.$emit('delete-selected-designs'); + wrapper.findComponent(DeleteButton).vm.$emit('delete-selected-designs'); expect(wrapper.emitted().delete).toBeTruthy(); }); it('renders download button with correct link', () => { createComponent(); - expect(wrapper.find(GlButton).attributes('href')).toBe( + expect(wrapper.findComponent(GlButton).attributes('href')).toBe( '/-/designs/306/7f747adcd4693afadbe968d7ba7d983349b9012d', ); }); diff --git a/spec/frontend/design_management/components/upload/button_spec.js b/spec/frontend/design_management/components/upload/button_spec.js index d123db43ce6..59821218ab8 100644 --- a/spec/frontend/design_management/components/upload/button_spec.js +++ b/spec/frontend/design_management/components/upload/button_spec.js @@ -34,7 +34,7 @@ describe('Design management upload button component', () => { it('Button `loading` prop is `true`', () => { createComponent({ isSaving: true }); - const button = wrapper.find(GlButton); + const button = wrapper.findComponent(GlButton); expect(button.exists()).toBe(true); expect(button.props('loading')).toBe(true); }); 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 ec5db04bb80..7c26ab9739b 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 @@ -46,7 +46,7 @@ describe('Design management design version dropdown component', () => { wrapper.destroy(); }); - const findVersionLink = (index) => wrapper.findAll(GlDropdownItem).at(index); + const findVersionLink = (index) => wrapper.findAllComponents(GlDropdownItem).at(index); it('renders design version dropdown button', async () => { createComponent(); @@ -76,35 +76,35 @@ describe('Design management design version dropdown component', () => { createComponent(); await nextTick(); - expect(wrapper.find(GlDropdown).attributes('text')).toBe('Showing latest version'); + expect(wrapper.findComponent(GlDropdown).attributes('text')).toBe('Showing latest version'); }); it('displays latest version text when only 1 version is present', async () => { createComponent({ maxVersions: 1 }); await nextTick(); - expect(wrapper.find(GlDropdown).attributes('text')).toBe('Showing latest version'); + expect(wrapper.findComponent(GlDropdown).attributes('text')).toBe('Showing latest version'); }); it('displays version text when the current version is not the latest', async () => { createComponent({ $route: designRouteFactory(PREVIOUS_VERSION_ID) }); await nextTick(); - expect(wrapper.find(GlDropdown).attributes('text')).toBe(`Showing version #1`); + expect(wrapper.findComponent(GlDropdown).attributes('text')).toBe(`Showing version #1`); }); it('displays latest version text when the current version is the latest', async () => { createComponent({ $route: designRouteFactory(LATEST_VERSION_ID) }); await nextTick(); - expect(wrapper.find(GlDropdown).attributes('text')).toBe('Showing latest version'); + expect(wrapper.findComponent(GlDropdown).attributes('text')).toBe('Showing latest version'); }); it('should have the same length as apollo query', async () => { createComponent(); await nextTick(); - expect(wrapper.findAll(GlDropdownItem)).toHaveLength(wrapper.vm.allVersions.length); + expect(wrapper.findAllComponents(GlDropdownItem)).toHaveLength(wrapper.vm.allVersions.length); }); it('should render TimeAgo', async () => { diff --git a/spec/frontend/design_management/pages/design/index_spec.js b/spec/frontend/design_management/pages/design/index_spec.js index 17a299c5de1..774e37a8b21 100644 --- a/spec/frontend/design_management/pages/design/index_spec.js +++ b/spec/frontend/design_management/pages/design/index_spec.js @@ -85,9 +85,9 @@ describe('Design management design index page', () => { let wrapper; let router; - const findDiscussionForm = () => wrapper.find(DesignReplyForm); - const findSidebar = () => wrapper.find(DesignSidebar); - const findDesignPresentation = () => wrapper.find(DesignPresentation); + const findDiscussionForm = () => wrapper.findComponent(DesignReplyForm); + const findSidebar = () => wrapper.findComponent(DesignSidebar); + const findDesignPresentation = () => wrapper.findComponent(DesignPresentation); function createComponent( { loading = false } = {}, @@ -181,15 +181,15 @@ describe('Design management design index page', () => { it('sets loading state', () => { createComponent({ loading: true }); - expect(wrapper.find(DesignPresentation).props('isLoading')).toBe(true); - expect(wrapper.find(DesignSidebar).props('isLoading')).toBe(true); + expect(wrapper.findComponent(DesignPresentation).props('isLoading')).toBe(true); + expect(wrapper.findComponent(DesignSidebar).props('isLoading')).toBe(true); }); it('renders design index', () => { createComponent({ loading: false }, { data: { design } }); expect(wrapper.element).toMatchSnapshot(); - expect(wrapper.find(GlAlert).exists()).toBe(false); + expect(wrapper.findComponent(GlAlert).exists()).toBe(false); }); it('passes correct props to sidebar component', () => { diff --git a/spec/frontend/design_management/pages/index_spec.js b/spec/frontend/design_management/pages/index_spec.js index 21be7bd148b..f90feaadfb0 100644 --- a/spec/frontend/design_management/pages/index_spec.js +++ b/spec/frontend/design_management/pages/index_spec.js @@ -111,8 +111,8 @@ describe('Design management index page', () => { const findDropzoneWrapper = () => wrapper.findByTestId('design-dropzone-wrapper'); const findFirstDropzoneWithDesign = () => wrapper.findAllComponents(DesignDropzone).at(1); const findDesignsWrapper = () => wrapper.findByTestId('designs-root'); - const findDesigns = () => wrapper.findAll(Design); - const draggableAttributes = () => wrapper.find(VueDraggable).vm.$attrs; + const findDesigns = () => wrapper.findAllComponents(Design); + const draggableAttributes = () => wrapper.findComponent(VueDraggable).vm.$attrs; const findDesignUploadButton = () => wrapper.findByTestId('design-upload-button'); const findDesignToolbarWrapper = () => wrapper.findByTestId('design-toolbar-wrapper'); const findDesignUpdateAlert = () => wrapper.findByTestId('design-update-alert'); @@ -120,8 +120,8 @@ describe('Design management index page', () => { async function moveDesigns(localWrapper) { await waitForPromises(); - localWrapper.find(VueDraggable).vm.$emit('input', reorderedDesigns); - localWrapper.find(VueDraggable).vm.$emit('change', { + localWrapper.findComponent(VueDraggable).vm.$emit('input', reorderedDesigns); + localWrapper.findComponent(VueDraggable).vm.$emit('change', { moved: { newIndex: 0, element: designToMove, @@ -369,7 +369,7 @@ describe('Design management index page', () => { findDropzone().vm.$emit('change', [{ name: 'test' }]); expect(mutate).toHaveBeenCalledWith(mutationVariables); expect(wrapper.vm.filesToBeSaved).toEqual([{ name: 'test' }]); - expect(wrapper.vm.isSaving).toBeTruthy(); + expect(wrapper.vm.isSaving).toBe(true); expect(dropzoneClasses()).toContain('design-list-item'); expect(dropzoneClasses()).toContain('design-list-item-new'); }); @@ -399,7 +399,7 @@ describe('Design management index page', () => { await nextTick(); expect(wrapper.vm.filesToBeSaved).toEqual([]); - expect(wrapper.vm.isSaving).toBeFalsy(); + expect(wrapper.vm.isSaving).toBe(false); expect(wrapper.vm.isLatestVersion).toBe(true); }); @@ -412,7 +412,7 @@ describe('Design management index page', () => { wrapper.vm.onUploadDesignError(); await nextTick(); expect(wrapper.vm.filesToBeSaved).toEqual([]); - expect(wrapper.vm.isSaving).toBeFalsy(); + expect(wrapper.vm.isSaving).toBe(false); expect(findDesignUpdateAlert().exists()).toBe(true); expect(findDesignUpdateAlert().text()).toBe(UPLOAD_DESIGN_ERROR); }); diff --git a/spec/frontend/design_management/router_spec.js b/spec/frontend/design_management/router_spec.js index b9c62334223..b9edde559c8 100644 --- a/spec/frontend/design_management/router_spec.js +++ b/spec/frontend/design_management/router_spec.js @@ -44,7 +44,7 @@ describe('Design management router', () => { it('pushes home component', () => { const wrapper = factory(routeArg); - expect(wrapper.find(Designs).exists()).toBe(true); + expect(wrapper.findComponent(Designs).exists()).toBe(true); }); }); @@ -55,7 +55,7 @@ describe('Design management router', () => { const wrapper = factory(routeArg); return nextTick().then(() => { - const detail = wrapper.find(DesignDetail); + const detail = wrapper.findComponent(DesignDetail); expect(detail.exists()).toBe(true); expect(detail.props('id')).toEqual('1'); }); |