From b7f970ca49f4a0b1ec137ae441d7864f46045dfb Mon Sep 17 00:00:00 2001 From: limzykenneth Date: Mon, 25 Nov 2024 22:34:44 +0000 Subject: [PATCH 1/9] Convert utilities test --- test/unit/utilities/array_functions.js | 76 ++++++------- test/unit/utilities/conversion.js | 145 +++++++++++------------- test/unit/utilities/string_functions.js | 87 ++++++-------- test/unit/utilities/time_date.js | 70 +++++------- 4 files changed, 164 insertions(+), 214 deletions(-) diff --git a/test/unit/utilities/array_functions.js b/test/unit/utilities/array_functions.js index 12ce6f0edc..c34e92715b 100644 --- a/test/unit/utilities/array_functions.js +++ b/test/unit/utilities/array_functions.js @@ -1,61 +1,53 @@ -import p5 from '../../../src/app.js'; +import { mockP5, mockP5Prototype } from '../../js/mocks'; +import arrayFunctions from '../../../src/utilities/array_functions'; +import random from '../../../src/math/random'; suite('Array', function() { - var myp5; - beforeAll(function() { - new p5(function(p) { - p.setup = function() { - myp5 = p; - }; - }); - }); - - afterAll(function() { - myp5.remove(); + arrayFunctions(mockP5, mockP5Prototype); + random(mockP5, mockP5Prototype); }); - var result; - suite('p5.prototype.append', function() { test('should be a function', function() { - assert.ok(myp5.append); - assert.typeOf(myp5.append, 'function'); + assert.ok(mockP5Prototype.append); + assert.typeOf(mockP5Prototype.append, 'function'); }); + test('should return an array with appended value', function() { - result = myp5.append([], 1); + const result = mockP5Prototype.append([], 1); assert.typeOf(result, 'Array'); assert.deepEqual(result, [1]); }); }); suite('p5.prototype.arrayCopy', function() { - var src, dest; + let src, dest; beforeEach(function() { src = [1, 2, 3, 4, 5]; dest = [6, 7, 8]; }); test('should be a function', function() { - assert.ok(myp5.arrayCopy); - assert.typeOf(myp5.arrayCopy, 'function'); + assert.ok(mockP5Prototype.arrayCopy); + assert.typeOf(mockP5Prototype.arrayCopy, 'function'); }); suite('src, dst', function() { test('should return fully copied array', function() { - myp5.arrayCopy(src, dest); + mockP5Prototype.arrayCopy(src, dest); assert.deepEqual(dest, src); }); }); suite('src, dst, len', function() { test('should return an array with first 2 elements copied over', function() { - myp5.arrayCopy(src, dest, 2); + mockP5Prototype.arrayCopy(src, dest, 2); assert.deepEqual(dest, [1, 2, 8]); }); test('should return an array with first 4 elements copied over', function() { - myp5.arrayCopy(src, dest, 4); + mockP5Prototype.arrayCopy(src, dest, 4); assert.deepEqual(dest, [1, 2, 3, 4]); }); }); @@ -63,17 +55,17 @@ suite('Array', function() { suite('src, srcPosition, dst, dstPosition, length', function() { // src[1 - 2] is src[1] and src[2] test('should copy src[1 - 2] to dst[0 - 1]', function() { - myp5.arrayCopy(src, 1, dest, 0, 2); + mockP5Prototype.arrayCopy(src, 1, dest, 0, 2); assert.deepEqual(dest, [2, 3, 8]); }); test('should copy src[1 - 2] to dst [1 - 2]', function() { - myp5.arrayCopy(src, 1, dest, 1, 2); + mockP5Prototype.arrayCopy(src, 1, dest, 1, 2); assert.deepEqual(dest, [6, 2, 3]); }); test('should copy src[3 - 4] to dst[0 - 1]', function() { - myp5.arrayCopy(src, 3, dest, 0, 2); + mockP5Prototype.arrayCopy(src, 3, dest, 0, 2); assert.deepEqual(dest, [4, 5, 8]); }); }); @@ -81,44 +73,44 @@ suite('Array', function() { suite('p5.prototype.concat', function() { test('should concat empty arrays', function() { - result = myp5.concat([], []); + const result = mockP5Prototype.concat([], []); assert.deepEqual(result, []); }); test('should concat arrays', function() { - result = myp5.concat([1], [2, 3]); + const result = mockP5Prototype.concat([1], [2, 3]); assert.deepEqual(result, [1, 2, 3]); }); }); suite('p5.prototype.reverse', function() { test('should reverse empty array', function() { - result = myp5.reverse([]); + const result = mockP5Prototype.reverse([]); assert.deepEqual(result, []); }); test('should reverse array', function() { - result = myp5.reverse([1, 2, 3]); + const result = mockP5Prototype.reverse([1, 2, 3]); assert.deepEqual(result, [3, 2, 1]); }); }); suite('p5.prototype.shorten', function() { test('should not have error for shortening empty array', function() { - result = myp5.shorten([]); + const result = mockP5Prototype.shorten([]); assert.deepEqual(result, []); }); test('should shorten array', function() { - result = myp5.shorten([1, 2, 3]); + const result = mockP5Prototype.shorten([1, 2, 3]); assert.deepEqual(result, [1, 2]); }); }); suite('p5.prototype.shuffle', function() { test('should contain all the elements of the original array', function() { - let regularArr = ['ABC', 'def', myp5.createVector(), myp5.TAU, Math.E]; - let newArr = myp5.shuffle(regularArr); + let regularArr = ['ABC', 'def', {}, Math.PI * 2, Math.E]; + let newArr = mockP5Prototype.shuffle(regularArr); let flag = true; for (let i = 0; i < regularArr.length; i++) { if (!newArr.includes(regularArr[i])) { @@ -134,46 +126,46 @@ suite('Array', function() { suite('p5.prototype.sort', function() { test('should not have error for sorting empty array', function() { - result = myp5.sort([]); + const result = mockP5Prototype.sort([]); assert.deepEqual(result, []); }); test('should sort alphabetic array lexicographically', function() { - result = myp5.sort(['c', 'b', 'a']); + const result = mockP5Prototype.sort(['c', 'b', 'a']); assert.deepEqual(result, ['a', 'b', 'c']); }); test('should sort numerical array from smallest to largest', function() { - result = myp5.sort([2, 1, 11]); + const result = mockP5Prototype.sort([2, 1, 11]); assert.deepEqual(result, [1, 2, 11]); }); test('should sort numerical array from smallest to largest for only first 2 elements', function() { - result = myp5.sort([3, 1, 2, 0], 2); + const result = mockP5Prototype.sort([3, 1, 2, 0], 2); assert.deepEqual(result, [1, 3, 2, 0]); }); }); suite('p5.prototype.splice', function() { test('should insert 4 into position 1', function() { - result = myp5.splice([1, 2, 3], 4, 1); + const result = mockP5Prototype.splice([1, 2, 3], 4, 1); assert.deepEqual(result, [1, 4, 2, 3]); }); test('should splice in array of values', function() { - result = myp5.splice([1, 2, 3], [4, 5], 1); + const result = mockP5Prototype.splice([1, 2, 3], [4, 5], 1); assert.deepEqual(result, [1, 4, 5, 2, 3]); }); }); suite('p5.prototype.subset', function() { test('should get subset from index 1 to end', function() { - result = myp5.subset([1, 2, 3], 1); + const result = mockP5Prototype.subset([1, 2, 3], 1); assert.deepEqual(result, [2, 3]); }); test('should subset arr[1 - 2]', function() { - result = myp5.subset([1, 2, 3, 4], 1, 2); + const result = mockP5Prototype.subset([1, 2, 3, 4], 1, 2); assert.deepEqual(result, [2, 3]); }); }); diff --git a/test/unit/utilities/conversion.js b/test/unit/utilities/conversion.js index 1d0318264a..a4a217cb9e 100644 --- a/test/unit/utilities/conversion.js +++ b/test/unit/utilities/conversion.js @@ -1,51 +1,40 @@ -import p5 from '../../../src/app.js'; +import { mockP5, mockP5Prototype } from '../../js/mocks'; +import conversion from '../../../src/utilities/conversion'; suite('Conversion', function() { - var myp5; - beforeAll(function() { - new p5(function(p) { - p.setup = function() { - myp5 = p; - }; - }); + conversion(mockP5, mockP5Prototype); }); - afterAll(function() { - myp5.remove(); - }); - - var result; - suite('p5.prototype.float', function() { test('should be a function', function() { - assert.ok(myp5.float); - assert.typeOf(myp5.float, 'function'); + assert.ok(mockP5Prototype.float); + assert.typeOf(mockP5Prototype.float, 'function'); }); test('should convert a string to its floating point representation', function() { - result = myp5.float('56.99998'); + const result = mockP5Prototype.float('56.99998'); assert.typeOf(result, 'Number'); assert.strictEqual(result, 56.99998); }); test('should return NaN for invalid string', function() { - result = myp5.float('cat'); + const result = mockP5Prototype.float('cat'); assert.isNaN(result); }); test('should return Infinity for Infinity', function() { - result = myp5.float(Infinity); + const result = mockP5Prototype.float(Infinity); assert.strictEqual(result, Infinity); }); test('should return -Infinity for -Infinity', function() { - result = myp5.float(-Infinity); + const result = mockP5Prototype.float(-Infinity); assert.strictEqual(result, -Infinity); }); test('should return array of floating points and Nan', function() { - result = myp5.float(['1', '2.0', '3.1', 'giraffe']); + const result = mockP5Prototype.float(['1', '2.0', '3.1', 'giraffe']); assert.typeOf(result, 'Array'); assert.deepEqual(result, [1, 2.0, 3.1, NaN]); }); @@ -53,48 +42,48 @@ suite('Conversion', function() { suite('p5.prototype.int', function() { test('should be a function', function() { - assert.ok(myp5.int); - assert.typeOf(myp5.int, 'function'); + assert.ok(mockP5Prototype.int); + assert.typeOf(mockP5Prototype.int, 'function'); }); test('should convert false to its integer representation i.e. 0', function() { - result = myp5.int(false); + const result = mockP5Prototype.int(false); assert.typeOf(result, 'Number'); assert.strictEqual(result, 0); }); test('should convert true to its integer representation i.e. 1', function() { - result = myp5.int(true); + const result = mockP5Prototype.int(true); assert.strictEqual(result, 1); }); test('should convert a string to its integer representation', function() { - result = myp5.int('1001'); + const result = mockP5Prototype.int('1001'); assert.strictEqual(result, 1001); }); test('should return NaN for invalid string', function() { - result = myp5.int('cat'); + const result = mockP5Prototype.int('cat'); assert.isNaN(result); }); test('should return Infinity for Infinity', function() { - result = myp5.int(Infinity); + const result = mockP5Prototype.int(Infinity); assert.strictEqual(result, Infinity); }); test('should return -Infinity for -Infinity', function() { - result = myp5.int(-Infinity); + const result = mockP5Prototype.int(-Infinity); assert.strictEqual(result, -Infinity); }); test('should convert float to its integer representation', function() { - result = myp5.int('-1001.9'); + const result = mockP5Prototype.int('-1001.9'); assert.strictEqual(result, -1001); }); test('should return array of integers and NaN', function() { - result = myp5.int(['1', '2.3', '-3.5', 'giraffe', false, 4.7]); + const result = mockP5Prototype.int(['1', '2.3', '-3.5', 'giraffe', false, 4.7]); assert.typeOf(result, 'Array'); assert.deepEqual(result, [1, 2, -3, NaN, 0, 4]); }); @@ -102,28 +91,28 @@ suite('Conversion', function() { suite('p5.prototype.str', function() { test('should be a function', function() { - assert.ok(myp5.str); - assert.typeOf(myp5.str, 'function'); + assert.ok(mockP5Prototype.str); + assert.typeOf(mockP5Prototype.str, 'function'); }); test('should convert false to string', function() { - result = myp5.str(false); + const result = mockP5Prototype.str(false); assert.typeOf(result, 'String'); assert.strictEqual(result, 'false'); }); test('should convert true to string', function() { - result = myp5.str(true); + const result = mockP5Prototype.str(true); assert.strictEqual(result, 'true'); }); test('should convert a number to string', function() { - result = myp5.str(45); + const result = mockP5Prototype.str(45); assert.strictEqual(result, '45'); }); test('should return array of strings', function() { - result = myp5.str([1, 2.3, true, -4.5]); + const result = mockP5Prototype.str([1, 2.3, true, -4.5]); assert.typeOf(result, 'Array'); assert.deepEqual(result, ['1', '2.3', 'true', '-4.5']); }); @@ -131,52 +120,52 @@ suite('Conversion', function() { suite('p5.prototype.boolean', function() { test('should be a function', function() { - assert.ok(myp5.boolean); - assert.typeOf(myp5.boolean, 'function'); + assert.ok(mockP5Prototype.boolean); + assert.typeOf(mockP5Prototype.boolean, 'function'); }); test('should convert 1 to true', function() { - result = myp5.boolean(1); + const result = mockP5Prototype.boolean(1); assert.strictEqual(result, true); }); test('should convert a number to true', function() { - result = myp5.boolean(154); + const result = mockP5Prototype.boolean(154); assert.strictEqual(result, true); }); test('should return true for Infinity', function() { - result = myp5.boolean(Infinity); + const result = mockP5Prototype.boolean(Infinity); assert.strictEqual(result, true); }); test('should convert 0 to false', function() { - result = myp5.boolean(0); + const result = mockP5Prototype.boolean(0); assert.strictEqual(result, false); }); test('should convert a string to false', function() { - result = myp5.boolean('1'); + const result = mockP5Prototype.boolean('1'); assert.strictEqual(result, false); }); test('should convert a string to false', function() { - result = myp5.boolean('0'); + const result = mockP5Prototype.boolean('0'); assert.strictEqual(result, false); }); test('should convert "true" to true', function() { - result = myp5.boolean('true'); + const result = mockP5Prototype.boolean('true'); assert.strictEqual(result, true); }); test('should return false for empty string', function() { - result = myp5.boolean(''); + const result = mockP5Prototype.boolean(''); assert.strictEqual(result, false); }); test('should return array of boolean', function() { - result = myp5.boolean([1, true, -4.5, Infinity, 'cat', '23']); + const result = mockP5Prototype.boolean([1, true, -4.5, Infinity, 'cat', '23']); assert.typeOf(result, 'Array'); assert.deepEqual(result, [true, true, true, true, false, false]); }); @@ -184,42 +173,42 @@ suite('Conversion', function() { suite('p5.prototype.byte', function() { test('should be a function', function() { - assert.ok(myp5.byte); - assert.typeOf(myp5.byte, 'function'); + assert.ok(mockP5Prototype.byte); + assert.typeOf(mockP5Prototype.byte, 'function'); }); test('should return 127 for 127', function() { - result = myp5.byte(127); + const result = mockP5Prototype.byte(127); assert.strictEqual(result, 127); }); test('should return -128 for 128', function() { - result = myp5.byte(128); + const result = mockP5Prototype.byte(128); assert.strictEqual(result, -128); }); test('should return 23 for 23.4', function() { - result = myp5.byte(23.4); + const result = mockP5Prototype.byte(23.4); assert.strictEqual(result, 23); }); test('should return 1 for true', function() { - result = myp5.byte(true); + const result = mockP5Prototype.byte(true); assert.strictEqual(result, 1); }); test('should return 23 for "23.4"', function() { - result = myp5.byte('23.4'); + const result = mockP5Prototype.byte('23.4'); assert.strictEqual(result, 23); }); test('should return NaN for invalid string', function() { - result = myp5.byte('cat'); + const result = mockP5Prototype.byte('cat'); assert.isNaN(result); }); test('should return array', function() { - result = myp5.byte([0, 255, '100']); + const result = mockP5Prototype.byte([0, 255, '100']); assert.typeOf(result, 'Array'); assert.deepEqual(result, [0, -1, 100]); }); @@ -227,23 +216,23 @@ suite('Conversion', function() { suite('p5.prototype.char', function() { test('should be a function', function() { - assert.ok(myp5.char); - assert.typeOf(myp5.char, 'function'); + assert.ok(mockP5Prototype.char); + assert.typeOf(mockP5Prototype.char, 'function'); }); test('should return the char representation of the number', function() { - result = myp5.char(65); + const result = mockP5Prototype.char(65); assert.typeOf(result, 'String'); assert.strictEqual(result, 'A'); }); test('should return the char representation of the string', function() { - result = myp5.char('65'); + const result = mockP5Prototype.char('65'); assert.strictEqual(result, 'A'); }); test('should return array', function() { - result = myp5.char([65, 66, '67']); + const result = mockP5Prototype.char([65, 66, '67']); assert.typeOf(result, 'Array'); assert.deepEqual(result, ['A', 'B', 'C']); }); @@ -251,18 +240,18 @@ suite('Conversion', function() { suite('p5.prototype.unchar', function() { test('should be a function', function() { - assert.ok(myp5.unchar); - assert.typeOf(myp5.unchar, 'function'); + assert.ok(mockP5Prototype.unchar); + assert.typeOf(mockP5Prototype.unchar, 'function'); }); test('should return the integer representation of char', function() { - result = myp5.unchar('A'); + const result = mockP5Prototype.unchar('A'); assert.typeOf(result, 'Number'); assert.strictEqual(result, 65); }); test('should return array of numbers', function() { - result = myp5.unchar(['A', 'B', 'C']); + const result = mockP5Prototype.unchar(['A', 'B', 'C']); assert.typeOf(result, 'Array'); assert.deepEqual(result, [65, 66, 67]); }); @@ -270,30 +259,30 @@ suite('Conversion', function() { suite('p5.prototype.hex', function() { test('should be a function', function() { - assert.ok(myp5.hex); - assert.typeOf(myp5.hex, 'function'); + assert.ok(mockP5Prototype.hex); + assert.typeOf(mockP5Prototype.hex, 'function'); }); test('should return the hex representation of the number', function() { - result = myp5.hex(65); + const result = mockP5Prototype.hex(65); assert.typeOf(result, 'String'); assert.strictEqual(result, '00000041'); }); test('should return FFFFFFFF for Infinity', function() { - result = myp5.hex(Infinity); + const result = mockP5Prototype.hex(Infinity); assert.typeOf(result, 'String'); assert.strictEqual(result, 'FFFFFFFF'); }); test('should return 00000000 for -Infinity', function() { - result = myp5.hex(-Infinity); + const result = mockP5Prototype.hex(-Infinity); assert.typeOf(result, 'String'); assert.strictEqual(result, '00000000'); }); test('should return array', function() { - result = myp5.hex([65, 66, 67]); + const result = mockP5Prototype.hex([65, 66, 67]); assert.typeOf(result, 'Array'); assert.deepEqual(result, ['00000041', '00000042', '00000043']); }); @@ -301,28 +290,28 @@ suite('Conversion', function() { suite('p5.prototype.unhex', function() { test('should be a function', function() { - assert.ok(myp5.unhex); - assert.typeOf(myp5.unchar, 'function'); + assert.ok(mockP5Prototype.unhex); + assert.typeOf(mockP5Prototype.unchar, 'function'); }); test('should return the integer representation of hex', function() { - result = myp5.unhex('00000041'); + const result = mockP5Prototype.unhex('00000041'); assert.typeOf(result, 'Number'); assert.strictEqual(result, 65); }); test('should return the NaN for empty string', function() { - result = myp5.unhex(''); + const result = mockP5Prototype.unhex(''); assert.isNaN(result); }); test('should return the NaN for invalid hex string', function() { - result = myp5.unhex('lorem'); + const result = mockP5Prototype.unhex('lorem'); assert.isNaN(result); }); test('should return array of numbers', function() { - result = myp5.unhex(['00000041', '00000042', '00000043']); + const result = mockP5Prototype.unhex(['00000041', '00000042', '00000043']); assert.typeOf(result, 'Array'); assert.deepEqual(result, [65, 66, 67]); }); diff --git a/test/unit/utilities/string_functions.js b/test/unit/utilities/string_functions.js index 232b11c4d0..a17eadfac3 100644 --- a/test/unit/utilities/string_functions.js +++ b/test/unit/utilities/string_functions.js @@ -1,213 +1,192 @@ -import p5 from '../../../src/app.js'; +import { mockP5, mockP5Prototype } from '../../js/mocks'; +import stringFunctions from '../../../src/utilities/string_functions'; suite('String functions', function() { - var myp5; - beforeAll(function() { - new p5(function(p) { - p.setup = function() { - myp5 = p; - }; - }); + stringFunctions(mockP5, mockP5Prototype); }); - afterAll(function() { - myp5.remove(); - }); - - var result; - suite('p5.prototype.join', function() { - var join = p5.prototype.join; test('should be a function', function() { - assert.ok(join); + assert.ok(mockP5Prototype.join); }); test('should return joined string', function() { var arr = ['foo', 'bar']; var sep = '-'; - result = myp5.join(arr, sep); + const result = mockP5Prototype.join(arr, sep); assert.equal(result, 'foo-bar'); }); }); suite('p5.prototype.match', function() { - var match = p5.prototype.match; test('should be a function', function() { - assert.ok(match); + assert.ok(mockP5Prototype.match); }); test('should return correct index of match strings', function() { var str = 'Where is the duckling in this ducky duck string?'; var regexp = 'duck'; - result = myp5.match(str, regexp); + const result = mockP5Prototype.match(str, regexp); assert.equal(result.index, 13); }); }); suite('p5.prototype.matchAll', function() { - var matchAll = p5.prototype.matchAll; test('should be a function', function() { - assert.ok(matchAll); + assert.ok(mockP5Prototype.matchAll); }); test('should return correct array of strings', function() { var str = 'Where is the duckling in this ducky duck string?'; var regexp = 'duck'; - result = myp5.matchAll(str, regexp); + const result = mockP5Prototype.matchAll(str, regexp); assert.equal(result.length, 3); }); }); suite('p5.prototype.nf', function() { - var nf = p5.prototype.nf; test('should be a function', function() { - assert.ok(nf); + assert.ok(mockP5Prototype.nf); }); test('should return correct string', function() { var num = 1234; - result = myp5.nf(num, 3); + const result = mockP5Prototype.nf(num, 3); assert.equal(result, '1234'); }); test('should return correct string', function() { var num = 1234; - result = myp5.nf(num, 5); + const result = mockP5Prototype.nf(num, 5); assert.equal(result, '01234'); }); test('should return correct string', function() { var num = 1234; - result = myp5.nf(num, 3, 3); + const result = mockP5Prototype.nf(num, 3, 3); assert.equal(result, '1234.000'); }); test('should return correct string', function() { var num = 3.141516; - result = myp5.nf(num, '2'); // automatic conversion? + const result = mockP5Prototype.nf(num, '2'); // automatic conversion? assert.equal(result, '03.141516'); }); test('should return correct string', function() { var num = 3.141516; - result = myp5.nf(num, '2', '2'); // automatic conversion? + const result = mockP5Prototype.nf(num, '2', '2'); // automatic conversion? assert.equal(result, '03.14'); }); test('should return correct string', function() { var num = 3.141516e-2; - result = myp5.nf(num, '3', '4'); // automatic conversion? + const result = mockP5Prototype.nf(num, '3', '4'); // automatic conversion? assert.equal(result, '000.0314'); }); test('should return correct string', function() { var num = 3.141516e7; - result = myp5.nf(num, '3', '4'); // automatic conversion? + const result = mockP5Prototype.nf(num, '3', '4'); // automatic conversion? assert.equal(result, '31415160.0000'); }); test('should return correct string', function() { var num = 123.45; - result = myp5.nf(num, 3, 0); + const result = mockP5Prototype.nf(num, 3, 0); assert.equal(result, '123'); }); }); suite('p5.prototype.nfc', function() { - var nfc = p5.prototype.nfc; test('should be a function', function() { - assert.ok(nfc); + assert.ok(mockP5Prototype.nfc); }); test('should return correct string', function() { var num = 32000; - result = myp5.nfc(num, 3); + const result = mockP5Prototype.nfc(num, 3); assert.equal(result, '32,000.000'); }); test('should return correct string', function() { var num = 32000; - result = myp5.nfc(num, '3'); // automatic conversion? + const result = mockP5Prototype.nfc(num, '3'); // automatic conversion? assert.equal(result, '32,000.000'); }); }); suite('p5.prototype.nfp', function() { - var nfp = p5.prototype.nfp; test('should be a function', function() { - assert.ok(nfp); + assert.ok(mockP5Prototype.nfp); }); test('should return correct string', function() { var num = -32000; - result = myp5.nfp(num, 3); + const result = mockP5Prototype.nfp(num, 3); assert.equal(result, '-32000'); }); test('should return correct string', function() { var num = 32000; - result = myp5.nfp(num, 3); // automatic conversion? + const result = mockP5Prototype.nfp(num, 3); // automatic conversion? assert.equal(result, '+32000'); }); }); suite('p5.prototype.nfs', function() { - var nfs = p5.prototype.nfs; test('should be a function', function() { - assert.ok(nfs); + assert.ok(mockP5Prototype.nfs); }); test('should return correct string', function() { var num = -32000; - result = myp5.nfs(num, 3); + const result = mockP5Prototype.nfs(num, 3); assert.equal(result, '-32000'); }); test('should return correct string', function() { var num = 32000; - result = myp5.nfs(num, 3); // automatic conversion? + const result = mockP5Prototype.nfs(num, 3); // automatic conversion? assert.equal(result, ' 32000'); }); }); suite('p5.prototype.split', function() { - var split = p5.prototype.split; test('should be a function', function() { - assert.ok(split); + assert.ok(mockP5Prototype.split); }); test('should return correct index of match strings', function() { var str = 'parsely, sage, rosemary, thyme'; var regexp = ','; - result = myp5.split(str, regexp); + const result = mockP5Prototype.split(str, regexp); assert.equal(result.length, 4); }); }); suite('p5.prototype.splitTokens', function() { - var splitTokens = p5.prototype.splitTokens; test('should be a function', function() { - assert.ok(splitTokens); + assert.ok(mockP5Prototype.splitTokens); }); test('should return correct index of match strings', function() { var str = 'parsely, sage, rosemary, thyme'; var regexp = ','; - result = myp5.splitTokens(str, regexp); + const result = mockP5Prototype.splitTokens(str, regexp); assert.equal(result.length, 4); }); }); suite('p5.prototype.trim', function() { - var trim = p5.prototype.trim; test('should be a function', function() { - assert.ok(trim); + assert.ok(mockP5Prototype.trim); }); test('should return correct strings', function() { var str = ' oh so roomy '; - result = myp5.trim(str); + const result = mockP5Prototype.trim(str); assert.equal(result, 'oh so roomy'); }); }); diff --git a/test/unit/utilities/time_date.js b/test/unit/utilities/time_date.js index b59e5b0696..189d7c8e68 100644 --- a/test/unit/utilities/time_date.js +++ b/test/unit/utilities/time_date.js @@ -1,30 +1,19 @@ -import p5 from '../../../src/app.js'; +import { mockP5, mockP5Prototype } from '../../js/mocks'; +import timeDate from '../../../src/utilities/time_date'; suite('time and date', function() { - var myp5; - beforeAll(function() { - new p5(function(p) { - p.setup = function() { - myp5 = p; - }; - }); + timeDate(mockP5, mockP5Prototype); }); - afterAll(function() { - myp5.remove(); - }); - - var result; - suite('p5.prototype.year', function() { test('should be a function', function() { - assert.ok(myp5.year); - assert.typeOf(myp5.year, 'function'); + assert.ok(mockP5Prototype.year); + assert.typeOf(mockP5Prototype.year, 'function'); }); test('should return this year', function() { - result = myp5.year(); + const result = mockP5Prototype.year(); var jsYear = new Date().getFullYear(); assert.equal(result, jsYear); }); @@ -32,25 +21,25 @@ suite('time and date', function() { suite('p5.prototype.day', function() { test('should be a function', function() { - assert.ok(myp5.day); - assert.typeOf(myp5.day, 'function'); + assert.ok(mockP5Prototype.day); + assert.typeOf(mockP5Prototype.day, 'function'); }); test('should return todays day', function() { var jsDay = new Date().getDate(); - result = myp5.day(); + const result = mockP5Prototype.day(); assert.equal(result, jsDay); }); }); suite('p5.prototype.month', function() { test('should be a function', function() { - assert.ok(myp5.month); - assert.typeOf(myp5.month, 'function'); + assert.ok(mockP5Prototype.month); + assert.typeOf(mockP5Prototype.month, 'function'); }); test("should return today's month", function() { - result = myp5.month(); + const result = mockP5Prototype.month(); var jsMonth = new Date().getMonth() + 1; assert.equal(result, jsMonth); }); @@ -58,39 +47,39 @@ suite('time and date', function() { suite('p5.prototype.hour', function() { test('should be a function', function() { - assert.ok(myp5.hour); - assert.typeOf(myp5.hour, 'function'); + assert.ok(mockP5Prototype.hour); + assert.typeOf(mockP5Prototype.hour, 'function'); }); test('should return this hour', function() { var jsHour = new Date().getHours(); - result = myp5.hour(); + const result = mockP5Prototype.hour(); assert.equal(result, jsHour); }); }); suite('p5.prototype.second', function() { test('should be a function', function() { - assert.ok(myp5.second); - assert.typeOf(myp5.second, 'function'); + assert.ok(mockP5Prototype.second); + assert.typeOf(mockP5Prototype.second, 'function'); }); test('should return this second', function() { var jsSecond = new Date().getSeconds(); - result = myp5.second(); + const result = mockP5Prototype.second(); assert.equal(result, jsSecond); //(Math.abs(jsSecond - result), '==', 0, 'everything is ok'); // in my testing, found this might be off by 1 second }); }); suite('p5.prototype.minute', function() { test('should be a function', function() { - assert.ok(myp5.minute); - assert.typeOf(myp5.minute, 'function'); + assert.ok(mockP5Prototype.minute); + assert.typeOf(mockP5Prototype.minute, 'function'); }); test('should return a number that is this minute', function() { var jsMinute = new Date().getMinutes(); - result = myp5.minute(); + const result = mockP5Prototype.minute(); assert.isNumber(result); assert.isNumber(jsMinute); assert.equal(result, jsMinute); @@ -99,33 +88,34 @@ suite('time and date', function() { suite('p5.prototype.millis', function() { test('should be a function', function() { - assert.ok(myp5.millis); - assert.typeOf(myp5.millis, 'function'); + assert.ok(mockP5Prototype.millis); + assert.typeOf(mockP5Prototype.millis, 'function'); }); test('result should be a number', function() { - assert.isNumber(myp5.millis()); + assert.isNumber(mockP5Prototype.millis()); }); - test('result should be greater than running time', function() { + // TODO: need to move internal state to module + test.todo('result should be greater than running time', function() { var runningTime = 50; var init_date = window.performance.now(); // wait :\ while (window.performance.now() - init_date <= runningTime) { /* no-op */ } - assert.operator(myp5.millis(), '>', runningTime, 'everything is ok'); + assert.operator(mockP5Prototype.millis(), '>', runningTime, 'everything is ok'); }); - test('result should be > newResult', function() { + test.todo('result should be > newResult', function() { var runningTime = 50; var init_date = Date.now(); - var result = myp5.millis(); + const result = mockP5Prototype.millis(); // wait :\ while (Date.now() - init_date <= runningTime) { /* no-op */ } - var newResult = myp5.millis(); + const newResult = mockP5Prototype.millis(); assert.operator(newResult, '>', result, 'everything is ok'); }); }); From de256c30e8525fa9a7763c3470e2c25b9c16f52a Mon Sep 17 00:00:00 2001 From: limzykenneth Date: Tue, 26 Nov 2024 14:30:00 +0000 Subject: [PATCH 2/9] Convert typed dictionary tests --- test/js/mocks.js | 5 +- test/unit/data/local_storage.js | 102 ++++++++++++++++---------------- test/unit/data/p5.TypedDict.js | 38 +++++------- 3 files changed, 70 insertions(+), 75 deletions(-) diff --git a/test/js/mocks.js b/test/js/mocks.js index c70284553c..c473f9a5e6 100644 --- a/test/js/mocks.js +++ b/test/js/mocks.js @@ -18,11 +18,12 @@ const httpMocks = [ export const httpMock = setupWorker(...httpMocks); // p5.js module mocks -export const mockP5 = { +export const mockP5 = vi.fn(); +Object.assign(mockP5, { _validateParameters: vi.fn(), _friendlyFileLoadError: vi.fn(), _friendlyError: vi.fn() -}; +}); const mockCanvas = document.createElement('canvas'); export const mockP5Prototype = { diff --git a/test/unit/data/local_storage.js b/test/unit/data/local_storage.js index 2ebcd24946..75a9f94da0 100644 --- a/test/unit/data/local_storage.js +++ b/test/unit/data/local_storage.js @@ -1,84 +1,86 @@ -import p5 from '../../../src/app.js'; +import { mockP5, mockP5Prototype } from '../../js/mocks'; +import storage from '../../../src/data/local_storage'; +import p5Color from '../../../src/color/p5.Color'; +import creatingReading from '../../../src/color/creating_reading'; +import p5Vector from '../../../src/math/p5.Vector'; +import math from '../../../src/math/math'; suite('local storage', function() { - var myp5; - var myBoolean = false; - var myObject = { one: 1, two: { nested: true } }; - var myNumber = 46; - var myString = 'coolio'; - var myColor; - var myVector; + const myBoolean = false; + const myObject = { one: 1, two: { nested: true } }; + const myNumber = 46; + const myString = 'coolio'; + let myColor; + let myVector; - var hardCodedTypeID = 'p5TypeID'; + const hardCodedTypeID = 'p5TypeID'; beforeAll(function() { - new p5(function(p) { - p.setup = function() { - myp5 = p; - myColor = myp5.color(40, 100, 70); - myVector = myp5.createVector(10, 20, 30); - myp5.storeItem('myBoolean', myBoolean); - myp5.storeItem('myObject', myObject); - myp5.storeItem('myNumber', myNumber); - myp5.storeItem('myString', myString); - myp5.storeItem('myColor', myColor); - myp5.storeItem('myVector', myVector); - }; - }); - }); + storage(mockP5, mockP5Prototype); + p5Color(mockP5, mockP5Prototype); + creatingReading(mockP5, mockP5Prototype); + p5Vector(mockP5, mockP5Prototype); + math(mockP5, mockP5Prototype); + + mockP5Prototype.storeItem('myBoolean', myBoolean); + mockP5Prototype.storeItem('myObject', myObject); + mockP5Prototype.storeItem('myNumber', myNumber); + mockP5Prototype.storeItem('myString', myString); - afterAll(function() { - myp5.remove(); + myColor = mockP5Prototype.color(40, 100, 70); + myVector = mockP5Prototype.createVector(10, 20, 30); + mockP5Prototype.storeItem('myColor', myColor); + mockP5Prototype.storeItem('myVector', myVector); }); suite('all keys and type keys should exist in local storage', function() { test('boolean storage retrieval should work', function() { - assert.isTrue(myp5.getItem('myBoolean') === false); + assert.equal(mockP5Prototype.getItem('myBoolean'), false); }); test('boolean storage should store the correct type ID', function() { - assert.isTrue( - localStorage.getItem('myBoolean' + hardCodedTypeID) === 'boolean' + assert.equal( + localStorage.getItem('myBoolean' + hardCodedTypeID), 'boolean' ); }); test('object storage should work', function() { - assert.deepEqual(myp5.getItem('myObject'), { + assert.deepEqual(mockP5Prototype.getItem('myObject'), { one: 1, two: { nested: true } }); }); test('object storage retrieval should store the correct type ID', function() { - assert.isTrue( - localStorage.getItem('myObject' + hardCodedTypeID) === 'object' + assert.equal( + localStorage.getItem('myObject' + hardCodedTypeID), 'object' ); }); test('number storage retrieval should work', function() { - assert.isTrue(myp5.getItem('myNumber') === 46); + assert.equal(mockP5Prototype.getItem('myNumber'), 46); }); test('number storage should store the correct type ID', function() { - assert.isTrue( - localStorage.getItem('myNumber' + hardCodedTypeID) === 'number' + assert.equal( + localStorage.getItem('myNumber' + hardCodedTypeID), 'number' ); }); test('string storage retrieval should work', function() { - assert.isTrue(myp5.getItem('myString') === 'coolio'); + assert.equal(mockP5Prototype.getItem('myString'), 'coolio'); }); test('string storage should store the correct type ID', function() { - assert.isTrue( - localStorage.getItem('myString' + hardCodedTypeID) === 'string' + assert.equal( + localStorage.getItem('myString' + hardCodedTypeID), 'string' ); }); test('p5 Color should retrieve as p5 Color', function() { - assert.isTrue(myp5.getItem('myColor') instanceof p5.Color); + assert.instanceOf(mockP5Prototype.getItem('myColor'), mockP5.Color); }); test('p5 Vector should retrieve as p5 Vector', function() { - assert.isTrue(myp5.getItem('myVector') instanceof p5.Vector); + assert.instanceOf(mockP5Prototype.getItem('myVector'), mockP5.Vector); }); }); var checkRemoval = function(key) { - myp5.removeItem(key); - assert.deepEqual(myp5.getItem(key), null); - assert.deepEqual(myp5.getItem(key + hardCodedTypeID), null); + mockP5Prototype.removeItem(key); + assert.deepEqual(mockP5Prototype.getItem(key), null); + assert.deepEqual(mockP5Prototype.getItem(key + hardCodedTypeID), null); }; suite('should be able to remove all items', function() { @@ -110,14 +112,14 @@ suite('local storage', function() { suite('should be able to clear all items at once', function () { test('should remove all items set by storeItem()', function () { localStorage.setItem('extra', 'stuff'); - myp5.clearStorage(); - assert.deepEqual(myp5.getItem('myBoolean'), null); - assert.deepEqual(myp5.getItem('myNumber'), null); - assert.deepEqual(myp5.getItem('myObject'), null); - assert.deepEqual(myp5.getItem('myString'), null); - assert.deepEqual(myp5.getItem('myColor'), null); - assert.deepEqual(myp5.getItem('myVector'), null); - assert.deepEqual(myp5.getItem('extra'), 'stuff'); + mockP5Prototype.clearStorage(); + assert.deepEqual(mockP5Prototype.getItem('myBoolean'), null); + assert.deepEqual(mockP5Prototype.getItem('myNumber'), null); + assert.deepEqual(mockP5Prototype.getItem('myObject'), null); + assert.deepEqual(mockP5Prototype.getItem('myString'), null); + assert.deepEqual(mockP5Prototype.getItem('myColor'), null); + assert.deepEqual(mockP5Prototype.getItem('myVector'), null); + assert.deepEqual(mockP5Prototype.getItem('extra'), 'stuff'); }); }); }); diff --git a/test/unit/data/p5.TypedDict.js b/test/unit/data/p5.TypedDict.js index dda3179547..331031a57e 100644 --- a/test/unit/data/p5.TypedDict.js +++ b/test/unit/data/p5.TypedDict.js @@ -1,39 +1,31 @@ -import p5 from '../../../src/app.js'; +import { mockP5, mockP5Prototype } from '../../js/mocks'; +import typeDict from '../../../src/data/p5.TypedDict'; suite('Dictionary Objects', function() { - var myp5; - var stringDict; - var numberDict; + let stringDict; + let numberDict; beforeAll(function() { - new p5(function(p) { - p.setup = function() { - myp5 = p; - stringDict = myp5.createStringDict('happy', 'coding'); - numberDict = myp5.createNumberDict(1, 2); - }; - }); - }); - - afterAll(function() { - myp5.remove(); + typeDict(mockP5, mockP5Prototype); + stringDict = mockP5Prototype.createStringDict('happy', 'coding'); + numberDict = mockP5Prototype.createNumberDict(1, 2); }); suite('p5.prototype.stringDict', function() { test('should be created', function() { - assert.isTrue(stringDict instanceof p5.StringDict); + assert.instanceOf(stringDict, mockP5.StringDict); }); test('has correct structure', function() { assert.deepEqual( - JSON.stringify(stringDict), - JSON.stringify({ data: { happy: 'coding' } }) + stringDict, + { data: { happy: 'coding' } } ); }); test('should have correct size', function() { var amt = stringDict.size(); - assert.isTrue(amt === Object.keys(stringDict.data).length); + assert.lengthOf(Object.keys(stringDict.data), amt); }); test('should add new key-value pairs', function() { @@ -59,19 +51,19 @@ suite('Dictionary Objects', function() { suite('p5.prototype.numberDict', function() { test('should be created', function() { - assert.isTrue(numberDict instanceof p5.NumberDict); + assert.instanceOf(numberDict, mockP5.NumberDict); }); test('has correct structure', function() { assert.deepEqual( - JSON.stringify(numberDict), - JSON.stringify({ data: { 1: 2 } }) + numberDict, + { data: { 1: 2 } } ); }); test('should have correct size', function() { var amt = numberDict.size(); - assert.isTrue(amt === Object.keys(numberDict.data).length); + assert.lengthOf(Object.keys(numberDict.data), amt); }); test('should add new key-value pairs', function() { From 8c0f31f939925b095c08579cedb1dbbe98a49848 Mon Sep 17 00:00:00 2001 From: limzykenneth Date: Tue, 26 Nov 2024 14:57:15 +0000 Subject: [PATCH 3/9] Convert describe tests --- test/js/mocks.js | 6 +++ test/unit/accessibility/describe.js | 84 ++++++++++++++++------------- 2 files changed, 52 insertions(+), 38 deletions(-) diff --git a/test/js/mocks.js b/test/js/mocks.js index c473f9a5e6..2bb15afbfc 100644 --- a/test/js/mocks.js +++ b/test/js/mocks.js @@ -26,10 +26,16 @@ Object.assign(mockP5, { }); const mockCanvas = document.createElement('canvas'); +mockCanvas.id = 'myCanvasID'; +document.getElementsByTagName("body")[0].appendChild(mockCanvas); + export const mockP5Prototype = { saveCanvas: vi.fn(), elt: mockCanvas, _curElement: { elt: mockCanvas + }, + canvas: { + id: 'myCanvasID' } }; diff --git a/test/unit/accessibility/describe.js b/test/unit/accessibility/describe.js index f16a426d54..986610b7a4 100644 --- a/test/unit/accessibility/describe.js +++ b/test/unit/accessibility/describe.js @@ -1,72 +1,72 @@ -import p5 from '../../../src/app.js'; +import { mockP5, mockP5Prototype } from '../../js/mocks'; +import describe from '../../../src/accessibility/describe'; suite('describe', function() { - let myp5; let myID = 'myCanvasID'; beforeAll(function() { - new p5(function(p) { - p.setup = function() { - let cnv = p.createCanvas(100, 100); - cnv.id(myID); - myp5 = p; - }; - }); - }); + describe(mockP5, mockP5Prototype); - afterAll(function() { - myp5.remove(); + mockP5Prototype.LABEL = 'label'; + mockP5Prototype.FALLBACK = 'fallback'; }); suite('p5.prototype.describe', function() { test('should be a function', function() { - assert.ok(myp5.describe); - assert.typeOf(myp5.describe, 'function'); + assert.ok(mockP5Prototype.describe); + assert.typeOf(mockP5Prototype.describe, 'function'); }); + test('err when LABEL at param #0', function() { assert.throws( function() { - myp5.describe(myp5.LABEL); + mockP5Prototype.describe(mockP5Prototype.LABEL); }, Error, 'description should not be LABEL or FALLBACK' ); }); + test('should create description as fallback', function() { - myp5.describe('a'); + mockP5Prototype.describe('a'); let actual = document.getElementById(myID + '_fallbackDesc'); assert.deepEqual(actual.innerHTML, 'a.'); }); + test('should not add extra period if string ends in "."', function() { - myp5.describe('A.'); + mockP5Prototype.describe('A.'); let actual = document.getElementById(myID + '_fallbackDesc'); assert.deepEqual(actual.innerHTML, 'A.'); }); + test('should not add period if string ends in "!" or "?', function() { - myp5.describe('A!'); + mockP5Prototype.describe('A!'); let actual = document.getElementById(myID + '_fallbackDesc'); if (actual.innerHTML === 'A!') { - myp5.describe('A?'); + mockP5Prototype.describe('A?'); actual = document.getElementById(myID + '_fallbackDesc'); assert.deepEqual(actual.innerHTML, 'A?'); } }); + test('should create description when called after describeElement()', function() { - myp5.describeElement('b', 'c'); - myp5.describe('a'); + mockP5Prototype.describeElement('b', 'c'); + mockP5Prototype.describe('a'); let actual = document.getElementById(myID + '_fallbackDesc'); assert.deepEqual(actual.innerHTML, 'a.'); }); + test('should create Label adjacent to canvas', function() { - myp5.describe('a', myp5.LABEL); + mockP5Prototype.describe('a', mockP5Prototype.LABEL); let actual = document.getElementById(myID + '_labelDesc'); assert.deepEqual(actual.innerHTML, 'a.'); }); + test('should create Label adjacent to canvas when label of element already exists', function() { - myp5.describeElement('ba', 'c', myp5.LABEL); - myp5.describe('a', myp5.LABEL); + mockP5Prototype.describeElement('ba', 'c', mockP5Prototype.LABEL); + mockP5Prototype.describe('a', mockP5Prototype.LABEL); let actual = document.getElementById(myID + '_labelDesc'); assert.deepEqual(actual.innerHTML, 'a.'); }); @@ -74,69 +74,77 @@ suite('describe', function() { suite('p5.prototype.describeElement', function() { test('should be a function', function() { - assert.ok(myp5.describeElement); - assert.typeOf(myp5.describeElement, 'function'); + assert.ok(mockP5Prototype.describeElement); + assert.typeOf(mockP5Prototype.describeElement, 'function'); }); + test('err when LABEL at param #0', function() { assert.throws( function() { - myp5.describeElement(myp5.LABEL, 'b'); + mockP5Prototype.describeElement(mockP5Prototype.LABEL, 'b'); }, Error, 'element name should not be LABEL or FALLBACK' ); }); + test('err when LABEL at param #1', function() { assert.throws( function() { - myp5.describeElement('a', myp5.LABEL); + mockP5Prototype.describeElement('a', mockP5Prototype.LABEL); }, Error, 'description should not be LABEL or FALLBACK' ); }); + test('should create element description as fallback', function() { - myp5.describeElement('az', 'b'); + mockP5Prototype.describeElement('az', 'b'); let actual = document.getElementById(myID + '_fte_az').innerHTML; assert.deepEqual(actual, 'az:b.'); }); + test('should not add extra ":" if element name ends in colon', function() { - myp5.describeElement('ab:', 'b.'); + mockP5Prototype.describeElement('ab:', 'b.'); let actual = document.getElementById(myID + '_fte_ab').innerHTML; assert.deepEqual(actual, 'ab:b.'); }); + test('should replace ";", ",", "." for ":" in element name', function() { let actual; - myp5.describeElement('ac;', 'b.'); + mockP5Prototype.describeElement('ac;', 'b.'); if ( document.getElementById(myID + '_fte_ac').innerHTML === 'ac:b.' ) { - myp5.describeElement('ad,', 'b.'); + mockP5Prototype.describeElement('ad,', 'b.'); if ( document.getElementById(myID + '_fte_ad').innerHTML === 'ad:b.' ) { - myp5.describeElement('ae.', 'b.'); + mockP5Prototype.describeElement('ae.', 'b.'); actual = document.getElementById(myID + '_fte_ae').innerHTML; assert.deepEqual(actual, 'ae:b.'); } } }); + test('should create element description when called after describe()', function() { - myp5.describe('c'); - myp5.describeElement('af', 'b'); + mockP5Prototype.describe('c'); + mockP5Prototype.describeElement('af', 'b'); let actual = document.getElementById(myID + '_fte_af').innerHTML; assert.deepEqual(actual, 'af:b.'); }); + test('should create element label adjacent to canvas', function() { - myp5.describeElement('ag', 'b', myp5.LABEL); + mockP5Prototype.describeElement('ag', 'b', mockP5Prototype.LABEL); const actual = document.getElementById(myID + '_lte_ag').innerHTML; assert.deepEqual(actual, 'ag:b.'); }); + test('should create element label adjacent to canvas when called after describe()', function() { - myp5.describe('c', myp5.LABEL); - myp5.describeElement('ah:', 'b', myp5.LABEL); + mockP5Prototype.describe('c', mockP5Prototype.LABEL); + mockP5Prototype.describeElement('ah:', 'b', mockP5Prototype.LABEL); const actual = document.getElementById(myID + '_lte_ah').innerHTML; assert.deepEqual(actual, 'ah:b.'); }); From ca351e772ca54664204d2398e2965bfc6a597763 Mon Sep 17 00:00:00 2001 From: limzykenneth Date: Tue, 26 Nov 2024 15:05:32 +0000 Subject: [PATCH 4/9] Mark accessibility output unit tests as todo --- test/unit/accessibility/describe.js | 2 +- test/unit/accessibility/outputs.js | 45 +++++++++++++++-------------- 2 files changed, 25 insertions(+), 22 deletions(-) diff --git a/test/unit/accessibility/describe.js b/test/unit/accessibility/describe.js index 986610b7a4..31676179ff 100644 --- a/test/unit/accessibility/describe.js +++ b/test/unit/accessibility/describe.js @@ -2,7 +2,7 @@ import { mockP5, mockP5Prototype } from '../../js/mocks'; import describe from '../../../src/accessibility/describe'; suite('describe', function() { - let myID = 'myCanvasID'; + const myID = 'myCanvasID'; beforeAll(function() { describe(mockP5, mockP5Prototype); diff --git a/test/unit/accessibility/outputs.js b/test/unit/accessibility/outputs.js index c94662931d..56d0c8cae0 100644 --- a/test/unit/accessibility/outputs.js +++ b/test/unit/accessibility/outputs.js @@ -1,32 +1,26 @@ -import p5 from '../../../src/app.js'; +import { mockP5, mockP5Prototype } from '../../js/mocks'; +import outputs from '../../../src/accessibility/outputs'; +import textOutput from '../../../src/accessibility/textOutput'; +// TODO: Is it possible to test this without a runtime? suite('outputs', function() { - let myp5; let myID = 'myCanvasID'; beforeAll(function() { - new p5(function(p) { - p.setup = function() { - let cnv = p.createCanvas(100, 100); - cnv.id(myID); - myp5 = p; - }; - }); - }); - - afterAll(function() { - myp5.remove(); + outputs(mockP5, mockP5Prototype); + textOutput(mockP5, mockP5Prototype); }); suite('p5.prototype.textOutput', function() { test('should be a function', function() { - assert.ok(myp5.textOutput); - assert.typeOf(myp5.textOutput, 'function'); + assert.ok(mockP5Prototype.textOutput); + assert.typeOf(mockP5Prototype.textOutput, 'function'); }); let expected = 'Your output is a, 100 by 100 pixels, white canvas containing the following shape:'; - test('should create output as fallback', function() { + + test.todo('should create output as fallback', function() { return new Promise(function(resolve, reject) { let actual = ''; new p5(function(p) { @@ -51,7 +45,8 @@ suite('outputs', function() { }); }); }); - test('should create output as label', function() { + + test.todo('should create output as label', function() { return new Promise(function(resolve, reject) { let label = ''; let fallback = ''; @@ -80,6 +75,7 @@ suite('outputs', function() { }); }); }); + test.todo('should create text output for arc()', function() { return new Promise(function(resolve, reject) { expected = @@ -107,6 +103,7 @@ suite('outputs', function() { }); }); }); + test.todo('should create text output for ellipse()', function() { return new Promise(function(resolve, reject) { expected = @@ -134,6 +131,7 @@ suite('outputs', function() { }); }); }); + test.todo('should create text output for triangle()', function() { return new Promise(function(resolve, reject) { expected = @@ -165,13 +163,14 @@ suite('outputs', function() { suite('p5.prototype.gridOutput', function() { test('should be a function', function() { - assert.ok(myp5.gridOutput); - assert.typeOf(myp5.gridOutput, 'function'); + assert.ok(mockP5Prototype.gridOutput); + assert.typeOf(mockP5Prototype.gridOutput, 'function'); }); let expected = 'white canvas, 100 by 100 pixels, contains 1 shape: 1 square'; - test('should create output as fallback', function() { + + test.todo('should create output as fallback', function() { return new Promise(function(resolve, reject) { let actual = ''; new p5(function(p) { @@ -196,7 +195,8 @@ suite('outputs', function() { }); }); }); - test('should create output as label', function() { + + test.todo('should create output as label', function() { return new Promise(function(resolve, reject) { let label = ''; let fallback = ''; @@ -225,6 +225,7 @@ suite('outputs', function() { }); }); }); + test.todo('should create text output for quad()', function() { return new Promise(function(resolve, reject) { expected = 'red quadrilateral, location = top left, area = 45 %'; @@ -251,6 +252,7 @@ suite('outputs', function() { }); }); }); + test.todo('should create text output for point()', function() { return new Promise(function(resolve, reject) { expected = 'dark fuchsia point, location = bottom right'; @@ -277,6 +279,7 @@ suite('outputs', function() { }); }); }); + test.todo('should create text output for triangle()', function() { return new Promise(function(resolve, reject) { expected = 'green triangle, location = top left, area = 13 %'; From 095d49704ac7995f85b11f6a1d958f346e20de68 Mon Sep 17 00:00:00 2001 From: limzykenneth Date: Fri, 29 Nov 2024 22:29:37 +0000 Subject: [PATCH 5/9] Fix dom.js tests --- src/dom/dom.js | 64 +- src/dom/p5.MediaElement.js | 59 -- test/js/mocks.js | 3 +- test/unit/dom/dom.js | 1140 ++++++++++++------------------------ 4 files changed, 425 insertions(+), 841 deletions(-) diff --git a/src/dom/dom.js b/src/dom/dom.js index dfea7a84f2..76265cffcb 100644 --- a/src/dom/dom.js +++ b/src/dom/dom.js @@ -213,7 +213,7 @@ function dom(p5, fn){ let container = document; if (typeof p === 'string') { container = document.querySelector(p) || document; - } else if (p instanceof p5.Element) { + } else if (p instanceof Element) { container = p.elt; } else if (p instanceof HTMLElement) { container = p; @@ -256,6 +256,64 @@ function dom(p5, fn){ } }; + /** + * Creates a new p5.Element object. + * + * The first parameter, `tag`, is a string an HTML tag such as `'h5'`. + * + * The second parameter, `content`, is optional. It's a string that sets the + * HTML content to insert into the new element. New elements have no content + * by default. + * + * @method createElement + * @param {String} tag tag for the new element. + * @param {String} [content] HTML content to insert into the element. + * @return {p5.Element} new p5.Element object. + * + * @example + *
+ * + * function setup() { + * createCanvas(100, 100); + * + * background(200); + * + * // Create an h5 element with nothing in it. + * createElement('h5'); + * + * describe('A gray square.'); + * } + * + *
+ * + *
+ * + * function setup() { + * createCanvas(100, 100); + * + * background(200); + * + * // Create an h5 element with the content "p5*js". + * let h5 = createElement('h5', 'p5*js'); + * + * // Set the element's style and position. + * h5.style('color', 'deeppink'); + * h5.position(30, 15); + * + * describe('The text "p5*js" written in pink in the middle of a gray square.'); + * } + * + *
+ */ + fn.createElement = function (tag, content) { + p5._validateParameters('createElement', arguments); + const elt = document.createElement(tag); + if (typeof content !== 'undefined') { + elt.innerHTML = content; + } + return addElement(elt, this); + }; + /** * Removes all elements created by p5.js, including any event handlers. * @@ -1186,7 +1244,7 @@ function dom(p5, fn){ p5._validateParameters('createSelect', args); let self; let arg = args[0]; - if (arg instanceof p5.Element && arg.elt instanceof HTMLSelectElement) { + if (arg instanceof Element && arg.elt instanceof HTMLSelectElement) { // If given argument is p5.Element of select type self = arg; this.elt = arg.elt; @@ -1444,7 +1502,7 @@ function dom(p5, fn){ let name; const arg0 = args[0]; if ( - arg0 instanceof p5.Element && + arg0 instanceof Element && (arg0.elt instanceof HTMLDivElement || arg0.elt instanceof HTMLSpanElement) ) { // If given argument is p5.Element of div/span type diff --git a/src/dom/p5.MediaElement.js b/src/dom/p5.MediaElement.js index 3d85047d39..d263617046 100644 --- a/src/dom/p5.MediaElement.js +++ b/src/dom/p5.MediaElement.js @@ -1744,65 +1744,6 @@ function media(p5, fn){ return videoEl; }; - - /** - * Creates a new p5.Element object. - * - * The first parameter, `tag`, is a string an HTML tag such as `'h5'`. - * - * The second parameter, `content`, is optional. It's a string that sets the - * HTML content to insert into the new element. New elements have no content - * by default. - * - * @method createElement - * @param {String} tag tag for the new element. - * @param {String} [content] HTML content to insert into the element. - * @return {p5.Element} new p5.Element object. - * - * @example - *
- * - * function setup() { - * createCanvas(100, 100); - * - * background(200); - * - * // Create an h5 element with nothing in it. - * createElement('h5'); - * - * describe('A gray square.'); - * } - * - *
- * - *
- * - * function setup() { - * createCanvas(100, 100); - * - * background(200); - * - * // Create an h5 element with the content "p5*js". - * let h5 = createElement('h5', 'p5*js'); - * - * // Set the element's style and position. - * h5.style('color', 'deeppink'); - * h5.position(30, 15); - * - * describe('The text "p5*js" written in pink in the middle of a gray square.'); - * } - * - *
- */ - fn.createElement = function (tag, content) { - p5._validateParameters('createElement', arguments); - const elt = document.createElement(tag); - if (typeof content !== 'undefined') { - elt.innerHTML = content; - } - return addElement(elt, this); - }; - // ============================================================================= // p5.MediaElement additions // ============================================================================= diff --git a/test/js/mocks.js b/test/js/mocks.js index 2bb15afbfc..63d0cc7951 100644 --- a/test/js/mocks.js +++ b/test/js/mocks.js @@ -37,5 +37,6 @@ export const mockP5Prototype = { }, canvas: { id: 'myCanvasID' - } + }, + _elements: [] }; diff --git a/test/unit/dom/dom.js b/test/unit/dom/dom.js index 3dad137e98..a6fcd29c31 100644 --- a/test/unit/dom/dom.js +++ b/test/unit/dom/dom.js @@ -1,58 +1,67 @@ import p5 from '../../../src/app.js'; import { testSketchWithPromise } from '../../js/p5_helpers'; +import { mockP5, mockP5Prototype } from '../../js/mocks'; +import dom from '../../../src/dom/dom'; +import { Element } from '../../../src/dom/p5.Element'; +import creatingReading from '../../../src/color/creating_reading'; +import p5Color from '../../../src/color/p5.Color'; + suite('DOM', function() { + beforeAll(() => { + dom(mockP5, mockP5Prototype); + creatingReading(mockP5, mockP5Prototype); + p5Color(mockP5, mockP5Prototype); + }); + + // Selectors suite('p5.prototype.select', function() { - /** - * Uses p5 in instance-mode inside a custom container. - * All elements are attached inside the container for testing - * And cleaned up on teardown. - */ - let myp5; let myp5Container; + const generateButton = (name, className = null) => { + const button = mockP5Prototype.createButton(name); + if (className) { + button.class(className); + } + return button; + }; + + const generateDiv = (id = null, className = null) => { + const div = mockP5Prototype.createDiv(); + if (id) { + div.id(id); + } + if (className) { + div.class(className); + } + return div; + }; + beforeEach(function() { myp5Container = document.createElement('div'); document.body.appendChild(myp5Container); - new p5(function(p) { - p.setup = function() { - myp5 = p; - }; - }, myp5Container); }); afterEach(function() { - myp5.remove(); - if (myp5Container && myp5Container.parentNode) { - myp5Container.parentNode.removeChild(myp5Container); - } - myp5Container = null; + document.body.innerHTML = ""; }); test('should return only one p5.element if match is found', function() { // Adding 2 buttons to container - myp5.createCheckbox('Text 1'); - myp5.createCheckbox('Text 2'); - const result = myp5.select('input'); + mockP5Prototype.createCheckbox('Text 1'); + mockP5Prototype.createCheckbox('Text 2'); + const result = mockP5Prototype.select('input'); - assert.instanceOf(result, p5.Element); + assert.instanceOf(result, Element); }); - const generateButton = (name, className = null) => { - const button = myp5.createButton(name); - if (className) { - button.class(className); - } - return button; - }; - test('should find element by class name', function() { // Creates 2 buttons with same class and test if it selects only one. const testClassName = 'test-button'; const testButton = generateButton('Button 1', testClassName); generateButton('Button 2', testClassName); - const result = myp5.select(`.${testClassName}`); + const result = mockP5Prototype.select(`.${testClassName}`); assert.deepEqual(result.elt, testButton.elt); }); @@ -61,10 +70,10 @@ suite('DOM', function() { const testClassName = 'test-button'; generateButton('Button 1', testClassName); const testButton = generateButton('Button 2', testClassName); - const testContainer = myp5.createDiv(); + const testContainer = mockP5Prototype.createDiv(); testButton.parent(testContainer); - const result = myp5.select(`.${testClassName}`, testContainer); + const result = mockP5Prototype.select(`.${testClassName}`, testContainer); assert.deepEqual(testButton.elt, result.elt); }); @@ -72,7 +81,7 @@ suite('DOM', function() { // Gives unused className and tests if it returns null const testClassName = 'test-button'; generateButton('Test Button', testClassName); - const result = myp5.select('.classNameWithTypo'); + const result = mockP5Prototype.select('.classNameWithTypo'); assert.isNull(result); }); @@ -80,7 +89,7 @@ suite('DOM', function() { // Creates 2 similar elements and tests if it selects only one. const testButton = generateButton('Button 1'); generateButton('Button 2'); - const result = myp5.select('button'); + const result = mockP5Prototype.select('button'); assert.deepEqual(result.elt, testButton.elt); }); @@ -89,30 +98,19 @@ suite('DOM', function() { // selects inside the container generateButton('Button 1'); const testButton = generateButton('Button 2'); - const testDiv = myp5.createDiv(); + const testDiv = mockP5Prototype.createDiv(); testButton.parent(testDiv); - const result = myp5.select('button', testDiv); + const result = mockP5Prototype.select('button', testDiv); assert.deepEqual(result.elt, testButton.elt); }); test('should return null when no matches are found by tag name', function() { generateButton('Test Button'); - const result = myp5.select('video', myp5Container); + const result = mockP5Prototype.select('video', myp5Container); assert.isNull(result); }); - const generateDiv = (id = null, className = null) => { - const div = myp5.createDiv(); - if (id) { - div.id(id); - } - if (className) { - div.class(className); - } - return div; - }; - test('should select element in container using CSS selector with ID', function() { const divID = 'divId'; const testDiv = generateDiv(divID); @@ -120,7 +118,7 @@ suite('DOM', function() { generateButton('Button 2'); testButton.parent(testDiv); - const result = myp5.select(`#${divID} button`); + const result = mockP5Prototype.select(`#${divID} button`); assert.deepEqual(result.elt, testButton.elt); }); @@ -131,51 +129,37 @@ suite('DOM', function() { generateButton('Button 2'); testButton.parent(testDiv); - const result = myp5.select(`.${divClass} button`); + const result = mockP5Prototype.select(`.${divClass} button`); assert.deepEqual(result.elt, testButton.elt); }); }); suite('p5.prototype.selectAll', function() { - let myp5; - let myp5Container; - beforeEach(function() { - return new Promise(resolve => { - myp5Container = document.createElement('div'); - document.body.appendChild(myp5Container); - new p5(function(p) { - p.setup = function() { - myp5 = p; - let mydiv = document.createElement('div'); - mydiv.setAttribute('id', 'main'); - let childbutton = document.createElement('button'); - childbutton.setAttribute('class', 'p5button'); - mydiv.append(childbutton); - let otherbutton = document.createElement('button'); - otherbutton.setAttribute('class', 'p5button'); - myp5Container.append(mydiv, otherbutton); - resolve(); - }; - }, myp5Container); - }); + const mydiv = document.createElement('div'); + mydiv.setAttribute('id', 'main'); + + const childbutton = document.createElement('button'); + childbutton.setAttribute('class', 'p5button'); + mydiv.append(childbutton); + + const otherbutton = document.createElement('button'); + otherbutton.setAttribute('class', 'p5button'); + + document.body.append(mydiv, otherbutton); }); afterEach(function() { - myp5.remove(); - if (myp5Container && myp5Container.parentNode) { - myp5Container.parentNode.removeChild(myp5Container); - } - myp5Container = null; + document.body.innerHTML = ""; }); test('should return an array', function() { - const elements = myp5.selectAll('button'); + const elements = mockP5Prototype.selectAll('button'); assert.isArray(elements); }); test('should return empty array when no matching classes are found', function() { - const elements = myp5.selectAll('.randomElements'); + const elements = mockP5Prototype.selectAll('.randomElements'); assert.isArray(elements); assert.lengthOf(elements, 0); }); @@ -189,15 +173,15 @@ suite('DOM', function() { test('should find all elements with matching class name', function() { const testClassName = 'p5button'; - const p5Results = myp5.selectAll(`.${testClassName}`); - const domResults = myp5Container.getElementsByClassName(testClassName); + const p5Results = mockP5Prototype.selectAll(`.${testClassName}`); + const domResults = document.getElementsByClassName(testClassName); matchResults(p5Results, domResults); }); test('should find all elements with matching class name in given container', function() { const testClassName = 'p5button'; const parentContainerId = 'main'; - const p5Results = myp5.selectAll( + const p5Results = mockP5Prototype.selectAll( `.${testClassName}`, `#${parentContainerId}` ); @@ -208,15 +192,15 @@ suite('DOM', function() { test('should find all elements with matching tag name', function() { const testTagName = 'button'; - const p5Results = myp5.selectAll(testTagName); - const domResults = myp5Container.getElementsByTagName(testTagName); + const p5Results = mockP5Prototype.selectAll(testTagName); + const domResults = document.getElementsByTagName(testTagName); matchResults(p5Results, domResults); }); test('should find all elements with matching tag name in given container', function() { const testTagName = 'button'; const parentContainerId = 'main'; - const p5Results = myp5.selectAll(testTagName, `#${parentContainerId}`); + const p5Results = mockP5Prototype.selectAll(testTagName, `#${parentContainerId}`); const containerElement = document.getElementById(parentContainerId); const domResults = containerElement.getElementsByTagName(testTagName); matchResults(p5Results, domResults); @@ -225,56 +209,15 @@ suite('DOM', function() { test('should find all elements in container using CSS selector with id', function() { const testTagName = 'button'; const parentContainerId = 'main'; - const p5Results = myp5.selectAll(`#${parentContainerId} ${testTagName}`); + const p5Results = mockP5Prototype.selectAll(`#${parentContainerId} ${testTagName}`); const containerElement = document.getElementById(parentContainerId); const domResults = containerElement.getElementsByTagName(testTagName); matchResults(p5Results, domResults); }); }); - suite('p5.prototype.removeElements', function() { - let myp5; - let myp5Container; - - beforeEach(function() { - myp5Container = document.createElement('div'); - document.body.appendChild(myp5Container); - new p5(function(p) { - p.setup = function() { - // configure p5 to not add a canvas by default. - p.noCanvas(); - myp5 = p; - }; - }, myp5Container); - }); - - afterEach(function() { - myp5.remove(); - if (myp5Container && myp5Container.parentNode) { - myp5Container.parentNode.removeChild(myp5Container); - } - myp5Container = null; - }); - - test('should remove all elements created by p5 except Canvas', function() { - // creates 6 elements one of which is a canvas, then calls - // removeElements and tests if only canvas is left. - const tags = ['a', 'button', 'canvas', 'div', 'p', 'video']; - for (const tag of tags) { - myp5.createElement(tag); - } - // Check if all elements are created. - assert.deepEqual(myp5Container.childElementCount, tags.length); - - // Call removeElements and check if only canvas is remaining - myp5.removeElements(); - assert.deepEqual(myp5Container.childElementCount, 1); - const remainingElement = myp5Container.children[0]; - assert.instanceOf(remainingElement, HTMLCanvasElement); - }); - }); - - suite('p5.Element.prototype.changed', function() { + // Events + suite.todo('p5.Element.prototype.changed', function() { testSketchWithPromise( 'should trigger callback when element changes', function(sketch, resolve, reject) { @@ -301,7 +244,7 @@ suite('DOM', function() { ); }); - suite('p5.Element.prototype.input', function() { + suite.todo('p5.Element.prototype.input', function() { testSketchWithPromise( 'should trigger callback when input is provided', function(sketch, resolve, reject) { @@ -328,198 +271,161 @@ suite('DOM', function() { ); }); - suite('p5.prototype.createDiv', function() { - let myp5; - let testElement; + suite.todo('p5.prototype.drop', function() { + testSketchWithPromise('drop fires multiple events', function( + sketch, + resolve, + reject + ) { + let testElement; + let fileFnCounter = 0; + let eventFnCounter = 0; + sketch.setup = function() { + testElement = sketch.createDiv('Drop files inside'); - beforeEach(function() { - new p5(function(p) { - p.setup = function() { - myp5 = p; + // Setup test functions and constants + const file1 = new File(['foo'], 'foo.txt', { type: 'text/plain' }); + const file2 = new File(['foo'], 'foo.txt', { type: 'text/plain' }); + const hasFinished = () => { + if (fileFnCounter > 1 && eventFnCounter === 1) resolve(); }; - }); + const testFileFn = () => { + fileFnCounter += 1; + hasFinished(); + }; + const testEventFn = () => { + eventFnCounter += 1; + hasFinished(); + }; + testElement.drop(testFileFn, testEventFn); + + // Fire a mock drop and test the method + const mockedEvent = new Event('drop'); + mockedEvent.dataTransfer = { files: [file1, file2] }; + testElement.elt.dispatchEvent(mockedEvent); + }; }); + }); + // Add/remove elements + suite('p5.prototype.createDiv', function() { afterEach(function() { - myp5.remove(); - if (testElement && testElement.parentNode) { - testElement.parentNode.removeChild(testElement); - } - testElement = null; + document.body.innerHTML = ""; }); test('should be a function', function() { - assert.isFunction(myp5.createDiv); + assert.isFunction(mockP5Prototype.createDiv); }); test('should return a p5.Element of div type', function() { - testElement = myp5.createDiv(); + const testElement = mockP5Prototype.createDiv(); assert.instanceOf(testElement, p5.Element); assert.instanceOf(testElement.elt, HTMLDivElement); }); test('should set given param as innerHTML of div', function() { const testHTML = '

Hello

'; - testElement = myp5.createDiv(testHTML); + const testElement = mockP5Prototype.createDiv(testHTML); assert.deepEqual(testElement.elt.innerHTML, testHTML); }); }); suite('p5.prototype.createP', function() { - let myp5; - let testElement; - - beforeEach(function() { - new p5(function(p) { - p.setup = function() { - myp5 = p; - }; - }); - }); - afterEach(function() { - myp5.remove(); - if (testElement && testElement.parentNode) { - testElement.parentNode.removeChild(testElement); - } - testElement = null; + document.body.innerHTML = ""; }); test('should be a function', function() { - assert.isFunction(myp5.createP); + assert.isFunction(mockP5Prototype.createP); }); test('should return a p5.Element of p type', function() { - testElement = myp5.createP(); + const testElement = mockP5Prototype.createP(); assert.instanceOf(testElement, p5.Element); assert.instanceOf(testElement.elt, HTMLParagraphElement); }); test('should set given param as innerHTML of p', function() { const testHTML = 'Hello'; - testElement = myp5.createP(testHTML); + const testElement = mockP5Prototype.createP(testHTML); assert.deepEqual(testElement.elt.innerHTML, testHTML); }); }); suite('p5.prototype.createSpan', function() { - let myp5; - let testElement; - - beforeEach(function() { - new p5(function(p) { - p.setup = function() { - myp5 = p; - }; - }); - }); - afterEach(function() { - myp5.remove(); - if (testElement && testElement.parentNode) { - testElement.parentNode.removeChild(testElement); - } - testElement = null; + document.body.innerHTML = ""; }); test('should be a function', function() { - assert.isFunction(myp5.createSpan); + assert.isFunction(mockP5Prototype.createSpan); }); test('should return a p5.Element of span type', function() { - testElement = myp5.createSpan(); + const testElement = mockP5Prototype.createSpan(); assert.instanceOf(testElement, p5.Element); assert.instanceOf(testElement.elt, HTMLSpanElement); }); test('should set given param as innerHTML of span', function() { const testHTML = 'Hello'; - testElement = myp5.createSpan(testHTML); + const testElement = mockP5Prototype.createSpan(testHTML); assert.deepEqual(testElement.elt.innerHTML, testHTML); }); }); suite('p5.prototype.createImg', function() { - let myp5; - let testElement; - const imagePath = 'unit/assets/cat.jpg'; - - beforeEach(function() { - new p5(function(p) { - p.setup = function() { - myp5 = p; - }; - }); - }); + const imagePath = '/test/unit/assets/cat.jpg'; afterEach(function() { - myp5.remove(); - if (testElement && testElement.parentNode) { - testElement.parentNode.removeChild(testElement); - } - testElement = null; + document.body.innerHTML = ""; }); test('should be a function', function() { - assert.isFunction(myp5.createImg); + assert.isFunction(mockP5Prototype.createImg); }); test('should return p5.Element of image type', function() { - testElement = myp5.createImg(imagePath, ''); + const testElement = mockP5Prototype.createImg(imagePath, ''); assert.instanceOf(testElement, p5.Element); assert.instanceOf(testElement.elt, HTMLImageElement); }); test('should set src of image from params', function() { - testElement = myp5.createImg(imagePath, ''); + const testElement = mockP5Prototype.createImg(imagePath, ''); assert.isTrue(testElement.elt.src.endsWith(imagePath)); }); test('should set alt from params if given', function() { const alternativeText = 'Picture of a cat'; - testElement = myp5.createImg(imagePath, alternativeText); + const testElement = mockP5Prototype.createImg(imagePath, alternativeText); assert.deepEqual(testElement.elt.alt, alternativeText); }); test('should set crossOrigin from params if given', function() { const crossOrigin = 'anonymous'; - testElement = myp5.createImg(imagePath, '', crossOrigin); + const testElement = mockP5Prototype.createImg(imagePath, '', crossOrigin); assert.deepEqual(testElement.elt.crossOrigin, crossOrigin); }); - testSketchWithPromise( - 'should trigger callback when image is loaded', - function(sketch, resolve, reject) { - sketch.setup = function() { - testElement = sketch.createImg(imagePath, '', '', resolve); - testElement.elt.dispatchEvent(new Event('load')); - }; - } - ); + // testSketchWithPromise( + // 'should trigger callback when image is loaded', + // function(sketch, resolve, reject) { + // sketch.setup = function() { + // testElement = sketch.createImg(imagePath, '', '', resolve); + // testElement.elt.dispatchEvent(new Event('load')); + // }; + // } + // ); }); suite('p5.prototype.createA', function() { - let myp5; - let testElement; - - beforeEach(function() { - new p5(function(p) { - p.setup = function() { - myp5 = p; - }; - }); - }); - afterEach(function() { - myp5.remove(); - if (testElement && testElement.parentNode) { - testElement.parentNode.removeChild(testElement); - testElement = null; - } + document.body.innerHTML = ""; }); test('should return a p5.Element of anchor type', () => { - testElement = myp5.createA('', ''); + const testElement = mockP5Prototype.createA('', ''); assert.instanceOf(testElement, p5.Element); assert.instanceOf(testElement.elt, HTMLAnchorElement); }); @@ -527,7 +433,7 @@ suite('DOM', function() { test('creates anchor with given link & text', function() { const testUrl = 'http://p5js.org/'; const testText = 'p5js website'; - testElement = myp5.createA(testUrl, testText); + const testElement = mockP5Prototype.createA(testUrl, testText); assert.deepEqual(testElement.elt.href, testUrl); assert.deepEqual(testElement.elt.text, testText); @@ -535,110 +441,66 @@ suite('DOM', function() { test('creates anchor with given target', function() { const testTarget = 'blank'; - testElement = myp5.createA('http://p5js.org', 'p5js website', testTarget); + const testElement = mockP5Prototype.createA('http://p5js.org', 'p5js website', testTarget); assert.deepEqual(testElement.elt.target, testTarget); }); }); suite('p5.prototype.createSlider', function() { - let myp5; - let testElement; - - beforeEach(function() { - new p5(function(p) { - p.setup = function() { - myp5 = p; - }; - }); - }); - afterEach(function() { - myp5.remove(); - if (testElement && testElement.parentNode) { - testElement.parentNode.removeChild(testElement); - } - testElement = null; + document.body.innerHTML = ""; }); test('should return a p5.Element of slider type', () => { - testElement = myp5.createSlider(0, 100, 0, 1); + const testElement = mockP5Prototype.createSlider(0, 100, 0, 1); assert.instanceOf(testElement, p5.Element); assert.instanceOf(testElement.elt, HTMLInputElement); assert.deepEqual(testElement.elt.type, 'range'); }); test('should set min and max values', function() { - let testElement = myp5.createSlider(20, 80); + const testElement = mockP5Prototype.createSlider(20, 80); assert.deepEqual(testElement.elt.min, '20'); assert.deepEqual(testElement.elt.max, '80'); }); test('should set slider position', function() { - let testElement = myp5.createSlider(20, 80, 50); + const testElement = mockP5Prototype.createSlider(20, 80, 50); assert.deepEqual(testElement.elt.value, '50'); }); test('should set step value', function() { - testElement = myp5.createSlider(20, 80, 10, 5); + const testElement = mockP5Prototype.createSlider(20, 80, 10, 5); assert.deepEqual(testElement.elt.step, '5'); }); }); suite('p5.prototype.createButton', function() { - let myp5; - let testElement; - - beforeEach(function() { - new p5(function(p) { - p.setup = function() { - myp5 = p; - }; - }); - }); afterEach(function() { - myp5.remove(); - if (testElement && testElement.parentNode) { - testElement.parentNode.removeChild(testElement); - } - testElement = null; + document.body.innerHTML = ""; }); test('should return a p5.Element of button type', function() { - testElement = myp5.createButton('testButton', 'testButton'); + const testElement = mockP5Prototype.createButton('testButton', 'testButton'); assert.instanceOf(testElement, p5.Element); assert.instanceOf(testElement.elt, HTMLButtonElement); }); - testSketchWithPromise( - 'should trigger callback when mouse is pressed', - function(sketch, resolve, reject) { - sketch.setup = function() { - const testElement = sketch.createButton('test'); - testElement.mousePressed(resolve); - testElement.elt.dispatchEvent(new Event('mousedown')); - }; - } - ); + // testSketchWithPromise( + // 'should trigger callback when mouse is pressed', + // function(sketch, resolve, reject) { + // sketch.setup = function() { + // const testElement = sketch.createButton('test'); + // testElement.mousePressed(resolve); + // testElement.elt.dispatchEvent(new Event('mousedown')); + // }; + // } + // ); }); - // Tests for createCheckbox suite('p5.prototype.createCheckbox', function() { - let myp5; - let testElement; - - beforeEach(function() { - new p5(function(p) { - p.setup = function() { - myp5 = p; - }; - }); - }); afterEach(function() { - myp5.remove(); - if (testElement && testElement.parentNode) { - testElement.parentNode.removeChild(testElement); - } - testElement = null; + document.body.innerHTML = ""; }); // helper functions @@ -653,11 +515,11 @@ suite('DOM', function() { : null; test('should be a function', function() { - assert.isFunction(myp5.createCheckbox); + assert.isFunction(mockP5Prototype.createCheckbox); }); test('should return a p5.Element with checkbox as descendant', function() { - testElement = myp5.createCheckbox(); + const testElement = mockP5Prototype.createCheckbox(); const checkboxElement = getCheckboxElement(testElement); assert.instanceOf(testElement, p5.Element); @@ -666,7 +528,7 @@ suite('DOM', function() { test('calling createCheckbox(label) should create checkbox and set its label', function() { const labelValue = 'label'; - testElement = myp5.createCheckbox(labelValue); + const testElement = mockP5Prototype.createCheckbox(labelValue); const spanElement = getSpanElement(testElement); const testElementLabelValue = getSpanElement(testElement) ? getSpanElement(testElement).innerHTML @@ -679,7 +541,7 @@ suite('DOM', function() { test('calling createCheckbox(label, true) should create a checked checkbox and set its label', function() { const labelValue = 'label'; - testElement = myp5.createCheckbox(labelValue, true); + const testElement = mockP5Prototype.createCheckbox(labelValue, true); const spanElement = getSpanElement(testElement); const testElementLabelValue = getSpanElement(testElement) @@ -693,35 +555,20 @@ suite('DOM', function() { }); test('calling checked() should return checked value of checkbox', function() { - testElement = myp5.createCheckbox('', true); + const testElement = mockP5Prototype.createCheckbox('', true); assert.isTrue(testElement.checked()); }); test('calling checked(true) should set checked value of checkbox', function() { - testElement = myp5.createCheckbox('', false); + const testElement = mockP5Prototype.createCheckbox('', false); testElement.checked(true); assert.isTrue(testElement.checked()); }); }); suite('p5.prototype.createSelect', function() { - let myp5; - let testElement; - - beforeEach(function() { - new p5(function(p) { - p.setup = function() { - myp5 = p; - }; - }); - }); - afterEach(function() { - myp5.remove(); - if (testElement && testElement.parentNode) { - testElement.parentNode.removeChild(testElement); - testElement = null; - } + document.body.innerHTML = ""; }); const createHTMLSelect = options => { @@ -736,24 +583,24 @@ suite('DOM', function() { }; test('should be a function', function() { - assert.isFunction(myp5.createSelect); + assert.isFunction(mockP5Prototype.createSelect); }); test('should return p5.Element of select HTML Element', function() { - testElement = myp5.createSelect(); + const testElement = mockP5Prototype.createSelect(); assert.instanceOf(testElement, p5.Element); assert.instanceOf(testElement.elt, HTMLSelectElement); }); test('should return p5.Element when select element is passed', function() { const selectElement = createHTMLSelect(['option1', 'option2']); - testElement = myp5.createSelect(selectElement); + const testElement = mockP5Prototype.createSelect(selectElement); assert.deepEqual(testElement.elt, selectElement); }); test('calling option(newName) should add a new option', function() { const testOptions = ['John', 'Bethany', 'Dwayne']; - testElement = myp5.createSelect(); + const testElement = mockP5Prototype.createSelect(); for (const optionName of testOptions) testElement.option(optionName); const htmlOptions = []; @@ -767,7 +614,7 @@ suite('DOM', function() { test('calling option(name, newValue) should update value of option', function() { const optionName = 'john'; const testValues = [1, 'abc', true]; - testElement = myp5.createSelect(); + const testElement = mockP5Prototype.createSelect(); testElement.option(optionName, 0); for (const newValue of testValues) { @@ -778,7 +625,7 @@ suite('DOM', function() { }); test('calling value() should return current selected option', function() { - testElement = myp5.createSelect(); + const testElement = mockP5Prototype.createSelect(); testElement.option('Sunday'); testElement.option('Monday'); testElement.elt.options[1].selected = true; @@ -786,7 +633,7 @@ suite('DOM', function() { }); test('calling selected() should return all selected options', function() { - testElement = myp5.createSelect(true); + const testElement = mockP5Prototype.createSelect(true); const options = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']; for (const optionName of options) testElement.option(optionName); @@ -802,7 +649,7 @@ suite('DOM', function() { }); test('should update select value when HTML special characters are in the name', function() { - testElement = myp5.createSelect(true); + const testElement = mockP5Prototype.createSelect(true); testElement.option('&', 'foo'); assert.equal(testElement.elt.options.length, 1); assert.equal(testElement.elt.options[0].value, 'foo'); @@ -811,7 +658,7 @@ suite('DOM', function() { }); test('calling selected(value) should updated selectedIndex', function() { - testElement = myp5.createSelect(true); + const testElement = mockP5Prototype.createSelect(true); const options = ['Sunday', 'Monday', 'Tuesday', 'Friday']; for (const optionName of options) testElement.option(optionName); @@ -825,14 +672,14 @@ suite('DOM', function() { }); test('calling disable() should disable the whole dropdown', function() { - testElement = myp5.createSelect(true); + const testElement = mockP5Prototype.createSelect(true); testElement.disable(); assert.isTrue(testElement.elt.disabled); }); test('should disable an option when disable() method invoked with option name', function() { - testElement = myp5.createSelect(true); + const testElement = mockP5Prototype.createSelect(true); const options = ['Sunday', 'Monday', 'Tuesday', 'Friday']; for (const optionName of options) testElement.option(optionName); @@ -844,23 +691,8 @@ suite('DOM', function() { }); suite('p5.prototype.createRadio', function() { - let myp5; - let testElement; - - beforeEach(function() { - new p5(function(p) { - p.setup = function() { - myp5 = p; - }; - }); - }); - afterEach(function() { - myp5.remove(); - if (testElement && testElement.parentNode) { - testElement.parentNode.removeChild(testElement); - testElement = null; - } + document.body.innerHTML = ""; }); // Helper functions @@ -889,11 +721,11 @@ suite('DOM', function() { .map(el => (isRadioInput(el) ? el : el.firstElementChild)); test('should be a function', function() { - assert.isFunction(myp5.createRadio); + assert.isFunction(mockP5Prototype.createRadio); }); test('should return p5.Element of radio type', function() { - testElement = myp5.createRadio(); + const testElement = mockP5Prototype.createRadio(); assert.instanceOf(testElement, p5.Element); assert.instanceOf(testElement.elt, HTMLDivElement); }); @@ -901,7 +733,7 @@ suite('DOM', function() { test('should return p5.Element from existing radio Element', function() { const options = ['Saturday', 'Sunday']; const radioElement = createRadioElement(options); - testElement = myp5.createRadio(radioElement); + const testElement = mockP5Prototype.createRadio(radioElement); assert.deepEqual(testElement.elt, radioElement); }); @@ -909,7 +741,7 @@ suite('DOM', function() { test('calling option(value) should return existing radio element', function() { const options = ['Saturday', 'Sunday']; const radioElement = createRadioElement(options); - testElement = myp5.createRadio(radioElement); + const testElement = mockP5Prototype.createRadio(radioElement); for (const radioInput of getChildren(radioElement)) { const optionEl = testElement.option(radioInput.value); assert.deepEqual(radioInput, optionEl); @@ -920,7 +752,7 @@ suite('DOM', function() { test('calling option(newValue) should create a new radio input', function() { const testName = 'defaultRadio'; const options = ['Saturday', 'Sunday']; - testElement = myp5.createRadio(testName); + const testElement = mockP5Prototype.createRadio(testName); let count = 0; for (const option of options) { const optionEl = testElement.option(option); @@ -938,7 +770,7 @@ suite('DOM', function() { test('calling option(value, label) should set label of option', function() { const testName = 'defaultRadio'; const options = ['Saturday', 'Sunday']; - testElement = myp5.createRadio(testName); + const testElement = mockP5Prototype.createRadio(testName); for (const option of options) { const optionLabel = `${option}-label`; const optionEl = testElement.option(option, optionLabel); @@ -953,7 +785,7 @@ suite('DOM', function() { const testName = 'defaultRadio'; const options = ['Saturday', 'Sunday']; const radioElement = createRadioElement(options); - testElement = myp5.createRadio(radioElement, testName); + const testElement = mockP5Prototype.createRadio(radioElement, testName); for (const option of options) { const optionEl = testElement.option(option); @@ -964,7 +796,7 @@ suite('DOM', function() { test('calling remove(value) should remove option', function() { const options = ['Monday', 'Friday', 'Saturday', 'Sunday']; const radioElement = createRadioElement(options); - testElement = myp5.createRadio(radioElement); + const testElement = mockP5Prototype.createRadio(radioElement); // Remove element const testValue = 'Friday'; @@ -980,7 +812,7 @@ suite('DOM', function() { test('calling value() should return selected value', function() { const options = ['Monday', 'Friday', 'Saturday', 'Sunday']; const selectedValue = options[1]; - testElement = myp5.createRadio(); + const testElement = mockP5Prototype.createRadio(); for (const option of options) testElement.option(option); testElement.selected(selectedValue); assert.deepEqual(testElement.value(), selectedValue); @@ -988,7 +820,7 @@ suite('DOM', function() { test('calling selected(value) should select a value and return it', function() { const options = ['Monday', 'Friday', 'Saturday', 'Sunday']; - testElement = myp5.createRadio(); + const testElement = mockP5Prototype.createRadio(); for (const option of options) testElement.option(option); for (const option of options) { @@ -1000,7 +832,7 @@ suite('DOM', function() { test('calling selected() should return the currently selected option', function() { const options = ['Monday', 'Friday', 'Saturday', 'Sunday']; - testElement = myp5.createRadio(); + const testElement = mockP5Prototype.createRadio(); for (const option of options) testElement.option(option); const testOption = getChildren(testElement.elt)[1]; @@ -1012,7 +844,7 @@ suite('DOM', function() { test('calling disable() should disable all the radio inputs', function() { const options = ['Monday', 'Friday', 'Saturday', 'Sunday']; - testElement = myp5.createRadio(); + const testElement = mockP5Prototype.createRadio(); for (const option of options) testElement.option(option); testElement.disable(); @@ -1023,90 +855,61 @@ suite('DOM', function() { }); suite('p5.prototype.createColorPicker', function() { - let myp5; - let testElement; - - beforeEach(function() { - new p5(function(p) { - p.setup = function() { - myp5 = p; - }; - }); - }); - afterEach(function() { - myp5.remove(); - if (testElement && testElement.parentNode) { - testElement.parentNode.removeChild(testElement); - } - testElement = null; + document.body.innerHTML = ""; }); test('should be a function', function() { - assert.isFunction(myp5.createColorPicker); + assert.isFunction(mockP5Prototype.createColorPicker); }); test('should return p5.Element of input[color] type', function() { - testElement = myp5.createColorPicker(); + const testElement = mockP5Prototype.createColorPicker(); assert.instanceOf(testElement, p5.Element); assert.instanceOf(testElement.elt, HTMLInputElement); assert.deepEqual(testElement.elt.type, 'color'); }); + // TODO: pending finalization of p5.Color implementation test.todo('should accept a p5.Color as param', function() { - const testColor = myp5.color('red'); - testElement = myp5.createColorPicker(testColor); + const testColor = mockP5Prototype.color('red'); + const testElement = mockP5Prototype.createColorPicker(testColor); assert.deepEqual(testElement.elt.value, testColor.toString('#rrggbb')); }); test.todo('should accept a string as param', function() { const testColorString = '#f00f00'; - testElement = myp5.createColorPicker(testColorString); + const testElement = mockP5Prototype.createColorPicker(testColorString); assert.deepEqual(testElement.elt.value, testColorString); }); test.todo('calling color() should return the current color as p5.color', function() { const testColorString = 'red'; - const testColor = myp5.color(testColorString); - testElement = myp5.createColorPicker(testColorString); + const testColor = mockP5Prototype.color(testColorString); + const testElement = mockP5Prototype.createColorPicker(testColorString); assert.deepEqual(testElement.color(), testColor); }); test.todo('calling value() should return hex string of color', function() { - const testColor = myp5.color('aqua'); - testElement = myp5.createColorPicker(testColor); + const testColor = mockP5Prototype.color('aqua'); + const testElement = mockP5Prototype.createColorPicker(testColor); assert.deepEqual(testElement.value(), testColor.toString('#rrggbb')); }); }); suite('p5.prototype.createInput', function() { - let myp5; - let testElement; - - beforeEach(function() { - new p5(function(p) { - p.setup = function() { - myp5 = p; - }; - }); - }); - afterEach(function() { - myp5.remove(); - if (testElement && testElement.parentNode) { - testElement.parentNode.removeChild(testElement); - } - testElement = null; + document.body.innerHTML = ""; }); test('should be a function', function() { - assert.isFunction(myp5.createInput); + assert.isFunction(mockP5Prototype.createInput); }); test('should return p5.Element of input type', function() { - testElement = myp5.createInput(); + const testElement = mockP5Prototype.createInput(); assert.instanceOf(testElement, p5.Element); assert.instanceOf(testElement.elt, HTMLInputElement); }); @@ -1114,7 +917,7 @@ suite('DOM', function() { test('should set given value as input', function() { const testValues = ['123', '', 'Hello world']; for (const value of testValues) { - testElement = myp5.createInput(value); + const testElement = mockP5Prototype.createInput(value); assert.deepEqual(testElement.elt.value, value); } }); @@ -1122,36 +925,15 @@ suite('DOM', function() { test('should create input of given type and value', function() { const testType = 'password'; const testValue = '1234056789'; - testElement = myp5.createInput(testValue, testType); + const testElement = mockP5Prototype.createInput(testValue, testType); assert.deepEqual(testElement.elt.type, testType); assert.deepEqual(testElement.elt.value, testValue); }); }); suite('p5.prototype.createFileInput', function() { - if (!(window.File && window.FileReader && window.FileList && window.Blob)) { - throw Error( - 'File API not supported in test environment. Cannot run tests' - ); - } - - let myp5; - let testElement; - - beforeEach(function() { - new p5(function(p) { - p.setup = function() { - myp5 = p; - }; - }); - }); - afterEach(function() { - if (testElement && testElement.parentNode) { - testElement.parentNode.removeChild(testElement); - } - testElement = null; - myp5.remove(); + document.body.innerHTML = ""; }); const emptyCallback = () => {}; @@ -1162,82 +944,68 @@ suite('DOM', function() { }; test('should be a function', function() { - assert.isFunction(myp5.createFileInput); + assert.isFunction(mockP5Prototype.createFileInput); }); test('should return input of file input', function() { - testElement = myp5.createFileInput(emptyCallback); + const testElement = mockP5Prototype.createFileInput(emptyCallback); assert.instanceOf(testElement, p5.Element); assert.instanceOf(testElement.elt, HTMLInputElement); assert.deepEqual(testElement.elt.type, 'file'); }); - testSketchWithPromise( - 'should trigger callback on input change event', - function(sketch, resolve, reject) { - sketch.setup = function() { - testElement = myp5.createFileInput(resolve); - const testFile = createDummyFile('file'); - testElement.files = testFile; - - const mockedEvent = new Event('change'); - const mockedDataTransfer = new DataTransfer(); - mockedDataTransfer.items.add(testFile); - testElement.elt.files = mockedDataTransfer.files; - testElement.elt.dispatchEvent(mockedEvent); - }; - } - ); + // testSketchWithPromise( + // 'should trigger callback on input change event', + // function(sketch, resolve, reject) { + // sketch.setup = function() { + // testElement = mockP5Prototype.createFileInput(resolve); + // const testFile = createDummyFile('file'); + // testElement.files = testFile; + + // const mockedEvent = new Event('change'); + // const mockedDataTransfer = new DataTransfer(); + // mockedDataTransfer.items.add(testFile); + // testElement.elt.files = mockedDataTransfer.files; + // testElement.elt.dispatchEvent(mockedEvent); + // }; + // } + // ); test('should accept multiple files if specified', function() { - testElement = myp5.createFileInput(emptyCallback, true); + const testElement = mockP5Prototype.createFileInput(emptyCallback, true); assert.isTrue(testElement.elt.multiple); }); - testSketchWithPromise( - 'should trigger callback for each file if multiple files are given', - function(sketch, resolve, reject) { - sketch.setup = function() { - let totalTriggers = 0; - let filesCount = 7; - - const handleFiles = event => { - totalTriggers += 1; - if (totalTriggers === filesCount) resolve(); - }; - - const mockedEvent = new Event('change'); - const mockedDataTransfer = new DataTransfer(); - for (let i = 0; i < filesCount; i += 1) { - mockedDataTransfer.items.add(createDummyFile(i.toString())); - } - - testElement = myp5.createFileInput(handleFiles, true); - testElement.elt.files = mockedDataTransfer.files; - testElement.elt.dispatchEvent(mockedEvent); - }; - } - ); + // testSketchWithPromise( + // 'should trigger callback for each file if multiple files are given', + // function(sketch, resolve, reject) { + // sketch.setup = function() { + // let totalTriggers = 0; + // let filesCount = 7; + + // const handleFiles = event => { + // totalTriggers += 1; + // if (totalTriggers === filesCount) resolve(); + // }; + + // const mockedEvent = new Event('change'); + // const mockedDataTransfer = new DataTransfer(); + // for (let i = 0; i < filesCount; i += 1) { + // mockedDataTransfer.items.add(createDummyFile(i.toString())); + // } + + // testElement = mockP5Prototype.createFileInput(handleFiles, true); + // testElement.elt.files = mockedDataTransfer.files; + // testElement.elt.dispatchEvent(mockedEvent); + // }; + // } + // ); }); - suite('p5.prototype.createVideo', function() { - let myp5; - let testElement; - - beforeEach(function() { - new p5(function(p) { - p.setup = function() { - myp5 = p; - }; - }); - }); - + // TODO: p5.MediaElement + suite.todo('p5.prototype.createVideo', function() { afterEach(function() { - myp5.remove(); - if (testElement && testElement.parentNode) { - testElement.parentNode.removeChild(testElement); - testElement = null; - } + document.body.innerHTML = ""; }); const mediaSources = [ @@ -1246,18 +1014,18 @@ suite('DOM', function() { ]; test('should be a function', function() { - assert.isFunction(myp5.createVideo); + assert.isFunction(mockP5Prototype.createVideo); }); test('should return p5.Element of HTMLVideoElement', function() { - testElement = myp5.createVideo(''); + const testElement = mockP5Prototype.createVideo(''); assert.instanceOf(testElement, p5.MediaElement); assert.instanceOf(testElement.elt, HTMLVideoElement); }); test('should accept a singular media source', function() { const mediaSource = mediaSources[0]; - testElement = myp5.createVideo(mediaSource); + const testElement = mockP5Prototype.createVideo(mediaSource); const sourceEl = testElement.elt.children[0]; assert.deepEqual(testElement.elt.childElementCount, 1); @@ -1266,7 +1034,7 @@ suite('DOM', function() { }); test('should accept multiple media sources', function() { - testElement = myp5.createVideo(mediaSources); + const testElement = mockP5Prototype.createVideo(mediaSources); assert.deepEqual(testElement.elt.childElementCount, mediaSources.length); for (let index = 0; index < mediaSources.length; index += 1) { @@ -1276,19 +1044,20 @@ suite('DOM', function() { } }); - testSketchWithPromise( - 'should trigger callback on canplaythrough event', - function(sketch, resolve, reject) { - sketch.setup = function() { - testElement = myp5.createVideo(mediaSources, resolve); - testElement.elt.dispatchEvent(new Event('canplaythrough')); - }; - } - ); + // testSketchWithPromise( + // 'should trigger callback on canplaythrough event', + // function(sketch, resolve, reject) { + // sketch.setup = function() { + // testElement = myp5.createVideo(mediaSources, resolve); + // testElement.elt.dispatchEvent(new Event('canplaythrough')); + // }; + // } + // ); - test('should work with tint()', function(done) { + // TODO: integration test + test.todo('should work with tint()', function(done) { const imgElt = myp5.createImg('/test/unit/assets/cat.jpg', ''); - testElement = myp5.createVideo('/test/unit/assets/cat.webm', () => { + const testElement = myp5.createVideo('/test/unit/assets/cat.webm', () => { // Workaround for headless tests, where the video data isn't loading // correctly: mock the video element using an image for this test const prevElt = testElement.elt; @@ -1314,7 +1083,7 @@ suite('DOM', function() { let loaded = false; let prevElt; const imgElt = myp5.createImg('/test/unit/assets/cat.jpg', ''); - testElement = myp5.createVideo('/test/unit/assets/cat.webm', () => { + const testElement = myp5.createVideo('/test/unit/assets/cat.webm', () => { loaded = true; // Workaround for headless tests, where the video data isn't loading // correctly: mock the video element using an image for this test @@ -1369,24 +1138,9 @@ suite('DOM', function() { }); }); - suite('p5.prototype.createAudio', function() { - let myp5; - let testElement; - - beforeEach(function() { - new p5(function(p) { - p.setup = function() { - myp5 = p; - }; - }); - }); - + suite.todo('p5.prototype.createAudio', function() { afterEach(function() { - myp5.remove(); - if (testElement && testElement.parentNode) { - testElement.parentNode.removeChild(testElement); - testElement = null; - } + document.body.innerHTML = ""; }); const mediaSources = [ @@ -1395,18 +1149,18 @@ suite('DOM', function() { ]; test('should be a function', function() { - assert.isFunction(myp5.createAudio); + assert.isFunction(mockP5Prototype.createAudio); }); test('should return p5.Element of HTMLAudioElement', function() { - testElement = myp5.createAudio(''); + const testElement = mockP5Prototype.createAudio(''); assert.instanceOf(testElement, p5.MediaElement); assert.instanceOf(testElement.elt, HTMLAudioElement); }); test('should accept a singular media source', function() { const mediaSource = mediaSources[0]; - testElement = myp5.createAudio(mediaSource); + const testElement = mockP5Prototype.createAudio(mediaSource); const sourceEl = testElement.elt.children[0]; assert.deepEqual(testElement.elt.childElementCount, 1); @@ -1415,7 +1169,7 @@ suite('DOM', function() { }); test('should accept multiple media sources', function() { - testElement = myp5.createAudio(mediaSources); + const testElement = mockP5Prototype.createAudio(mediaSources); assert.deepEqual(testElement.elt.childElementCount, mediaSources.length); for (let index = 0; index < mediaSources.length; index += 1) { @@ -1425,50 +1179,28 @@ suite('DOM', function() { } }); - testSketchWithPromise( - 'should trigger callback on canplaythrough event', - function(sketch, resolve, reject) { - sketch.setup = function() { - testElement = myp5.createAudio(mediaSources, resolve); - testElement.elt.dispatchEvent(new Event('canplaythrough')); - }; - } - ); + // testSketchWithPromise( + // 'should trigger callback on canplaythrough event', + // function(sketch, resolve, reject) { + // sketch.setup = function() { + // testElement = mockP5Prototype.createAudio(mediaSources, resolve); + // testElement.elt.dispatchEvent(new Event('canplaythrough')); + // }; + // } + // ); }); suite.todo('p5.prototype.createCapture', function() { - // to run these tests, getUserMedia is required to be supported - if (!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia)) { - throw Error( - 'Cannot run tests as getUserMedia not supported in this browser' - ); - } - - let myp5; - let testElement; - - beforeEach(function() { - new p5(function(p) { - p.setup = function() { - myp5 = p; - }; - }); - }); - afterEach(function() { - if (testElement && testElement.parentNode) { - testElement.parentNode.removeChild(testElement); - } - testElement = null; - myp5.remove(); + document.body.innerHTML = ""; }); test('should be a function', function() { - assert.isFunction(myp5.createCapture); + assert.isFunction(mockP5Prototype.createCapture); }); test('should return p5.Element of video type', function() { - testElement = myp5.createCapture(myp5.VIDEO); + const testElement = mockP5Prototype.createCapture(mockP5Prototype.VIDEO); assert.instanceOf(testElement, p5.Element); assert.instanceOf(testElement.elt, HTMLVideoElement); }); @@ -1478,7 +1210,7 @@ suite('DOM', function() { const backup = navigator.mediaDevices.getUserMedia; navigator.mediaDevices.getUserMedia = undefined; try { - testElement = myp5.createCapture(myp5.VIDEO); + const testElement = mockP5Prototype.createCapture(mockP5Prototype.VIDEO); assert.fail(); } catch (error) { assert.instanceOf(error, DOMException); @@ -1489,43 +1221,28 @@ suite('DOM', function() { }); // NOTE: play() failed because the user didn't interact with the document first. - testSketchWithPromise( - 'triggers the callback after loading metadata', - function(sketch, resolve, reject) { - sketch.setup = function() { - testElement = myp5.createCapture(myp5.VIDEO, resolve); - const mockedEvent = new Event('loadedmetadata'); - testElement.elt.dispatchEvent(mockedEvent); - }; - } - ); + // testSketchWithPromise( + // 'triggers the callback after loading metadata', + // function(sketch, resolve, reject) { + // sketch.setup = function() { + // testElement = myp5.createCapture(myp5.VIDEO, resolve); + // const mockedEvent = new Event('loadedmetadata'); + // testElement.elt.dispatchEvent(mockedEvent); + // }; + // } + // ); // Required for ios 11 devices test('should have playsinline attribute to empty string on DOM element', function() { - testElement = myp5.createCapture(myp5.VIDEO); + const testElement = mockP5Prototype.createCapture(mockP5Prototype.VIDEO); // Weird check, setter accepts : playinline, getter accepts playInline assert.isTrue(testElement.elt.playsInline); }); }); suite('p5.prototype.createElement', function() { - let myp5; - let testElement; - - beforeEach(function() { - new p5(function(p) { - p.setup = function() { - myp5 = p; - }; - }); - }); - afterEach(function() { - myp5.remove(); - if (testElement && testElement.parentNode) { - testElement.parentNode.removeChild(testElement); - testElement = null; - } + document.body.innerHTML = ""; }); const testData = { @@ -1537,12 +1254,12 @@ suite('DOM', function() { }; test('should be a function', function() { - assert.isFunction(myp5.createElement); + assert.isFunction(mockP5Prototype.createElement); }); test('should return a p5.Element of appropriate type', function() { for (const [tag, domElName] of Object.entries(testData)) { - testElement = myp5.createElement(tag); + const testElement = mockP5Prototype.createElement(tag); assert.instanceOf(testElement, p5.Element); assert.instanceOf(testElement.elt, domElName); } @@ -1550,41 +1267,49 @@ suite('DOM', function() { test('should set given content as innerHTML', function() { const testContent = 'Lorem ipsum'; - testElement = myp5.createElement('div', testContent); + const testElement = mockP5Prototype.createElement('div', testContent); assert.deepEqual(testElement.elt.innerHTML, testContent); }); }); - // p5.Element.prototype.addClass - suite('p5.Element.prototype.addClass', function() { - let myp5; - let testElement; + suite('p5.prototype.removeElements', function() { + afterEach(function() { + document.body.innerHTML = ""; + }); - beforeEach(function() { - new p5(function(p) { - p.setup = function() { - myp5 = p; - }; - }); + test('should remove all elements created by p5 except Canvas', function() { + // creates 6 elements one of which is a canvas, then calls + // removeElements and tests if only canvas is left. + const tags = ['a', 'button', 'canvas', 'div', 'p', 'video']; + for (const tag of tags) { + mockP5Prototype.createElement(tag); + } + // Check if all elements are created. + assert.deepEqual(document.body.childElementCount, tags.length); + + // Call removeElements and check if only canvas is remaining + mockP5Prototype.removeElements(); + assert.deepEqual(document.body.childElementCount, 1); + const remainingElement = document.body.children[0]; + assert.instanceOf(remainingElement, HTMLCanvasElement); }); + }); + // p5.Element.prototype.addClass + suite('p5.Element.prototype.addClass', function() { afterEach(function() { - myp5.remove(); - if (testElement && testElement.parentNode) { - testElement.parentNode.removeChild(testElement); - } - testElement = null; + document.body.innerHTML = ""; }); test('should be a function', function() { // Create any p5.Element - testElement = myp5.createElement('div'); + const testElement = mockP5Prototype.createElement('div'); assert.isFunction(testElement.addClass); }); test('should add provided string to class names', function() { const testClassName = 'jumbotron'; - testElement = myp5.createElement('div'); + const testElement = mockP5Prototype.createElement('div'); testElement.addClass(testClassName); assert.deepEqual(testElement.elt.className, testClassName); }); @@ -1594,7 +1319,7 @@ suite('DOM', function() { const testClassName2 = 'container-fluid'; const expectedClassName = testClassName1 + ' ' + testClassName2; - testElement = myp5.createElement('div'); + const testElement = mockP5Prototype.createElement('div'); testElement.addClass(testClassName1); testElement.addClass(testClassName2); @@ -1606,28 +1331,13 @@ suite('DOM', function() { // p5.Element.prototype.removeClass suite('p5.Element.prototype.removeClass', function() { - let myp5; - let testElement; - - beforeEach(function() { - new p5(function(p) { - p.setup = function() { - myp5 = p; - }; - }); - }); - afterEach(function() { - myp5.remove(); - if (testElement && testElement.parentNode) { - testElement.parentNode.removeChild(testElement); - } - testElement = null; + document.body.innerHTML = ""; }); test('should be a function', function() { // Create any p5.Element - testElement = myp5.createElement('div'); + const testElement = mockP5Prototype.createElement('div'); assert.isFunction(testElement.removeClass); }); @@ -1635,7 +1345,7 @@ suite('DOM', function() { const defaultClassNames = 'col-md-9 col-sm-12'; const testClassName = 'jumbotron'; - testElement = myp5.createElement('div'); + const testElement = mockP5Prototype.createElement('div'); testElement.addClass(defaultClassNames); testElement.addClass(testClassName); @@ -1648,7 +1358,7 @@ suite('DOM', function() { const testClassName1 = 'jumbotron'; const testClassName2 = 'container-fluid'; - testElement = myp5.createElement('div'); + const testElement = mockP5Prototype.createElement('div'); testElement.addClass(testClassName1); // Handling the curse of 'this' @@ -1660,28 +1370,13 @@ suite('DOM', function() { // p5.Element.prototype.hasClass suite('p5.Element.prototype.hasClass', function() { - let myp5; - let testElement; - - beforeEach(function() { - new p5(function(p) { - p.setup = function() { - myp5 = p; - }; - }); - }); - afterEach(function() { - myp5.remove(); - if (testElement && testElement.parentNode) { - testElement.parentNode.removeChild(testElement); - } - testElement = null; + document.body.innerHTML = ""; }); test('should be a function', function() { // Create any p5.Element - testElement = myp5.createElement('div'); + const testElement = mockP5Prototype.createElement('div'); assert.isFunction(testElement.hasClass); }); @@ -1689,7 +1384,7 @@ suite('DOM', function() { const defaultClassNames = 'col-md-9 jumbotron'; const testClassName = 'jumbotron'; - testElement = myp5.createElement('div'); + const testElement = mockP5Prototype.createElement('div'); testElement.addClass(defaultClassNames); assert.isTrue(testElement.hasClass(testClassName)); @@ -1699,7 +1394,7 @@ suite('DOM', function() { const defaultClassNames = 'col-md-9 jumbotron'; const testClassName = 'container-fluid'; - testElement = myp5.createElement('div'); + const testElement = mockP5Prototype.createElement('div'); testElement.addClass(defaultClassNames); assert.isFalse(testElement.hasClass(testClassName)); @@ -1708,28 +1403,13 @@ suite('DOM', function() { // p5.Element.prototype.toggleClass suite('p5.Element.prototype.toggleClass', function() { - let myp5; - let testElement; - - beforeEach(function() { - new p5(function(p) { - p.setup = function() { - myp5 = p; - }; - }); - }); - afterEach(function() { - myp5.remove(); - if (testElement && testElement.parentNode) { - testElement.parentNode.removeChild(testElement); - } - testElement = null; + document.body.innerHTML = ""; }); test('should be a function', function() { // Create any p5.Element - testElement = myp5.createElement('div'); + const testElement = mockP5Prototype.createElement('div'); assert.isFunction(testElement.toggleClass); }); @@ -1737,7 +1417,7 @@ suite('DOM', function() { const defaultClassName = 'container-fluid'; const testClassName = 'jumbotron'; - testElement = myp5.createElement('div'); + const testElement = mockP5Prototype.createElement('div'); testElement.addClass(defaultClassName); testElement.addClass(testClassName); @@ -1749,7 +1429,7 @@ suite('DOM', function() { const defaultClassName = 'container-fluid'; const testClassName = 'jumbotron'; - testElement = myp5.createElement('div'); + const testElement = mockP5Prototype.createElement('div'); testElement.addClass(defaultClassName); testElement.toggleClass(testClassName); @@ -1762,33 +1442,18 @@ suite('DOM', function() { // p5.Element.prototype.child suite('p5.Element.prototype.child', function() { - let myp5; - let testElement; - - beforeEach(function() { - new p5(function(p) { - p.setup = function() { - myp5 = p; - }; - }); - }); - afterEach(function() { - myp5.remove(); - if (testElement && testElement.parentNode) { - testElement.parentNode.removeChild(testElement); - } - testElement = null; + document.body.innerHTML = ""; }); test('should be a function', function() { - testElement = myp5.createElement('div'); + const testElement = mockP5Prototype.createElement('div'); assert.isFunction(testElement.child); }); test('should return all child nodes by default', function() { - testElement = myp5.createElement('div'); - const childElement = myp5.createElement('p'); + const testElement = mockP5Prototype.createElement('div'); + const childElement = mockP5Prototype.createElement('p'); // Add child element by using DOM API testElement.elt.appendChild(childElement.elt); @@ -1802,8 +1467,8 @@ suite('DOM', function() { }); test('should append p5 element as child', function() { - testElement = myp5.createElement('div'); - const childElement = myp5.createElement('p'); + const testElement = mockP5Prototype.createElement('div'); + const childElement = mockP5Prototype.createElement('p'); testElement.child(childElement); const childNodes = Array.from(testElement.elt.children); @@ -1811,8 +1476,8 @@ suite('DOM', function() { }); test('should append dom element as child', function() { - testElement = myp5.createElement('div'); - const childElement = myp5.createElement('p'); + const testElement = mockP5Prototype.createElement('div'); + const childElement = mockP5Prototype.createElement('p'); testElement.child(childElement.elt); const childNodes = Array.from(testElement.elt.children); @@ -1820,9 +1485,9 @@ suite('DOM', function() { }); test('should append element as child from a given id', function() { - testElement = myp5.createElement('div'); + const testElement = mockP5Prototype.createElement('div'); const childId = 'testChildElement'; - const childElement = myp5.createElement('p'); + const childElement = mockP5Prototype.createElement('p'); childElement.id(childId); testElement.child(childId); @@ -1831,7 +1496,7 @@ suite('DOM', function() { }); test('should not throw error if mathcing element is not found from a given id', function() { - testElement = myp5.createElement('div'); + const testElement = mockP5Prototype.createElement('div'); const randomChildId = 'testChildElement'; expect(() => testElement.child(randomChildId)).to.not.throw(); }); @@ -1839,27 +1504,12 @@ suite('DOM', function() { // p5.Element.prototype.center suite('p5.Element.prototype.center', function() { - let myp5; - let testElement; - - beforeEach(function() { - new p5(function(p) { - p.setup = function() { - myp5 = p; - }; - }); - }); - afterEach(function() { - myp5.remove(); - if (testElement && testElement.parentNode) { - testElement.parentNode.removeChild(testElement); - } - testElement = null; + document.body.innerHTML = ""; }); test('should be a function', function() { - testElement = myp5.createElement('div'); + const testElement = mockP5Prototype.createElement('div'); assert.isFunction(testElement.center); }); @@ -1878,33 +1528,18 @@ suite('DOM', function() { // p5.Element.prototype.html suite('p5.Element.prototype.html', function() { - let myp5; - let testElement; - - beforeEach(function() { - new p5(function(p) { - p.setup = function() { - myp5 = p; - }; - }); - }); - afterEach(function() { - myp5.remove(); - if (testElement && testElement.parentNode) { - testElement.parentNode.removeChild(testElement); - } - testElement = null; + document.body.innerHTML = ""; }); test('should be a function', function() { // Create any p5.Element - testElement = myp5.createElement('a'); + const testElement = mockP5Prototype.createElement('a'); assert.isFunction(testElement.position); }); test('should return the inner HTML of element if no argument is given', function() { - testElement = myp5.createElement('div'); + const testElement = mockP5Prototype.createElement('div'); const testHTML = '

Hello World

'; testElement.elt.innerHTML = testHTML; @@ -1912,7 +1547,7 @@ suite('DOM', function() { }); test('should replace the inner HTML of element', function() { - testElement = myp5.createElement('div'); + const testElement = mockP5Prototype.createElement('div'); const initialtestHTML = '

Hello World

'; const modifiedtestHTML = '

Hello World !!!

'; @@ -1924,7 +1559,7 @@ suite('DOM', function() { }); test('should append to the inner HTML if second param is true', function() { - testElement = myp5.createElement('div'); + const testElement = mockP5Prototype.createElement('div'); const testHTML1 = '

Hello World

'; const testHTML2 = '

Hello World !!!

'; @@ -1936,7 +1571,7 @@ suite('DOM', function() { }); test('should replace the inner HTML if second param is false', function() { - testElement = myp5.createElement('div'); + const testElement = mockP5Prototype.createElement('div'); const testHTML1 = '

Hello World

'; const testHTML2 = '

Hello World !!!

'; @@ -1950,46 +1585,31 @@ suite('DOM', function() { // p5.Element.prototype.position suite('p5.Element.prototype.position', function() { - let myp5; - let testElement; - - beforeEach(function() { - new p5(function(p) { - p.setup = function() { - myp5 = p; - }; - }); - }); - afterEach(function() { - myp5.remove(); - if (testElement && testElement.parentNode) { - testElement.parentNode.removeChild(testElement); - } - testElement = null; + document.body.innerHTML = ""; }); test('should be a function', function() { // Create any p5.Element - testElement = myp5.createElement('a'); + const testElement = mockP5Prototype.createElement('a'); assert.isFunction(testElement.position); }); test('should return current position if no args are given', function() { - testElement = myp5.createButton('testButton'); + const testElement = mockP5Prototype.createButton('testButton'); const position = testElement.position(); assert.deepEqual(position.x, testElement.elt.offsetLeft); assert.deepEqual(position.y, testElement.elt.offsetTop); }); test('should set default position as absolute', function() { - testElement = myp5.createButton('testButton'); + const testElement = mockP5Prototype.createButton('testButton'); testElement.position(20, 70); assert.deepEqual(testElement.elt.style.position, 'absolute'); }); test('should set given params as properties', function() { - let testElement = myp5.createButton('testButton'); + const testElement = mockP5Prototype.createButton('testButton'); testElement.position(20, 80, 'static'); assert.deepEqual(testElement.elt.style.position, 'static'); @@ -2018,42 +1638,6 @@ suite('DOM', function() { // p5.Element.prototype.remove - suite('p5.prototype.drop', function() { - testSketchWithPromise('drop fires multiple events', function( - sketch, - resolve, - reject - ) { - let testElement; - let fileFnCounter = 0; - let eventFnCounter = 0; - sketch.setup = function() { - testElement = sketch.createDiv('Drop files inside'); - - // Setup test functions and constants - const file1 = new File(['foo'], 'foo.txt', { type: 'text/plain' }); - const file2 = new File(['foo'], 'foo.txt', { type: 'text/plain' }); - const hasFinished = () => { - if (fileFnCounter > 1 && eventFnCounter === 1) resolve(); - }; - const testFileFn = () => { - fileFnCounter += 1; - hasFinished(); - }; - const testEventFn = () => { - eventFnCounter += 1; - hasFinished(); - }; - testElement.drop(testFileFn, testEventFn); - - // Fire a mock drop and test the method - const mockedEvent = new Event('drop'); - mockedEvent.dataTransfer = { files: [file1, file2] }; - testElement.elt.dispatchEvent(mockedEvent); - }; - }); - }); - // p5.MediaElement // p5.MediaElement.play From ef31f7bb7974c39379439a0d39af1263a8be6cd2 Mon Sep 17 00:00:00 2001 From: limzykenneth Date: Sun, 1 Dec 2024 20:19:23 +0000 Subject: [PATCH 6/9] Fix a few more media element test --- test/unit/dom/dom.js | 271 ++----------------------------- test/unit/dom/p5.MediaElement.js | 238 +++++++++++++++++++++++++++ 2 files changed, 254 insertions(+), 255 deletions(-) create mode 100644 test/unit/dom/p5.MediaElement.js diff --git a/test/unit/dom/dom.js b/test/unit/dom/dom.js index a6fcd29c31..96c1a7ec81 100644 --- a/test/unit/dom/dom.js +++ b/test/unit/dom/dom.js @@ -1,4 +1,3 @@ -import p5 from '../../../src/app.js'; import { testSketchWithPromise } from '../../js/p5_helpers'; import { mockP5, mockP5Prototype } from '../../js/mocks'; @@ -319,7 +318,7 @@ suite('DOM', function() { test('should return a p5.Element of div type', function() { const testElement = mockP5Prototype.createDiv(); - assert.instanceOf(testElement, p5.Element); + assert.instanceOf(testElement, Element); assert.instanceOf(testElement.elt, HTMLDivElement); }); @@ -341,7 +340,7 @@ suite('DOM', function() { test('should return a p5.Element of p type', function() { const testElement = mockP5Prototype.createP(); - assert.instanceOf(testElement, p5.Element); + assert.instanceOf(testElement, Element); assert.instanceOf(testElement.elt, HTMLParagraphElement); }); @@ -363,7 +362,7 @@ suite('DOM', function() { test('should return a p5.Element of span type', function() { const testElement = mockP5Prototype.createSpan(); - assert.instanceOf(testElement, p5.Element); + assert.instanceOf(testElement, Element); assert.instanceOf(testElement.elt, HTMLSpanElement); }); @@ -387,7 +386,7 @@ suite('DOM', function() { test('should return p5.Element of image type', function() { const testElement = mockP5Prototype.createImg(imagePath, ''); - assert.instanceOf(testElement, p5.Element); + assert.instanceOf(testElement, Element); assert.instanceOf(testElement.elt, HTMLImageElement); }); @@ -426,7 +425,7 @@ suite('DOM', function() { test('should return a p5.Element of anchor type', () => { const testElement = mockP5Prototype.createA('', ''); - assert.instanceOf(testElement, p5.Element); + assert.instanceOf(testElement, Element); assert.instanceOf(testElement.elt, HTMLAnchorElement); }); @@ -453,7 +452,7 @@ suite('DOM', function() { test('should return a p5.Element of slider type', () => { const testElement = mockP5Prototype.createSlider(0, 100, 0, 1); - assert.instanceOf(testElement, p5.Element); + assert.instanceOf(testElement, Element); assert.instanceOf(testElement.elt, HTMLInputElement); assert.deepEqual(testElement.elt.type, 'range'); }); @@ -482,7 +481,7 @@ suite('DOM', function() { test('should return a p5.Element of button type', function() { const testElement = mockP5Prototype.createButton('testButton', 'testButton'); - assert.instanceOf(testElement, p5.Element); + assert.instanceOf(testElement, Element); assert.instanceOf(testElement.elt, HTMLButtonElement); }); @@ -522,7 +521,7 @@ suite('DOM', function() { const testElement = mockP5Prototype.createCheckbox(); const checkboxElement = getCheckboxElement(testElement); - assert.instanceOf(testElement, p5.Element); + assert.instanceOf(testElement, Element); assert.instanceOf(checkboxElement, HTMLInputElement); }); @@ -534,7 +533,7 @@ suite('DOM', function() { ? getSpanElement(testElement).innerHTML : ''; - assert.instanceOf(testElement, p5.Element); + assert.instanceOf(testElement, Element); assert.instanceOf(spanElement, HTMLSpanElement); assert.deepEqual(testElementLabelValue, labelValue); }); @@ -548,7 +547,7 @@ suite('DOM', function() { ? getSpanElement(testElement).innerHTML : ''; - assert.instanceOf(testElement, p5.Element); + assert.instanceOf(testElement, Element); assert.instanceOf(spanElement, HTMLSpanElement); assert.deepEqual(testElementLabelValue, labelValue); assert.isTrue(testElement.checked()); @@ -588,7 +587,7 @@ suite('DOM', function() { test('should return p5.Element of select HTML Element', function() { const testElement = mockP5Prototype.createSelect(); - assert.instanceOf(testElement, p5.Element); + assert.instanceOf(testElement, Element); assert.instanceOf(testElement.elt, HTMLSelectElement); }); @@ -726,7 +725,7 @@ suite('DOM', function() { test('should return p5.Element of radio type', function() { const testElement = mockP5Prototype.createRadio(); - assert.instanceOf(testElement, p5.Element); + assert.instanceOf(testElement, Element); assert.instanceOf(testElement.elt, HTMLDivElement); }); @@ -866,7 +865,7 @@ suite('DOM', function() { test('should return p5.Element of input[color] type', function() { const testElement = mockP5Prototype.createColorPicker(); - assert.instanceOf(testElement, p5.Element); + assert.instanceOf(testElement, Element); assert.instanceOf(testElement.elt, HTMLInputElement); assert.deepEqual(testElement.elt.type, 'color'); }); @@ -910,7 +909,7 @@ suite('DOM', function() { test('should return p5.Element of input type', function() { const testElement = mockP5Prototype.createInput(); - assert.instanceOf(testElement, p5.Element); + assert.instanceOf(testElement, Element); assert.instanceOf(testElement.elt, HTMLInputElement); }); @@ -949,7 +948,7 @@ suite('DOM', function() { test('should return input of file input', function() { const testElement = mockP5Prototype.createFileInput(emptyCallback); - assert.instanceOf(testElement, p5.Element); + assert.instanceOf(testElement, Element); assert.instanceOf(testElement.elt, HTMLInputElement); assert.deepEqual(testElement.elt.type, 'file'); }); @@ -1002,244 +1001,6 @@ suite('DOM', function() { // ); }); - // TODO: p5.MediaElement - suite.todo('p5.prototype.createVideo', function() { - afterEach(function() { - document.body.innerHTML = ""; - }); - - const mediaSources = [ - '/test/unit/assets/nyan_cat.gif', - '/test/unit/assets/target.gif' - ]; - - test('should be a function', function() { - assert.isFunction(mockP5Prototype.createVideo); - }); - - test('should return p5.Element of HTMLVideoElement', function() { - const testElement = mockP5Prototype.createVideo(''); - assert.instanceOf(testElement, p5.MediaElement); - assert.instanceOf(testElement.elt, HTMLVideoElement); - }); - - test('should accept a singular media source', function() { - const mediaSource = mediaSources[0]; - const testElement = mockP5Prototype.createVideo(mediaSource); - const sourceEl = testElement.elt.children[0]; - - assert.deepEqual(testElement.elt.childElementCount, 1); - assert.instanceOf(sourceEl, HTMLSourceElement); - assert.isTrue(sourceEl.src.endsWith(mediaSource)); - }); - - test('should accept multiple media sources', function() { - const testElement = mockP5Prototype.createVideo(mediaSources); - - assert.deepEqual(testElement.elt.childElementCount, mediaSources.length); - for (let index = 0; index < mediaSources.length; index += 1) { - const sourceEl = testElement.elt.children[index]; - assert.instanceOf(sourceEl, HTMLSourceElement); - assert.isTrue(sourceEl.src.endsWith(mediaSources[index])); - } - }); - - // testSketchWithPromise( - // 'should trigger callback on canplaythrough event', - // function(sketch, resolve, reject) { - // sketch.setup = function() { - // testElement = myp5.createVideo(mediaSources, resolve); - // testElement.elt.dispatchEvent(new Event('canplaythrough')); - // }; - // } - // ); - - // TODO: integration test - test.todo('should work with tint()', function(done) { - const imgElt = myp5.createImg('/test/unit/assets/cat.jpg', ''); - const testElement = myp5.createVideo('/test/unit/assets/cat.webm', () => { - // Workaround for headless tests, where the video data isn't loading - // correctly: mock the video element using an image for this test - const prevElt = testElement.elt; - testElement.elt = imgElt.elt; - - myp5.background(255); - myp5.tint(255, 0, 0); - myp5.image(testElement, 0, 0); - - testElement.elt = prevElt; - imgElt.remove(); - - myp5.loadPixels(); - testElement.loadPixels(); - assert.equal(myp5.pixels[0], testElement.pixels[0]); - assert.equal(myp5.pixels[1], 0); - assert.equal(myp5.pixels[2], 0); - done(); - }); - }); - - test('should work with updatePixels()', function(done) { - let loaded = false; - let prevElt; - const imgElt = myp5.createImg('/test/unit/assets/cat.jpg', ''); - const testElement = myp5.createVideo('/test/unit/assets/cat.webm', () => { - loaded = true; - // Workaround for headless tests, where the video data isn't loading - // correctly: mock the video element using an image for this test - prevElt = testElement.elt; - testElement.elt = imgElt.elt; - }); - - let drewUpdatedPixels = false; - myp5.draw = function() { - if (!loaded) return; - myp5.background(255); - - if (!drewUpdatedPixels) { - // First, update pixels and check that it draws the updated - // pixels correctly - testElement.loadPixels(); - for (let i = 0; i < testElement.pixels.length; i += 4) { - // Set every pixel to red - testElement.pixels[i] = 255; - testElement.pixels[i + 1] = 0; - testElement.pixels[i + 2] = 0; - testElement.pixels[i + 3] = 255; - } - testElement.updatePixels(); - myp5.image(testElement, 0, 0); - - // The element should have drawn using the updated red pixels - myp5.loadPixels(); - assert.deepEqual([...myp5.pixels.slice(0, 4)], [255, 0, 0, 255]); - - // Mark that we've done the first check so we can see whether - // the video still updates on the next frame - drewUpdatedPixels = true; - } else { - // Next, make sure it still updates with the real pixels from - // the next frame of the video on the next frame of animation - myp5.image(testElement, 0, 0); - - myp5.loadPixels(); - testElement.loadPixels(); - expect([...testElement.pixels.slice(0, 4)]) - .to.not.deep.equal([255, 0, 0, 255]); - assert.deepEqual( - [...myp5.pixels.slice(0, 4)], - [...testElement.pixels.slice(0, 4)] - ); - testElement.elt = prevElt; - imgElt.remove(); - done(); - } - }; - }); - }); - - suite.todo('p5.prototype.createAudio', function() { - afterEach(function() { - document.body.innerHTML = ""; - }); - - const mediaSources = [ - '/test/unit/assets/beat.mp3', - '/test/unit/assets/beat.mp3' - ]; - - test('should be a function', function() { - assert.isFunction(mockP5Prototype.createAudio); - }); - - test('should return p5.Element of HTMLAudioElement', function() { - const testElement = mockP5Prototype.createAudio(''); - assert.instanceOf(testElement, p5.MediaElement); - assert.instanceOf(testElement.elt, HTMLAudioElement); - }); - - test('should accept a singular media source', function() { - const mediaSource = mediaSources[0]; - const testElement = mockP5Prototype.createAudio(mediaSource); - const sourceEl = testElement.elt.children[0]; - - assert.deepEqual(testElement.elt.childElementCount, 1); - assert.instanceOf(sourceEl, HTMLSourceElement); - assert.isTrue(sourceEl.src.endsWith(mediaSource)); - }); - - test('should accept multiple media sources', function() { - const testElement = mockP5Prototype.createAudio(mediaSources); - - assert.deepEqual(testElement.elt.childElementCount, mediaSources.length); - for (let index = 0; index < mediaSources.length; index += 1) { - const sourceEl = testElement.elt.children[index]; - assert.instanceOf(sourceEl, HTMLSourceElement); - assert.isTrue(sourceEl.src.endsWith(mediaSources[index])); - } - }); - - // testSketchWithPromise( - // 'should trigger callback on canplaythrough event', - // function(sketch, resolve, reject) { - // sketch.setup = function() { - // testElement = mockP5Prototype.createAudio(mediaSources, resolve); - // testElement.elt.dispatchEvent(new Event('canplaythrough')); - // }; - // } - // ); - }); - - suite.todo('p5.prototype.createCapture', function() { - afterEach(function() { - document.body.innerHTML = ""; - }); - - test('should be a function', function() { - assert.isFunction(mockP5Prototype.createCapture); - }); - - test('should return p5.Element of video type', function() { - const testElement = mockP5Prototype.createCapture(mockP5Prototype.VIDEO); - assert.instanceOf(testElement, p5.Element); - assert.instanceOf(testElement.elt, HTMLVideoElement); - }); - - test('should throw error if getUserMedia is not supported', function() { - // Remove getUserMedia method and test - const backup = navigator.mediaDevices.getUserMedia; - navigator.mediaDevices.getUserMedia = undefined; - try { - const testElement = mockP5Prototype.createCapture(mockP5Prototype.VIDEO); - assert.fail(); - } catch (error) { - assert.instanceOf(error, DOMException); - } - - // Restore backup, very important. - navigator.mediaDevices.getUserMedia = backup; - }); - - // NOTE: play() failed because the user didn't interact with the document first. - // testSketchWithPromise( - // 'triggers the callback after loading metadata', - // function(sketch, resolve, reject) { - // sketch.setup = function() { - // testElement = myp5.createCapture(myp5.VIDEO, resolve); - // const mockedEvent = new Event('loadedmetadata'); - // testElement.elt.dispatchEvent(mockedEvent); - // }; - // } - // ); - - // Required for ios 11 devices - test('should have playsinline attribute to empty string on DOM element', function() { - const testElement = mockP5Prototype.createCapture(mockP5Prototype.VIDEO); - // Weird check, setter accepts : playinline, getter accepts playInline - assert.isTrue(testElement.elt.playsInline); - }); - }); - suite('p5.prototype.createElement', function() { afterEach(function() { document.body.innerHTML = ""; @@ -1260,7 +1021,7 @@ suite('DOM', function() { test('should return a p5.Element of appropriate type', function() { for (const [tag, domElName] of Object.entries(testData)) { const testElement = mockP5Prototype.createElement(tag); - assert.instanceOf(testElement, p5.Element); + assert.instanceOf(testElement, Element); assert.instanceOf(testElement.elt, domElName); } }); diff --git a/test/unit/dom/p5.MediaElement.js b/test/unit/dom/p5.MediaElement.js new file mode 100644 index 0000000000..bfaaba88c0 --- /dev/null +++ b/test/unit/dom/p5.MediaElement.js @@ -0,0 +1,238 @@ +import { vi } from 'vitest'; +import { mockP5, mockP5Prototype } from '../../js/mocks'; +import { default as media, MediaElement } from '../../../src/dom/p5.MediaElement'; +import { Element } from '../../../src/dom/p5.Element'; + +suite('p5.MediaElement', () => { + beforeAll(() => { + media(mockP5, mockP5Prototype); + navigator.mediaDevices.getUserMedia = vi.fn() + .mockResolvedValue("stream-value"); + }); + + afterAll(() => { + vi.restoreAllMocks(); + }); + + suite('p5.prototype.createVideo', function() { + afterEach(function() { + document.body.innerHTML = ""; + }); + + const mediaSources = [ + '/test/unit/assets/nyan_cat.gif', + '/test/unit/assets/target.gif' + ]; + + test('should be a function', function() { + assert.isFunction(mockP5Prototype.createVideo); + }); + + test('should return p5.Element of HTMLVideoElement', function() { + const testElement = mockP5Prototype.createVideo(''); + assert.instanceOf(testElement, MediaElement); + assert.instanceOf(testElement.elt, HTMLVideoElement); + }); + + test('should accept a singular media source', function() { + const mediaSource = mediaSources[0]; + const testElement = mockP5Prototype.createVideo(mediaSource); + const sourceEl = testElement.elt.children[0]; + + assert.deepEqual(testElement.elt.childElementCount, 1); + assert.instanceOf(sourceEl, HTMLSourceElement); + assert.isTrue(sourceEl.src.endsWith(mediaSource)); + }); + + test('should accept multiple media sources', function() { + const testElement = mockP5Prototype.createVideo(mediaSources); + + assert.deepEqual(testElement.elt.childElementCount, mediaSources.length); + for (let index = 0; index < mediaSources.length; index += 1) { + const sourceEl = testElement.elt.children[index]; + assert.instanceOf(sourceEl, HTMLSourceElement); + assert.isTrue(sourceEl.src.endsWith(mediaSources[index])); + } + }); + + // testSketchWithPromise( + // 'should trigger callback on canplaythrough event', + // function(sketch, resolve, reject) { + // sketch.setup = function() { + // testElement = myp5.createVideo(mediaSources, resolve); + // testElement.elt.dispatchEvent(new Event('canplaythrough')); + // }; + // } + // ); + + // TODO: integration test + test.todo('should work with tint()', function(done) { + const imgElt = myp5.createImg('/test/unit/assets/cat.jpg', ''); + const testElement = myp5.createVideo('/test/unit/assets/cat.webm', () => { + // Workaround for headless tests, where the video data isn't loading + // correctly: mock the video element using an image for this test + const prevElt = testElement.elt; + testElement.elt = imgElt.elt; + + myp5.background(255); + myp5.tint(255, 0, 0); + myp5.image(testElement, 0, 0); + + testElement.elt = prevElt; + imgElt.remove(); + + myp5.loadPixels(); + testElement.loadPixels(); + assert.equal(myp5.pixels[0], testElement.pixels[0]); + assert.equal(myp5.pixels[1], 0); + assert.equal(myp5.pixels[2], 0); + done(); + }); + }); + + test.todo('should work with updatePixels()', function(done) { + let loaded = false; + let prevElt; + const imgElt = myp5.createImg('/test/unit/assets/cat.jpg', ''); + const testElement = myp5.createVideo('/test/unit/assets/cat.webm', () => { + loaded = true; + // Workaround for headless tests, where the video data isn't loading + // correctly: mock the video element using an image for this test + prevElt = testElement.elt; + testElement.elt = imgElt.elt; + }); + + let drewUpdatedPixels = false; + myp5.draw = function() { + if (!loaded) return; + myp5.background(255); + + if (!drewUpdatedPixels) { + // First, update pixels and check that it draws the updated + // pixels correctly + testElement.loadPixels(); + for (let i = 0; i < testElement.pixels.length; i += 4) { + // Set every pixel to red + testElement.pixels[i] = 255; + testElement.pixels[i + 1] = 0; + testElement.pixels[i + 2] = 0; + testElement.pixels[i + 3] = 255; + } + testElement.updatePixels(); + myp5.image(testElement, 0, 0); + + // The element should have drawn using the updated red pixels + myp5.loadPixels(); + assert.deepEqual([...myp5.pixels.slice(0, 4)], [255, 0, 0, 255]); + + // Mark that we've done the first check so we can see whether + // the video still updates on the next frame + drewUpdatedPixels = true; + } else { + // Next, make sure it still updates with the real pixels from + // the next frame of the video on the next frame of animation + myp5.image(testElement, 0, 0); + + myp5.loadPixels(); + testElement.loadPixels(); + expect([...testElement.pixels.slice(0, 4)]) + .to.not.deep.equal([255, 0, 0, 255]); + assert.deepEqual( + [...myp5.pixels.slice(0, 4)], + [...testElement.pixels.slice(0, 4)] + ); + testElement.elt = prevElt; + imgElt.remove(); + done(); + } + }; + }); + }); + + suite('p5.prototype.createAudio', function() { + afterEach(function() { + document.body.innerHTML = ""; + }); + + const mediaSources = [ + '/test/unit/assets/beat.mp3', + '/test/unit/assets/beat.mp3' + ]; + + test('should be a function', function() { + assert.isFunction(mockP5Prototype.createAudio); + }); + + test('should return p5.Element of HTMLAudioElement', function() { + const testElement = mockP5Prototype.createAudio(''); + assert.instanceOf(testElement, MediaElement); + assert.instanceOf(testElement.elt, HTMLAudioElement); + }); + + test('should accept a singular media source', function() { + const mediaSource = mediaSources[0]; + const testElement = mockP5Prototype.createAudio(mediaSource); + const sourceEl = testElement.elt.children[0]; + + assert.deepEqual(testElement.elt.childElementCount, 1); + assert.instanceOf(sourceEl, HTMLSourceElement); + assert.isTrue(sourceEl.src.endsWith(mediaSource)); + }); + + test('should accept multiple media sources', function() { + const testElement = mockP5Prototype.createAudio(mediaSources); + + assert.deepEqual(testElement.elt.childElementCount, mediaSources.length); + for (let index = 0; index < mediaSources.length; index += 1) { + const sourceEl = testElement.elt.children[index]; + assert.instanceOf(sourceEl, HTMLSourceElement); + assert.isTrue(sourceEl.src.endsWith(mediaSources[index])); + } + }); + + // testSketchWithPromise( + // 'should trigger callback on canplaythrough event', + // function(sketch, resolve, reject) { + // sketch.setup = function() { + // testElement = mockP5Prototype.createAudio(mediaSources, resolve); + // testElement.elt.dispatchEvent(new Event('canplaythrough')); + // }; + // } + // ); + }); + + suite('p5.prototype.createCapture', function() { + afterEach(function() { + document.body.innerHTML = ""; + }); + + test('should be a function', function() { + assert.isFunction(mockP5Prototype.createCapture); + }); + + test('should return p5.Element of video type', function() { + const testElement = mockP5Prototype.createCapture(mockP5Prototype.VIDEO); + assert.instanceOf(testElement, Element); + assert.instanceOf(testElement.elt, HTMLVideoElement); + }); + + // NOTE: play() failed because the user didn't interact with the document first. + // testSketchWithPromise( + // 'triggers the callback after loading metadata', + // function(sketch, resolve, reject) { + // sketch.setup = function() { + // testElement = myp5.createCapture(myp5.VIDEO, resolve); + // const mockedEvent = new Event('loadedmetadata'); + // testElement.elt.dispatchEvent(mockedEvent); + // }; + // } + // ); + + // Required for ios 11 devices + test('should have playsinline attribute to empty string on DOM element', function() { + const testElement = mockP5Prototype.createCapture(mockP5Prototype.VIDEO); + // Weird check, setter accepts : playinline, getter accepts playInline + assert.isTrue(testElement.elt.playsInline); + }); + }); +}); From 76e3ad7f6709706e10a112cf4dd2db54939c1bf7 Mon Sep 17 00:00:00 2001 From: limzykenneth Date: Mon, 2 Dec 2024 15:44:15 +0000 Subject: [PATCH 7/9] Fix some core tests --- test/unit/core/2d_primitives.js | 71 ++++++++++++++------------------- test/unit/core/attributes.js | 43 ++++++++------------ test/unit/core/curves.js | 50 +++++++++++------------ 3 files changed, 72 insertions(+), 92 deletions(-) diff --git a/test/unit/core/2d_primitives.js b/test/unit/core/2d_primitives.js index 523e549900..a85e07ae87 100644 --- a/test/unit/core/2d_primitives.js +++ b/test/unit/core/2d_primitives.js @@ -1,72 +1,63 @@ -import p5 from '../../../src/app.js'; +import { mockP5, mockP5Prototype } from '../../js/mocks'; +import primitives from '../../../src/shape/2d_primitives'; suite('2D Primitives', function() { - var myp5; - beforeAll(function() { - new p5(function(p) { - p.setup = function() { - myp5 = p; - }; - }); - }); - - afterAll(async function() { - await myp5.remove(); + primitives(mockP5, mockP5Prototype); }); suite('p5.prototype.arc', function() { test('should be a function', function() { - assert.ok(myp5.arc); - assert.typeOf(myp5.arc, 'function'); + assert.ok(mockP5Prototype.arc); + assert.typeOf(mockP5Prototype.arc, 'function'); }); }); suite('p5.prototype.ellipse', function() { test('should be a function', function() { - assert.ok(myp5.ellipse); - assert.typeOf(myp5.ellipse, 'function'); + assert.ok(mockP5Prototype.ellipse); + assert.typeOf(mockP5Prototype.ellipse, 'function'); }); }); suite('p5.prototype.line', function() { test('should be a function', function() { - assert.ok(myp5.line); - assert.typeOf(myp5.line, 'function'); + assert.ok(mockP5Prototype.line); + assert.typeOf(mockP5Prototype.line, 'function'); }); }); suite('p5.prototype.point', function() { test('should be a function', function() { - assert.ok(myp5.point); - assert.typeOf(myp5.point, 'function'); + assert.ok(mockP5Prototype.point); + assert.typeOf(mockP5Prototype.point, 'function'); }); }); suite('p5.prototype.quad', function() { test('should be a function', function() { - assert.ok(myp5.quad); - assert.typeOf(myp5.quad, 'function'); + assert.ok(mockP5Prototype.quad); + assert.typeOf(mockP5Prototype.quad, 'function'); }); }); suite('p5.prototype.rect', function() { test('should be a function', function() { - assert.ok(myp5.rect); - assert.typeOf(myp5.rect, 'function'); + assert.ok(mockP5Prototype.rect); + assert.typeOf(mockP5Prototype.rect, 'function'); }); }); suite('p5.prototype.triangle', function() { test('should be a function', function() { - assert.ok(myp5.triangle); - assert.typeOf(myp5.triangle, 'function'); + assert.ok(mockP5Prototype.triangle); + assert.typeOf(mockP5Prototype.triangle, 'function'); }); }); suite('p5.prototype.square', function() { test('should be a function', function() { - assert.ok(myp5.square); - assert.typeOf(myp5.square, 'function'); + assert.ok(mockP5Prototype.square); + assert.typeOf(mockP5Prototype.square, 'function'); }); }); @@ -75,7 +66,7 @@ suite('2D Primitives', function() { var i, j, angles; for (i = -2; i <= 2; i++) { for (j = -2; j <= 2; j++) { - angles = myp5._normalizeArcAngles( + angles = mockP5Prototype._normalizeArcAngles( 2 * Math.PI * i, 2 * Math.PI * j, 500, @@ -92,7 +83,7 @@ suite('2D Primitives', function() { var i, j, angles; for (i = -2; i <= 2; i++) { for (j = -2; j <= 2; j++) { - angles = myp5._normalizeArcAngles( + angles = mockP5Prototype._normalizeArcAngles( 2 * Math.PI * i + 1, 2 * Math.PI * j + 1, 500, @@ -109,7 +100,7 @@ suite('2D Primitives', function() { var i, j, angles; for (i = -2; i <= 2; i++) { for (j = -2; j <= 2; j++) { - angles = myp5._normalizeArcAngles( + angles = mockP5Prototype._normalizeArcAngles( 2 * Math.PI * i - 0.000001, 2 * Math.PI * j + 0.000001, 500, @@ -126,7 +117,7 @@ suite('2D Primitives', function() { var i, j, angles; for (i = -2; i <= 2; i++) { for (j = -2; j <= 2; j++) { - angles = myp5._normalizeArcAngles( + angles = mockP5Prototype._normalizeArcAngles( 2 * Math.PI * i + 0.000001, 2 * Math.PI * j - 0.000001, 500, @@ -143,7 +134,7 @@ suite('2D Primitives', function() { var i, j, angles; for (i = -2; i <= 2; i++) { for (j = -2; j <= 2; j++) { - angles = myp5._normalizeArcAngles( + angles = mockP5Prototype._normalizeArcAngles( 2 * Math.PI * i + 0.999999, 2 * Math.PI * j + 1.000001, 500, @@ -160,7 +151,7 @@ suite('2D Primitives', function() { var i, j, angles; for (i = -2; i <= 2; i++) { for (j = -2; j <= 2; j++) { - angles = myp5._normalizeArcAngles( + angles = mockP5Prototype._normalizeArcAngles( 2 * Math.PI * i + 1.000001, 2 * Math.PI * j + 0.999999, 500, @@ -177,7 +168,7 @@ suite('2D Primitives', function() { var i, j, angles; for (i = -2; i <= 2; i++) { for (j = -2; j <= 2; j++) { - angles = myp5._normalizeArcAngles( + angles = mockP5Prototype._normalizeArcAngles( 2 * Math.PI * i - 0.1, 2 * Math.PI * j + 0.1, 500, @@ -194,7 +185,7 @@ suite('2D Primitives', function() { var i, j, angles; for (i = -2; i <= 2; i++) { for (j = -2; j <= 2; j++) { - angles = myp5._normalizeArcAngles( + angles = mockP5Prototype._normalizeArcAngles( 2 * Math.PI * i + 0.1, 2 * Math.PI * j - 0.1, 500, @@ -211,7 +202,7 @@ suite('2D Primitives', function() { var i, j, angles; for (i = -2; i <= 2; i++) { for (j = -2; j <= 2; j++) { - angles = myp5._normalizeArcAngles( + angles = mockP5Prototype._normalizeArcAngles( 2 * Math.PI * i + 0.9, 2 * Math.PI * j + 1.1, 500, @@ -228,7 +219,7 @@ suite('2D Primitives', function() { var i, j, angles; for (i = -2; i <= 2; i++) { for (j = -2; j <= 2; j++) { - angles = myp5._normalizeArcAngles( + angles = mockP5Prototype._normalizeArcAngles( 2 * Math.PI * i + 1.1, 2 * Math.PI * j + 0.9, 500, @@ -245,7 +236,7 @@ suite('2D Primitives', function() { var i, j, angles; for (i = -2; i <= 2; i++) { for (j = -2; j <= 2; j++) { - angles = myp5._normalizeArcAngles( + angles = mockP5Prototype._normalizeArcAngles( 2 * Math.PI * (i + 40 / 360), 2 * Math.PI * (j + 230 / 360), 500, @@ -262,7 +253,7 @@ suite('2D Primitives', function() { var i, j, angles; for (i = -2; i <= 2; i++) { for (j = -2; j <= 2; j++) { - angles = myp5._normalizeArcAngles( + angles = mockP5Prototype._normalizeArcAngles( 2 * Math.PI * (i + 320 / 360), 2 * Math.PI * (j + 130 / 360), 500, diff --git a/test/unit/core/attributes.js b/test/unit/core/attributes.js index 28c658a482..6cd0f416e2 100644 --- a/test/unit/core/attributes.js +++ b/test/unit/core/attributes.js @@ -1,66 +1,57 @@ -import p5 from '../../../src/app.js'; +import { mockP5, mockP5Prototype } from '../../js/mocks'; +import attributes from '../../../src/shape/attributes'; suite('Attributes', function() { - var myp5; - beforeAll(function() { - new p5(function(p) { - p.setup = function() { - myp5 = p; - }; - }); - }); - - afterAll(function() { - myp5.remove(); + attributes(mockP5, mockP5Prototype); }); suite('p5.prototype.ellipseMode', function() { test('should be a function', function() { - assert.ok(myp5.ellipseMode); - assert.typeOf(myp5.ellipseMode, 'function'); + assert.ok(mockP5Prototype.ellipseMode); + assert.typeOf(mockP5Prototype.ellipseMode, 'function'); }); }); suite('p5.prototype.rectMode', function() { test('should be a function', function() { - assert.ok(myp5.rectMode); - assert.typeOf(myp5.rectMode, 'function'); + assert.ok(mockP5Prototype.rectMode); + assert.typeOf(mockP5Prototype.rectMode, 'function'); }); }); suite('p5.prototype.noSmooth', function() { test('should be a function', function() { - assert.ok(myp5.noSmooth); - assert.typeOf(myp5.noSmooth, 'function'); + assert.ok(mockP5Prototype.noSmooth); + assert.typeOf(mockP5Prototype.noSmooth, 'function'); }); }); suite('p5.prototype.smooth', function() { test('should be a function', function() { - assert.ok(myp5.smooth); - assert.typeOf(myp5.smooth, 'function'); + assert.ok(mockP5Prototype.smooth); + assert.typeOf(mockP5Prototype.smooth, 'function'); }); }); suite('p5.prototype.strokeCap', function() { test('should be a function', function() { - assert.ok(myp5.strokeCap); - assert.typeOf(myp5.strokeCap, 'function'); + assert.ok(mockP5Prototype.strokeCap); + assert.typeOf(mockP5Prototype.strokeCap, 'function'); }); }); suite('p5.prototype.strokeJoin', function() { test('should be a function', function() { - assert.ok(myp5.strokeJoin); - assert.typeOf(myp5.strokeJoin, 'function'); + assert.ok(mockP5Prototype.strokeJoin); + assert.typeOf(mockP5Prototype.strokeJoin, 'function'); }); }); suite('p5.prototype.strokeWeight', function() { test('should be a function', function() { - assert.ok(myp5.strokeWeight); - assert.typeOf(myp5.strokeWeight, 'function'); + assert.ok(mockP5Prototype.strokeWeight); + assert.typeOf(mockP5Prototype.strokeWeight, 'function'); }); }); }); diff --git a/test/unit/core/curves.js b/test/unit/core/curves.js index c2fb72a36f..d389e0fb9d 100644 --- a/test/unit/core/curves.js +++ b/test/unit/core/curves.js @@ -1,35 +1,33 @@ -import p5 from '../../../src/app.js'; +import { mockP5, mockP5Prototype } from '../../js/mocks'; +import curves from '../../../src/shape/curves'; suite('Curves', function() { - var myp5; - beforeAll(function() { - new p5(function(p) { - p.setup = function() { - myp5 = p; - }; - }); + mockP5Prototype._renderer = { + _curveTightness: 0 + }; + curves(mockP5, mockP5Prototype); }); - afterAll(function() { - myp5.remove(); + afterAll(() => { + delete mockP5Prototype._renderer; }); suite('p5.prototype.bezier', function() { test('should be a function', function() { - assert.ok(myp5.bezier); - assert.typeOf(myp5.bezier, 'function'); + assert.ok(mockP5Prototype.bezier); + assert.typeOf(mockP5Prototype.bezier, 'function'); }); }); suite('p5.prototype.bezierPoint', function() { var result; test('should be a function', function() { - assert.ok(myp5.bezierPoint); - assert.typeOf(myp5.bezierPoint, 'function'); + assert.ok(mockP5Prototype.bezierPoint); + assert.typeOf(mockP5Prototype.bezierPoint, 'function'); }); test('should return the correct point on a Bezier Curve', function() { - result = myp5.bezierPoint(85, 10, 90, 15, 0.5); + result = mockP5Prototype.bezierPoint(85, 10, 90, 15, 0.5); assert.equal(result, 50); assert.notEqual(result, -1); }); @@ -38,30 +36,30 @@ suite('Curves', function() { suite('p5.prototype.bezierTangent', function() { var result; test('should be a function', function() { - assert.ok(myp5.bezierTangent); - assert.typeOf(myp5.bezierTangent, 'function'); + assert.ok(mockP5Prototype.bezierTangent); + assert.typeOf(mockP5Prototype.bezierTangent, 'function'); }); test('should return the correct point on a Bezier Curve', function() { - result = myp5.bezierTangent(95, 73, 73, 15, 0.5); + result = mockP5Prototype.bezierTangent(95, 73, 73, 15, 0.5); assert.equal(result, -60); }); }); suite('p5.prototype.curve', function() { test('should be a function', function() { - assert.ok(myp5.curve); - assert.typeOf(myp5.curve, 'function'); + assert.ok(mockP5Prototype.curve); + assert.typeOf(mockP5Prototype.curve, 'function'); }); }); suite('p5.prototype.curvePoint', function() { var result; test('should be a function', function() { - assert.ok(myp5.curvePoint); - assert.typeOf(myp5.curvePoint, 'function'); + assert.ok(mockP5Prototype.curvePoint); + assert.typeOf(mockP5Prototype.curvePoint, 'function'); }); test('should return the correct point on a Catmull-Rom Curve', function() { - result = myp5.curvePoint(5, 5, 73, 73, 0.5); + result = mockP5Prototype.curvePoint(5, 5, 73, 73, 0.5); assert.equal(result, 39); assert.notEqual(result, -1); }); @@ -70,11 +68,11 @@ suite('Curves', function() { suite('p5.prototype.curveTangent', function() { var result; test('should be a function', function() { - assert.ok(myp5.curveTangent); - assert.typeOf(myp5.curveTangent, 'function'); + assert.ok(mockP5Prototype.curveTangent); + assert.typeOf(mockP5Prototype.curveTangent, 'function'); }); test('should return the correct point on a Catmull-Rom Curve', function() { - result = myp5.curveTangent(95, 73, 73, 15, 0.5); + result = mockP5Prototype.curveTangent(95, 73, 73, 15, 0.5); assert.equal(result, 10); assert.notEqual(result, -1); }); From e97e00b246f54be06f3a202f19df1e11ab0ad0d2 Mon Sep 17 00:00:00 2001 From: limzykenneth Date: Tue, 3 Dec 2024 14:14:12 +0000 Subject: [PATCH 8/9] Fix remaining possible core unit tests --- test/unit/core/p5.Element.js | 144 ++++++++++++++++++----------------- test/unit/core/transform.js | 61 ++++++--------- 2 files changed, 97 insertions(+), 108 deletions(-) diff --git a/test/unit/core/p5.Element.js b/test/unit/core/p5.Element.js index aaae36ee3e..1c94d2b81c 100644 --- a/test/unit/core/p5.Element.js +++ b/test/unit/core/p5.Element.js @@ -1,27 +1,33 @@ -import p5 from '../../../src/app.js'; +// import p5 from '../../../src/app.js'; +import { mockP5, mockP5Prototype } from '../../js/mocks'; +import dom from '../../../src/dom/dom'; suite('p5.Element', function() { - const myp5 = new p5(function(sketch) { - sketch.setup = function() {}; - sketch.draw = function() {}; - }); - - let elt; - - afterAll(function() { - if (elt && elt.parentNode) { - elt.parentNode.removeChild(elt); - elt = null; - } - myp5.remove(); + // const mockP5Prototype = new p5(function(sketch) { + // sketch.setup = function() {}; + // sketch.draw = function() {}; + // }); + + // let elt; + + // afterAll(function() { + // if (elt && elt.parentNode) { + // elt.parentNode.removeChild(elt); + // elt = null; + // } + // mockP5Prototype.remove(); + // }); + + beforeAll(() => { + dom(mockP5, mockP5Prototype); }); suite('p5.Element.prototype.parent', function() { let div0, div1; beforeEach(() => { - div0 = myp5.createDiv('this is the parent'); - div1 = myp5.createDiv('this is the child'); + div0 = mockP5Prototype.createDiv('this is the parent'); + div1 = mockP5Prototype.createDiv('this is the child'); }); afterEach(() => { @@ -53,29 +59,29 @@ suite('p5.Element', function() { div1.setAttribute('id', 'child'); div0.appendChild(div1); document.body.appendChild(div0); - assert.equal(myp5.select('#child').parent(), div0); + assert.equal(mockP5Prototype.select('#child').parent(), div0); }); }); suite('p5.Element.prototype.id', function() { test('attaches child to parent', function() { - elt = myp5.createDiv(); + const elt = mockP5Prototype.createDiv(); elt.id('test'); assert.equal(document.getElementById('test'), elt.elt); }); test('returns the id', function() { - elt = document.createElement('div'); + const elt = document.createElement('div'); elt.setAttribute('id', 'test'); document.body.appendChild(elt); - assert.equal(myp5.select('#child').id(), 'child'); + assert.equal(mockP5Prototype.select('#child').id(), 'child'); }); }); - suite('p5.Element.prototype.mousePressed', function() { + suite.todo('p5.Element.prototype.mousePressed', function() { test('attaches and gets events', function() { // setup - elt = myp5.createDiv('hello'); + const elt = mockP5Prototype.createDiv('hello'); var myFnCounter = 0; var myFn = function() { myFnCounter++; @@ -89,7 +95,7 @@ suite('p5.Element', function() { test('attaches multiple handlers and only latest gets events', function() { // setup - elt = myp5.createDiv('hello'); + const elt = mockP5Prototype.createDiv('hello'); var myFnCounter = 0; var myFn = function() { myFnCounter++; @@ -111,7 +117,7 @@ suite('p5.Element', function() { suite('p5.Element.prototype.mouseClicked', function() { test('attaches and gets events', function() { // setup - elt = myp5.createDiv('hello'); + const elt = mockP5Prototype.createDiv('hello'); var myFnCounter = 0; var myFn = function() { myFnCounter++; @@ -125,7 +131,7 @@ suite('p5.Element', function() { test('attaches multiple handlers and only latest gets events', function() { // setup - elt = myp5.createDiv('hello'); + const elt = mockP5Prototype.createDiv('hello'); var myFnCounter = 0; var myFn = function() { myFnCounter++; @@ -145,7 +151,7 @@ suite('p5.Element', function() { test('detaches and does not get events', function() { // setup - elt = myp5.createDiv('hello'); + const elt = mockP5Prototype.createDiv('hello'); var myFnCounter = 0; var myFn = function() { myFnCounter++; @@ -162,7 +168,7 @@ suite('p5.Element', function() { suite('p5.Element.prototype.doubleClicked', function() { test('attaches and gets events', function() { // setup - elt = myp5.createDiv('hello'); + const elt = mockP5Prototype.createDiv('hello'); var myFnCounter = 0; var myFn = function() { myFnCounter++; @@ -176,7 +182,7 @@ suite('p5.Element', function() { test('attaches multiple handlers and only latest gets events', function() { // setup - elt = myp5.createDiv('hello'); + const elt = mockP5Prototype.createDiv('hello'); var myFnCounter = 0; var myFn = function() { myFnCounter++; @@ -196,7 +202,7 @@ suite('p5.Element', function() { test('detaches and does not get events', function() { // setup - elt = myp5.createDiv('hello'); + const elt = mockP5Prototype.createDiv('hello'); var myFnCounter = 0; var myFn = function() { myFnCounter++; @@ -213,7 +219,7 @@ suite('p5.Element', function() { suite('p5.Element.prototype.mouseWheel', function() { test('attaches and gets events', function() { // setup - elt = myp5.createDiv('hello'); + const elt = mockP5Prototype.createDiv('hello'); var myFnCounter = 0; var myFn = function(event) { if (event.deltaX > 0) { @@ -229,7 +235,7 @@ suite('p5.Element', function() { test('attaches multiple handlers and only latest gets events', function() { // setup - elt = myp5.createDiv('hello'); + const elt = mockP5Prototype.createDiv('hello'); var myFnCounter = 0; var myFn = function() { myFnCounter++; @@ -251,7 +257,7 @@ suite('p5.Element', function() { suite('p5.Element.prototype.touchStarted', function() { test('attaches and gets events', function() { // setup - elt = myp5.createDiv('hello'); + const elt = mockP5Prototype.createDiv('hello'); var myFnCounter = 0; var myFn = function(event) { myFnCounter++; @@ -265,7 +271,7 @@ suite('p5.Element', function() { test('attaches multiple handlers and only latest gets events', function() { // setup - elt = myp5.createDiv('hello'); + const elt = mockP5Prototype.createDiv('hello'); var myFnCounter = 0; var myFn = function() { myFnCounter++; @@ -285,7 +291,7 @@ suite('p5.Element', function() { test('detaches and does not get events', function() { // setup - elt = myp5.createDiv('hello'); + const elt = mockP5Prototype.createDiv('hello'); var myFnCounter = 0; var myFn = function() { myFnCounter++; @@ -302,7 +308,7 @@ suite('p5.Element', function() { suite('p5.Element.prototype.touchMoved', function() { test('attaches and gets events', function() { // setup - elt = myp5.createDiv('hello'); + const elt = mockP5Prototype.createDiv('hello'); var myFnCounter = 0; var myFn = function(event) { myFnCounter++; @@ -316,7 +322,7 @@ suite('p5.Element', function() { test('attaches multiple handlers and only latest gets events', function() { // setup - elt = myp5.createDiv('hello'); + const elt = mockP5Prototype.createDiv('hello'); var myFnCounter = 0; var myFn = function() { myFnCounter++; @@ -336,7 +342,7 @@ suite('p5.Element', function() { test('detaches and does not get events', function() { // setup - elt = myp5.createDiv('hello'); + const elt = mockP5Prototype.createDiv('hello'); var myFnCounter = 0; var myFn = function() { myFnCounter++; @@ -353,7 +359,7 @@ suite('p5.Element', function() { suite('p5.Element.prototype.touchEnded', function() { test('attaches and gets events', function() { // setup - elt = myp5.createDiv('hello'); + const elt = mockP5Prototype.createDiv('hello'); var myFnCounter = 0; var myFn = function(event) { myFnCounter++; @@ -367,7 +373,7 @@ suite('p5.Element', function() { test('attaches multiple handlers and only latest gets events', function() { // setup - elt = myp5.createDiv('hello'); + const elt = mockP5Prototype.createDiv('hello'); var myFnCounter = 0; var myFn = function() { myFnCounter++; @@ -387,7 +393,7 @@ suite('p5.Element', function() { test('detaches and does not get events', function() { // setup - elt = myp5.createDiv('hello'); + const elt = mockP5Prototype.createDiv('hello'); var myFnCounter = 0; var myFn = function() { myFnCounter++; @@ -404,7 +410,7 @@ suite('p5.Element', function() { suite('p5.Element.prototype.mouseReleased', function() { test('attaches and gets events', function() { // setup - elt = myp5.createDiv('hello'); + const elt = mockP5Prototype.createDiv('hello'); var myFnCounter = 0; var myFn = function() { myFnCounter++; @@ -418,7 +424,7 @@ suite('p5.Element', function() { test('attaches multiple handlers and only latest gets events', function() { // setup - elt = myp5.createDiv('hello'); + const elt = mockP5Prototype.createDiv('hello'); var myFnCounter = 0; var myFn = function() { myFnCounter++; @@ -438,7 +444,7 @@ suite('p5.Element', function() { test('detaches and does not get events', function() { // setup - elt = myp5.createDiv('hello'); + const elt = mockP5Prototype.createDiv('hello'); var myFnCounter = 0; var myFn = function() { myFnCounter++; @@ -455,7 +461,7 @@ suite('p5.Element', function() { suite('p5.Element.prototype.mouseMoved', function() { test('attaches and gets events', function() { // setup - elt = myp5.createDiv('hello'); + const elt = mockP5Prototype.createDiv('hello'); var myFnCounter = 0; var myFn = function() { myFnCounter++; @@ -469,7 +475,7 @@ suite('p5.Element', function() { test('attaches multiple handlers and only latest gets events', function() { // setup - elt = myp5.createDiv('hello'); + const elt = mockP5Prototype.createDiv('hello'); var myFnCounter = 0; var myFn = function() { myFnCounter++; @@ -489,7 +495,7 @@ suite('p5.Element', function() { test('detaches and does not get events', function() { // setup - elt = myp5.createDiv('hello'); + const elt = mockP5Prototype.createDiv('hello'); var myFnCounter = 0; var myFn = function() { myFnCounter++; @@ -506,7 +512,7 @@ suite('p5.Element', function() { suite('p5.Element.prototype.mouseOver', function() { test('attaches and gets events', function() { // setup - elt = myp5.createDiv('hello'); + const elt = mockP5Prototype.createDiv('hello'); var myFnCounter = 0; var myFn = function() { myFnCounter++; @@ -520,7 +526,7 @@ suite('p5.Element', function() { test('attaches multiple handlers and only latest gets events', function() { // setup - elt = myp5.createDiv('hello'); + const elt = mockP5Prototype.createDiv('hello'); var myFnCounter = 0; var myFn = function() { myFnCounter++; @@ -540,7 +546,7 @@ suite('p5.Element', function() { test('detaches and does not get events', function() { // setup - elt = myp5.createDiv('hello'); + const elt = mockP5Prototype.createDiv('hello'); var myFnCounter = 0; var myFn = function() { myFnCounter++; @@ -557,7 +563,7 @@ suite('p5.Element', function() { suite('p5.Element.prototype.mouseOut', function() { test('attaches and gets events', function() { // setup - elt = myp5.createDiv('hello'); + const elt = mockP5Prototype.createDiv('hello'); var myFnCounter = 0; var myFn = function() { myFnCounter++; @@ -571,7 +577,7 @@ suite('p5.Element', function() { test('attaches multiple handlers and only latest gets events', function() { // setup - elt = myp5.createDiv('hello'); + const elt = mockP5Prototype.createDiv('hello'); var myFnCounter = 0; var myFn = function() { myFnCounter++; @@ -591,7 +597,7 @@ suite('p5.Element', function() { test('detaches and does not get events', function() { // setup - elt = myp5.createDiv('hello'); + const elt = mockP5Prototype.createDiv('hello'); var myFnCounter = 0; var myFn = function() { myFnCounter++; @@ -607,7 +613,7 @@ suite('p5.Element', function() { suite('p5.Element.prototype.dragOver', function() { test('attaches and gets events', function() { - elt = myp5.createDiv('hello'); + const elt = mockP5Prototype.createDiv('hello'); var myFnCounter = 0; var myFn = function() { myFnCounter++; @@ -621,7 +627,7 @@ suite('p5.Element', function() { test('attaches multiple handlers and only latest gets events', function() { // setup - elt = myp5.createDiv('hello'); + const elt = mockP5Prototype.createDiv('hello'); var myFnCounter = 0; var myFn = function() { myFnCounter++; @@ -641,7 +647,7 @@ suite('p5.Element', function() { test('detaches and does not get events', function() { // setup - elt = myp5.createDiv('hello'); + const elt = mockP5Prototype.createDiv('hello'); var myFnCounter = 0; var myFn = function() { myFnCounter++; @@ -657,7 +663,7 @@ suite('p5.Element', function() { suite('p5.Element.prototype.dragLeave', function() { test('attaches and gets events', function() { - elt = myp5.createDiv('hello'); + const elt = mockP5Prototype.createDiv('hello'); var myFnCounter = 0; var myFn = function() { myFnCounter++; @@ -671,7 +677,7 @@ suite('p5.Element', function() { test('attaches multiple handlers and only latest gets events', function() { // setup - elt = myp5.createDiv('hello'); + const elt = mockP5Prototype.createDiv('hello'); var myFnCounter = 0; var myFn = function() { myFnCounter++; @@ -691,7 +697,7 @@ suite('p5.Element', function() { test('detaches and does not get events', function() { // setup - elt = myp5.createDiv('hello'); + const elt = mockP5Prototype.createDiv('hello'); var myFnCounter = 0; var myFn = function() { myFnCounter++; @@ -720,7 +726,7 @@ suite('p5.Element', function() { elt.setAttribute('id', 'testdiv'); document.body.appendChild(elt); - myp5.select('#testdiv').addClass('testclass'); + mockP5Prototype.select('#testdiv').addClass('testclass'); assert.strictEqual(elt.getAttribute('class'), 'testclass'); }); @@ -729,7 +735,7 @@ suite('p5.Element', function() { elt.setAttribute('class', 'testclass'); document.body.appendChild(elt); - myp5.select('#testdiv').removeClass('testclass'); + mockP5Prototype.select('#testdiv').removeClass('testclass'); assert.strictEqual(elt.getAttribute('class'), ''); }); @@ -738,7 +744,7 @@ suite('p5.Element', function() { elt.setAttribute('class', 'testclass1 testclass2 testclass3'); document.body.appendChild(elt); - myp5.select('#testdiv').removeClass('testclass2'); + mockP5Prototype.select('#testdiv').removeClass('testclass2'); assert.strictEqual(elt.getAttribute('class'), 'testclass1 testclass3'); }); @@ -747,7 +753,7 @@ suite('p5.Element', function() { elt.setAttribute('class', 'testclass1 testclass2 testclass3'); document.body.appendChild(elt); - assert.strictEqual(myp5.select('#testdiv').hasClass('testclass2'), true); + assert.strictEqual(mockP5Prototype.select('#testdiv').hasClass('testclass2'), true); }); test('should return false if element has not specified class', function() { @@ -755,7 +761,7 @@ suite('p5.Element', function() { elt.setAttribute('class', 'testclass1 testclass3'); document.body.appendChild(elt); - assert.strictEqual(myp5.select('#testdiv').hasClass('testclass2'), false); + assert.strictEqual(mockP5Prototype.select('#testdiv').hasClass('testclass2'), false); }); test('should return false if element has class that is partially similar as specified class', function() { @@ -763,10 +769,10 @@ suite('p5.Element', function() { elt.setAttribute('class', 'testclass slideshow newtestsclas'); document.body.appendChild(elt); - assert.strictEqual(myp5.select('#testdiv').hasClass('show'), false); - assert.strictEqual(myp5.select('#testdiv').hasClass('slide'), false); - assert.strictEqual(myp5.select('#testdiv').hasClass('test'), false); - assert.strictEqual(myp5.select('#testdiv').hasClass('class'), false); + assert.strictEqual(mockP5Prototype.select('#testdiv').hasClass('show'), false); + assert.strictEqual(mockP5Prototype.select('#testdiv').hasClass('slide'), false); + assert.strictEqual(mockP5Prototype.select('#testdiv').hasClass('test'), false); + assert.strictEqual(mockP5Prototype.select('#testdiv').hasClass('class'), false); }); test('should toggle specified class on element', function() { @@ -774,10 +780,10 @@ suite('p5.Element', function() { elt.setAttribute('class', 'testclass1 testclass2'); document.body.appendChild(elt); - myp5.select('#testdiv').toggleClass('testclass2'); + mockP5Prototype.select('#testdiv').toggleClass('testclass2'); assert.strictEqual(elt.getAttribute('class'), 'testclass1'); - myp5.select('#testdiv').toggleClass('testclass2'); + mockP5Prototype.select('#testdiv').toggleClass('testclass2'); assert.strictEqual(elt.getAttribute('class'), 'testclass1 testclass2'); }); }); diff --git a/test/unit/core/transform.js b/test/unit/core/transform.js index 1e37634760..c4b0edbb8e 100644 --- a/test/unit/core/transform.js +++ b/test/unit/core/transform.js @@ -1,96 +1,79 @@ -import p5 from '../../../src/app.js'; +import { mockP5, mockP5Prototype } from '../../js/mocks'; +import transform from '../../../src/core/transform'; suite('Transform', function() { - var sketch1; // sketch without WEBGL Mode - var sketch2; // skecth with WEBGL mode - beforeAll(function() { - new p5(function(p) { - p.setup = function() { - sketch1 = p; - }; - }); - new p5(function(p) { - p.setup = function() { - p.createCanvas(100, 100, p.WEBGL); - sketch2 = p; - }; - }); - }); - - afterAll(function() { - sketch1.remove(); - sketch2.remove(); + transform(mockP5, mockP5Prototype); }); suite('p5.prototype.rotate', function() { test('should be a function', function() { - assert.ok(sketch1.rotate); - assert.typeOf(sketch1.rotate, 'function'); + assert.ok(mockP5Prototype.rotate); + assert.typeOf(mockP5Prototype.rotate, 'function'); }); }); suite('p5.prototype.rotateX', function() { test('should be a function', function() { - assert.ok(sketch1.rotateX); - assert.typeOf(sketch1.rotateX, 'function'); + assert.ok(mockP5Prototype.rotateX); + assert.typeOf(mockP5Prototype.rotateX, 'function'); }); test('throws error. should be used in WEBGL mode', function() { assert.throws(function() { - sketch1.rotateX(100); + mockP5Prototype.rotateX(100); }, Error); }); }); suite('p5.prototype.rotateY', function() { test('should be a function', function() { - assert.ok(sketch1.rotateY); - assert.typeOf(sketch1.rotateY, 'function'); + assert.ok(mockP5Prototype.rotateY); + assert.typeOf(mockP5Prototype.rotateY, 'function'); }); test('throws error. should be used in WEBGL mode', function() { assert.throws(function() { - sketch1.rotateY(100); + mockP5Prototype.rotateY(100); }, Error); }); }); suite('p5.prototype.rotateZ', function() { test('should be a function', function() { - assert.ok(sketch1.rotateZ); - assert.typeOf(sketch1.rotateZ, 'function'); + assert.ok(mockP5Prototype.rotateZ); + assert.typeOf(mockP5Prototype.rotateZ, 'function'); }); test('throws error. should be used in WEBGL mode', function() { assert.throws(function() { - sketch1.rotateZ(100); + mockP5Prototype.rotateZ(100); }, Error); }); }); suite('p5.prototype.scale', function() { test('should be a function', function() { - assert.ok(sketch1.scale); - assert.typeOf(sketch1.scale, 'function'); + assert.ok(mockP5Prototype.scale); + assert.typeOf(mockP5Prototype.scale, 'function'); }); }); suite('p5.prototype.shearX', function() { test('should be a function', function() { - assert.ok(sketch1.shearX); - assert.typeOf(sketch1.shearX, 'function'); + assert.ok(mockP5Prototype.shearX); + assert.typeOf(mockP5Prototype.shearX, 'function'); }); }); suite('p5.prototype.shearY', function() { test('should be a function', function() { - assert.ok(sketch1.shearY); - assert.typeOf(sketch1.shearY, 'function'); + assert.ok(mockP5Prototype.shearY); + assert.typeOf(mockP5Prototype.shearY, 'function'); }); }); suite('p5.prototype.translate', function() { test('should be a function', function() { - assert.ok(sketch1.translate); - assert.typeOf(sketch1.translate, 'function'); + assert.ok(mockP5Prototype.translate); + assert.typeOf(mockP5Prototype.translate, 'function'); }); }); }); From ddc5284d3109338e0961d9fbc571b4a49a465ac3 Mon Sep 17 00:00:00 2001 From: limzykenneth Date: Tue, 3 Dec 2024 14:14:42 +0000 Subject: [PATCH 9/9] Move p5.Element test to dom folder --- test/unit/{core => dom}/p5.Element.js | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename test/unit/{core => dom}/p5.Element.js (100%) diff --git a/test/unit/core/p5.Element.js b/test/unit/dom/p5.Element.js similarity index 100% rename from test/unit/core/p5.Element.js rename to test/unit/dom/p5.Element.js