2022-01-26 12:08:38 +05:30
import { nextTick } from 'vue' ;
2022-03-02 08:16:31 +05:30
import { GlLoadingIcon , GlModal , GlAlert , GlButton } from '@gitlab/ui' ;
2022-01-26 12:08:38 +05:30
import { mount , shallowMount } from '@vue/test-utils' ;
2021-06-08 01:23:25 +05:30
import axios from 'axios' ;
import MockAdapter from 'axios-mock-adapter' ;
2021-09-04 01:27:46 +05:30
import { mockTracking } from 'helpers/tracking_helper' ;
2021-04-29 21:17:54 +05:30
import { extendedWrapper } from 'helpers/vue_test_utils_helper' ;
2021-06-08 01:23:25 +05:30
import waitForPromises from 'helpers/wait_for_promises' ;
import ContentEditor from '~/content_editor/components/content_editor.vue' ;
2021-04-29 21:17:54 +05:30
import WikiForm from '~/pages/shared/wikis/components/wiki_form.vue' ;
2021-09-04 01:27:46 +05:30
import {
CONTENT _EDITOR _LOADED _ACTION ,
SAVED _USING _CONTENT _EDITOR _ACTION ,
2021-12-11 22:18:48 +05:30
WIKI _CONTENT _EDITOR _TRACKING _LABEL ,
WIKI _FORMAT _LABEL ,
WIKI _FORMAT _UPDATED _ACTION ,
2021-09-04 01:27:46 +05:30
} from '~/pages/shared/wikis/constants' ;
2021-06-08 01:23:25 +05:30
import MarkdownField from '~/vue_shared/components/markdown/field.vue' ;
2021-04-29 21:17:54 +05:30
2021-10-27 15:23:28 +05:30
jest . mock ( '~/emoji' ) ;
2021-04-29 21:17:54 +05:30
describe ( 'WikiForm' , ( ) => {
let wrapper ;
2021-06-08 01:23:25 +05:30
let mock ;
2021-09-04 01:27:46 +05:30
let trackingSpy ;
2021-04-29 21:17:54 +05:30
const findForm = ( ) => wrapper . find ( 'form' ) ;
const findTitle = ( ) => wrapper . find ( '#wiki_title' ) ;
const findFormat = ( ) => wrapper . find ( '#wiki_format' ) ;
const findContent = ( ) => wrapper . find ( '#wiki_content' ) ;
const findMessage = ( ) => wrapper . find ( '#wiki_message' ) ;
const findSubmitButton = ( ) => wrapper . findByTestId ( 'wiki-submit-button' ) ;
2022-03-02 08:16:31 +05:30
const findCancelButton = ( ) => wrapper . findByTestId ( 'wiki-cancel-button' ) ;
const findUseNewEditorButton = ( ) => wrapper . findByText ( 'Use the new editor' ) ;
2022-01-26 12:08:38 +05:30
const findToggleEditingModeButton = ( ) => wrapper . findByTestId ( 'toggle-editing-mode-button' ) ;
2022-03-02 08:16:31 +05:30
const findDismissContentEditorAlertButton = ( ) => wrapper . findByText ( 'Try this later' ) ;
2021-06-08 01:23:25 +05:30
const findSwitchToOldEditorButton = ( ) =>
2021-09-04 01:27:46 +05:30
wrapper . findByRole ( 'button' , { name : 'Switch me back to the classic editor.' } ) ;
2022-03-02 08:16:31 +05:30
const findTitleHelpLink = ( ) => wrapper . findByText ( 'Learn more.' ) ;
2021-04-29 21:17:54 +05:30
const findMarkdownHelpLink = ( ) => wrapper . findByTestId ( 'wiki-markdown-help-link' ) ;
2022-01-26 12:08:38 +05:30
const findContentEditor = ( ) => wrapper . findComponent ( ContentEditor ) ;
const findClassicEditor = ( ) => wrapper . findComponent ( MarkdownField ) ;
2021-04-29 21:17:54 +05:30
2021-06-08 01:23:25 +05:30
const setFormat = ( value ) => {
const format = findFormat ( ) ;
2022-03-02 08:16:31 +05:30
return format . find ( ` option[value= ${ value } ] ` ) . setSelected ( ) ;
2021-06-08 01:23:25 +05:30
} ;
2022-04-04 11:22:00 +05:30
const triggerFormSubmit = async ( ) => {
2022-03-02 08:16:31 +05:30
findForm ( ) . element . dispatchEvent ( new Event ( 'submit' ) ) ;
2022-04-04 11:22:00 +05:30
await nextTick ( ) ;
2022-03-02 08:16:31 +05:30
} ;
2021-06-08 01:23:25 +05:30
const dispatchBeforeUnload = ( ) => {
const e = new Event ( 'beforeunload' ) ;
jest . spyOn ( e , 'preventDefault' ) ;
window . dispatchEvent ( e ) ;
return e ;
} ;
2021-04-29 21:17:54 +05:30
const pageInfoNew = {
persisted : false ,
uploadsPath : '/project/path/-/wikis/attachments' ,
wikiPath : '/project/path/-/wikis' ,
helpPath : '/help/user/project/wiki/index' ,
markdownHelpPath : '/help/user/markdown' ,
markdownPreviewPath : '/project/path/-/wikis/.md/preview-markdown' ,
createPath : '/project/path/-/wikis/new' ,
} ;
const pageInfoPersisted = {
... pageInfoNew ,
persisted : true ,
title : 'My page' ,
2021-09-04 01:27:46 +05:30
content : ' My page content ' ,
2021-04-29 21:17:54 +05:30
format : 'markdown' ,
path : '/project/path/-/wikis/home' ,
} ;
2022-01-26 12:08:38 +05:30
const formatOptions = {
Markdown : 'markdown' ,
RDoc : 'rdoc' ,
AsciiDoc : 'asciidoc' ,
Org : 'org' ,
} ;
2022-03-02 08:16:31 +05:30
function createWrapper ( {
mountFn = shallowMount ,
2022-01-26 12:08:38 +05:30
persisted = false ,
2022-03-02 08:16:31 +05:30
pageInfo ,
glFeatures = { wikiSwitchBetweenContentEditorRawMarkdown : false } ,
} = { } ) {
2022-01-26 12:08:38 +05:30
wrapper = extendedWrapper (
2022-03-02 08:16:31 +05:30
mountFn ( WikiForm , {
2022-01-26 12:08:38 +05:30
provide : {
formatOptions ,
glFeatures ,
pageInfo : {
... ( persisted ? pageInfoPersisted : pageInfoNew ) ,
... pageInfo ,
} ,
} ,
stubs : {
MarkdownField ,
2022-03-02 08:16:31 +05:30
GlAlert ,
GlButton ,
2022-01-26 12:08:38 +05:30
} ,
} ) ,
) ;
2022-03-02 08:16:31 +05:30
}
2022-01-26 12:08:38 +05:30
2021-06-08 01:23:25 +05:30
beforeEach ( ( ) => {
2021-09-04 01:27:46 +05:30
trackingSpy = mockTracking ( undefined , null , jest . spyOn ) ;
2021-06-08 01:23:25 +05:30
mock = new MockAdapter ( axios ) ;
} ) ;
2021-04-29 21:17:54 +05:30
afterEach ( ( ) => {
2021-06-08 01:23:25 +05:30
mock . restore ( ) ;
2021-04-29 21:17:54 +05:30
wrapper . destroy ( ) ;
wrapper = null ;
} ) ;
it . each `
title | persisted | message
$ { 'my page' } | $ { false } | $ { 'Create my page' }
$ { 'my-page' } | $ { false } | $ { 'Create my page' }
$ { 'somedir/my-page' } | $ { false } | $ { 'Create somedir/my page' }
$ { 'my-page' } | $ { true } | $ { 'Update my page' }
` (
'updates the commit message to $message when title is $title and persisted=$persisted' ,
async ( { title , message , persisted } ) => {
2022-03-02 08:16:31 +05:30
createWrapper ( { persisted } ) ;
2021-04-29 21:17:54 +05:30
2022-03-02 08:16:31 +05:30
await findTitle ( ) . setValue ( title ) ;
2021-04-29 21:17:54 +05:30
expect ( findMessage ( ) . element . value ) . toBe ( message ) ;
} ,
) ;
it ( 'sets the commit message to "Update My page" when the page first loads when persisted' , async ( ) => {
2022-03-02 08:16:31 +05:30
createWrapper ( { persisted : true } ) ;
2021-04-29 21:17:54 +05:30
2022-03-02 08:16:31 +05:30
await nextTick ( ) ;
2021-04-29 21:17:54 +05:30
expect ( findMessage ( ) . element . value ) . toBe ( 'Update My page' ) ;
} ) ;
2021-09-04 01:27:46 +05:30
it ( 'does not trim page content by default' , ( ) => {
2022-03-02 08:16:31 +05:30
createWrapper ( { persisted : true } ) ;
2021-09-04 01:27:46 +05:30
expect ( findContent ( ) . element . value ) . toBe ( ' My page content ' ) ;
} ) ;
2021-04-29 21:17:54 +05:30
it . each `
value | text
$ { 'markdown' } | $ { '[Link Title](page-slug)' }
$ { 'rdoc' } | $ { '{Link title}[link:page-slug]' }
$ { 'asciidoc' } | $ { 'link:page-slug[Link title]' }
$ { 'org' } | $ { '[[page-slug]]' }
` ('updates the link help message when format= $ value is selected', async ({ value, text }) => {
2022-03-02 08:16:31 +05:30
createWrapper ( { mountFn : mount } ) ;
2021-04-29 21:17:54 +05:30
2022-03-02 08:16:31 +05:30
await setFormat ( value ) ;
2021-04-29 21:17:54 +05:30
expect ( wrapper . text ( ) ) . toContain ( text ) ;
} ) ;
2022-03-02 08:16:31 +05:30
it ( 'starts with no unload warning' , ( ) => {
2021-04-29 21:17:54 +05:30
createWrapper ( ) ;
2021-06-08 01:23:25 +05:30
const e = dispatchBeforeUnload ( ) ;
expect ( typeof e . returnValue ) . not . toBe ( 'string' ) ;
expect ( e . preventDefault ) . not . toHaveBeenCalled ( ) ;
2021-04-29 21:17:54 +05:30
} ) ;
it . each `
persisted | titleHelpText | titleHelpLink
$ { true } | $ { 'You can move this page by adding the path to the beginning of the title.' } | $ { '/help/user/project/wiki/index#move-a-wiki-page' }
$ { false } | $ { 'You can specify the full path for the new file. We will automatically create any missing directories.' } | $ { '/help/user/project/wiki/index#create-a-new-wiki-page' }
` (
'shows appropriate title help text and help link for when persisted=$persisted' ,
2022-03-02 08:16:31 +05:30
( { persisted , titleHelpLink , titleHelpText } ) => {
createWrapper ( { persisted } ) ;
2021-04-29 21:17:54 +05:30
expect ( wrapper . text ( ) ) . toContain ( titleHelpText ) ;
2021-12-11 22:18:48 +05:30
expect ( findTitleHelpLink ( ) . attributes ( ) . href ) . toBe ( titleHelpLink ) ;
2021-04-29 21:17:54 +05:30
} ,
) ;
2022-03-02 08:16:31 +05:30
it ( 'shows correct link for wiki specific markdown docs' , ( ) => {
createWrapper ( { mountFn : mount } ) ;
2021-04-29 21:17:54 +05:30
2021-12-11 22:18:48 +05:30
expect ( findMarkdownHelpLink ( ) . attributes ( ) . href ) . toBe (
2021-04-29 21:17:54 +05:30
'/help/user/markdown#wiki-specific-markdown' ,
) ;
} ) ;
describe ( 'when wiki content is updated' , ( ) => {
2022-01-26 12:08:38 +05:30
beforeEach ( async ( ) => {
2022-03-02 08:16:31 +05:30
createWrapper ( { mountFn : mount , persisted : true } ) ;
2021-04-29 21:17:54 +05:30
const input = findContent ( ) ;
2022-03-02 08:16:31 +05:30
await input . setValue ( ' Lorem ipsum dolar sit! ' ) ;
2021-04-29 21:17:54 +05:30
} ) ;
it ( 'sets before unload warning' , ( ) => {
2021-06-08 01:23:25 +05:30
const e = dispatchBeforeUnload ( ) ;
2021-04-29 21:17:54 +05:30
2021-06-08 01:23:25 +05:30
expect ( e . preventDefault ) . toHaveBeenCalledTimes ( 1 ) ;
2021-04-29 21:17:54 +05:30
} ) ;
2021-09-04 01:27:46 +05:30
describe ( 'form submit' , ( ) => {
beforeEach ( async ( ) => {
2022-03-02 08:16:31 +05:30
await triggerFormSubmit ( ) ;
2021-09-04 01:27:46 +05:30
} ) ;
2021-04-29 21:17:54 +05:30
2022-03-02 08:16:31 +05:30
it ( 'when form submitted, unsets before unload warning' , ( ) => {
2021-09-04 01:27:46 +05:30
const e = dispatchBeforeUnload ( ) ;
expect ( e . preventDefault ) . not . toHaveBeenCalled ( ) ;
} ) ;
2022-03-02 08:16:31 +05:30
it ( 'triggers wiki format tracking event' , ( ) => {
2021-12-11 22:18:48 +05:30
expect ( trackingSpy ) . toHaveBeenCalledTimes ( 1 ) ;
2021-09-04 01:27:46 +05:30
} ) ;
it ( 'does not trim page content' , ( ) => {
expect ( findContent ( ) . element . value ) . toBe ( ' Lorem ipsum dolar sit! ' ) ;
} ) ;
2021-04-29 21:17:54 +05:30
} ) ;
} ) ;
describe ( 'submit button state' , ( ) => {
it . each `
title | content | buttonState | disabledAttr
2022-03-02 08:16:31 +05:30
$ { 'something' } | $ { 'something' } | $ { 'enabled' } | $ { false }
$ { '' } | $ { 'something' } | $ { 'disabled' } | $ { true }
$ { 'something' } | $ { '' } | $ { 'disabled' } | $ { true }
$ { '' } | $ { '' } | $ { 'disabled' } | $ { true }
$ { ' ' } | $ { ' ' } | $ { 'disabled' } | $ { true }
2021-04-29 21:17:54 +05:30
` (
"when title='$title', content='$content', then the button is $buttonState'" ,
async ( { title , content , disabledAttr } ) => {
createWrapper ( ) ;
2022-03-02 08:16:31 +05:30
await findTitle ( ) . setValue ( title ) ;
await findContent ( ) . setValue ( content ) ;
2021-04-29 21:17:54 +05:30
2022-03-02 08:16:31 +05:30
expect ( findSubmitButton ( ) . props ( ) . disabled ) . toBe ( disabledAttr ) ;
2021-04-29 21:17:54 +05:30
} ,
) ;
it . each `
persisted | buttonLabel
$ { true } | $ { 'Save changes' }
$ { false } | $ { 'Create page' }
` ('when persisted= $ persisted, label is set to $ buttonLabel', ({ persisted, buttonLabel }) => {
2022-03-02 08:16:31 +05:30
createWrapper ( { persisted } ) ;
2021-04-29 21:17:54 +05:30
expect ( findSubmitButton ( ) . text ( ) ) . toBe ( buttonLabel ) ;
} ) ;
} ) ;
describe ( 'cancel button state' , ( ) => {
it . each `
persisted | redirectLink
$ { false } | $ { '/project/path/-/wikis' }
$ { true } | $ { '/project/path/-/wikis/home' }
` (
'when persisted=$persisted, redirects the user to appropriate path' ,
( { persisted , redirectLink } ) => {
2022-03-02 08:16:31 +05:30
createWrapper ( { persisted } ) ;
2021-04-29 21:17:54 +05:30
2021-12-11 22:18:48 +05:30
expect ( findCancelButton ( ) . attributes ( ) . href ) . toBe ( redirectLink ) ;
2021-04-29 21:17:54 +05:30
} ,
) ;
} ) ;
2021-06-08 01:23:25 +05:30
2022-01-26 12:08:38 +05:30
describe ( 'when wikiSwitchBetweenContentEditorRawMarkdown feature flag is not enabled' , ( ) => {
beforeEach ( ( ) => {
2022-03-02 08:16:31 +05:30
createWrapper ( {
2022-01-26 12:08:38 +05:30
glFeatures : { wikiSwitchBetweenContentEditorRawMarkdown : false } ,
} ) ;
} ) ;
it ( 'hides toggle editing mode button' , ( ) => {
expect ( findToggleEditingModeButton ( ) . exists ( ) ) . toBe ( false ) ;
} ) ;
} ) ;
describe ( 'when wikiSwitchBetweenContentEditorRawMarkdown feature flag is enabled' , ( ) => {
beforeEach ( ( ) => {
2022-03-02 08:16:31 +05:30
createWrapper ( {
2022-01-26 12:08:38 +05:30
glFeatures : { wikiSwitchBetweenContentEditorRawMarkdown : true } ,
} ) ;
} ) ;
it ( 'hides gl-alert containing "use new editor" button' , ( ) => {
expect ( findUseNewEditorButton ( ) . exists ( ) ) . toBe ( false ) ;
} ) ;
it ( 'displays toggle editing mode button' , ( ) => {
expect ( findToggleEditingModeButton ( ) . exists ( ) ) . toBe ( true ) ;
} ) ;
describe ( 'when content editor is not active' , ( ) => {
it ( 'displays "Edit rich text" label in the toggle editing mode button' , ( ) => {
expect ( findToggleEditingModeButton ( ) . text ( ) ) . toBe ( 'Edit rich text' ) ;
} ) ;
describe ( 'when clicking the toggle editing mode button' , ( ) => {
beforeEach ( ( ) => {
findToggleEditingModeButton ( ) . vm . $emit ( 'click' ) ;
} ) ;
it ( 'hides the classic editor' , ( ) => {
expect ( findClassicEditor ( ) . exists ( ) ) . toBe ( false ) ;
} ) ;
it ( 'hides the content editor' , ( ) => {
expect ( findContentEditor ( ) . exists ( ) ) . toBe ( true ) ;
} ) ;
} ) ;
} ) ;
describe ( 'when content editor is active' , ( ) => {
let mockContentEditor ;
beforeEach ( ( ) => {
mockContentEditor = {
getSerializedContent : jest . fn ( ) ,
setSerializedContent : jest . fn ( ) ,
} ;
findToggleEditingModeButton ( ) . vm . $emit ( 'click' ) ;
} ) ;
it ( 'hides switch to old editor button' , ( ) => {
expect ( findSwitchToOldEditorButton ( ) . exists ( ) ) . toBe ( false ) ;
} ) ;
it ( 'displays "Edit source" label in the toggle editing mode button' , ( ) => {
expect ( findToggleEditingModeButton ( ) . text ( ) ) . toBe ( 'Edit source' ) ;
} ) ;
describe ( 'when clicking the toggle editing mode button' , ( ) => {
const contentEditorFakeSerializedContent = 'fake content' ;
beforeEach ( ( ) => {
mockContentEditor . getSerializedContent . mockReturnValueOnce (
contentEditorFakeSerializedContent ,
) ;
findContentEditor ( ) . vm . $emit ( 'initialized' , mockContentEditor ) ;
findToggleEditingModeButton ( ) . vm . $emit ( 'click' ) ;
} ) ;
it ( 'hides the content editor' , ( ) => {
expect ( findContentEditor ( ) . exists ( ) ) . toBe ( false ) ;
} ) ;
it ( 'displays the classic editor' , ( ) => {
expect ( findClassicEditor ( ) . exists ( ) ) . toBe ( true ) ;
} ) ;
it ( 'updates the classic editor content field' , ( ) => {
expect ( findContent ( ) . element . value ) . toBe ( contentEditorFakeSerializedContent ) ;
} ) ;
} ) ;
} ) ;
} ) ;
2021-09-04 01:27:46 +05:30
describe ( 'wiki content editor' , ( ) => {
2021-06-08 01:23:25 +05:30
it . each `
format | buttonExists
$ { 'markdown' } | $ { true }
$ { 'rdoc' } | $ { false }
` (
2021-09-04 01:27:46 +05:30
'gl-alert containing "use new editor" button exists: $buttonExists if format is $format' ,
2021-06-08 01:23:25 +05:30
async ( { format , buttonExists } ) => {
2022-03-02 08:16:31 +05:30
createWrapper ( ) ;
2021-06-08 01:23:25 +05:30
2022-03-02 08:16:31 +05:30
await setFormat ( format ) ;
2021-06-08 01:23:25 +05:30
expect ( findUseNewEditorButton ( ) . exists ( ) ) . toBe ( buttonExists ) ;
} ,
) ;
2021-09-04 01:27:46 +05:30
it ( 'gl-alert containing "use new editor" button is dismissed on clicking dismiss button' , async ( ) => {
2022-03-02 08:16:31 +05:30
createWrapper ( ) ;
2021-09-04 01:27:46 +05:30
await findDismissContentEditorAlertButton ( ) . trigger ( 'click' ) ;
expect ( findUseNewEditorButton ( ) . exists ( ) ) . toBe ( false ) ;
} ) ;
2021-06-08 01:23:25 +05:30
const assertOldEditorIsVisible = ( ) => {
2022-01-26 12:08:38 +05:30
expect ( findContentEditor ( ) . exists ( ) ) . toBe ( false ) ;
expect ( findClassicEditor ( ) . exists ( ) ) . toBe ( true ) ;
2021-06-08 01:23:25 +05:30
expect ( findSubmitButton ( ) . props ( 'disabled' ) ) . toBe ( false ) ;
expect ( wrapper . text ( ) ) . not . toContain (
"Switching will discard any changes you've made in the new editor." ,
) ;
expect ( wrapper . text ( ) ) . not . toContain (
"This editor is in beta and may not display the page's contents properly." ,
) ;
} ;
2022-03-02 08:16:31 +05:30
it ( 'shows classic editor by default' , ( ) => {
createWrapper ( { persisted : true } ) ;
assertOldEditorIsVisible ( ) ;
} ) ;
2021-06-08 01:23:25 +05:30
describe ( 'switch format to rdoc' , ( ) => {
beforeEach ( async ( ) => {
2022-03-02 08:16:31 +05:30
createWrapper ( { persisted : true } ) ;
2021-06-08 01:23:25 +05:30
2022-03-02 08:16:31 +05:30
await setFormat ( 'rdoc' ) ;
2021-06-08 01:23:25 +05:30
} ) ;
2021-09-04 01:27:46 +05:30
it ( 'continues to show the classic editor' , assertOldEditorIsVisible ) ;
2021-06-08 01:23:25 +05:30
describe ( 'switch format back to markdown' , ( ) => {
beforeEach ( async ( ) => {
2022-03-02 08:16:31 +05:30
await setFormat ( 'markdown' ) ;
2021-06-08 01:23:25 +05:30
} ) ;
it (
2021-09-04 01:27:46 +05:30
'still shows the classic editor and does not automatically switch to the content editor ' ,
2021-06-08 01:23:25 +05:30
assertOldEditorIsVisible ,
) ;
} ) ;
} ) ;
describe ( 'clicking "use new editor": editor fails to load' , ( ) => {
beforeEach ( async ( ) => {
2022-03-02 08:16:31 +05:30
createWrapper ( { mountFn : mount } ) ;
2021-06-08 01:23:25 +05:30
mock . onPost ( /preview-markdown/ ) . reply ( 400 ) ;
await findUseNewEditorButton ( ) . trigger ( 'click' ) ;
// try waiting for content editor to load (but it will never actually load)
await waitForPromises ( ) ;
} ) ;
it ( 'disables the submit button' , ( ) => {
expect ( findSubmitButton ( ) . props ( 'disabled' ) ) . toBe ( true ) ;
} ) ;
2021-09-04 01:27:46 +05:30
describe ( 'clicking "switch to classic editor"' , ( ) => {
2021-06-08 01:23:25 +05:30
beforeEach ( ( ) => {
return findSwitchToOldEditorButton ( ) . trigger ( 'click' ) ;
} ) ;
2021-09-04 01:27:46 +05:30
it ( 'switches to classic editor directly without showing a modal' , ( ) => {
2021-06-08 01:23:25 +05:30
expect ( wrapper . findComponent ( ContentEditor ) . exists ( ) ) . toBe ( false ) ;
expect ( wrapper . findComponent ( MarkdownField ) . exists ( ) ) . toBe ( true ) ;
} ) ;
} ) ;
} ) ;
describe ( 'clicking "use new editor": editor loads successfully' , ( ) => {
2022-03-02 08:16:31 +05:30
beforeEach ( async ( ) => {
createWrapper ( { persisted : true , mountFn : mount } ) ;
2021-06-08 01:23:25 +05:30
mock . onPost ( /preview-markdown/ ) . reply ( 200 , { body : '<p>hello <strong>world</strong></p>' } ) ;
2022-03-02 08:16:31 +05:30
await findUseNewEditorButton ( ) . trigger ( 'click' ) ;
2021-06-08 01:23:25 +05:30
} ) ;
2021-09-04 01:27:46 +05:30
it ( 'shows a tip to send feedback' , ( ) => {
expect ( wrapper . text ( ) ) . toContain ( 'Tell us your experiences with the new Markdown editor' ) ;
} ) ;
2021-06-08 01:23:25 +05:30
it ( 'shows warnings that the rich text editor is in beta and may not work properly' , ( ) => {
expect ( wrapper . text ( ) ) . toContain (
"This editor is in beta and may not display the page's contents properly." ,
) ;
} ) ;
it ( 'shows the rich text editor when loading finishes' , async ( ) => {
// wait for content editor to load
await waitForPromises ( ) ;
expect ( wrapper . findComponent ( GlLoadingIcon ) . exists ( ) ) . toBe ( false ) ;
expect ( wrapper . findComponent ( ContentEditor ) . exists ( ) ) . toBe ( true ) ;
} ) ;
2021-09-04 01:27:46 +05:30
it ( 'sends tracking event when editor loads' , async ( ) => {
// wait for content editor to load
await waitForPromises ( ) ;
expect ( trackingSpy ) . toHaveBeenCalledWith ( undefined , CONTENT _EDITOR _LOADED _ACTION , {
label : WIKI _CONTENT _EDITOR _TRACKING _LABEL ,
} ) ;
} ) ;
2021-06-08 01:23:25 +05:30
it ( 'disables the format dropdown' , ( ) => {
expect ( findFormat ( ) . element . getAttribute ( 'disabled' ) ) . toBeDefined ( ) ;
} ) ;
describe ( 'when wiki content is updated' , ( ) => {
2022-01-26 12:08:38 +05:30
beforeEach ( ( ) => {
findContentEditor ( ) . vm . $emit ( 'change' , { empty : false } ) ;
2021-06-08 01:23:25 +05:30
} ) ;
it ( 'sets before unload warning' , ( ) => {
const e = dispatchBeforeUnload ( ) ;
expect ( e . preventDefault ) . toHaveBeenCalledTimes ( 1 ) ;
} ) ;
it ( 'unsets before unload warning on form submit' , async ( ) => {
2022-03-02 08:16:31 +05:30
await triggerFormSubmit ( ) ;
2021-06-08 01:23:25 +05:30
const e = dispatchBeforeUnload ( ) ;
expect ( e . preventDefault ) . not . toHaveBeenCalled ( ) ;
} ) ;
2022-03-02 08:16:31 +05:30
it ( 'triggers tracking events on form submit' , async ( ) => {
await triggerFormSubmit ( ) ;
2021-09-04 01:27:46 +05:30
2022-03-02 08:16:31 +05:30
expect ( trackingSpy ) . toHaveBeenCalledWith ( undefined , SAVED _USING _CONTENT _EDITOR _ACTION , {
label : WIKI _CONTENT _EDITOR _TRACKING _LABEL ,
} ) ;
2021-09-04 01:27:46 +05:30
2022-03-02 08:16:31 +05:30
expect ( trackingSpy ) . toHaveBeenCalledWith ( undefined , WIKI _FORMAT _UPDATED _ACTION , {
label : WIKI _FORMAT _LABEL ,
extra : {
value : findFormat ( ) . element . value ,
old _format : pageInfoPersisted . format ,
project _path : pageInfoPersisted . path ,
} ,
} ) ;
2021-09-04 01:27:46 +05:30
} ) ;
2021-12-11 22:18:48 +05:30
2022-03-02 08:16:31 +05:30
it ( 'updates content from content editor on form submit' , async ( ) => {
// old value
expect ( findContent ( ) . element . value ) . toBe ( ' My page content ' ) ;
2021-09-04 01:27:46 +05:30
2022-03-02 08:16:31 +05:30
// wait for content editor to load
await waitForPromises ( ) ;
2021-06-08 01:23:25 +05:30
2022-03-02 08:16:31 +05:30
await triggerFormSubmit ( ) ;
2021-06-08 01:23:25 +05:30
2022-03-02 08:16:31 +05:30
expect ( findContent ( ) . element . value ) . toBe ( 'hello **world**' ) ;
} ) ;
2021-06-08 01:23:25 +05:30
} ) ;
2021-09-04 01:27:46 +05:30
describe ( 'clicking "switch to classic editor"' , ( ) => {
2021-06-08 01:23:25 +05:30
let modal ;
beforeEach ( async ( ) => {
modal = wrapper . findComponent ( GlModal ) ;
jest . spyOn ( modal . vm , 'show' ) ;
findSwitchToOldEditorButton ( ) . trigger ( 'click' ) ;
} ) ;
it ( 'shows a modal confirming the change' , ( ) => {
expect ( modal . vm . show ) . toHaveBeenCalled ( ) ;
} ) ;
2021-09-04 01:27:46 +05:30
describe ( 'confirming "switch to classic editor" in the modal' , ( ) => {
2021-06-08 01:23:25 +05:30
beforeEach ( async ( ) => {
wrapper . vm . contentEditor . tiptapEditor . commands . setContent (
'<p>hello __world__ from content editor</p>' ,
true ,
) ;
wrapper . findComponent ( GlModal ) . vm . $emit ( 'primary' ) ;
2022-04-04 11:22:00 +05:30
await nextTick ( ) ;
2021-06-08 01:23:25 +05:30
} ) ;
2021-09-04 01:27:46 +05:30
it ( 'switches to classic editor' , ( ) => {
2021-06-08 01:23:25 +05:30
expect ( wrapper . findComponent ( ContentEditor ) . exists ( ) ) . toBe ( false ) ;
expect ( wrapper . findComponent ( MarkdownField ) . exists ( ) ) . toBe ( true ) ;
} ) ;
it ( 'does not show a warning about content editor' , ( ) => {
expect ( wrapper . text ( ) ) . not . toContain (
"This editor is in beta and may not display the page's contents properly." ,
) ;
} ) ;
2021-09-04 01:27:46 +05:30
it ( 'the classic editor retains its old value and does not use the content from the content editor' , ( ) => {
expect ( findContent ( ) . element . value ) . toBe ( ' My page content ' ) ;
2021-06-08 01:23:25 +05:30
} ) ;
} ) ;
} ) ;
} ) ;
} ) ;
2021-04-29 21:17:54 +05:30
} ) ;