Add latest changes from gitlab-org/gitlab@master

4 files changed, 223 insertions, 153 deletions

diff --git a/spec/frontend/pages/shared/wikis/wiki_alert_spec.js b/spec/frontend/pages/shared/wikis/components/wiki_alert_spec.js
index 6a18473b1a7..6a18473b1a7 100644
--- a/spec/frontend/pages/shared/wikis/wiki_alert_spec.js
+++ b/spec/frontend/pages/shared/wikis/components/wiki_alert_spec.js
diff --git a/spec/frontend/pages/shared/wikis/components/wiki_form_spec.js b/spec/frontend/pages/shared/wikis/components/wiki_form_spec.js
new file mode 100644
index 00000000000..b18bad1ad9b
--- /dev/null
+++ b/spec/frontend/pages/shared/wikis/components/wiki_form_spec.js
@@ -0,0 +1,222 @@
+import { mount } from '@vue/test-utils';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import WikiForm from '~/pages/shared/wikis/components/wiki_form.vue';
+
+describe('WikiForm', () => {
+  let wrapper;
+
+  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');
+  const findCancelButton = () => wrapper.findByTestId('wiki-cancel-button');
+  const findTitleHelpLink = () => wrapper.findByTestId('wiki-title-help-link');
+  const findMarkdownHelpLink = () => wrapper.findByTestId('wiki-markdown-help-link');
+
+  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',
+    content: 'My page content',
+    format: 'markdown',
+    path: '/project/path/-/wikis/home',
+  };
+
+  function createWrapper(persisted = false, pageInfo = {}) {
+    wrapper = extendedWrapper(
+      mount(
+        WikiForm,
+        {
+          provide: {
+            formatOptions: {
+              Markdown: 'markdown',
+              RDoc: 'rdoc',
+              AsciiDoc: 'asciidoc',
+              Org: 'org',
+            },
+            pageInfo: {
+              ...(persisted ? pageInfoPersisted : pageInfoNew),
+              ...pageInfo,
+            },
+          },
+        },
+        { attachToDocument: true },
+      ),
+    );
+
+    jest.spyOn(wrapper.vm, 'onBeforeUnload');
+  }
+
+  afterEach(() => {
+    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 }) => {
+      createWrapper(persisted);
+
+      findTitle().setValue(title);
+
+      await wrapper.vm.$nextTick();
+
+      expect(findMessage().element.value).toBe(message);
+    },
+  );
+
+  it('sets the commit message to "Update My page" when the page first loads when persisted', async () => {
+    createWrapper(true);
+
+    await wrapper.vm.$nextTick();
+
+    expect(findMessage().element.value).toBe('Update My page');
+  });
+
+  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 }) => {
+    createWrapper();
+
+    findFormat().find(`option[value=${value}]`).setSelected();
+
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.text()).toContain(text);
+  });
+
+  it('starts with no unload warning', async () => {
+    createWrapper();
+
+    await wrapper.vm.$nextTick();
+
+    window.dispatchEvent(new Event('beforeunload'));
+
+    expect(wrapper.vm.onBeforeUnload).not.toHaveBeenCalled();
+  });
+
+  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#moving-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#creating-a-new-wiki-page'}
+  `(
+    'shows appropriate title help text and help link for when persisted=$persisted',
+    async ({ persisted, titleHelpLink, titleHelpText }) => {
+      createWrapper(persisted);
+
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.text()).toContain(titleHelpText);
+      expect(findTitleHelpLink().attributes().href).toEqual(titleHelpLink);
+    },
+  );
+
+  it('shows correct link for wiki specific markdown docs', async () => {
+    createWrapper();
+
+    await wrapper.vm.$nextTick();
+
+    expect(findMarkdownHelpLink().attributes().href).toEqual(
+      '/help/user/markdown#wiki-specific-markdown',
+    );
+  });
+
+  describe('when wiki content is updated', () => {
+    beforeEach(() => {
+      createWrapper();
+
+      const input = findContent();
+      input.setValue('Lorem ipsum dolar sit!');
+      input.element.dispatchEvent(new Event('input'));
+
+      return wrapper.vm.$nextTick();
+    });
+
+    it('sets before unload warning', () => {
+      window.dispatchEvent(new Event('beforeunload'));
+
+      expect(wrapper.vm.onBeforeUnload).toHaveBeenCalled();
+    });
+
+    it('when form submitted, unsets before unload warning', async () => {
+      findForm().element.dispatchEvent(new Event('submit'));
+
+      await wrapper.vm.$nextTick();
+
+      window.dispatchEvent(new Event('beforeunload'));
+
+      expect(wrapper.vm.onBeforeUnload).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('submit button state', () => {
+    it.each`
+      title          | content        | buttonState   | disabledAttr
+      ${'something'} | ${'something'} | ${'enabled'}  | ${undefined}
+      ${''}          | ${'something'} | ${'disabled'} | ${'disabled'}
+      ${'something'} | ${''}          | ${'disabled'} | ${'disabled'}
+      ${''}          | ${''}          | ${'disabled'} | ${'disabled'}
+      ${'   '}       | ${'   '}       | ${'disabled'} | ${'disabled'}
+    `(
+      "when title='$title', content='$content', then the button is $buttonState'",
+      async ({ title, content, disabledAttr }) => {
+        createWrapper();
+
+        findTitle().setValue(title);
+        findContent().setValue(content);
+
+        await wrapper.vm.$nextTick();
+
+        expect(findSubmitButton().attributes().disabled).toBe(disabledAttr);
+      },
+    );
+
+    it.each`
+      persisted | buttonLabel
+      ${true}   | ${'Save changes'}
+      ${false}  | ${'Create page'}
+    `('when persisted=$persisted, label is set to $buttonLabel', ({ persisted, buttonLabel }) => {
+      createWrapper(persisted);
+
+      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 }) => {
+        createWrapper(persisted);
+
+        expect(findCancelButton().attributes().href).toEqual(redirectLink);
+      },
+    );
+  });
+});
diff --git a/spec/frontend/snippets/components/__snapshots__/snippet_description_edit_spec.js.snap b/spec/frontend/snippets/components/__snapshots__/snippet_description_edit_spec.js.snap
index cef5f8cc528..885f42cc065 100644
--- a/spec/frontend/snippets/components/__snapshots__/snippet_description_edit_spec.js.snap
+++ b/spec/frontend/snippets/components/__snapshots__/snippet_description_edit_spec.js.snap
@@ -25,6 +25,7 @@ exports[`Snippet Description Edit component rendering matches the snapshot 1`] =
      
     <div
       class="js-vue-markdown-field md-area position-relative gfm-form js-expanded"
+      data-uploads-path=""
     >
       <markdown-header-stub
         linecontent=""
diff --git a/spec/frontend/wikis_spec.js b/spec/frontend/wikis_spec.js
index c4a2bf1a69a..c4e914bcf34 100644
--- a/spec/frontend/wikis_spec.js
+++ b/spec/frontend/wikis_spec.js
@@ -4,159 +4,6 @@ import Wikis from '~/pages/shared/wikis/wikis';
 import Tracking from '~/tracking';
 
 describe('Wikis', () => {
-  const editFormHtmlFixture = (args) => `<form class="wiki-form ${
-    args.newPage ? 'js-new-wiki-page' : ''
-  }">
-    <input type="text" id="wiki_title" value="My title" />
-    <input type="text" id="wiki_message" />
-    <select class="form-control select-control" name="wiki[format]" id="wiki_format">
-      <option value="markdown">Markdown</option>
-      <option selected="selected" value="rdoc">RDoc</option>
-      <option value="asciidoc">AsciiDoc</option>
-      <option value="org">Org</option>
-    </select>
-    <textarea id="wiki_content"></textarea>
-    <code class="js-markup-link-example">{Link title}[link:page-slug]</code>
-    <input type="submit" class="js-wiki-btn-submit">
-    </input>
-  </form>
-  `;
-
-  let wikis;
-  let titleInput;
-  let contentInput;
-  let messageInput;
-  let changeFormatSelect;
-  let linkExample;
-
-  const findBeforeUnloadWarning = () => window.onbeforeunload?.();
-  const findForm = () => document.querySelector('.wiki-form');
-  const findSubmitButton = () => document.querySelector('.js-wiki-btn-submit');
-
-  describe('when the wiki page is being created', () => {
-    const formHtmlFixture = editFormHtmlFixture({ newPage: true });
-
-    beforeEach(() => {
-      setHTMLFixture(formHtmlFixture);
-
-      titleInput = document.getElementById('wiki_title');
-      messageInput = document.getElementById('wiki_message');
-      changeFormatSelect = document.querySelector('#wiki_format');
-      linkExample = document.querySelector('.js-markup-link-example');
-      wikis = new Wikis();
-    });
-
-    it('binds an event listener to the title input', () => {
-      wikis.handleWikiTitleChange = jest.fn();
-
-      titleInput.dispatchEvent(new Event('keyup'));
-
-      expect(wikis.handleWikiTitleChange).toHaveBeenCalled();
-    });
-
-    it('sets the commit message when title changes', () => {
-      titleInput.value = 'My title';
-      messageInput.value = '';
-
-      titleInput.dispatchEvent(new Event('keyup'));
-
-      expect(messageInput.value).toEqual('Create My title');
-    });
-
-    it('replaces hyphens with spaces', () => {
-      titleInput.value = 'my-hyphenated-title';
-      titleInput.dispatchEvent(new Event('keyup'));
-
-      expect(messageInput.value).toEqual('Create my hyphenated title');
-    });
-  });
-
-  describe('when the wiki page is being updated', () => {
-    const formHtmlFixture = editFormHtmlFixture({ newPage: false });
-
-    beforeEach(() => {
-      setHTMLFixture(formHtmlFixture);
-
-      titleInput = document.getElementById('wiki_title');
-      messageInput = document.getElementById('wiki_message');
-      wikis = new Wikis();
-    });
-
-    it('sets the commit message when title changes, prefixing with "Update"', () => {
-      titleInput.value = 'My title';
-      messageInput.value = '';
-
-      titleInput.dispatchEvent(new Event('keyup'));
-
-      expect(messageInput.value).toEqual('Update My title');
-    });
-
-    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 a message when value=$value is selected', ({ value, text }) => {
-      changeFormatSelect.value = value;
-      changeFormatSelect.dispatchEvent(new Event('change'));
-
-      expect(linkExample.innerHTML).toBe(text);
-    });
-
-    it('starts with no unload warning', () => {
-      expect(findBeforeUnloadWarning()).toBeUndefined();
-    });
-
-    describe('when wiki content is updated', () => {
-      beforeEach(() => {
-        contentInput = document.getElementById('wiki_content');
-        contentInput.value = 'Lorem ipsum dolar sit!';
-        contentInput.dispatchEvent(new Event('input'));
-      });
-
-      it('sets before unload warning', () => {
-        expect(findBeforeUnloadWarning()).toBe('');
-      });
-
-      it('when form submitted, unsets before unload warning', () => {
-        findForm().dispatchEvent(new Event('submit'));
-        expect(findBeforeUnloadWarning()).toBeUndefined();
-      });
-    });
-  });
-
-  describe('submit button state', () => {
-    beforeEach(() => {
-      setHTMLFixture(editFormHtmlFixture({ newPage: true }));
-
-      titleInput = document.getElementById('wiki_title');
-      contentInput = document.getElementById('wiki_content');
-
-      wikis = new Wikis();
-    });
-
-    it.each`
-      title          | text           | buttonState   | disabledAttr
-      ${'something'} | ${'something'} | ${'enabled'}  | ${null}
-      ${''}          | ${'something'} | ${'disabled'} | ${'true'}
-      ${'something'} | ${''}          | ${'disabled'} | ${'true'}
-      ${''}          | ${''}          | ${'disabled'} | ${'true'}
-      ${'   '}       | ${'   '}       | ${'disabled'} | ${'true'}
-    `(
-      "when title='$title', content='$content', then, buttonState='$buttonState'",
-      ({ title, text, disabledAttr }) => {
-        titleInput.value = title;
-        titleInput.dispatchEvent(new Event('keyup'));
-
-        contentInput.value = text;
-        contentInput.dispatchEvent(new Event('input'));
-
-        expect(findSubmitButton().getAttribute('disabled')).toBe(disabledAttr);
-      },
-    );
-  });
-
   describe('trackPageView', () => {
     const trackingPage = 'projects:wikis:show';
     const trackingContext = { foo: 'bar' };