Attempt some video tests

jest.config.js

@@ -1,6 +1,7 @@
 module.exports = {
     'moduleNameMapper': {
         '^js/(.*)': '<rootDir>/js/$1',
+        '^test/(.*)': '<rootDir>/test/$1',
     },
     'roots': [
         'js/',
@@ -13,4 +14,7 @@ module.exports = {
         '^.+\\.js$': 'babel-jest',
         '^.+\\.ts$': 'ts-jest'
     },
+    'setupFilesAfterEnv': [
+        '<rootDir>/test/jest-setup.js'
+    ]
 };

package.json

@@ -29,6 +29,8 @@
     "@testing-library/dom": "^7.30.3",
     "@testing-library/user-event": "^13.1.3",
     "@types/jest": "^26.0.14",
+    "@types/jest-image-snapshot": "^4.3.0",
+    "@types/jsdom-screenshot": "^3.2.0",
     "@types/micromodal": "^0.3.2",
     "@typescript-eslint/eslint-plugin": "^4.6.1",
     "@typescript-eslint/parser": "^4.6.1",
@@ -37,6 +39,9 @@
     "eslint": "^7.22.0",
     "file-loader": "^6.0.0",
     "jest": "^26.6.3",
+    "jest-image-snapshot": "^4.5.0",
+    "jest-screenshot": "^0.3.2",
+    "jsdom-screenshot": "^4.0.0",
     "node-forge": "^0.10.0",
     "raw-loader": "^4.0.0",
     "ts-jest": "^26.5.0",
@@ -49,6 +54,7 @@
   },
   "dependencies": {
     "apple2shader": "0.0.1",
+    "canvas": "^2.7.0",
     "micromodal": "^0.4.2"
   }
 }

test/jest-setup.js

@@ -0,0 +1,3 @@
+import { toMatchImageSnapshot } from 'jest-image-snapshot';
+
+expect.extend({ toMatchImageSnapshot });

test/js/canvas.test.ts

@@ -0,0 +1,91 @@
+/** @fileoverview Test for gl.ts. */
+
+import { generateImage } from 'jsdom-screenshot';
+import { LoresPage2D, VideoModes2D } from 'js/canvas';
+import apple2enh_char from 'js/roms/apple2enh_char';
+import { createImageFromImageData } from 'test/util/image';
+
+describe('LoresPage', () => {
+    let canvas: HTMLCanvasElement;
+    let lores1: LoresPage2D;
+    let vm: VideoModes2D;
+
+    beforeEach(() => {
+        vm = new VideoModes2D(canvas, true);
+        canvas = document.createElement('canvas');
+        lores1 = new LoresPage2D(vm, 1, apple2enh_char, true);
+        vm.reset();
+    });
+
+    describe('text mode', () => {
+        describe('40 column', () => {
+            it('renders', async () => {
+                for (let page = 0x4; page < 0x8; page++) {
+                    for (let off = 0; off < 0x100; off++) {
+                        lores1.write(page, off, off);
+                    }
+                }
+
+                const img = createImageFromImageData(lores1.imageData);
+                document.body.appendChild(img);
+                const screen = await generateImage();
+                expect(screen).toMatchImageSnapshot();
+                img.remove();
+            });
+
+            it('renders alt chars', async () => {
+                vm.altChar(true);
+                for (let page = 0x4; page < 0x8; page++) {
+                    for (let off = 0; off < 0x100; off++) {
+                        lores1.write(page, off, off);
+                    }
+                }
+
+                const img = createImageFromImageData(lores1.imageData);
+                document.body.appendChild(img);
+                const screen = await generateImage();
+                expect(screen).toMatchImageSnapshot();
+                img.remove();
+            });
+        });
+
+        describe('80 column', () => {
+            it('renders', async () => {
+                vm._80col(true);
+                const bank0 = lores1.bank0();
+                const bank1 = lores1.bank1();
+                for (let page = 0x4; page < 0x8; page++) {
+                    for (let off = 0; off < 0x100; off++) {
+                        bank0.write(page, off, off);
+                        bank1.write(page, off, 255 - off);
+                    }
+                }
+
+                const img = createImageFromImageData(lores1.imageData);
+                document.body.appendChild(img);
+                const screen = await generateImage();
+                expect(screen).toMatchImageSnapshot();
+                img.remove();
+            });
+
+            it('renders alt chars', async () => {
+                vm.altChar(true);
+                vm._80col(true);
+                const bank0 = lores1.bank0();
+                const bank1 = lores1.bank1();
+                for (let page = 0x4; page < 0x8; page++) {
+                    for (let off = 0; off < 0x100; off++) {
+                        bank0.write(page, off, off);
+                        bank1.write(page, off, 255 - off);
+                    }
+                }
+
+                const img = createImageFromImageData(lores1.imageData);
+                document.body.appendChild(img);
+                const screen = await generateImage();
+                expect(screen).toMatchImageSnapshot();
+                img.remove();
+            });
+        });
+    });
+});

test/util/image.ts

@@ -0,0 +1,11 @@
+export const createImageFromImageData = (data: ImageData) => {
+    const canvas = document.createElement('canvas');
+    canvas.width = data.width;
+    canvas.height = data.height;
+    const ctx = canvas.getContext('2d')!;
+    ctx.putImageData(data, 0, 0);
+    const img = document.createElement('img');
+    const url = canvas.toDataURL('image/png');
+    img.src = url;
+    return img;
+};

tsconfig.json

@@ -21,8 +21,11 @@
           ],
           "js/*": [
               "js/*"
+          ],
+          "test/*": [
+            "test/*"
           ]
-      },
+      }
   },
   "include": [
       "js/**/*",