Merge pull request #198 from nzzdev/release-7.2.6

Release 7.2.6

jest.config.ts

@@ -1,15 +1,13 @@
 import type { Config } from '@jest/types';
 
 const config: Config.InitialOptions = {
-  preset: 'ts-jest/presets/default-esm',
-
   // We are using happydom to fix so many issues regarding
   // events and missing dom apis.
   testEnvironment: "@happy-dom/jest-environment",
   verbose: true,
   transform: {
-    '^.+\\.ts$': ['ts-jest', {
-      useESM: true
+    '^.+\\.ts$': ['@swc/jest', {
+
     }],
     '^.+\\.svelte$': [
       './node_modules/svelte-jester/dist/transformer.mjs',
@@ -28,8 +26,7 @@ const config: Config.InitialOptions = {
   testPathIgnorePatterns: ['node_modules'],
   transformIgnorePatterns: ['node_modules'],
   bail: false,
-  setupFiles: ['./setupJest.js'],
   setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
 };
 
-export default config;
+module.exports = config;

package.json

@@ -1,14 +1,14 @@
 {
   "name": "q-table",
-  "version": "7.2.5",
+  "version": "7.2.6",
   "description": "",
   "main": "index.js",
   "type": "module",
   "scripts": {
     "build": "rollup --bundleConfigAsCjs -c rollup.config.js && npm run compile-style-files",
     "compile-style-files": "node tasks/compileStyleFiles.cjs",
     "dev": "npm run build && node dev.js",
-    "jest": "NODE_OPTIONS='--experimental-vm-modules --experimental-specifier-resolution=node' jest --env=@happy-dom/jest-environment --runInBand --config jest.config.ts",
+    "jest": "NODE_OPTIONS='--experimental-vm-modules --experimental-specifier-resolution=node' jest --runInBand --config jest.config.ts",
     "lint": "eslint --fix --ext .svelte,.ts --config src/.eslintrc.cjs src",
     "lint:all": "run-s -c lint ts-check svelte-check",
     "prepare": "husky install",
@@ -21,62 +21,61 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@hapi/boom": "^10.0.0",
-    "@hapi/hapi": "^21.2.1",
-    "@hapi/inert": "^7.0.0",
+    "@hapi/boom": "^10.0.1",
+    "@hapi/hapi": "^21.3.2",
+    "@hapi/inert": "^7.1.0",
     "@nzz/et-utils-country-flag-emoji": "^1.0.0",
     "ajv": "^8.12.0",
     "clone": "^2.1.2",
     "d3-format": "^3.1.0",
-    "joi": "^17.7.0",
-    "simple-statistics": "^7.8.2",
-    "svelte": "^3.55.1",
+    "joi": "^17.9.2",
+    "simple-statistics": "^7.8.3",
+    "svelte": "^3.59.1",
     "uglify-js": "^3.17.4"
   },
   "devDependencies": {
-    "@happy-dom/jest-environment": "^8.1.4",
-    "@rollup/plugin-alias": "^4.0.3",
+    "@happy-dom/jest-environment": "^9.20.1",
+    "@rollup/plugin-alias": "^5.0.0",
     "@rollup/plugin-json": "^6.0.0",
-    "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-terser": "^0.2.1",
-    "@rollup/plugin-typescript": "^10.0.1",
+    "@rollup/plugin-node-resolve": "^15.0.2",
+    "@rollup/plugin-terser": "^0.4.3",
+    "@rollup/plugin-typescript": "^11.1.1",
+    "@swc/core": "^1.3.59",
+    "@swc/jest": "^0.2.26",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/svelte": "^3.2.2",
     "@testing-library/user-event": "^14.4.3",
-    "@tsconfig/svelte": "^3.0.0",
+    "@tsconfig/svelte": "^4.0.1",
     "@types/d3-format": "^3.0.1",
     "@types/hapi__hapi": "^21.0.0",
-    "@types/hapi__inert": "^5.2.4",
-    "@types/jest": "^29.2.5",
-    "@types/jsdom": "^20.0.1",
-    "@types/node": "^18.13.0",
+    "@types/hapi__inert": "^5.2.6",
+    "@types/jest": "^29.5.1",
+    "@types/node": "^18.16.14",
     "@types/uglify-js": "^3.17.1",
-    "@typescript-eslint/eslint-plugin": "^5.51.0",
-    "@typescript-eslint/parser": "^5.51.0",
-    "autoprefixer": "^10.4.13",
-    "cssnano": "^5.1.14",
-    "eslint": "^8.33.0",
-    "eslint-plugin-svelte": "^2.17.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.7",
+    "@typescript-eslint/parser": "^5.59.7",
+    "autoprefixer": "^10.4.14",
+    "cssnano": "^6.0.1",
+    "eslint": "^8.41.0",
+    "eslint-plugin-svelte": "^2.29.0",
     "eslint-svelte3-preprocess": "^0.0.5",
-    "happy-dom": "^8.1.4",
+    "happy-dom": "^9.20.1",
     "html-minifier": "^4.0.0",
     "husky": "^8.0.3",
-    "jest": "^29.3.1",
-    "jest-environment-jsdom": "^29.3.1",
-    "jsdom": "^20.0.3",
-    "nodemon": "^2.0.20",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "nodemon": "^2.0.22",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.21",
+    "postcss": "^8.4.23",
     "postcss-import": "^15.1.0",
-    "rollup": "^3.14.0",
-    "rollup-plugin-svelte": "^7.1.0",
-    "sass": "^1.58.0",
-    "svelte-check": "^3.0.3",
+    "rollup": "^3.23.0",
+    "rollup-plugin-svelte": "^7.1.4",
+    "sass": "^1.62.1",
+    "svelte-check": "^3.3.2",
     "svelte-jester": "^2.3.2",
-    "svelte-preprocess": "^5.0.1",
-    "svelte-strip": "^1.0.3",
-    "ts-jest": "^29.0.5",
+    "svelte-preprocess": "^5.0.3",
+    "svelte-strip": "^2.0.0",
     "ts-node": "^10.9.1",
-    "typescript": "^4.9.5"
+    "typescript": "^5.0.4"
   }
 }

src/components/table/cell/MinibarCell.svelte

@@ -15,43 +15,45 @@ const classes = ['qtable-minibar-cell'].concat(cell.classes);
 let barType = MINIBAR_TYPE.EMPTY;
 
 // Check what bartype we have.
-if (cell.value < 0) {
-  barType = MINIBAR_TYPE.NEGATIVE;
-} else if ( cell.value > 0) {
-  barType = MINIBAR_TYPE.POSITIVE;
+if (typeof cell.value === 'number') {
+  if (cell.value < 0) {
+    barType = MINIBAR_TYPE.NEGATIVE;
+  } else if (cell.value > 0) {
+    barType = MINIBAR_TYPE.POSITIVE;
+  }
 }
 
 classes.push(`qtable-minibar-cell-${barType}`);
 
-const posClrCode = minibar.barColor.positive.colorCode
+const posClrCode = minibar.barColor.positive.colorCode;
 const posClrClass = minibar.barColor.positive.className;
 
-const negClrCode = minibar.barColor.negative.colorCode
+const negClrCode = minibar.barColor.negative.colorCode;
 const negClrClass = minibar.barColor.negative.className;
 
 const barWidth = minibar.values[rowIndex];
 </script>
 
 <Td type={cell.type} {classes}>
-  {#if cell.value < 0}
+  {#if typeof cell.value === 'number' && cell.value < 0}
     <div class="qtable-minibar-holder">
       <MinibarBox type={MINIBAR_TYPE.NEGATIVE} clrCode={negClrCode} clrClass={negClrClass} width={barWidth} />
     </div>
   {/if}
 
   <CellLabel label={cell.label} footnote={cell.footnote} />
 
-  {#if cell.value > 0}
+  {#if typeof cell.value === 'number' && cell.value > 0}
     <div class="qtable-minibar-holder">
-      <MinibarBox type={MINIBAR_TYPE.POSITIVE}  clrCode={posClrCode} clrClass={posClrClass} width={barWidth} />
+      <MinibarBox type={MINIBAR_TYPE.POSITIVE} clrCode={posClrCode} clrClass={posClrClass} width={barWidth} />
     </div>
   {/if}
 </Td>
 
 <style lang="scss">
 :global(.qtable-minibar-cell) {
   align-items: center;
-  background-color: hsla(0,0%,78%,.15);
+  background-color: hsla(0, 0%, 78%, 0.15);
   display: flex;
   min-width: 90px;
 }

src/helpers/colorColomnMethodBox.ts

@@ -3,7 +3,7 @@ import type { FormattedBucket } from './colorColumnLegend';
 
 const methodBoxTextConfig: Record<BucketType, string> = {
   ckmeans:
-    'Die unterschiedlich grossen Gruppen kommen durch ein statistisches Verfahren zustande, welches die Werte so in Gruppen einteilt, dass die Unterschiede zwischen den Regionen möglichst gut sichtbar werden (Jenks Natural Breaks).',
+    'Die unterschiedlich grossen Gruppen kommen durch ein statistisches Verfahren zustande, welches die Werte so in Gruppen einteilt, dass die Unterschiede möglichst gut sichtbar werden (Jenks Natural Breaks).',
   quantile: 'Die Gruppen wurden so gewählt, dass in jeder Gruppe möglichst gleich viele Werte vorhanden sind.',
   equal: 'Die Gruppen wurden so gewählt, dass sie jeweils einen gleich grossen Bereich auf der Skala abdecken.',
   custom: 'Die Gruppen wurden manuell definiert.',

tests/dom/footnotes.spec.ts

@@ -41,7 +41,7 @@ describe('footnotes', () => {
     });
 
     const dom = createDOM(response);
-    const footnotes = dom.window.document.querySelectorAll('.q-table-footnote-footer') as NodeListOf<HTMLDivElement>;
+    const footnotes = dom.window.document.querySelectorAll('.q-table-footnote-footer') as  unknown as NodeListOf<HTMLDivElement>;
     let arrayOfFootnotes: { index: string; text: string }[] = [];
 
     footnotes.forEach(footnote => {
@@ -86,7 +86,7 @@ describe('footnotes', () => {
     });
 
     const dom = createDOM(response);
-    const footnotes = dom.window.document.querySelectorAll('.q-table-footnote-footer') as NodeListOf<HTMLDivElement>;
+    const footnotes = dom.window.document.querySelectorAll('.q-table-footnote-footer') as unknown as NodeListOf<HTMLDivElement>;
 
     let arrayOfFootnotes: { index: string; text: string }[] = [];
 
@@ -120,7 +120,7 @@ describe('footnotes', () => {
     });
 
     const dom = createDOM(response);
-    const footnotes = dom.window.document.querySelectorAll('.q-table-footnote-footer') as NodeListOf<HTMLDivElement>;
+    const footnotes = dom.window.document.querySelectorAll('.q-table-footnote-footer') as unknown as NodeListOf<HTMLDivElement>;
 
     let arrayOfFootnotes: { index: string; text: string }[] = [];
 

tests/dom/minibars.spec.ts

@@ -150,7 +150,7 @@ describe('minibars', () => {
       expect(value).toEqual(4);
     });
 
-    elementCount(response, '.qtable-minibar-cell .qtable-cell-label ').then(value => {
+    elementCount(response, '.qtable-minibar-cell .qtable-cell-label').then(value => {
       expect(value).toEqual(4);
     });
   });

tests/helpers.ts

@@ -1,5 +1,7 @@
 import Hapi from '@hapi/hapi';
-import { JSDOM } from 'jsdom';
+
+import { Window }  from 'happy-dom';
+
 import Joi from 'joi';
 import type { AvailabilityResponseObject, RenderingInfo, ToolRuntimeConfigSize } from '../src/interfaces';
 
@@ -109,10 +111,15 @@ export function elementCount(response: Hapi.ServerInjectResponse, selector: stri
   });
 }
 
-export function createDOM(response: Hapi.ServerInjectResponse): JSDOM {
+export function createDOM(response: Hapi.ServerInjectResponse): { window: Window } {
   const markup = createMarkupWithScript(response);
 
-  return new JSDOM(markup, { resources: 'usable', runScripts: 'dangerously' });
+  const window = new Window();
+  window.document.write(markup);
+
+  return {
+    window
+  };
 }
 
 export function getSizeObjectForToolRuntimeConfig(width: number): ToolRuntimeConfigSize {

tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "@tsconfig/svelte/tsconfig.json",
   "compilerOptions": {
+    "verbatimModuleSyntax": true,
     "sourceMap": false,
     "strict": true,
     "baseUrl": ".",
@@ -18,6 +19,8 @@
         "src/helpers/*"
       ]
     },
+    // Fixes issues with Typescript 5+ in svelte-check
+    // "ignoreDeprecations": "5.0",
     "allowSyntheticDefaultImports": true,
     "declaration": false,
     "esModuleInterop": true,
@@ -44,5 +47,8 @@
     "src",
     "resources",
     "tests"
+  ],
+  "exclude": [
+    "jest.config.js",
   ]
 }