Add latest changes from gitlab-org/gitlab@master

2 files changed, 188 insertions, 0 deletions

diff --git a/spec/frontend/snippets/components/__snapshots__/snippet_visibility_edit_spec.js.snap b/spec/frontend/snippets/components/__snapshots__/snippet_visibility_edit_spec.js.snap
new file mode 100644
index 00000000000..4f1d46dffef
--- /dev/null
+++ b/spec/frontend/snippets/components/__snapshots__/snippet_visibility_edit_spec.js.snap
@@ -0,0 +1,94 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Snippet Visibility Edit component rendering matches the snapshot 1`] = `
+<div
+  class="form-group"
+>
+  <label>
+    
+    Visibility level
+    
+    <gl-link-stub
+      href="/foo/bar"
+      target="_blank"
+    >
+      <gl-icon-stub
+        name="question"
+        size="12"
+      />
+    </gl-link-stub>
+  </label>
+   
+  <gl-form-group-stub
+    id="visibility-level-setting"
+  >
+    <gl-form-radio-group-stub
+      checked="0"
+      disabledfield="disabled"
+      htmlfield="html"
+      options=""
+      stacked=""
+      textfield="text"
+      valuefield="value"
+    >
+      <gl-form-radio-stub
+        class="mb-3"
+        value="0"
+      >
+        <div
+          class="d-flex align-items-center"
+        >
+          <gl-icon-stub
+            name="lock"
+            size="16"
+          />
+           
+          <span
+            class="font-weight-bold ml-1"
+          >
+            Private
+          </span>
+        </div>
+      </gl-form-radio-stub>
+      <gl-form-radio-stub
+        class="mb-3"
+        value="1"
+      >
+        <div
+          class="d-flex align-items-center"
+        >
+          <gl-icon-stub
+            name="shield"
+            size="16"
+          />
+           
+          <span
+            class="font-weight-bold ml-1"
+          >
+            Internal
+          </span>
+        </div>
+      </gl-form-radio-stub>
+      <gl-form-radio-stub
+        class="mb-3"
+        value="2"
+      >
+        <div
+          class="d-flex align-items-center"
+        >
+          <gl-icon-stub
+            name="earth"
+            size="16"
+          />
+           
+          <span
+            class="font-weight-bold ml-1"
+          >
+            Public
+          </span>
+        </div>
+      </gl-form-radio-stub>
+    </gl-form-radio-group-stub>
+  </gl-form-group-stub>
+</div>
+`;
diff --git a/spec/frontend/snippets/components/snippet_visibility_edit_spec.js b/spec/frontend/snippets/components/snippet_visibility_edit_spec.js
new file mode 100644
index 00000000000..5104d742bb3
--- /dev/null
+++ b/spec/frontend/snippets/components/snippet_visibility_edit_spec.js
@@ -0,0 +1,94 @@
+import SnippetVisibilityEdit from '~/snippets/components/snippet_visibility_edit.vue';
+import { GlFormRadio } from '@gitlab/ui';
+import { SNIPPET_VISIBILITY } from '~/snippets/constants';
+import { mount, shallowMount } from '@vue/test-utils';
+
+describe('Snippet Visibility Edit component', () => {
+  let wrapper;
+  let radios;
+  const defaultHelpLink = '/foo/bar';
+  const defaultVisibilityLevel = '0';
+
+  function findElements(sel) {
+    return wrapper.findAll(sel);
+  }
+
+  function createComponent(
+    {
+      helpLink = defaultHelpLink,
+      isProjectSnippet = false,
+      visibilityLevel = defaultVisibilityLevel,
+    } = {},
+    deep = false,
+  ) {
+    const method = deep ? mount : shallowMount;
+    wrapper = method.call(this, SnippetVisibilityEdit, {
+      propsData: {
+        helpLink,
+        isProjectSnippet,
+        visibilityLevel,
+      },
+    });
+    radios = findElements(GlFormRadio);
+  }
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('rendering', () => {
+    it('matches the snapshot', () => {
+      createComponent();
+      expect(wrapper.element).toMatchSnapshot();
+    });
+
+    it.each`
+      label                                | value
+      ${SNIPPET_VISIBILITY.private.label}  | ${`0`}
+      ${SNIPPET_VISIBILITY.internal.label} | ${`1`}
+      ${SNIPPET_VISIBILITY.public.label}   | ${`2`}
+    `('should render correct $label label', ({ label, value }) => {
+      createComponent();
+      const radio = radios.at(parseInt(value, 10));
+
+      expect(radio.attributes('value')).toBe(value);
+      expect(radio.text()).toContain(label);
+    });
+
+    describe('rendered help-text', () => {
+      it.each`
+        description                                | value  | label
+        ${SNIPPET_VISIBILITY.private.description}  | ${`0`} | ${SNIPPET_VISIBILITY.private.label}
+        ${SNIPPET_VISIBILITY.internal.description} | ${`1`} | ${SNIPPET_VISIBILITY.internal.label}
+        ${SNIPPET_VISIBILITY.public.description}   | ${`2`} | ${SNIPPET_VISIBILITY.public.label}
+      `('should render correct $label description', ({ description, value }) => {
+        createComponent({}, true);
+
+        const help = findElements('.help-text').at(parseInt(value, 10));
+
+        expect(help.text()).toBe(description);
+      });
+
+      it('renders correct Private description for a project snippet', () => {
+        createComponent({ isProjectSnippet: true }, true);
+
+        const helpText = findElements('.help-text')
+          .at(0)
+          .text();
+
+        expect(helpText).not.toContain(SNIPPET_VISIBILITY.private.description);
+        expect(helpText).toBe(SNIPPET_VISIBILITY.private.description_project);
+      });
+    });
+  });
+
+  describe('functionality', () => {
+    it('pre-selects correct option in the list', () => {
+      const pos = 1;
+
+      createComponent({ visibilityLevel: `${pos}` }, true);
+      const radio = radios.at(pos);
+      expect(radio.find('input[type="radio"]').element.checked).toBe(true);
+    });
+  });
+});