wip

assets/js/__tests__/ujs.spec.ts

@@ -0,0 +1,104 @@
+import fetchMock from 'jest-fetch-mock';
+import '../ujs';
+
+describe('Remote utils', () => {
+  const mockEndpoint = 'http://localhost/endpoint';
+
+  beforeAll(() => {
+    fetchMock.enableMocks();
+  });
+
+  afterAll(() => {
+    fetchMock.disableMocks();
+  });
+
+  beforeEach(() => {
+    window.booru.csrfToken = Math.random().toString();
+    fetchMock.resetMocks();
+  });
+
+  function addOneShotEventListener(name: string, cb: (e: Event) => void) {
+    const handler = (event: Event) => {
+      cb(event);
+      document.removeEventListener(name, handler);
+    };
+    document.addEventListener(name, handler);
+  }
+
+  describe('a[data-remote]', () => {
+    const mockVerb = 'POST';
+    const submitA = () => {
+      const a = document.createElement('a');
+      a.href = mockEndpoint;
+      a.dataset.remote = 'remote';
+      a.dataset.method = mockVerb;
+
+      document.documentElement.insertAdjacentElement('beforeend', a);
+      a.click();
+
+      return a;
+    };
+
+    it('should call native fetch with the correct parameters (without body)', () => {
+      submitA();
+      expect(fetch).toHaveBeenNthCalledWith(1, mockEndpoint, {
+        method: mockVerb,
+        credentials: 'same-origin',
+        headers: {
+          'x-csrf-token': window.booru.csrfToken,
+          'x-requested-with': 'XMLHttpRequest'
+        }
+      });
+    });
+
+    it('should emit fetchcomplete response', () => new Promise<void>((resolve, reject) => {
+      let a: HTMLAnchorElement | null = null;
+
+      addOneShotEventListener('fetchcomplete', event => {
+        expect(event.target).toBe(a);
+        resolve();
+      });
+
+      a = submitA();
+    }));
+  });
+
+  describe('form[data-remote]', () => {
+    const mockVerb = 'POST';
+    const submitForm = () => {
+      const form = document.createElement('form');
+      form.action = mockEndpoint;
+      form.method = mockVerb;
+      form.dataset.remote = 'remote';
+
+      document.documentElement.insertAdjacentElement('beforeend', form);
+      form.submit();
+
+      return form;
+    };
+
+    it('should call native fetch with the correct parameters (with body)', () => {
+      submitForm();
+      expect(fetch).toHaveBeenNthCalledWith(1, mockEndpoint, {
+        method: mockVerb,
+        credentials: 'same-origin',
+        headers: {
+          'x-csrf-token': window.booru.csrfToken,
+          'x-requested-with': 'XMLHttpRequest'
+        },
+        body: new FormData(),
+      });
+    });
+
+    it('should emit fetchcomplete response', () => new Promise<void>((resolve, reject) => {
+      let form: HTMLFormElement | null = null;
+
+      addOneShotEventListener('fetchcomplete', event => {
+        expect(event.target).toBe(form);
+        resolve();
+      });
+
+      form = submitForm();
+    }));
+  });
+});

assets/js/ujs.js → assets/js/ujs.ts

@@ -6,36 +6,36 @@ const headers = () => ({
   'x-requested-with': 'XMLHttpRequest'
 });
 
-function confirm(event, target) {
+function confirm(event: Event, target: HTMLElement) {
   if (!window.confirm(target.dataset.confirm)) {
     event.preventDefault();
     event.stopImmediatePropagation();
     return false;
   }
 }
 
-function disable(event, target) {
+function disable(event: Event, target: HTMLAnchorElement | HTMLButtonElement | HTMLInputElement) {
   // failed validations prevent the form from being submitted;
   // stop here or the form will be permanently locked
   if (target.type === 'submit' && target.closest(':invalid') !== null) return;
 
   // Store what's already there so we don't lose it
-  const label = findFirstTextNode(target);
+  const label = findFirstTextNode<Text>(target);
   if (label) {
-    target.dataset.enableWith = label.nodeValue;
+    target.dataset.enableWith = label.nodeValue || '';
     label.nodeValue = ` ${target.dataset.disableWith}`;
   }
   else {
     target.dataset.enableWith = target.innerHTML;
-    target.innerHTML = target.dataset.disableWith;
+    target.innerHTML = target.dataset.disableWith || '';
   }
 
   // delay is needed because Safari stops the submit if the button is immediately disabled
-  requestAnimationFrame(() => target.disabled = 'disabled');
+  requestAnimationFrame(() => target.setAttribute('disabled', 'disabled'));
 }
 
 // you should use button_to instead of link_to[method]!
-function linkMethod(event, target) {
+function linkMethod(event: Event, target: HTMLAnchorElement) {
   event.preventDefault();
 
   const form   = makeEl('form',  { action: target.href, method: 'POST' });
@@ -49,7 +49,7 @@ function linkMethod(event, target) {
   form.submit();
 }
 
-function formRemote(event, target) {
+function formRemote(event: Event, target: HTMLFormElement) {
   event.preventDefault();
 
   fetch(target.action, {
@@ -58,32 +58,31 @@ function formRemote(event, target) {
     headers: headers(),
     body: new FormData(target)
   }).then(response => {
+    fire(target, 'fetchcomplete', response);
     if (response && response.status === 300) {
-      window.location.reload(true);
-      return;
+      window.location.reload();
     }
-    fire(target, 'fetchcomplete', response);
   });
 }
 
-function formReset(event, target) {
-  $$('[disabled][data-disable-with][data-enable-with]', target).forEach(input => {
+function formReset(_event: Event | null, target: HTMLElement) {
+  $$<HTMLElement>('[disabled][data-disable-with][data-enable-with]', target).forEach(input => {
     const label = findFirstTextNode(input);
     if (label) {
       label.nodeValue = ` ${input.dataset.enableWith}`;
     }
-    else { input.innerHTML = target.dataset.enableWith; }
+    else { input.innerHTML = target.dataset.enableWith || ''; }
     delete input.dataset.enableWith;
     input.removeAttribute('disabled');
   });
 }
 
-function linkRemote(event, target) {
+function linkRemote(event: Event, target: HTMLAnchorElement) {
   event.preventDefault();
 
   fetch(target.href, {
     credentials: 'same-origin',
-    method: target.dataset.method.toUpperCase(),
+    method: (target.dataset.method || 'get').toUpperCase(),
     headers: headers()
   }).then(response =>
     fire(target, 'fetchcomplete', response)
@@ -106,5 +105,7 @@ delegate(document, 'reset', {
 });
 
 window.addEventListener('pageshow', () => {
-  [].forEach.call(document.forms, form => formReset(null, form));
+  for (const form of document.forms) {
+    formReset(null, form);
+  }
 });