Merge branch '24032-changed-visibility-level-to-public-but-project-is-not-public' into 'master'

Update project visibility level ui to use dropdowns

Closes #24296, #24123, and #24032

See merge request !7645

1 files changed, 100 insertions, 0 deletions

diff --git a/spec/javascripts/visibility_select_spec.js.es6 b/spec/javascripts/visibility_select_spec.js.es6
new file mode 100644
index 00000000000..b21f6912e06
--- /dev/null
+++ b/spec/javascripts/visibility_select_spec.js.es6
@@ -0,0 +1,100 @@
+/*= require visibility_select */
+
+(() => {
+  const VisibilitySelect = gl.VisibilitySelect;
+
+  describe('VisibilitySelect', function () {
+    const lockedElement = document.createElement('div');
+    lockedElement.dataset.helpBlock = 'lockedHelpBlock';
+
+    const checkedElement = document.createElement('div');
+    checkedElement.dataset.description = 'checkedDescription';
+
+    const mockElements = {
+      container: document.createElement('div'),
+      select: document.createElement('div'),
+      '.help-block': document.createElement('div'),
+      '.js-locked': lockedElement,
+      'option:checked': checkedElement,
+    };
+
+    beforeEach(function () {
+      spyOn(Element.prototype, 'querySelector').and.callFake(selector => mockElements[selector]);
+    });
+
+    describe('#constructor', function () {
+      beforeEach(function () {
+        this.visibilitySelect = new VisibilitySelect(mockElements.container);
+      });
+
+      it('sets the container member', function () {
+        expect(this.visibilitySelect.container).toEqual(mockElements.container);
+      });
+
+      it('queries and sets the helpBlock member', function () {
+        expect(Element.prototype.querySelector).toHaveBeenCalledWith('.help-block');
+        expect(this.visibilitySelect.helpBlock).toEqual(mockElements['.help-block']);
+      });
+
+      it('queries and sets the select member', function () {
+        expect(Element.prototype.querySelector).toHaveBeenCalledWith('select');
+        expect(this.visibilitySelect.select).toEqual(mockElements.select);
+      });
+
+      describe('if there is no container element provided', function () {
+        it('throws an error', function () {
+          expect(() => new VisibilitySelect()).toThrowError('VisibilitySelect requires a container element as argument 1');
+        });
+      });
+    });
+
+    describe('#init', function () {
+      describe('if there is a select', function () {
+        beforeEach(function () {
+          this.visibilitySelect = new VisibilitySelect(mockElements.container);
+        });
+
+        it('calls updateHelpText', function () {
+          spyOn(VisibilitySelect.prototype, 'updateHelpText');
+          this.visibilitySelect.init();
+          expect(this.visibilitySelect.updateHelpText).toHaveBeenCalled();
+        });
+
+        it('adds a change event listener', function () {
+          spyOn(this.visibilitySelect.select, 'addEventListener');
+          this.visibilitySelect.init();
+          expect(this.visibilitySelect.select.addEventListener.calls.argsFor(0)).toContain('change');
+        });
+      });
+
+      describe('if there is no select', function () {
+        beforeEach(function () {
+          mockElements.select = undefined;
+          this.visibilitySelect = new VisibilitySelect(mockElements.container);
+          this.visibilitySelect.init();
+        });
+
+        it('updates the helpBlock text to the locked `data-help-block` messaged', function () {
+          expect(this.visibilitySelect.helpBlock.textContent)
+            .toEqual(lockedElement.dataset.helpBlock);
+        });
+
+        afterEach(function () {
+          mockElements.select = document.createElement('div');
+        });
+      });
+    });
+
+    describe('#updateHelpText', function () {
+      beforeEach(function () {
+        this.visibilitySelect = new VisibilitySelect(mockElements.container);
+        this.visibilitySelect.init();
+      });
+
+      it('updates the helpBlock text to the selected options `data-description`', function () {
+        expect(this.visibilitySelect.helpBlock.textContent)
+          .toEqual(checkedElement.dataset.description);
+      });
+    });
+  });
+})();