Add latest changes from gitlab-org/gitlab@master

2 files changed, 100 insertions, 0 deletions

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
new file mode 100644
index 00000000000..3c3f9764f64
--- /dev/null
+++ b/spec/frontend/snippets/components/__snapshots__/snippet_description_edit_spec.js.snap
@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Snippet Description Edit component rendering matches the snapshot 1`] = `
+<div
+  class="form-group js-description-input"
+>
+  <label>
+    Description (optional)
+  </label>
+   
+  <div
+    class="js-collapsible-input"
+  >
+    <div
+      class="js-collapsed d-none"
+    >
+      <gl-form-input-stub
+        class="form-control"
+        data-qa-selector="description_placeholder"
+        placeholder="Optionally add a description about what your snippet does or how to use it…"
+      />
+    </div>
+     
+    <markdown-field-stub
+      addspacingclasses="true"
+      canattachfile="true"
+      class="js-expanded"
+      enableautocomplete="true"
+      helppagepath=""
+      markdowndocspath="help/"
+      markdownpreviewpath="foo/"
+      note="[object Object]"
+      quickactionsdocspath=""
+      textareavalue=""
+    >
+      <textarea
+        aria-label="Description"
+        class="note-textarea js-gfm-input js-autosize markdown-area
+          qa-description-textarea"
+        data-supports-quick-actions="false"
+        dir="auto"
+        id="snippet-description"
+        placeholder="Write a comment or drag your files here…"
+      />
+    </markdown-field-stub>
+  </div>
+</div>
+`;
diff --git a/spec/frontend/snippets/components/snippet_description_edit_spec.js b/spec/frontend/snippets/components/snippet_description_edit_spec.js
new file mode 100644
index 00000000000..167489dc004
--- /dev/null
+++ b/spec/frontend/snippets/components/snippet_description_edit_spec.js
@@ -0,0 +1,52 @@
+import SnippetDescriptionEdit from '~/snippets/components/snippet_description_edit.vue';
+import { shallowMount } from '@vue/test-utils';
+
+describe('Snippet Description Edit component', () => {
+  let wrapper;
+  const defaultDescription = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
+  const markdownPreviewPath = 'foo/';
+  const markdownDocsPath = 'help/';
+
+  function createComponent(description = defaultDescription) {
+    wrapper = shallowMount(SnippetDescriptionEdit, {
+      propsData: {
+        description,
+        markdownPreviewPath,
+        markdownDocsPath,
+      },
+    });
+  }
+
+  function isHidden(sel) {
+    return wrapper.find(sel).classes('d-none');
+  }
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('rendering', () => {
+    it('matches the snapshot', () => {
+      expect(wrapper.element).toMatchSnapshot();
+    });
+
+    it('renders the field expanded when description exists', () => {
+      expect(wrapper.find('.js-collapsed').classes('d-none')).toBe(true);
+      expect(wrapper.find('.js-expanded').classes('d-none')).toBe(false);
+
+      expect(isHidden('.js-collapsed')).toBe(true);
+      expect(isHidden('.js-expanded')).toBe(false);
+    });
+
+    it('renders the field collapsed if there is no description yet', () => {
+      createComponent('');
+
+      expect(isHidden('.js-collapsed')).toBe(false);
+      expect(isHidden('.js-expanded')).toBe(true);
+    });
+  });
+});