|
| 1 | +/** |
| 2 | + * A helper class to contain an error and also the screenshot data that |
| 3 | + * caused the error. |
| 4 | + */ |
| 5 | +class ScreenshotError extends Error { |
| 6 | + constructor(message, actual, expected) { |
| 7 | + super(message); |
| 8 | + this.actual = actual; |
| 9 | + this.expected = expected; |
| 10 | + } |
| 11 | +} |
| 12 | + |
| 13 | +function toBase64(img) { |
| 14 | + return img.canvas.toDataURL(); |
| 15 | +} |
| 16 | + |
| 17 | +function escapeName(name) { |
| 18 | + // Encode slashes as `encodeURIComponent('/')` |
| 19 | + return name.replace(/\//g, '%2F'); |
| 20 | +} |
| 21 | + |
| 22 | +let namePrefix = ''; |
| 23 | + |
| 24 | +/** |
| 25 | + * A helper to define a category of visual tests. |
| 26 | + * |
| 27 | + * @param name The name of the category of test. |
| 28 | + * @param callback A callback that calls `visualTest` a number of times to define |
| 29 | + * visual tests within this suite. |
| 30 | + * @param [options] An options object with optional additional settings. Set its |
| 31 | + * key `focus` to true to only run this test, or its `skip` key to skip it. |
| 32 | + */ |
| 33 | +window.visualSuite = function( |
| 34 | + name, |
| 35 | + callback, |
| 36 | + { focus = false, skip = false } = {} |
| 37 | +) { |
| 38 | + const lastPrefix = namePrefix; |
| 39 | + namePrefix += escapeName(name) + '/'; |
| 40 | + |
| 41 | + let suiteFn = suite; |
| 42 | + if (focus) { |
| 43 | + suiteFn = suiteFn.only; |
| 44 | + } |
| 45 | + if (skip) { |
| 46 | + suiteFn = suiteFn.skip; |
| 47 | + } |
| 48 | + suiteFn(name, callback); |
| 49 | + |
| 50 | + namePrefix = lastPrefix; |
| 51 | +}; |
| 52 | + |
| 53 | +window.checkMatch = function(actual, expected, p5) { |
| 54 | + const maxSide = 50; |
| 55 | + const scale = Math.min(maxSide/expected.width, maxSide/expected.height); |
| 56 | + for (const img of [actual, expected]) { |
| 57 | + img.resize( |
| 58 | + Math.ceil(img.width * scale), |
| 59 | + Math.ceil(img.height * scale) |
| 60 | + ); |
| 61 | + } |
| 62 | + const diff = p5.createImage(actual.width, actual.height); |
| 63 | + diff.drawingContext.drawImage(actual.canvas, 0, 0); |
| 64 | + diff.drawingContext.globalCompositeOperation = 'difference'; |
| 65 | + diff.drawingContext.drawImage(expected.canvas, 0, 0); |
| 66 | + diff.filter(p5.ERODE, false); |
| 67 | + diff.loadPixels(); |
| 68 | + |
| 69 | + let ok = true; |
| 70 | + for (let i = 0; i < diff.pixels.length; i++) { |
| 71 | + if (i % 4 === 3) continue; // Skip alpha checks |
| 72 | + if (Math.abs(diff.pixels[i]) > 10) { |
| 73 | + ok = false; |
| 74 | + break; |
| 75 | + } |
| 76 | + } |
| 77 | + return { ok, diff }; |
| 78 | +}; |
| 79 | + |
| 80 | +/** |
| 81 | + * A helper to define a visual test, where we will assert that a sketch matches |
| 82 | + * screenshots saved ahead of time of what the test should look like. |
| 83 | + * |
| 84 | + * When defining a new test, run the tests once to generate initial screenshots. |
| 85 | + * |
| 86 | + * To regenerate screenshots for a test, delete its screenshots folder in |
| 87 | + * the test/unit/visual/screenshots directory, and rerun the tests. |
| 88 | + * |
| 89 | + * @param testName The display name of a test. This also links the test to its |
| 90 | + * expected screenshot, so make sure to rename the screenshot folder after |
| 91 | + * renaming a test. |
| 92 | + * @param callback A callback to set up the test case. It takes two parameters: |
| 93 | + * first is `p5`, a reference to the p5 instance, and second is `screenshot`, a |
| 94 | + * function to grab a screenshot of the canvas. It returns either nothing, or a |
| 95 | + * Promise that resolves when all screenshots have been taken. |
| 96 | + * @param [options] An options object with optional additional settings. Set its |
| 97 | + * key `focus` to true to only run this test, or its `skip` key to skip it. |
| 98 | + */ |
| 99 | +window.visualTest = function( |
| 100 | + testName, |
| 101 | + callback, |
| 102 | + { focus = false, skip = false } = {} |
| 103 | +) { |
| 104 | + const name = namePrefix + escapeName(testName); |
| 105 | + let suiteFn = suite; |
| 106 | + if (focus) { |
| 107 | + suiteFn = suiteFn.only; |
| 108 | + } |
| 109 | + if (skip) { |
| 110 | + suiteFn = suiteFn.skip; |
| 111 | + } |
| 112 | + |
| 113 | + suiteFn(testName, function() { |
| 114 | + let myp5; |
| 115 | + |
| 116 | + setup(function() { |
| 117 | + return new Promise(res => { |
| 118 | + myp5 = new p5(function(p) { |
| 119 | + p.setup = function() { |
| 120 | + res(); |
| 121 | + }; |
| 122 | + }); |
| 123 | + }); |
| 124 | + }); |
| 125 | + |
| 126 | + teardown(function() { |
| 127 | + myp5.remove(); |
| 128 | + }); |
| 129 | + |
| 130 | + test('matches expected screenshots', async function() { |
| 131 | + let expectedScreenshots; |
| 132 | + try { |
| 133 | + metadata = await fetch( |
| 134 | + `unit/visual/screenshots/${name}/metadata.json` |
| 135 | + ).then(res => res.json()); |
| 136 | + expectedScreenshots = metadata.numScreenshots; |
| 137 | + } catch (e) { |
| 138 | + expectedScreenshots = 0; |
| 139 | + } |
| 140 | + |
| 141 | + if (!window.shouldGenerateScreenshots && !expectedScreenshots) { |
| 142 | + // If running on CI, all expected screenshots should already |
| 143 | + // be generated |
| 144 | + throw new Error('No expected screenshots found'); |
| 145 | + } |
| 146 | + |
| 147 | + const actual = []; |
| 148 | + |
| 149 | + // Generate screenshots |
| 150 | + await callback(myp5, () => { |
| 151 | + actual.push(myp5.get()); |
| 152 | + }); |
| 153 | + |
| 154 | + if (expectedScreenshots && actual.length !== expectedScreenshots) { |
| 155 | + throw new Error( |
| 156 | + `Expected ${expectedScreenshots} screenshot(s) but generated ${actual.length}` |
| 157 | + ); |
| 158 | + } |
| 159 | + if (!expectedScreenshots) { |
| 160 | + writeFile( |
| 161 | + `unit/visual/screenshots/${name}/metadata.json`, |
| 162 | + JSON.stringify({ numScreenshots: actual.length }, null, 2) |
| 163 | + ); |
| 164 | + } |
| 165 | + |
| 166 | + const expectedFilenames = actual.map( |
| 167 | + (_, i) => `unit/visual/screenshots/${name}/${i.toString().padStart(3, '0')}.png` |
| 168 | + ); |
| 169 | + const expected = expectedScreenshots |
| 170 | + ? ( |
| 171 | + await Promise.all( |
| 172 | + expectedFilenames.map(path => new Promise((resolve, reject) => { |
| 173 | + myp5.loadImage(path, resolve, reject); |
| 174 | + })) |
| 175 | + ) |
| 176 | + ) |
| 177 | + : []; |
| 178 | + |
| 179 | + for (let i = 0; i < actual.length; i++) { |
| 180 | + if (expected[i]) { |
| 181 | + if (!checkMatch(actual[i], expected[i], myp5).ok) { |
| 182 | + throw new ScreenshotError( |
| 183 | + `Screenshots do not match! Expected:\n${toBase64(expected[i])}\n\nReceived:\n${toBase64(actual[i])}\n\n` + |
| 184 | + 'If this is unexpected, paste these URLs into your browser to inspect them, or run grunt yui:dev and go to http://127.0.0.1:9001/test/visual.html.\n\n' + |
| 185 | + `If this change is expected, please delete the test/unit/visual/screenshots/${name} folder and run tests again to generate a new screenshot.`, |
| 186 | + actual[i], |
| 187 | + expected[i] |
| 188 | + ); |
| 189 | + } |
| 190 | + } else { |
| 191 | + writeImageFile(expectedFilenames[i], toBase64(actual[i])); |
| 192 | + } |
| 193 | + } |
| 194 | + }); |
| 195 | + }); |
| 196 | +}; |
0 commit comments