add unit tests for array utils with jest

.github/workflows/elixir.yml

@@ -4,6 +4,7 @@ on: [push, pull_request]
 
 jobs:
   build:
+    name: 'Build Elixir app'
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
@@ -26,7 +27,8 @@ jobs:
         run: |
           docker-compose run app mix sobelow --config
           docker-compose run app mix deps.audit
-  lint:
+  lint-and-test:
+    name: 'JavaScript Linting and Unit Tests'
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
@@ -48,6 +50,8 @@ jobs:
         run: npm ci --ignore-scripts
         working-directory: ./assets
 
-      - name: Run ESLint
-        run: npm run lint
+      - run: npm run lint
+        working-directory: ./assets
+
+      - run: npm run test
         working-directory: ./assets

.gitignore

@@ -57,3 +57,6 @@ npm-debug.log
 # Rust binaries
 /native/**/target
 /.cargo
+
+# Jest coverage
+/assets/coverage

assets/.eslintignore

@@ -1,2 +1,3 @@
 js/vendor/*
 webpack.config.js
+jest.config.js

assets/.eslintrc.yml

@@ -259,3 +259,12 @@ overrides:
       - '*.js'
     rules:
       '@typescript-eslint/explicit-module-boundary-types': 0
+  - files:
+      - "*.ts"
+    rules:
+      # https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/FAQ.md#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
+      no-undef: 0
+      no-unused-vars: 0
+      '@typescript-eslint/no-unused-vars': [2, {vars: 'all', args: 'after-used'}]
+      no-redeclare: 0
+      '@typescript-eslint/no-redeclare': 2

assets/jest.config.js

@@ -0,0 +1,32 @@
+export default {
+  collectCoverage: true,
+  collectCoverageFrom: [
+    'js/**/*.{js,ts}',
+  ],
+  coveragePathIgnorePatterns: [
+    '/node_modules/',
+    '/.*\\.test\\.ts$',
+    '.*\\.d\\.ts$',
+  ],
+  coverageDirectory: '<rootDir>/coverage/',
+  coverageThreshold: {
+    global: {
+      statements: 100,
+      branches: 100,
+      functions: 100,
+      lines: 100,
+    },
+  },
+  preset: 'ts-jest/presets/js-with-ts-esm',
+  testEnvironment: 'node',
+  testPathIgnorePatterns: ['/node_modules/', '/dist/'],
+  moduleNameMapper: {
+    './js/(.*)': '<rootDir>/js/$1',
+  },
+  globals: {
+      extensionsToTreatAsEsm: ['.ts', '.js'],
+      'ts-jest': {
+          useESM: true
+      }
+  },
+};

assets/js/preview.js

@@ -4,7 +4,7 @@
 
 import { fetchJson } from './utils/requests';
 import { filterNode } from './imagesclientside';
-import { hideEl, showEl } from './utils/dom.js';
+import { hideEl, showEl } from './utils/dom';
 
 function handleError(response) {
   const errorMessage = '<div>Preview failed to load!</div>';

assets/js/utils/__tests__/array.spec.ts

@@ -0,0 +1,44 @@
+import { moveElement } from '../array';
+
+describe('moveElement', () => {
+  describe('swap two items in a 2-item array', () => {
+    it('should work with descending index parameters', () => {
+      const input = [true, false];
+      moveElement(input, 1, 0);
+      expect(input).toEqual([false, true]);
+    });
+
+    it('should work with ascending index parameters', () => {
+      const input = [true, false];
+      moveElement(input, 0, 1);
+      expect(input).toEqual([false, true]);
+    });
+  });
+
+  describe('swap first and last item in a 3-item array', () => {
+    it('should work with descending index parameters', () => {
+      const input = ['a', 'b', 'c'];
+      moveElement(input, 2, 0);
+      expect(input).toEqual(['c', 'a', 'b']);
+    });
+
+    it('should work with ascending index parameters', () => {
+      const input = ['a', 'b', 'c'];
+      moveElement(input, 0, 2);
+      expect(input).toEqual(['b', 'c', 'a']);
+    });
+  });
+
+  describe('swap items in the middle of a 4-item array', () => {
+    it('should work with descending index parameters', () => {
+      const input = ['a', 'b', 'c', 'd'];
+      moveElement(input, 2, 1);
+      expect(input).toEqual(['a', 'c', 'b', 'd']);
+    });
+    it('should work with ascending index parameters', () => {
+      const input = ['a', 'b', 'c', 'd'];
+      moveElement(input, 1, 2);
+      expect(input).toEqual(['a', 'c', 'b', 'd']);
+    });
+  });
+});

assets/js/when-ready.js

@@ -13,7 +13,7 @@ import { registerEvents }       from './boorujs';
 import { setupBurgerMenu }      from './burger';
 import { bindCaptchaLinks }     from './captcha';
 import { setupComments }        from './comment';
-import { setupDupeReports }     from './duplicate_reports.js';
+import { setupDupeReports }     from './duplicate_reports';
 import { setFingerprintCookie } from './fingerprint';
 import { setupGalleryEditing }  from './galleries';
 import { initImagesClientside } from './imagesclientside';
@@ -31,7 +31,7 @@ import { setupTagEvents }       from './tagsmisc';
 import { setupTimestamps }      from './timeago';
 import { setupImageUpload }     from './upload';
 import { setupSearch }          from './search';
-import { setupToolbar }         from './markdowntoolbar.js';
+import { setupToolbar }         from './markdowntoolbar';
 import { hideStaffTools }       from './staffhider';
 import { pollOptionCreator }    from './poll';