mirror of
https://github.com/whscullin/apple2js.git
synced 2024-01-12 14:14:38 +00:00
Tests and refactoring
This commit is contained in:
parent
759e57bd26
commit
366c8a196b
|
@ -1,4 +1,7 @@
|
|||
module.exports = {
|
||||
'moduleNameMapper': {
|
||||
'^js/(.*)': '<rootDir>/js/$1',
|
||||
},
|
||||
'roots': [
|
||||
'js/',
|
||||
'test/',
|
||||
|
@ -10,4 +13,4 @@ module.exports = {
|
|||
'^.+\\.js$': 'babel-jest',
|
||||
'^.+\\.ts$': 'ts-jest'
|
||||
},
|
||||
};
|
||||
};
|
||||
|
|
|
@ -21,7 +21,7 @@ import Apple2IO from '../apple2io';
|
|||
import { JSONDisk } from '../formats/format_utils';
|
||||
import Printer from './printer';
|
||||
|
||||
import { OptionModal } from './options_modal';
|
||||
import { OptionsModal } from './options_modal';
|
||||
import { Screen } from './screen';
|
||||
import { JoyStick } from './joystick';
|
||||
import { System } from './system';
|
||||
|
@ -35,7 +35,7 @@ let lastRenderedFrames = 0;
|
|||
|
||||
let hashtag = document.location.hash;
|
||||
|
||||
const optionsModal = new OptionModal();
|
||||
const optionsModal = new OptionsModal();
|
||||
|
||||
interface DiskDescriptor {
|
||||
name: string;
|
||||
|
|
|
@ -32,7 +32,7 @@ export interface OptionHandler {
|
|||
setOption: (name: string, value: string | boolean) => void
|
||||
}
|
||||
|
||||
export class OptionModal {
|
||||
export class OptionsModal {
|
||||
private prefs: Prefs = new Prefs();
|
||||
private options: Record<string, Option> = {}
|
||||
private handlers: Record<string, OptionHandler> = {}
|
||||
|
@ -47,27 +47,34 @@ export class OptionModal {
|
|||
for (const section of sections) {
|
||||
const { options } = section;
|
||||
for (const option of options) {
|
||||
const { name, defaultVal, type } = option;
|
||||
const stringVal = String(defaultVal);
|
||||
const prefVal = this.prefs.readPref(name, stringVal);
|
||||
|
||||
this.handlers[option.name] = handler;
|
||||
if (prefVal !== null && prefVal !== stringVal) {
|
||||
switch (type) {
|
||||
case BOOLEAN_OPTION:
|
||||
handler.setOption(name, Boolean(prefVal));
|
||||
break;
|
||||
default:
|
||||
handler.setOption(name, prefVal);
|
||||
}
|
||||
}
|
||||
this.options[name] = option;
|
||||
const { name } = option;
|
||||
this.handlers[name] = handler;
|
||||
this.options[name] = option;
|
||||
const value = this.getOption(name);
|
||||
if (value != null) {
|
||||
handler.setOption(name, value);
|
||||
}
|
||||
}
|
||||
this.sections.push(section);
|
||||
}
|
||||
}
|
||||
|
||||
getOption(name: string): string | boolean | undefined {
|
||||
const option = this.options[name]
|
||||
if (option) {
|
||||
const { name, defaultVal, type } = option;
|
||||
const stringVal = String(defaultVal);
|
||||
const prefVal = this.prefs.readPref(name, stringVal);
|
||||
switch (type) {
|
||||
case BOOLEAN_OPTION:
|
||||
return prefVal === 'true'
|
||||
break;
|
||||
default:
|
||||
return prefVal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setOption(name: string, value: string | boolean) {
|
||||
if (name in this.options) {
|
||||
const handler = this.handlers[name];
|
||||
|
@ -164,6 +171,8 @@ export class OptionModal {
|
|||
const reloadElement = document.createElement('i')
|
||||
reloadElement.textContent = '* Reload page to take effect';
|
||||
content.append(reloadElement)
|
||||
} else {
|
||||
console.error('Cannot find target div#options-modal-content')
|
||||
}
|
||||
MicroModal.show('options-modal');
|
||||
}
|
||||
|
|
282
package-lock.json
generated
282
package-lock.json
generated
|
@ -14,6 +14,8 @@
|
|||
"devDependencies": {
|
||||
"@babel/core": "^7.9.0",
|
||||
"@babel/preset-env": "^7.9.0",
|
||||
"@testing-library/dom": "^7.30.3",
|
||||
"@testing-library/user-event": "^13.1.3",
|
||||
"@types/jest": "^26.0.14",
|
||||
"@types/micromodal": "^0.3.2",
|
||||
"@typescript-eslint/eslint-plugin": "^4.6.1",
|
||||
|
@ -1243,6 +1245,16 @@
|
|||
"regenerator-runtime": "^0.13.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/runtime-corejs3": {
|
||||
"version": "7.13.10",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.13.10.tgz",
|
||||
"integrity": "sha512-x/XYVQ1h684pp1mJwOV4CyvqZXqbc8CMsMGUnAbuc82ZCdv1U63w5RSUzgDSXQHG5Rps/kiksH6g2D5BuaKyXg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"core-js-pure": "^3.0.0",
|
||||
"regenerator-runtime": "^0.13.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/template": {
|
||||
"version": "7.12.13",
|
||||
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz",
|
||||
|
@ -2039,6 +2051,117 @@
|
|||
"@sinonjs/commons": "^1.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@testing-library/dom": {
|
||||
"version": "7.30.3",
|
||||
"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-7.30.3.tgz",
|
||||
"integrity": "sha512-7JhIg2MW6WPwyikH2iL3o7z+FTVgSOd2jqCwTAHqK7Qal2gRRYiUQyURAxtbK9VXm/UTyG9bRihv8C5Tznr2zw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@babel/code-frame": "^7.10.4",
|
||||
"@babel/runtime": "^7.12.5",
|
||||
"@types/aria-query": "^4.2.0",
|
||||
"aria-query": "^4.2.2",
|
||||
"chalk": "^4.1.0",
|
||||
"dom-accessibility-api": "^0.5.4",
|
||||
"lz-string": "^1.4.4",
|
||||
"pretty-format": "^26.6.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/@testing-library/dom/node_modules/ansi-styles": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
||||
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"color-convert": "^2.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/@testing-library/dom/node_modules/chalk": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
|
||||
"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"ansi-styles": "^4.1.0",
|
||||
"supports-color": "^7.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/chalk/chalk?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/@testing-library/dom/node_modules/color-convert": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
||||
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"color-name": "~1.1.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=7.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@testing-library/dom/node_modules/color-name": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
|
||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@testing-library/dom/node_modules/has-flag": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
|
||||
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/@testing-library/dom/node_modules/supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"has-flag": "^4.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/@testing-library/user-event": {
|
||||
"version": "13.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.1.3.tgz",
|
||||
"integrity": "sha512-PDTAb7CDhWzxdEFh29vnSyNFx/gigFPsVli2lgxoX+cbX6Dy2kTetB1J3dLm5TKh4d5nUWFfLpaPMoZuLLZ1Dg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.12.5"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10",
|
||||
"npm": ">=6"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@testing-library/dom": ">=7.21.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/aria-query": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.1.tgz",
|
||||
"integrity": "sha512-S6oPal772qJZHoRZLFc/XoZW2gFvwXusYUmXPXkgxJLuEk2vOt7jc4Yo6z/vtI0EBkbPBVrJJ0B+prLIKiWqHg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/babel__core": {
|
||||
"version": "7.1.14",
|
||||
"resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.14.tgz",
|
||||
|
@ -2778,6 +2901,19 @@
|
|||
"sprintf-js": "~1.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/aria-query": {
|
||||
"version": "4.2.2",
|
||||
"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz",
|
||||
"integrity": "sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.10.2",
|
||||
"@babel/runtime-corejs3": "^7.10.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.0"
|
||||
}
|
||||
},
|
||||
"node_modules/arr-diff": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
|
||||
|
@ -3815,6 +3951,17 @@
|
|||
"semver": "bin/semver.js"
|
||||
}
|
||||
},
|
||||
"node_modules/core-js-pure": {
|
||||
"version": "3.10.1",
|
||||
"resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.10.1.tgz",
|
||||
"integrity": "sha512-PeyJH2SE0KuxY5eCGNWA+W+CeDpB6M1PN3S7Am7jSv/Ttuxz2SnWbIiVQOn/TDaGaGtxo8CRWHkXwJscbUHtVw==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/core-js"
|
||||
}
|
||||
},
|
||||
"node_modules/core-util-is": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
|
||||
|
@ -4227,6 +4374,12 @@
|
|||
"node": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/dom-accessibility-api": {
|
||||
"version": "0.5.4",
|
||||
"resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.4.tgz",
|
||||
"integrity": "sha512-TvrjBckDy2c6v6RLxPv5QXOnU+SmF9nBII5621Ve5fu6Z/BDrENurBEvlC1f44lKEUVqOpK4w9E5Idc5/EgkLQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/domexception": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/domexception/-/domexception-2.0.1.tgz",
|
||||
|
@ -8607,6 +8760,15 @@
|
|||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/lz-string": {
|
||||
"version": "1.4.4",
|
||||
"resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
|
||||
"integrity": "sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"lz-string": "bin/bin.js"
|
||||
}
|
||||
},
|
||||
"node_modules/make-dir": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
|
||||
|
@ -14195,6 +14357,16 @@
|
|||
"regenerator-runtime": "^0.13.4"
|
||||
}
|
||||
},
|
||||
"@babel/runtime-corejs3": {
|
||||
"version": "7.13.10",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.13.10.tgz",
|
||||
"integrity": "sha512-x/XYVQ1h684pp1mJwOV4CyvqZXqbc8CMsMGUnAbuc82ZCdv1U63w5RSUzgDSXQHG5Rps/kiksH6g2D5BuaKyXg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"core-js-pure": "^3.0.0",
|
||||
"regenerator-runtime": "^0.13.4"
|
||||
}
|
||||
},
|
||||
"@babel/template": {
|
||||
"version": "7.12.13",
|
||||
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz",
|
||||
|
@ -14820,6 +14992,88 @@
|
|||
"@sinonjs/commons": "^1.7.0"
|
||||
}
|
||||
},
|
||||
"@testing-library/dom": {
|
||||
"version": "7.30.3",
|
||||
"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-7.30.3.tgz",
|
||||
"integrity": "sha512-7JhIg2MW6WPwyikH2iL3o7z+FTVgSOd2jqCwTAHqK7Qal2gRRYiUQyURAxtbK9VXm/UTyG9bRihv8C5Tznr2zw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/code-frame": "^7.10.4",
|
||||
"@babel/runtime": "^7.12.5",
|
||||
"@types/aria-query": "^4.2.0",
|
||||
"aria-query": "^4.2.2",
|
||||
"chalk": "^4.1.0",
|
||||
"dom-accessibility-api": "^0.5.4",
|
||||
"lz-string": "^1.4.4",
|
||||
"pretty-format": "^26.6.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"ansi-styles": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
||||
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"color-convert": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"chalk": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
|
||||
"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ansi-styles": "^4.1.0",
|
||||
"supports-color": "^7.1.0"
|
||||
}
|
||||
},
|
||||
"color-convert": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
||||
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"color-name": "~1.1.4"
|
||||
}
|
||||
},
|
||||
"color-name": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
|
||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
|
||||
"dev": true
|
||||
},
|
||||
"has-flag": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
|
||||
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
|
||||
"dev": true
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"has-flag": "^4.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@testing-library/user-event": {
|
||||
"version": "13.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.1.3.tgz",
|
||||
"integrity": "sha512-PDTAb7CDhWzxdEFh29vnSyNFx/gigFPsVli2lgxoX+cbX6Dy2kTetB1J3dLm5TKh4d5nUWFfLpaPMoZuLLZ1Dg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.12.5"
|
||||
}
|
||||
},
|
||||
"@types/aria-query": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.1.tgz",
|
||||
"integrity": "sha512-S6oPal772qJZHoRZLFc/XoZW2gFvwXusYUmXPXkgxJLuEk2vOt7jc4Yo6z/vtI0EBkbPBVrJJ0B+prLIKiWqHg==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/babel__core": {
|
||||
"version": "7.1.14",
|
||||
"resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.14.tgz",
|
||||
|
@ -15416,6 +15670,16 @@
|
|||
"sprintf-js": "~1.0.2"
|
||||
}
|
||||
},
|
||||
"aria-query": {
|
||||
"version": "4.2.2",
|
||||
"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz",
|
||||
"integrity": "sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.10.2",
|
||||
"@babel/runtime-corejs3": "^7.10.2"
|
||||
}
|
||||
},
|
||||
"arr-diff": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
|
||||
|
@ -16248,6 +16512,12 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"core-js-pure": {
|
||||
"version": "3.10.1",
|
||||
"resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.10.1.tgz",
|
||||
"integrity": "sha512-PeyJH2SE0KuxY5eCGNWA+W+CeDpB6M1PN3S7Am7jSv/Ttuxz2SnWbIiVQOn/TDaGaGtxo8CRWHkXwJscbUHtVw==",
|
||||
"dev": true
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
|
||||
|
@ -16565,6 +16835,12 @@
|
|||
"esutils": "^2.0.2"
|
||||
}
|
||||
},
|
||||
"dom-accessibility-api": {
|
||||
"version": "0.5.4",
|
||||
"resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.4.tgz",
|
||||
"integrity": "sha512-TvrjBckDy2c6v6RLxPv5QXOnU+SmF9nBII5621Ve5fu6Z/BDrENurBEvlC1f44lKEUVqOpK4w9E5Idc5/EgkLQ==",
|
||||
"dev": true
|
||||
},
|
||||
"domexception": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/domexception/-/domexception-2.0.1.tgz",
|
||||
|
@ -19884,6 +20160,12 @@
|
|||
"yallist": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"lz-string": {
|
||||
"version": "1.4.4",
|
||||
"resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
|
||||
"integrity": "sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=",
|
||||
"dev": true
|
||||
},
|
||||
"make-dir": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
|
||||
|
|
|
@ -26,6 +26,8 @@
|
|||
"devDependencies": {
|
||||
"@babel/core": "^7.9.0",
|
||||
"@babel/preset-env": "^7.9.0",
|
||||
"@testing-library/dom": "^7.30.3",
|
||||
"@testing-library/user-event": "^13.1.3",
|
||||
"@types/jest": "^26.0.14",
|
||||
"@types/micromodal": "^0.3.2",
|
||||
"@typescript-eslint/eslint-plugin": "^4.6.1",
|
||||
|
|
64
test/js/ui/__snapshots__/options_modal.spec.ts.snap
Normal file
64
test/js/ui/__snapshots__/options_modal.spec.ts.snap
Normal file
|
@ -0,0 +1,64 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`OptionsModal openModal renders 1`] = `
|
||||
<div
|
||||
id="options-modal-content"
|
||||
>
|
||||
<h3>
|
||||
Section 1
|
||||
</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<input
|
||||
id="option_1"
|
||||
type="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="option_1"
|
||||
>
|
||||
Option 1
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<select
|
||||
id="option_2"
|
||||
>
|
||||
<option
|
||||
value="select_1"
|
||||
>
|
||||
Select 1
|
||||
</option>
|
||||
<option
|
||||
value="select_2"
|
||||
>
|
||||
Select 2
|
||||
</option>
|
||||
</select>
|
||||
<label
|
||||
for="option_2"
|
||||
>
|
||||
Option 2
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>
|
||||
Section 2
|
||||
</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<input
|
||||
id="option_3"
|
||||
type="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="option_3"
|
||||
>
|
||||
Option 3
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
<i>
|
||||
* Reload page to take effect
|
||||
</i>
|
||||
</div>
|
||||
`;
|
138
test/js/ui/options_modal.spec.ts
Normal file
138
test/js/ui/options_modal.spec.ts
Normal file
|
@ -0,0 +1,138 @@
|
|||
import { screen } from '@testing-library/dom'
|
||||
import userEvent from '@testing-library/user-event'
|
||||
|
||||
import {
|
||||
BOOLEAN_OPTION,
|
||||
SELECT_OPTION,
|
||||
OptionHandler,
|
||||
OptionsModal
|
||||
} from 'js/ui/options_modal'
|
||||
|
||||
jest.mock('micromodal')
|
||||
|
||||
const mockOptionHandler: OptionHandler = {
|
||||
getOptions() {
|
||||
return [
|
||||
{
|
||||
name: 'Section 1',
|
||||
options: [
|
||||
{
|
||||
name: 'option_1',
|
||||
label: 'Option 1',
|
||||
type: BOOLEAN_OPTION,
|
||||
defaultVal: false,
|
||||
},
|
||||
{
|
||||
name: 'option_2',
|
||||
label: 'Option 2',
|
||||
type: SELECT_OPTION,
|
||||
defaultVal: 'select_1',
|
||||
values: [
|
||||
{
|
||||
name: 'Select 1',
|
||||
value: 'select_1',
|
||||
},
|
||||
{
|
||||
name: 'Select 2',
|
||||
value: 'select_2',
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Section 2',
|
||||
options: [
|
||||
{
|
||||
name: 'option_3',
|
||||
label: 'Option 3',
|
||||
type: BOOLEAN_OPTION,
|
||||
defaultVal: true,
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
setOption: jest.fn()
|
||||
}
|
||||
|
||||
describe('OptionsModal', () => {
|
||||
let modal: OptionsModal;
|
||||
beforeEach(() => {
|
||||
modal = new OptionsModal();
|
||||
modal.addOptions(mockOptionHandler);
|
||||
})
|
||||
afterEach(() => {
|
||||
localStorage.clear();
|
||||
})
|
||||
|
||||
describe('openModal', () => {
|
||||
let content: HTMLDivElement;
|
||||
|
||||
beforeEach(() => {
|
||||
content = document.createElement('div');
|
||||
content.id = 'options-modal-content';
|
||||
document.body.appendChild(content);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
jest.resetAllMocks();
|
||||
content.remove();
|
||||
})
|
||||
|
||||
it('renders', () => {
|
||||
modal.openModal();
|
||||
expect(content).toMatchSnapshot();
|
||||
})
|
||||
|
||||
it('toggles booleans', () => {
|
||||
modal.openModal();
|
||||
const toggle = screen.getByText('Option 3')
|
||||
userEvent.click(toggle)
|
||||
expect(mockOptionHandler.setOption)
|
||||
.toHaveBeenCalledWith('option_3', false)
|
||||
})
|
||||
|
||||
it('selects', () => {
|
||||
modal.openModal();
|
||||
const combobox = screen.getByRole('combobox');
|
||||
userEvent.selectOptions(combobox, 'select_2');
|
||||
|
||||
expect(mockOptionHandler.setOption)
|
||||
.toHaveBeenCalledWith('option_2', 'select_2')
|
||||
})
|
||||
});
|
||||
|
||||
describe('getOption', () => {
|
||||
beforeEach(() => {
|
||||
modal = new OptionsModal();
|
||||
modal.addOptions(mockOptionHandler);
|
||||
})
|
||||
it('gets boolean', () => {
|
||||
expect(modal.getOption('option_1'))
|
||||
.toEqual(false)
|
||||
expect(modal.getOption('option_3'))
|
||||
.toEqual(true)
|
||||
})
|
||||
|
||||
it('gets selector', () => {
|
||||
expect(modal.getOption('option_2'))
|
||||
.toEqual('select_1')
|
||||
})
|
||||
})
|
||||
|
||||
describe('setOption', () => {
|
||||
it('sets boolean', () => {
|
||||
modal.setOption('option_1', true);
|
||||
expect(mockOptionHandler.setOption)
|
||||
.toHaveBeenCalledWith('option_1', true)
|
||||
})
|
||||
|
||||
it('sets selector', () => {
|
||||
modal.setOption('option_2', 'select_2');
|
||||
expect(mockOptionHandler.setOption)
|
||||
.toHaveBeenCalledWith('option_2', 'select_2')
|
||||
})
|
||||
})
|
||||
})
|
|
@ -18,10 +18,14 @@
|
|||
"*": [
|
||||
"node_modules/*",
|
||||
"types/*"
|
||||
],
|
||||
"js/*": [
|
||||
"js/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
},
|
||||
"include": [
|
||||
"js/**/*"
|
||||
"js/**/*",
|
||||
"test/**/*",
|
||||
]
|
||||
}
|
||||
|
|
|
@ -20,7 +20,7 @@ module.exports =
|
|||
compress: true,
|
||||
static: {
|
||||
watch: {
|
||||
ignored: /(node_modules|\.git)/
|
||||
ignored: /(node_modules|test|\.git)/
|
||||
},
|
||||
directory: __dirname,
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue
Block a user