Prioritize group settings, improve panel titles, disable submit without changes

4 files changed, 95 insertions, 0 deletions

diff --git a/spec/javascripts/dirty_submit/dirty_submit_collection_spec.js b/spec/javascripts/dirty_submit/dirty_submit_collection_spec.js
new file mode 100644
index 00000000000..87a26183b63
--- /dev/null
+++ b/spec/javascripts/dirty_submit/dirty_submit_collection_spec.js
@@ -0,0 +1,25 @@
+import DirtySubmitCollection from '~/dirty_submit/dirty_submit_collection';
+import { setInput, createForm } from './helper';
+
+describe('DirtySubmitCollection', () => {
+  it('disables submits until there are changes', done => {
+    const testElementsCollection = [createForm(), createForm()];
+    const forms = testElementsCollection.map(testElements => testElements.form);
+
+    new DirtySubmitCollection(forms); // eslint-disable-line no-new
+
+    testElementsCollection.forEach(testElements => {
+      const { input, submit } = testElements;
+      const originalValue = input.value;
+
+      expect(submit.disabled).toBe(true);
+
+      return setInput(input, `${originalValue} changes`)
+        .then(() => expect(submit.disabled).toBe(false))
+        .then(() => setInput(input, originalValue))
+        .then(() => expect(submit.disabled).toBe(true))
+        .then(done)
+        .catch(done.fail);
+    });
+  });
+});
diff --git a/spec/javascripts/dirty_submit/dirty_submit_factory_spec.js b/spec/javascripts/dirty_submit/dirty_submit_factory_spec.js
new file mode 100644
index 00000000000..40843a68582
--- /dev/null
+++ b/spec/javascripts/dirty_submit/dirty_submit_factory_spec.js
@@ -0,0 +1,18 @@
+import dirtySubmitFactory from '~/dirty_submit/dirty_submit_factory';
+import DirtySubmitForm from '~/dirty_submit/dirty_submit_form';
+import DirtySubmitCollection from '~/dirty_submit/dirty_submit_collection';
+import { createForm } from './helper';
+
+describe('DirtySubmitCollection', () => {
+  it('returns a DirtySubmitForm instance for single form elements', () => {
+    const { form } = createForm();
+
+    expect(dirtySubmitFactory(form) instanceof DirtySubmitForm).toBe(true);
+  });
+
+  it('returns a DirtySubmitCollection instance for a collection of form elements', () => {
+    const forms = [createForm().form, createForm().form];
+
+    expect(dirtySubmitFactory(forms) instanceof DirtySubmitCollection).toBe(true);
+  });
+});
diff --git a/spec/javascripts/dirty_submit/dirty_submit_form_spec.js b/spec/javascripts/dirty_submit/dirty_submit_form_spec.js
new file mode 100644
index 00000000000..86d53fa984a
--- /dev/null
+++ b/spec/javascripts/dirty_submit/dirty_submit_form_spec.js
@@ -0,0 +1,21 @@
+
+import DirtySubmitForm from '~/dirty_submit/dirty_submit_form';
+import { setInput, createForm } from './helper';
+
+describe('DirtySubmitForm', () => {
+  it('disables submit until there are changes', done => {
+    const { form, input, submit } = createForm();
+    const originalValue = input.value;
+
+    new DirtySubmitForm(form); // eslint-disable-line no-new
+
+    expect(submit.disabled).toBe(true);
+
+    return setInput(input, `${originalValue} changes`)
+      .then(() => expect(submit.disabled).toBe(false))
+      .then(() => setInput(input, originalValue))
+      .then(() => expect(submit.disabled).toBe(true))
+      .then(done)
+      .catch(done.fail);
+  });
+});
diff --git a/spec/javascripts/dirty_submit/helper.js b/spec/javascripts/dirty_submit/helper.js
new file mode 100644
index 00000000000..6d1e643553c
--- /dev/null
+++ b/spec/javascripts/dirty_submit/helper.js
@@ -0,0 +1,31 @@
+import DirtySubmitForm from '~/dirty_submit/dirty_submit_form';
+import setTimeoutPromiseHelper from '../helpers/set_timeout_promise_helper';
+
+export function setInput(element, value) {
+  element.value = value;
+
+  element.dispatchEvent(
+    new Event('input', {
+      bubbles: true,
+      cancelable: true,
+    }),
+  );
+
+  return setTimeoutPromiseHelper(DirtySubmitForm.THROTTLE_DURATION);
+}
+
+export function createForm() {
+  const form = document.createElement('form');
+  form.innerHTML = `
+    <input type="text" value="original" class="js-input" name="input" />
+    <button type="submit" class="js-dirty-submit"></button>
+  `;
+  const input = form.querySelector('.js-input');
+  const submit = form.querySelector('.js-dirty-submit');
+
+  return {
+    form,
+    input,
+    submit,
+  };
+}