wip

assets/js/__tests__/upload.spec.ts

@@ -0,0 +1,83 @@
+import { $, $$, clearEl } from '../utils/dom';
+import { setupImageUpload } from '../upload';
+import { assertNotNull, assertNotUndefined } from '../utils/assert';
+import { promises } from 'fs';
+import { join } from 'path';
+import { fireEvent } from '@testing-library/dom';
+
+describe('Image upload form', () => {
+  let form: HTMLFormElement;
+  let imgPreviews: HTMLDivElement;
+  let fileField: HTMLInputElement;
+  let remoteUrl: HTMLInputElement;
+  let scraperError: HTMLDivElement;
+  let fetchButton: HTMLButtonElement;
+  let tagsEl: HTMLTextAreaElement;
+  let sourceEl: HTMLInputElement;
+  let descrEl: HTMLTextAreaElement;
+
+  beforeAll(() => {
+    document.documentElement.insertAdjacentHTML('beforeend', `
+      <form action="/images">
+        <div id="js-image-upload-previews"></div>
+        <input id="image_image" name="image[image]" type="file" class="js-scraper" />
+        <input id="image_scraper_url" name="image[scraper_url]" type="url" class="js-scraper" />
+        <button id="js-scraper-preview" type="button">Fetch</button>
+        <div class="field-error-js hidden js-scraper"></div>
+
+        <input id="image_sources_0_source" name="image[sources][0][source]" type="text" class="js-source-url" />
+        <textarea id="image_tag_input" name="image[tag_input]" class="js-image-tags-input"></textarea>
+        <textarea id="image_description" name="image[description]" class="js-image-descr-input"></textarea>
+      </form>
+    `);
+
+    form = assertNotNull($<HTMLFormElement>('form'));
+    imgPreviews = assertNotNull($<HTMLDivElement>('#js-image-upload-previews'));
+    fileField = assertNotUndefined($$<HTMLInputElement>('.js-scraper')[0]);
+    remoteUrl = assertNotUndefined($$<HTMLInputElement>('.js-scraper')[1]);
+    scraperError = assertNotUndefined($$<HTMLInputElement>('.js-scraper')[2]);
+    tagsEl = assertNotNull($<HTMLTextAreaElement>('.js-image-tags-input'));
+    sourceEl = assertNotNull($<HTMLInputElement>('.js-source-url'));
+    descrEl = assertNotNull($<HTMLTextAreaElement>('.js-image-descr-input'));
+    fetchButton = assertNotNull($<HTMLButtonElement>('#js-scraper-preview'));
+
+    setupImageUpload();
+  });
+
+  let mockPng: File;
+  let mockWebm: File;
+
+  beforeAll(async() => {
+    const mockPngPath = join(__dirname, 'upload-test.png');
+    const mockWebmPath = join(__dirname, 'upload-test.webm');
+
+    mockPng = new File([(await promises.readFile(mockPngPath, { encoding: null })).buffer], 'upload-test.png', { type: 'image/png' });
+    mockWebm = new File([(await promises.readFile(mockWebmPath, { encoding: null })).buffer], 'upload-test.webm', { type: 'video/webm' });
+  });
+
+  beforeEach(() => {
+    // Reset the state of everything between runs
+    clearEl(imgPreviews);
+    form.reset();
+  });
+
+  it('should disable fetch button on empty source', () => {
+    fireEvent.input(remoteUrl, { target: { value: '' }});
+    expect(fetchButton.disabled).toBe(true);
+  });
+
+  it('should enable fetch button on non-empty source', () => {
+    fireEvent.input(remoteUrl, { target: { value: 'http://localhost/images/1' }});
+    expect(fetchButton.disabled).toBe(false);
+  });
+
+  it('should create a preview element when an image file is uploaded', () => {
+    fireEvent.change(fileField, { target: { files: [mockPng] }});
+    expect(imgPreviews.querySelectorAll('img').length).toBe(1);
+  });
+
+  it('should create a preview element when a Matroska video file is uploaded', () => {
+    fireEvent.change(fileField, { target: { files: [mockWebm] }});
+    expect(imgPreviews.querySelectorAll('video').length).toBe(1);
+  });
+});