1 files changed, 82 insertions, 0 deletions
diff --git a/spec/frontend/pages/projects/pages_domains/form_spec.js b/spec/frontend/pages/projects/pages_domains/form_spec.js
new file mode 100644
index 00000000000..55336596f30
--- /dev/null
+++ b/spec/frontend/pages/projects/pages_domains/form_spec.js
@@ -0,0 +1,82 @@
+import initForm from '~/pages/projects/pages_domains/form';
+
+const ENABLED_UNLESS_AUTO_SSL_CLASS = 'js-enabled-unless-auto-ssl';
+const SSL_TOGGLE_CLASS = 'js-enable-ssl-gl-toggle';
+const SSL_TOGGLE_INPUT_CLASS = 'js-project-feature-toggle-input';
+const SHOW_IF_AUTO_SSL_CLASS = 'js-shown-if-auto-ssl';
+const SHOW_UNLESS_AUTO_SSL_CLASS = 'js-shown-unless-auto-ssl';
+const D_NONE_CLASS = 'd-none';
+
+describe('Page domains form', () => {
+  let toggle;
+
+  const findEnabledUnless = () => document.querySelector(`.${ENABLED_UNLESS_AUTO_SSL_CLASS}`);
+  const findSslToggle = () => document.querySelector(`.${SSL_TOGGLE_CLASS} button`);
+  const findSslToggleInput = () => document.querySelector(`.${SSL_TOGGLE_INPUT_CLASS}`);
+  const findIfAutoSsl = () => document.querySelector(`.${SHOW_IF_AUTO_SSL_CLASS}`);
+  const findUnlessAutoSsl = () => document.querySelector(`.${SHOW_UNLESS_AUTO_SSL_CLASS}`);
+
+  const create = () => {
+    setFixtures(`
+      <form>
+        <span
+          class="${SSL_TOGGLE_CLASS}"
+          data-label="SSL toggle"
+          ></span>
+        <input class="${SSL_TOGGLE_INPUT_CLASS}" type="hidden" />
+        <span class="${SHOW_UNLESS_AUTO_SSL_CLASS}"></span>
+        <span class="${SHOW_IF_AUTO_SSL_CLASS}"></span>
+        <button class="${ENABLED_UNLESS_AUTO_SSL_CLASS}"></button>
+      </form>
+    `);
+  };
+
+  it('instantiates the toggle', () => {
+    create();
+    initForm();
+
+    expect(findSslToggle()).not.toBe(null);
+  });
+
+  describe('when auto SSL is enabled', () => {
+    beforeEach(() => {
+      create();
+      toggle = initForm();
+      toggle.$emit('change', true);
+    });
+
+    it('sets the correct classes', () => {
+      expect(Array.from(findIfAutoSsl().classList)).not.toContain(D_NONE_CLASS);
+      expect(Array.from(findUnlessAutoSsl().classList)).toContain(D_NONE_CLASS);
+    });
+
+    it('sets the correct disabled value', () => {
+      expect(findEnabledUnless().getAttribute('disabled')).toBe('disabled');
+    });
+
+    it('sets the correct value for the input', () => {
+      expect(findSslToggleInput().getAttribute('value')).toBe('true');
+    });
+  });
+
+  describe('when auto SSL is not enabled', () => {
+    beforeEach(() => {
+      create();
+      toggle = initForm();
+      toggle.$emit('change', false);
+    });
+
+    it('sets the correct classes', () => {
+      expect(Array.from(findIfAutoSsl().classList)).toContain(D_NONE_CLASS);
+      expect(Array.from(findUnlessAutoSsl().classList)).not.toContain(D_NONE_CLASS);
+    });
+
+    it('sets the correct disabled value', () => {
+      expect(findUnlessAutoSsl().getAttribute('disabled')).toBe(null);
+    });
+
+    it('sets the correct value for the input', () => {
+      expect(findSslToggleInput().getAttribute('value')).toBe('false');
+    });
+  });
+});