diff options
Diffstat (limited to 'spec/frontend/static_site_editor/components')
11 files changed, 0 insertions, 968 deletions
diff --git a/spec/frontend/static_site_editor/components/app_spec.js b/spec/frontend/static_site_editor/components/app_spec.js deleted file mode 100644 index bbdffeae68f..00000000000 --- a/spec/frontend/static_site_editor/components/app_spec.js +++ /dev/null @@ -1,34 +0,0 @@ -import { shallowMount } from '@vue/test-utils'; -import App from '~/static_site_editor/components/app.vue'; - -describe('static_site_editor/components/app', () => { - const mergeRequestsIllustrationPath = 'illustrations/merge_requests.svg'; - const RouterView = { - template: '<div></div>', - }; - let wrapper; - - const buildWrapper = () => { - wrapper = shallowMount(App, { - stubs: { - RouterView, - }, - propsData: { - mergeRequestsIllustrationPath, - }, - }); - }; - - afterEach(() => { - wrapper.destroy(); - wrapper = null; - }); - - it('passes merge request illustration path to the router view component', () => { - buildWrapper(); - - expect(wrapper.find(RouterView).attributes()).toMatchObject({ - 'merge-requests-illustration-path': mergeRequestsIllustrationPath, - }); - }); -}); diff --git a/spec/frontend/static_site_editor/components/edit_area_spec.js b/spec/frontend/static_site_editor/components/edit_area_spec.js deleted file mode 100644 index a833fd9ff9e..00000000000 --- a/spec/frontend/static_site_editor/components/edit_area_spec.js +++ /dev/null @@ -1,264 +0,0 @@ -import { shallowMount } from '@vue/test-utils'; -import { nextTick } from 'vue'; -import { stubComponent } from 'helpers/stub_component'; - -import EditArea from '~/static_site_editor/components/edit_area.vue'; -import EditDrawer from '~/static_site_editor/components/edit_drawer.vue'; -import EditHeader from '~/static_site_editor/components/edit_header.vue'; -import PublishToolbar from '~/static_site_editor/components/publish_toolbar.vue'; -import UnsavedChangesConfirmDialog from '~/static_site_editor/components/unsaved_changes_confirm_dialog.vue'; -import { EDITOR_TYPES } from '~/static_site_editor/rich_content_editor/constants'; -import RichContentEditor from '~/static_site_editor/rich_content_editor/rich_content_editor.vue'; - -import { - sourceContentTitle as title, - sourceContentYAML as content, - sourceContentHeaderObjYAML as headerSettings, - sourceContentBody as body, - returnUrl, - mounts, - project, - branch, - baseUrl, - imageRoot, -} from '../mock_data'; - -jest.mock('~/static_site_editor/services/formatter', () => jest.fn((str) => `${str} format-pass`)); - -describe('~/static_site_editor/components/edit_area.vue', () => { - let wrapper; - const formattedBody = `${body} format-pass`; - const savingChanges = true; - const newBody = `new ${body}`; - - const RichContentEditorStub = stubComponent(RichContentEditor, { - methods: { - resetInitialValue: jest.fn(), - }, - }); - - const buildWrapper = (propsData = {}) => { - wrapper = shallowMount(EditArea, { - propsData: { - title, - content, - returnUrl, - mounts, - project, - branch, - baseUrl, - imageRoot, - savingChanges, - ...propsData, - }, - stubs: { RichContentEditor: RichContentEditorStub }, - }); - }; - - const findEditHeader = () => wrapper.find(EditHeader); - const findEditDrawer = () => wrapper.find(EditDrawer); - const findRichContentEditor = () => wrapper.find(RichContentEditor); - const findPublishToolbar = () => wrapper.find(PublishToolbar); - const findUnsavedChangesConfirmDialog = () => wrapper.find(UnsavedChangesConfirmDialog); - - beforeEach(() => { - buildWrapper(); - }); - - afterEach(() => { - wrapper.destroy(); - wrapper = null; - }); - - it('renders edit header', () => { - expect(findEditHeader().exists()).toBe(true); - expect(findEditHeader().props('title')).toBe(title); - }); - - it('renders edit drawer', () => { - expect(findEditDrawer().exists()).toBe(true); - }); - - it('renders rich content editor with a format pass', () => { - expect(findRichContentEditor().exists()).toBe(true); - expect(findRichContentEditor().props('content')).toBe(formattedBody); - }); - - it('renders publish toolbar', () => { - expect(findPublishToolbar().exists()).toBe(true); - expect(findPublishToolbar().props()).toMatchObject({ - returnUrl, - savingChanges, - saveable: false, - }); - }); - - it('renders unsaved changes confirm dialog', () => { - expect(findUnsavedChangesConfirmDialog().exists()).toBe(true); - expect(findUnsavedChangesConfirmDialog().props('modified')).toBe(false); - }); - - describe('when content changes', () => { - beforeEach(() => { - findRichContentEditor().vm.$emit('input', newBody); - - return nextTick(); - }); - - it('updates parsedSource with new content', () => { - const newContent = 'New content'; - const spySyncParsedSource = jest.spyOn(wrapper.vm.parsedSource, 'syncContent'); - - findRichContentEditor().vm.$emit('input', newContent); - - expect(spySyncParsedSource).toHaveBeenCalledWith(newContent, true); - }); - - it('sets publish toolbar as saveable', () => { - expect(findPublishToolbar().props('saveable')).toBe(true); - }); - - it('sets unsaved changes confirm dialog as modified', () => { - expect(findUnsavedChangesConfirmDialog().props('modified')).toBe(true); - }); - - it('sets publish toolbar as not saveable when content changes are rollback', async () => { - findRichContentEditor().vm.$emit('input', formattedBody); - - await nextTick(); - expect(findPublishToolbar().props('saveable')).toBe(false); - }); - }); - - describe('when the mode changes', () => { - const setInitialMode = (mode) => { - // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details - // eslint-disable-next-line no-restricted-syntax - wrapper.setData({ editorMode: mode }); - }; - - afterEach(() => { - setInitialMode(EDITOR_TYPES.wysiwyg); - }); - - it.each` - initialMode | targetMode | resetValue - ${EDITOR_TYPES.wysiwyg} | ${EDITOR_TYPES.markdown} | ${`${content} format-pass format-pass`} - ${EDITOR_TYPES.markdown} | ${EDITOR_TYPES.wysiwyg} | ${`${body} format-pass format-pass`} - `( - 'sets editorMode from $initialMode to $targetMode', - ({ initialMode, targetMode, resetValue }) => { - setInitialMode(initialMode); - - findRichContentEditor().vm.$emit('modeChange', targetMode); - - expect(RichContentEditorStub.methods.resetInitialValue).toHaveBeenCalledWith(resetValue); - expect(wrapper.vm.editorMode).toBe(targetMode); - }, - ); - - it('should format the content', () => { - findRichContentEditor().vm.$emit('modeChange', EDITOR_TYPES.markdown); - - expect(RichContentEditorStub.methods.resetInitialValue).toHaveBeenCalledWith( - `${content} format-pass format-pass`, - ); - }); - }); - - describe('when content has front matter', () => { - it('renders a closed edit drawer', () => { - expect(findEditDrawer().exists()).toBe(true); - expect(findEditDrawer().props('isOpen')).toBe(false); - }); - - it('opens the edit drawer', async () => { - findPublishToolbar().vm.$emit('editSettings'); - - await nextTick(); - expect(findEditDrawer().props('isOpen')).toBe(true); - }); - - it('closes the edit drawer', async () => { - findEditDrawer().vm.$emit('close'); - - await nextTick(); - expect(findEditDrawer().props('isOpen')).toBe(false); - }); - - it('forwards the matter settings when the drawer is open', async () => { - findPublishToolbar().vm.$emit('editSettings'); - - jest.spyOn(wrapper.vm.parsedSource, 'matter').mockReturnValueOnce(headerSettings); - - await nextTick(); - expect(findEditDrawer().props('settings')).toEqual(headerSettings); - }); - - it('enables toolbar submit button', () => { - expect(findPublishToolbar().props('hasSettings')).toBe(true); - }); - - it('syncs matter changes regardless of edit mode', () => { - const newSettings = { title: 'test' }; - const spySyncParsedSource = jest.spyOn(wrapper.vm.parsedSource, 'syncMatter'); - - findEditDrawer().vm.$emit('updateSettings', newSettings); - - expect(spySyncParsedSource).toHaveBeenCalledWith(newSettings); - }); - - it('syncs matter changes to content in markdown mode', async () => { - // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details - // eslint-disable-next-line no-restricted-syntax - wrapper.setData({ editorMode: EDITOR_TYPES.markdown }); - - const newSettings = { title: 'test' }; - - findEditDrawer().vm.$emit('updateSettings', newSettings); - - await nextTick(); - expect(findRichContentEditor().props('content')).toContain('title: test'); - }); - }); - - describe('when content lacks front matter', () => { - beforeEach(() => { - buildWrapper({ content: body }); - }); - - afterEach(() => { - wrapper.destroy(); - }); - - it('does not render edit drawer', () => { - expect(findEditDrawer().exists()).toBe(false); - }); - - it('does not enable toolbar submit button', () => { - expect(findPublishToolbar().props('hasSettings')).toBe(false); - }); - }); - - describe('when content is submitted', () => { - it('should format the content', () => { - findPublishToolbar().vm.$emit('submit', content); - - expect(wrapper.emitted('submit')[0][0].content).toBe(`${content} format-pass format-pass`); - expect(wrapper.emitted('submit').length).toBe(1); - }); - }); - - describe('when RichContentEditor component triggers load event', () => { - it('stores formatted markdown provided in the event data', () => { - const data = { formattedMarkdown: 'formatted markdown' }; - - findRichContentEditor().vm.$emit('load', data); - - // We can access the formatted markdown when submitting changes - findPublishToolbar().vm.$emit('submit'); - - expect(wrapper.emitted('submit')[0][0]).toMatchObject(data); - }); - }); -}); diff --git a/spec/frontend/static_site_editor/components/edit_drawer_spec.js b/spec/frontend/static_site_editor/components/edit_drawer_spec.js deleted file mode 100644 index 402dfe441c5..00000000000 --- a/spec/frontend/static_site_editor/components/edit_drawer_spec.js +++ /dev/null @@ -1,67 +0,0 @@ -import { GlDrawer } from '@gitlab/ui'; -import { shallowMount } from '@vue/test-utils'; - -import EditDrawer from '~/static_site_editor/components/edit_drawer.vue'; -import FrontMatterControls from '~/static_site_editor/components/front_matter_controls.vue'; - -describe('~/static_site_editor/components/edit_drawer.vue', () => { - let wrapper; - - const buildWrapper = (propsData = {}) => { - wrapper = shallowMount(EditDrawer, { - propsData: { - isOpen: false, - settings: { title: 'Some title' }, - ...propsData, - }, - }); - }; - - const findFrontMatterControls = () => wrapper.find(FrontMatterControls); - const findGlDrawer = () => wrapper.find(GlDrawer); - - beforeEach(() => { - buildWrapper(); - }); - - afterEach(() => { - wrapper.destroy(); - wrapper = null; - }); - - it('renders the GlDrawer', () => { - expect(findGlDrawer().exists()).toBe(true); - }); - - it('renders the FrontMatterControls', () => { - expect(findFrontMatterControls().exists()).toBe(true); - }); - - it('forwards the settings to FrontMatterControls', () => { - expect(findFrontMatterControls().props('settings')).toBe(wrapper.props('settings')); - }); - - it('is closed by default', () => { - expect(findGlDrawer().props('open')).toBe(false); - }); - - it('can open', () => { - buildWrapper({ isOpen: true }); - - expect(findGlDrawer().props('open')).toBe(true); - }); - - it.each` - event | payload | finderFn - ${'close'} | ${undefined} | ${findGlDrawer} - ${'updateSettings'} | ${{ some: 'data' }} | ${findFrontMatterControls} - `( - 'forwards the emitted $event event from the $finderFn with $payload', - ({ event, payload, finderFn }) => { - finderFn().vm.$emit(event, payload); - - expect(wrapper.emitted(event)[0][0]).toBe(payload); - expect(wrapper.emitted(event).length).toBe(1); - }, - ); -}); diff --git a/spec/frontend/static_site_editor/components/edit_header_spec.js b/spec/frontend/static_site_editor/components/edit_header_spec.js deleted file mode 100644 index 2b0fe226a0b..00000000000 --- a/spec/frontend/static_site_editor/components/edit_header_spec.js +++ /dev/null @@ -1,38 +0,0 @@ -import { shallowMount } from '@vue/test-utils'; - -import EditHeader from '~/static_site_editor/components/edit_header.vue'; -import { DEFAULT_HEADING } from '~/static_site_editor/constants'; - -import { sourceContentTitle } from '../mock_data'; - -describe('~/static_site_editor/components/edit_header.vue', () => { - let wrapper; - - const buildWrapper = (propsData = {}) => { - wrapper = shallowMount(EditHeader, { - propsData: { - ...propsData, - }, - }); - }; - - const findHeading = () => wrapper.find({ ref: 'sseHeading' }); - - beforeEach(() => { - buildWrapper(); - }); - - afterEach(() => { - wrapper.destroy(); - }); - - it('renders the default heading if there is no title prop', () => { - expect(findHeading().text()).toBe(DEFAULT_HEADING); - }); - - it('renders the title prop value in the heading', () => { - buildWrapper({ title: sourceContentTitle }); - - expect(findHeading().text()).toBe(sourceContentTitle); - }); -}); diff --git a/spec/frontend/static_site_editor/components/edit_meta_controls_spec.js b/spec/frontend/static_site_editor/components/edit_meta_controls_spec.js deleted file mode 100644 index f6b29e98e5f..00000000000 --- a/spec/frontend/static_site_editor/components/edit_meta_controls_spec.js +++ /dev/null @@ -1,115 +0,0 @@ -import { GlDropdown, GlDropdownItem, GlFormInput, GlFormTextarea } from '@gitlab/ui'; -import { shallowMount } from '@vue/test-utils'; - -import { nextTick } from 'vue'; -import EditMetaControls from '~/static_site_editor/components/edit_meta_controls.vue'; - -import { mergeRequestMeta, mergeRequestTemplates } from '../mock_data'; - -describe('~/static_site_editor/components/edit_meta_controls.vue', () => { - let wrapper; - let mockSelect; - let mockGlFormInputTitleInstance; - const { title, description } = mergeRequestMeta; - const newTitle = 'New title'; - const newDescription = 'New description'; - - const buildWrapper = (propsData = {}) => { - wrapper = shallowMount(EditMetaControls, { - propsData: { - title, - description, - templates: mergeRequestTemplates, - currentTemplate: null, - ...propsData, - }, - }); - }; - - const buildMocks = () => { - mockSelect = jest.fn(); - mockGlFormInputTitleInstance = { $el: { select: mockSelect } }; - wrapper.vm.$refs.title = mockGlFormInputTitleInstance; - }; - - const findGlFormInputTitle = () => wrapper.find(GlFormInput); - const findGlDropdownDescriptionTemplate = () => wrapper.find(GlDropdown); - const findAllDropdownItems = () => wrapper.findAll(GlDropdownItem); - const findDropdownItemByIndex = (index) => findAllDropdownItems().at(index); - - const findGlFormTextAreaDescription = () => wrapper.find(GlFormTextarea); - - beforeEach(async () => { - buildWrapper(); - buildMocks(); - - await nextTick(); - }); - - afterEach(() => { - wrapper.destroy(); - wrapper = null; - }); - - it('renders the title input', () => { - expect(findGlFormInputTitle().exists()).toBe(true); - }); - - it('renders the description template dropdown', () => { - expect(findGlDropdownDescriptionTemplate().exists()).toBe(true); - }); - - it('renders the description input', () => { - expect(findGlFormTextAreaDescription().exists()).toBe(true); - }); - - it('forwards the title prop to the title input', () => { - expect(findGlFormInputTitle().attributes().value).toBe(title); - }); - - it('forwards the description prop to the description input', () => { - expect(findGlFormTextAreaDescription().attributes().value).toBe(description); - }); - - it('calls select on the title input when mounted', () => { - expect(mockGlFormInputTitleInstance.$el.select).toHaveBeenCalled(); - }); - - it('renders a GlDropdownItem per template plus one (for the starting none option)', () => { - expect(findDropdownItemByIndex(0).text()).toBe('None'); - expect(findAllDropdownItems().length).toBe(mergeRequestTemplates.length + 1); - }); - - describe('when inputs change', () => { - const storageKey = 'sse-merge-request-meta-local-storage-editable'; - - afterEach(() => { - localStorage.removeItem(storageKey); - }); - - it.each` - findFn | key | value - ${findGlFormInputTitle} | ${'title'} | ${newTitle} - ${findGlFormTextAreaDescription} | ${'description'} | ${newDescription} - `('emits updated settings when $findFn input updates', ({ key, value, findFn }) => { - findFn().vm.$emit('input', value); - - const newSettings = { ...mergeRequestMeta, [key]: value }; - - expect(wrapper.emitted('updateSettings')[0][0]).toMatchObject(newSettings); - }); - }); - - describe('when templates change', () => { - it.each` - index | value - ${0} | ${null} - ${1} | ${mergeRequestTemplates[0]} - ${2} | ${mergeRequestTemplates[1]} - `('emits a change template event when $index is clicked', ({ index, value }) => { - findDropdownItemByIndex(index).vm.$emit('click'); - - expect(wrapper.emitted('changeTemplate')[0][0]).toBe(value); - }); - }); -}); diff --git a/spec/frontend/static_site_editor/components/edit_meta_modal_spec.js b/spec/frontend/static_site_editor/components/edit_meta_modal_spec.js deleted file mode 100644 index bf3f8b7f571..00000000000 --- a/spec/frontend/static_site_editor/components/edit_meta_modal_spec.js +++ /dev/null @@ -1,172 +0,0 @@ -import { GlModal } from '@gitlab/ui'; -import { shallowMount } from '@vue/test-utils'; -import MockAdapter from 'axios-mock-adapter'; -import { nextTick } from 'vue'; -import { useLocalStorageSpy } from 'helpers/local_storage_helper'; -import axios from '~/lib/utils/axios_utils'; -import EditMetaControls from '~/static_site_editor/components/edit_meta_controls.vue'; -import EditMetaModal from '~/static_site_editor/components/edit_meta_modal.vue'; -import { MR_META_LOCAL_STORAGE_KEY } from '~/static_site_editor/constants'; -import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue'; -import { - sourcePath, - mergeRequestMeta, - mergeRequestTemplates, - project as namespaceProject, -} from '../mock_data'; - -describe('~/static_site_editor/components/edit_meta_modal.vue', () => { - useLocalStorageSpy(); - - let wrapper; - let mockAxios; - const { title, description } = mergeRequestMeta; - const [namespace, project] = namespaceProject.split('/'); - - const buildWrapper = (propsData = {}, data = {}) => { - wrapper = shallowMount(EditMetaModal, { - propsData: { - sourcePath, - namespace, - project, - ...propsData, - }, - data: () => data, - }); - }; - - const buildMockAxios = () => { - mockAxios = new MockAdapter(axios); - const templatesMergeRequestsPath = `templates/merge_request`; - mockAxios - .onGet(`${namespace}/${project}/${templatesMergeRequestsPath}`) - .reply(200, mergeRequestTemplates); - }; - - const buildMockRefs = () => { - wrapper.vm.$refs.editMetaControls = { resetCachedEditable: jest.fn() }; - }; - - const findGlModal = () => wrapper.find(GlModal); - const findEditMetaControls = () => wrapper.find(EditMetaControls); - const findLocalStorageSync = () => wrapper.find(LocalStorageSync); - - beforeEach(async () => { - localStorage.setItem(MR_META_LOCAL_STORAGE_KEY); - - buildMockAxios(); - buildWrapper(); - buildMockRefs(); - - await nextTick(); - }); - - afterEach(() => { - mockAxios.restore(); - - wrapper.destroy(); - wrapper = null; - }); - - it('initializes initial merge request meta with local storage data', async () => { - const localStorageMeta = { - title: 'stored title', - description: 'stored description', - templates: null, - currentTemplate: null, - }; - - findLocalStorageSync().vm.$emit('input', localStorageMeta); - - await nextTick(); - - expect(findEditMetaControls().props()).toEqual(localStorageMeta); - }); - - it('renders the modal', () => { - expect(findGlModal().exists()).toBe(true); - }); - - it('renders the edit meta controls', () => { - expect(findEditMetaControls().exists()).toBe(true); - }); - - it('contains the sourcePath in the title', () => { - expect(findEditMetaControls().props('title')).toContain(sourcePath); - }); - - it('forwards the title prop', () => { - expect(findEditMetaControls().props('title')).toBe(title); - }); - - it('forwards the description prop', () => { - expect(findEditMetaControls().props('description')).toBe(description); - }); - - it('forwards the templates prop', () => { - expect(findEditMetaControls().props('templates')).toBe(null); - }); - - it('forwards the currentTemplate prop', () => { - expect(findEditMetaControls().props('currentTemplate')).toBe(null); - }); - - describe('when save button is clicked', () => { - beforeEach(() => { - findGlModal().vm.$emit('primary', mergeRequestMeta); - }); - - it('removes merge request meta from local storage', () => { - expect(findLocalStorageSync().props().clear).toBe(true); - }); - - it('emits the primary event with mergeRequestMeta', () => { - expect(wrapper.emitted('primary')).toEqual([[mergeRequestMeta]]); - }); - }); - - describe('when templates exist', () => { - const template1 = mergeRequestTemplates[0]; - - beforeEach(() => { - buildWrapper({}, { templates: mergeRequestTemplates, currentTemplate: null }); - }); - - it('sets the currentTemplate on the changeTemplate event', async () => { - findEditMetaControls().vm.$emit('changeTemplate', template1); - - await nextTick(); - - expect(findEditMetaControls().props().currentTemplate).toBe(template1); - - findEditMetaControls().vm.$emit('changeTemplate', null); - - await nextTick(); - - expect(findEditMetaControls().props().currentTemplate).toBe(null); - }); - - it('updates the description on the changeTemplate event', async () => { - findEditMetaControls().vm.$emit('changeTemplate', template1); - - await nextTick(); - - expect(findEditMetaControls().props().description).toEqual(template1.content); - }); - }); - - it('emits the hide event', () => { - findGlModal().vm.$emit('hide'); - expect(wrapper.emitted('hide')).toEqual([[]]); - }); - - it('stores merge request meta changes in local storage when changes happen', async () => { - const newMeta = { title: 'new title', description: 'new description' }; - - findEditMetaControls().vm.$emit('updateSettings', newMeta); - - await nextTick(); - - expect(findLocalStorageSync().props('value')).toEqual(newMeta); - }); -}); diff --git a/spec/frontend/static_site_editor/components/front_matter_controls_spec.js b/spec/frontend/static_site_editor/components/front_matter_controls_spec.js deleted file mode 100644 index 5fda3b40306..00000000000 --- a/spec/frontend/static_site_editor/components/front_matter_controls_spec.js +++ /dev/null @@ -1,71 +0,0 @@ -import { GlFormGroup } from '@gitlab/ui'; -import { shallowMount } from '@vue/test-utils'; - -import { humanize } from '~/lib/utils/text_utility'; - -import FrontMatterControls from '~/static_site_editor/components/front_matter_controls.vue'; - -import { sourceContentHeaderObjYAML as settings } from '../mock_data'; - -describe('~/static_site_editor/components/front_matter_controls.vue', () => { - let wrapper; - - const buildWrapper = (propsData = {}) => { - wrapper = shallowMount(FrontMatterControls, { - propsData: { - settings, - ...propsData, - }, - }); - }; - - beforeEach(() => { - buildWrapper(); - }); - - afterEach(() => { - wrapper.destroy(); - }); - - it('should render only the supported GlFormGroup types', () => { - expect(wrapper.findAll(GlFormGroup)).toHaveLength(3); - }); - - it.each` - key - ${'layout'} - ${'title'} - ${'twitter_image'} - `('renders field when key is $key', ({ key }) => { - const glFormGroup = wrapper.find(`#sse-front-matter-form-group-${key}`); - const glFormInput = wrapper.find(`#sse-front-matter-control-${key}`); - - expect(glFormGroup.exists()).toBe(true); - expect(glFormGroup.attributes().label).toBe(humanize(key)); - - expect(glFormInput.exists()).toBe(true); - expect(glFormInput.attributes().value).toBe(settings[key]); - }); - - it.each` - key - ${'suppress_header'} - ${'extra_css'} - `('does not render field when key is $key', ({ key }) => { - const glFormInput = wrapper.find(`#sse-front-matter-control-${key}`); - - expect(glFormInput.exists()).toBe(false); - }); - - it('emits updated settings when nested control updates', () => { - const elId = `#sse-front-matter-control-title`; - const glFormInput = wrapper.find(elId); - const newTitle = 'New title'; - - glFormInput.vm.$emit('input', newTitle); - - const newSettings = { ...settings, title: newTitle }; - - expect(wrapper.emitted('updateSettings')[0][0]).toMatchObject(newSettings); - }); -}); diff --git a/spec/frontend/static_site_editor/components/invalid_content_message_spec.js b/spec/frontend/static_site_editor/components/invalid_content_message_spec.js deleted file mode 100644 index 7e699e9451c..00000000000 --- a/spec/frontend/static_site_editor/components/invalid_content_message_spec.js +++ /dev/null @@ -1,23 +0,0 @@ -import { shallowMount } from '@vue/test-utils'; - -import InvalidContentMessage from '~/static_site_editor/components/invalid_content_message.vue'; - -describe('~/static_site_editor/components/invalid_content_message.vue', () => { - let wrapper; - const findDocumentationButton = () => wrapper.find({ ref: 'documentationButton' }); - const documentationUrl = - 'https://gitlab.com/gitlab-org/project-templates/static-site-editor-middleman'; - - beforeEach(() => { - wrapper = shallowMount(InvalidContentMessage); - }); - - afterEach(() => { - wrapper.destroy(); - }); - - it('renders the configuration button link', () => { - expect(findDocumentationButton().exists()).toBe(true); - expect(findDocumentationButton().attributes('href')).toBe(documentationUrl); - }); -}); diff --git a/spec/frontend/static_site_editor/components/publish_toolbar_spec.js b/spec/frontend/static_site_editor/components/publish_toolbar_spec.js deleted file mode 100644 index 9ba7e4a94d1..00000000000 --- a/spec/frontend/static_site_editor/components/publish_toolbar_spec.js +++ /dev/null @@ -1,92 +0,0 @@ -import { shallowMount } from '@vue/test-utils'; - -import PublishToolbar from '~/static_site_editor/components/publish_toolbar.vue'; - -import { returnUrl } from '../mock_data'; - -describe('Static Site Editor Toolbar', () => { - let wrapper; - - const buildWrapper = (propsData = {}) => { - wrapper = shallowMount(PublishToolbar, { - propsData: { - hasSettings: false, - saveable: false, - ...propsData, - }, - }); - }; - - const findReturnUrlLink = () => wrapper.find({ ref: 'returnUrlLink' }); - const findSaveChangesButton = () => wrapper.find({ ref: 'submit' }); - const findEditSettingsButton = () => wrapper.find({ ref: 'settings' }); - - beforeEach(() => { - buildWrapper(); - }); - - afterEach(() => { - wrapper.destroy(); - }); - - it('does not render Settings button', () => { - expect(findEditSettingsButton().exists()).toBe(false); - }); - - it('renders Submit Changes button', () => { - expect(findSaveChangesButton().exists()).toBe(true); - }); - - it('disables Submit Changes button', () => { - expect(findSaveChangesButton().attributes('disabled')).toBe('true'); - }); - - it('does not render the Submit Changes button with a loader', () => { - expect(findSaveChangesButton().props('loading')).toBe(false); - }); - - it('does not render returnUrl link', () => { - expect(findReturnUrlLink().exists()).toBe(false); - }); - - it('renders returnUrl link when returnUrl prop exists', () => { - buildWrapper({ returnUrl }); - - expect(findReturnUrlLink().exists()).toBe(true); - expect(findReturnUrlLink().attributes('href')).toBe(returnUrl); - }); - - describe('when providing settings CTA', () => { - it('enables Submit Changes button', () => { - buildWrapper({ hasSettings: true }); - - expect(findEditSettingsButton().exists()).toBe(true); - }); - }); - - describe('when saveable', () => { - it('enables Submit Changes button', () => { - buildWrapper({ saveable: true }); - - expect(findSaveChangesButton().attributes('disabled')).toBeFalsy(); - }); - }); - - describe('when saving changes', () => { - beforeEach(() => { - buildWrapper({ savingChanges: true }); - }); - - it('renders the Submit Changes button with a loading indicator', () => { - expect(findSaveChangesButton().props('loading')).toBe(true); - }); - }); - - it('emits submit event when submit button is clicked', () => { - buildWrapper({ saveable: true }); - - findSaveChangesButton().vm.$emit('click'); - - expect(wrapper.emitted('submit')).toHaveLength(1); - }); -}); diff --git a/spec/frontend/static_site_editor/components/submit_changes_error_spec.js b/spec/frontend/static_site_editor/components/submit_changes_error_spec.js deleted file mode 100644 index 82a5c5f624a..00000000000 --- a/spec/frontend/static_site_editor/components/submit_changes_error_spec.js +++ /dev/null @@ -1,48 +0,0 @@ -import { GlButton, GlAlert } from '@gitlab/ui'; -import { shallowMount } from '@vue/test-utils'; - -import SubmitChangesError from '~/static_site_editor/components/submit_changes_error.vue'; - -import { submitChangesError as error } from '../mock_data'; - -describe('Submit Changes Error', () => { - let wrapper; - - const buildWrapper = (propsData = {}) => { - wrapper = shallowMount(SubmitChangesError, { - propsData: { - ...propsData, - }, - stubs: { - GlAlert, - }, - }); - }; - - const findRetryButton = () => wrapper.find(GlButton); - const findAlert = () => wrapper.find(GlAlert); - - beforeEach(() => { - buildWrapper({ error }); - }); - - afterEach(() => { - wrapper.destroy(); - }); - - it('renders error message', () => { - expect(findAlert().text()).toContain(error); - }); - - it('emits dismiss event when alert emits dismiss event', () => { - findAlert().vm.$emit('dismiss'); - - expect(wrapper.emitted('dismiss')).toHaveLength(1); - }); - - it('emits retry event when retry button is clicked', () => { - findRetryButton().vm.$emit('click'); - - expect(wrapper.emitted('retry')).toHaveLength(1); - }); -}); diff --git a/spec/frontend/static_site_editor/components/unsaved_changes_confirm_dialog_spec.js b/spec/frontend/static_site_editor/components/unsaved_changes_confirm_dialog_spec.js deleted file mode 100644 index 9b8b22da693..00000000000 --- a/spec/frontend/static_site_editor/components/unsaved_changes_confirm_dialog_spec.js +++ /dev/null @@ -1,44 +0,0 @@ -import { shallowMount } from '@vue/test-utils'; - -import UnsavedChangesConfirmDialog from '~/static_site_editor/components/unsaved_changes_confirm_dialog.vue'; - -describe('static_site_editor/components/unsaved_changes_confirm_dialog', () => { - let wrapper; - let event; - let returnValueSetter; - - const buildWrapper = (propsData = {}) => { - wrapper = shallowMount(UnsavedChangesConfirmDialog, { - propsData, - }); - }; - - beforeEach(() => { - event = new Event('beforeunload'); - - jest.spyOn(event, 'preventDefault'); - returnValueSetter = jest.spyOn(event, 'returnValue', 'set'); - }); - - afterEach(() => { - event.preventDefault.mockRestore(); - returnValueSetter.mockRestore(); - wrapper.destroy(); - }); - - it('displays confirmation dialog when modified = true', () => { - buildWrapper({ modified: true }); - window.dispatchEvent(event); - - expect(event.preventDefault).toHaveBeenCalled(); - expect(returnValueSetter).toHaveBeenCalledWith(''); - }); - - it('does not display confirmation dialog when modified = false', () => { - buildWrapper(); - window.dispatchEvent(event); - - expect(event.preventDefault).not.toHaveBeenCalled(); - expect(returnValueSetter).not.toHaveBeenCalled(); - }); -}); |