1 files changed, 61 insertions, 0 deletions
diff --git a/spec/frontend/projects/gke_cluster_namespace/gke_cluster_namespace_spec.js b/spec/frontend/projects/gke_cluster_namespace/gke_cluster_namespace_spec.js
new file mode 100644
index 00000000000..7b8df03d3c3
--- /dev/null
+++ b/spec/frontend/projects/gke_cluster_namespace/gke_cluster_namespace_spec.js
@@ -0,0 +1,61 @@
+import initGkeNamespace from '~/projects/gke_cluster_namespace';
+
+describe('GKE cluster namespace', () => {
+  const changeEvent = new Event('change');
+  const isHidden = el => el.classList.contains('hidden');
+  const hasDisabledInput = el => el.querySelector('input').disabled;
+
+  let glManagedCheckbox;
+  let selfManaged;
+  let glManaged;
+
+  beforeEach(() => {
+    setFixtures(`
+      <input class="js-gl-managed" type="checkbox" value="1" checked />
+      <div class="js-namespace">
+        <input type="text" />
+      </div>      
+      <div class="js-namespace-prefixed">
+        <input type="text" />
+      </div>
+    `);
+
+    glManagedCheckbox = document.querySelector('.js-gl-managed');
+    selfManaged = document.querySelector('.js-namespace');
+    glManaged = document.querySelector('.js-namespace-prefixed');
+
+    initGkeNamespace();
+  });
+
+  describe('GKE cluster namespace toggles', () => {
+    it('initially displays the GitLab-managed label and input', () => {
+      expect(isHidden(glManaged)).toEqual(false);
+      expect(hasDisabledInput(glManaged)).toEqual(false);
+
+      expect(isHidden(selfManaged)).toEqual(true);
+      expect(hasDisabledInput(selfManaged)).toEqual(true);
+    });
+
+    it('displays the self-managed label and input when the Gitlab-managed checkbox is unchecked', () => {
+      glManagedCheckbox.checked = false;
+      glManagedCheckbox.dispatchEvent(changeEvent);
+
+      expect(isHidden(glManaged)).toEqual(true);
+      expect(hasDisabledInput(glManaged)).toEqual(true);
+
+      expect(isHidden(selfManaged)).toEqual(false);
+      expect(hasDisabledInput(selfManaged)).toEqual(false);
+    });
+
+    it('displays the GitLab-managed label and input when the Gitlab-managed checkbox is checked', () => {
+      glManagedCheckbox.checked = true;
+      glManagedCheckbox.dispatchEvent(changeEvent);
+
+      expect(isHidden(glManaged)).toEqual(false);
+      expect(hasDisabledInput(glManaged)).toEqual(false);
+
+      expect(isHidden(selfManaged)).toEqual(true);
+      expect(hasDisabledInput(selfManaged)).toEqual(true);
+    });
+  });
+});