q5 2.9.21 → 2.9.23

package/p5-tests/unit/dom/dom.js

@@ -0,0 +1,2146 @@
+suite('DOM', function() {
+  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;
+
+    setup(function(done) {
+      myp5Container = document.createElement('div');
+      document.body.appendChild(myp5Container);
+      new p5(function(p) {
+        p.setup = function() {
+          myp5 = p;
+          done();
+        };
+      }, myp5Container);
+    });
+
+    teardown(function() {
+      myp5.remove();
+      if (myp5Container && myp5Container.parentNode) {
+        myp5Container.parentNode.removeChild(myp5Container);
+      }
+      p5Container = null;
+    });
+
+    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');
+
+      assert.instanceOf(result, p5.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}`);
+      assert.deepEqual(result.elt, testButton.elt);
+    });
+
+    test('should find element by class name from given container', function() {
+      // Creates 2 buttons with same class in a container and test if it selects only one.
+      const testClassName = 'test-button';
+      generateButton('Button 1', testClassName);
+      const testButton = generateButton('Button 2', testClassName);
+      const testContainer = myp5.createDiv();
+      testButton.parent(testContainer);
+
+      const result = myp5.select(`.${testClassName}`, testContainer);
+      assert.deepEqual(testButton.elt, result.elt);
+    });
+
+    test('should return null when no matches are found by class name', function() {
+      // Gives unused className and tests if it returns null
+      const testClassName = 'test-button';
+      generateButton('Test Button', testClassName);
+      const result = myp5.select('.classNameWithTypo');
+      assert.isNull(result);
+    });
+
+    test('should find element by tag name', 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');
+      assert.deepEqual(result.elt, testButton.elt);
+    });
+
+    test('should find element by tag name from given container', function() {
+      // Creates 2 elements inside and outside of a container and tests if it
+      // selects inside the container
+      generateButton('Button 1');
+      const testButton = generateButton('Button 2');
+      const testDiv = myp5.createDiv();
+      testButton.parent(testDiv);
+
+      const result = myp5.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);
+      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);
+      const testButton = generateButton('Button 1');
+      generateButton('Button 2');
+      testButton.parent(testDiv);
+
+      const result = myp5.select(`#${divID} button`);
+      assert.deepEqual(result.elt, testButton.elt);
+    });
+
+    test('should select element in container using CSS selector with class name', function() {
+      const divClass = 'divClass';
+      const testDiv = generateDiv(null, divClass);
+      const testButton = generateButton('Button 1');
+      generateButton('Button 2');
+      testButton.parent(testDiv);
+
+      const result = myp5.select(`.${divClass} button`);
+      assert.deepEqual(result.elt, testButton.elt);
+    });
+  });
+
+  suite('p5.prototype.selectAll', function() {
+    let myp5;
+    let myp5Container;
+
+    setup(function(done) {
+      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);
+          done();
+        };
+      }, myp5Container);
+    });
+
+    teardown(function() {
+      myp5.remove();
+      if (myp5Container && myp5Container.parentNode) {
+        myp5Container.parentNode.removeChild(myp5Container);
+      }
+      myp5Container = null;
+    });
+
+    test('should return an array', function() {
+      const elements = myp5.selectAll('button');
+      assert.isArray(elements);
+    });
+
+    test('should return empty array when no matching classes are found', function() {
+      const elements = myp5.selectAll('.randomElements');
+      assert.isArray(elements);
+      assert.lengthOf(elements, 0);
+    });
+
+    const matchResults = (p5Results, domResults) => {
+      assert.lengthOf(p5Results, domResults.length);
+      for (let i = 0; i < p5Results.length; i += 1) {
+        assert.deepEqual(p5Results[i].elt, domResults[i]);
+      }
+    };
+
+    test('should find all elements with matching class name', function() {
+      const testClassName = 'p5button';
+      const p5Results = myp5.selectAll(`.${testClassName}`);
+      const domResults = myp5Container.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(
+        `.${testClassName}`,
+        `#${parentContainerId}`
+      );
+      const containerElement = document.getElementById(parentContainerId);
+      const domResults = containerElement.getElementsByClassName(testClassName);
+      matchResults(p5Results, domResults);
+    });
+
+    test('should find all elements with matching tag name', function() {
+      const testTagName = 'button';
+      const p5Results = myp5.selectAll(testTagName);
+      const domResults = myp5Container.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 containerElement = document.getElementById(parentContainerId);
+      const domResults = containerElement.getElementsByTagName(testTagName);
+      matchResults(p5Results, domResults);
+    });
+
+    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 containerElement = document.getElementById(parentContainerId);
+      const domResults = containerElement.getElementsByTagName(testTagName);
+      matchResults(p5Results, domResults);
+    });
+  });
+
+  suite('p5.prototype.removeElements', function() {
+    let myp5;
+    let myp5Container;
+
+    setup(function(done) {
+      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;
+          done();
+        };
+      }, myp5Container);
+    });
+
+    teardown(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() {
+    testSketchWithPromise(
+      'should trigger callback when element changes',
+      function(sketch, resolve, reject) {
+        sketch.setup = function() {
+          const testElement = sketch.createSlider(0, 100, 50, 10);
+          testElement.changed(resolve);
+          testElement.elt.dispatchEvent(new Event('change'));
+        };
+      }
+    );
+
+    testSketchWithPromise(
+      'should not trigger callback after changed(false) is called',
+      function(sketch, resolve, reject) {
+        sketch.setup = function() {
+          const testElement = sketch.createSlider(0, 100, 50, 10);
+          // if callback is called, there is some error. so reject
+          testElement.changed(reject);
+          testElement.changed(false);
+          testElement.elt.dispatchEvent(new Event('change'));
+          resolve();
+        };
+      }
+    );
+  });
+
+  suite('p5.Element.prototype.input', function() {
+    testSketchWithPromise(
+      'should trigger callback when input is provided',
+      function(sketch, resolve, reject) {
+        sketch.setup = function() {
+          const testElement = sketch.createElement('input');
+          testElement.input(resolve);
+          testElement.elt.dispatchEvent(new Event('input'));
+        };
+      }
+    );
+
+    testSketchWithPromise(
+      'should not trigger callback after input(false) is called',
+      function(sketch, resolve, reject) {
+        sketch.setup = function() {
+          const testElement = sketch.createElement('input');
+          // if callback is called, there is some error. so reject
+          testElement.input(reject);
+          testElement.input(false);
+          testElement.elt.dispatchEvent(new Event('input'));
+          resolve();
+        };
+      }
+    );
+  });
+
+  suite('p5.prototype.createDiv', function() {
+    let myp5;
+    let testElement;
+
+    setup(function(done) {
+      new p5(function(p) {
+        p.setup = function() {
+          myp5 = p;
+          done();
+        };
+      });
+    });
+
+    teardown(function() {
+      myp5.remove();
+      if (testElement && testElement.parentNode) {
+        testElement.parentNode.removeChild(testElement);
+      }
+      testElement = null;
+    });
+
+    test('should be a function', function() {
+      assert.isFunction(myp5.createDiv);
+    });
+
+    test('should return a p5.Element of div type', function() {
+      testElement = myp5.createDiv();
+      assert.instanceOf(testElement, p5.Element);
+      assert.instanceOf(testElement.elt, HTMLDivElement);
+    });
+
+    test('should set given param as innerHTML of div', function() {
+      const testHTML = '<p>Hello</p>';
+      testElement = myp5.createDiv(testHTML);
+      assert.deepEqual(testElement.elt.innerHTML, testHTML);
+    });
+  });
+
+  suite('p5.prototype.createP', function() {
+    let myp5;
+    let testElement;
+
+    setup(function(done) {
+      new p5(function(p) {
+        p.setup = function() {
+          myp5 = p;
+          done();
+        };
+      });
+    });
+
+    teardown(function() {
+      myp5.remove();
+      if (testElement && testElement.parentNode) {
+        testElement.parentNode.removeChild(testElement);
+      }
+      testElement = null;
+    });
+
+    test('should be a function', function() {
+      assert.isFunction(myp5.createP);
+    });
+
+    test('should return a p5.Element of p type', function() {
+      testElement = myp5.createP();
+      assert.instanceOf(testElement, p5.Element);
+      assert.instanceOf(testElement.elt, HTMLParagraphElement);
+    });
+
+    test('should set given param as innerHTML of p', function() {
+      const testHTML = '<b>Hello</b>';
+      testElement = myp5.createP(testHTML);
+      assert.deepEqual(testElement.elt.innerHTML, testHTML);
+    });
+  });
+
+  suite('p5.prototype.createSpan', function() {
+    let myp5;
+    let testElement;
+
+    setup(function(done) {
+      new p5(function(p) {
+        p.setup = function() {
+          myp5 = p;
+          done();
+        };
+      });
+    });
+
+    teardown(function() {
+      myp5.remove();
+      if (testElement && testElement.parentNode) {
+        testElement.parentNode.removeChild(testElement);
+      }
+      testElement = null;
+    });
+
+    test('should be a function', function() {
+      assert.isFunction(myp5.createSpan);
+    });
+
+    test('should return a p5.Element of span type', function() {
+      testElement = myp5.createSpan();
+      assert.instanceOf(testElement, p5.Element);
+      assert.instanceOf(testElement.elt, HTMLSpanElement);
+    });
+
+    test('should set given param as innerHTML of span', function() {
+      const testHTML = '<em>Hello</em>';
+      testElement = myp5.createSpan(testHTML);
+      assert.deepEqual(testElement.elt.innerHTML, testHTML);
+    });
+  });
+
+  suite('p5.prototype.createImg', function() {
+    let myp5;
+    let testElement;
+    const imagePath = 'unit/assets/cat.jpg';
+
+    setup(function(done) {
+      new p5(function(p) {
+        p.setup = function() {
+          myp5 = p;
+          done();
+        };
+      });
+    });
+
+    teardown(function() {
+      myp5.remove();
+      if (testElement && testElement.parentNode) {
+        testElement.parentNode.removeChild(testElement);
+      }
+      testElement = null;
+    });
+
+    test('should be a function', function() {
+      assert.isFunction(myp5.createImg);
+    });
+
+    test('should return p5.Element of image type', function() {
+      testElement = myp5.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, '');
+      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);
+      assert.deepEqual(testElement.elt.alt, alternativeText);
+    });
+
+    test('should set crossOrigin from params if given', function() {
+      const crossOrigin = 'anonymous';
+      testElement = myp5.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'));
+        };
+      }
+    );
+  });
+
+  suite('p5.prototype.createA', function() {
+    let myp5;
+    let testElement;
+
+    setup(function(done) {
+      new p5(function(p) {
+        p.setup = function() {
+          myp5 = p;
+          done();
+        };
+      });
+    });
+
+    teardown(function() {
+      myp5.remove();
+      if (testElement && testElement.parentNode) {
+        testElement.parentNode.removeChild(testElement);
+        testElement = null;
+      }
+    });
+
+    test('should return a p5.Element of anchor type', () => {
+      testElement = myp5.createA('', '');
+      assert.instanceOf(testElement, p5.Element);
+      assert.instanceOf(testElement.elt, HTMLAnchorElement);
+    });
+
+    test('creates anchor with given link & text', function() {
+      const testUrl = 'http://p5js.org/';
+      const testText = 'p5js website';
+      testElement = myp5.createA(testUrl, testText);
+
+      assert.deepEqual(testElement.elt.href, testUrl);
+      assert.deepEqual(testElement.elt.text, testText);
+    });
+
+    test('creates anchor with given target', function() {
+      const testTarget = 'blank';
+      testElement = myp5.createA('http://p5js.org', 'p5js website', testTarget);
+      assert.deepEqual(testElement.elt.target, testTarget);
+    });
+  });
+
+  suite('p5.prototype.createSlider', function() {
+    let myp5;
+    let testElement;
+
+    setup(function(done) {
+      new p5(function(p) {
+        p.setup = function() {
+          myp5 = p;
+          done();
+        };
+      });
+    });
+
+    teardown(function() {
+      myp5.remove();
+      if (testElement && testElement.parentNode) {
+        testElement.parentNode.removeChild(testElement);
+      }
+      testElement = null;
+    });
+
+    test('should return a p5.Element of slider type', () => {
+      testElement = myp5.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);
+      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);
+      assert.deepEqual(testElement.elt.value, '50');
+    });
+
+    test('should set step value', function() {
+      testElement = myp5.createSlider(20, 80, 10, 5);
+      assert.deepEqual(testElement.elt.step, '5');
+    });
+  });
+
+  suite('p5.prototype.createButton', function() {
+    let myp5;
+    let testElement;
+
+    setup(function(done) {
+      new p5(function(p) {
+        p.setup = function() {
+          myp5 = p;
+          done();
+        };
+      });
+    });
+    teardown(function() {
+      myp5.remove();
+      if (testElement && testElement.parentNode) {
+        testElement.parentNode.removeChild(testElement);
+      }
+      testElement = null;
+    });
+
+    test('should return a p5.Element of button type', function() {
+      testElement = myp5.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'));
+        };
+      }
+    );
+  });
+
+  // Tests for createCheckbox
+  suite('p5.prototype.createCheckbox', function() {
+    let myp5;
+    let testElement;
+
+    setup(function(done) {
+      new p5(function(p) {
+        p.setup = function() {
+          myp5 = p;
+          done();
+        };
+      });
+    });
+    teardown(function() {
+      myp5.remove();
+      if (testElement && testElement.parentNode) {
+        testElement.parentNode.removeChild(testElement);
+      }
+      testElement = null;
+    });
+
+    // helper functions
+    const getSpanElement = el =>
+      el.elt.firstElementChild.getElementsByTagName('span').length
+        ? el.elt.firstElementChild.getElementsByTagName('span')[0]
+        : null;
+
+    const getCheckboxElement = el =>
+      el.elt.firstElementChild.getElementsByTagName('input').length
+        ? el.elt.firstElementChild.getElementsByTagName('input')[0]
+        : null;
+
+    test('should be a function', function() {
+      assert.isFunction(myp5.createCheckbox);
+    });
+
+    test('should return a p5.Element with checkbox as descendant', function() {
+      testElement = myp5.createCheckbox();
+      const checkboxElement = getCheckboxElement(testElement);
+
+      assert.instanceOf(testElement, p5.Element);
+      assert.instanceOf(checkboxElement, HTMLInputElement);
+    });
+
+    test('calling createCheckbox(label) should create checkbox and set its label', function() {
+      const labelValue = 'label';
+      testElement = myp5.createCheckbox(labelValue);
+      const spanElement = getSpanElement(testElement);
+      const testElementLabelValue = getSpanElement(testElement)
+        ? getSpanElement(testElement).innerHTML
+        : '';
+
+      assert.instanceOf(testElement, p5.Element);
+      assert.instanceOf(spanElement, HTMLSpanElement);
+      assert.deepEqual(testElementLabelValue, labelValue);
+    });
+
+    test('calling createCheckbox(label, true) should create a checked checkbox and set its label', function() {
+      const labelValue = 'label';
+      testElement = myp5.createCheckbox(labelValue, true);
+
+      const spanElement = getSpanElement(testElement);
+      const testElementLabelValue = getSpanElement(testElement)
+        ? getSpanElement(testElement).innerHTML
+        : '';
+
+      assert.instanceOf(testElement, p5.Element);
+      assert.instanceOf(spanElement, HTMLSpanElement);
+      assert.deepEqual(testElementLabelValue, labelValue);
+      assert.isTrue(testElement.checked());
+    });
+
+    test('calling checked() should return checked value of checkbox', function() {
+      testElement = myp5.createCheckbox('', true);
+      assert.isTrue(testElement.checked());
+    });
+
+    test('calling checked(true) should set checked value of checkbox', function() {
+      testElement = myp5.createCheckbox('', false);
+      testElement.checked(true);
+      assert.isTrue(testElement.checked());
+    });
+  });
+
+  suite('p5.prototype.createSelect', function() {
+    let myp5;
+    let testElement;
+
+    setup(function(done) {
+      new p5(function(p) {
+        p.setup = function() {
+          myp5 = p;
+          done();
+        };
+      });
+    });
+
+    teardown(function() {
+      myp5.remove();
+      if (testElement && testElement.parentNode) {
+        testElement.parentNode.removeChild(testElement);
+        testElement = null;
+      }
+    });
+
+    const createHTMLSelect = options => {
+      const selectElement = document.createElement('select');
+      for (const optionName of options) {
+        const option = document.createElement('option');
+        option.setAttribute('label', optionName);
+        option.setAttribute('value', optionName);
+        selectElement.add(option);
+      }
+      return selectElement;
+    };
+
+    test('should be a function', function() {
+      assert.isFunction(myp5.createSelect);
+    });
+
+    test('should return p5.Element of select HTML Element', function() {
+      testElement = myp5.createSelect();
+      assert.instanceOf(testElement, p5.Element);
+      assert.instanceOf(testElement.elt, HTMLSelectElement);
+    });
+
+    test('should return p5.Element when select element is passed', function() {
+      selectElement = createHTMLSelect(['option1', 'option2']);
+      testElement = myp5.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();
+      for (const optionName of testOptions) testElement.option(optionName);
+
+      const htmlOptions = [];
+      for (const optionName of testElement.elt.options) {
+        assert.deepEqual(optionName.label, optionName.value);
+        htmlOptions.push(optionName.label);
+      }
+      assert.deepEqual(htmlOptions, testOptions);
+    });
+
+    test('calling option(name, newValue) should update value of option', function() {
+      const optionName = 'john';
+      const testValues = [1, 'abc', true];
+      testElement = myp5.createSelect();
+      testElement.option(optionName, 0);
+
+      for (const newValue of testValues) {
+        testElement.option(optionName, newValue);
+        const htmlValue = testElement.elt.options[0].value;
+        assert(htmlValue, newValue);
+      }
+    });
+
+    test('calling value() should return current selected option', function() {
+      testElement = myp5.createSelect();
+      testElement.option('Sunday');
+      testElement.option('Monday');
+      testElement.elt.options[1].selected = true;
+      assert(testElement.value(), 'Monday');
+    });
+
+    test('calling selected() should return all selected options', function() {
+      testElement = myp5.createSelect(true);
+      options = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
+      for (const optionName of options) testElement.option(optionName);
+
+      // Select multiple options
+      const selectedOptions = options.slice(0, 3);
+      for (let i = 0; i < selectedOptions.length; i++) {
+        testElement.elt.options[i].selected = true;
+        assert.deepEqual(
+          testElement.selected(),
+          selectedOptions.slice(0, i + 1)
+        );
+      }
+    });
+
+    test('should update select value when HTML special characters are in the name', function() {
+      testElement = myp5.createSelect(true);
+      testElement.option('&', 'foo');
+      assert.equal(testElement.elt.options.length, 1);
+      assert.equal(testElement.elt.options[0].value, 'foo');
+      testElement.option('&', 'bar');
+      assert.equal(testElement.elt.options[0].value, 'bar');
+    });
+
+    test('calling selected(value) should updated selectedIndex', function() {
+      testElement = myp5.createSelect(true);
+      options = ['Sunday', 'Monday', 'Tuesday', 'Friday'];
+      for (const optionName of options) testElement.option(optionName);
+
+      // Select multiple options and check if the values get updated
+      for (let i = 0; i < options.length; i++) {
+        testElement.selected(options[i]);
+        const selectedIndexValue =
+          testElement.elt.options[testElement.elt.selectedIndex].value;
+        assert.deepEqual(selectedIndexValue, options[i]);
+      }
+    });
+
+    test('calling disable() should disable the whole dropdown', function() {
+      testElement = myp5.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);
+      options = ['Sunday', 'Monday', 'Tuesday', 'Friday'];
+      for (const optionName of options) testElement.option(optionName);
+
+      const disabledIndex = 2;
+      testElement.disable(options[disabledIndex]);
+      assert.isTrue(testElement.elt.options[disabledIndex].disabled);
+      assert.isFalse(testElement.elt.options[disabledIndex].selected);
+    });
+  });
+
+  suite('p5.prototype.createRadio', function() {
+    let myp5;
+    let testElement;
+
+    setup(function(done) {
+      new p5(function(p) {
+        p.setup = function() {
+          myp5 = p;
+          done();
+        };
+      });
+    });
+
+    teardown(function() {
+      myp5.remove();
+      if (testElement && testElement.parentNode) {
+        testElement.parentNode.removeChild(testElement);
+        testElement = null;
+      }
+    });
+
+    // Helper functions
+    const createRadioElement = (options = []) => {
+      const radioEl = document.createElement('div');
+      for (const option of options) {
+        const optionEl = document.createElement('input');
+        optionEl.setAttribute('type', 'radio');
+        optionEl.setAttribute('value', option);
+        radioEl.appendChild(optionEl);
+      }
+      return radioEl;
+    };
+
+    const isRadioInput = el =>
+      el instanceof HTMLInputElement && el.type === 'radio';
+    const isLabelElement = el => el instanceof HTMLLabelElement;
+
+    const getChildren = radioEl =>
+      Array.from(radioEl.children)
+        .filter(
+          el =>
+            isRadioInput(el) ||
+            (isLabelElement(el) && isRadioInput(el.firstElementChild))
+        )
+        .map(el => (isRadioInput(el) ? el : el.firstElementChild));
+
+    test('should be a function', function() {
+      assert.isFunction(myp5.createRadio);
+    });
+
+    test('should return p5.Element of radio type', function() {
+      testElement = myp5.createRadio();
+      assert.instanceOf(testElement, p5.Element);
+      assert.instanceOf(testElement.elt, HTMLDivElement);
+    });
+
+    test('should return p5.Element from existing radio Element', function() {
+      const options = ['Saturday', 'Sunday'];
+      const radioElement = createRadioElement(options);
+      testElement = myp5.createRadio(radioElement);
+
+      assert.deepEqual(testElement.elt, radioElement);
+    });
+
+    test('calling option(value) should return existing radio element', function() {
+      const options = ['Saturday', 'Sunday'];
+      const radioElement = createRadioElement(options);
+      testElement = myp5.createRadio(radioElement);
+      for (const radioInput of getChildren(radioElement)) {
+        const optionEl = testElement.option(radioInput.value);
+        assert.deepEqual(radioInput, optionEl);
+      }
+      assert.deepEqual(getChildren(testElement.elt).length, options.length);
+    });
+
+    test('calling option(newValue) should create a new radio input', function() {
+      const testName = 'defaultRadio';
+      const options = ['Saturday', 'Sunday'];
+      testElement = myp5.createRadio(testName);
+      let count = 0;
+      for (const option of options) {
+        const optionEl = testElement.option(option);
+        assert.instanceOf(optionEl, HTMLInputElement);
+        assert.deepEqual(optionEl.type, 'radio');
+        assert.deepEqual(optionEl.value, option);
+        assert.deepEqual(optionEl.name, testName);
+        // Increment by one for every label element
+        count += 1;
+
+        assert.deepEqual(testElement.elt.childElementCount, count);
+      }
+    });
+
+    test('calling option(value, label) should set label of option', function() {
+      const testName = 'defaultRadio';
+      const options = ['Saturday', 'Sunday'];
+      testElement = myp5.createRadio(testName);
+      for (const option of options) {
+        const optionLabel = `${option}-label`;
+        const optionEl = testElement.option(option, optionLabel);
+        assert.deepEqual(optionEl.value, option);
+        assert.deepEqual(optionEl.name, testName);
+        const spanEl = optionEl.nextElementSibling;
+        assert.deepEqual(spanEl.innerHTML, optionLabel);
+      }
+    });
+
+    test('should use given name for all options', function() {
+      const testName = 'defaultRadio';
+      const options = ['Saturday', 'Sunday'];
+      const radioElement = createRadioElement(options);
+      testElement = myp5.createRadio(radioElement, testName);
+
+      for (const option of options) {
+        const optionEl = testElement.option(option);
+        assert.deepEqual(optionEl.name, testName);
+      }
+    });
+
+    test('calling remove(value) should remove option', function() {
+      const options = ['Monday', 'Friday', 'Saturday', 'Sunday'];
+      const radioElement = createRadioElement(options);
+      testElement = myp5.createRadio(radioElement);
+
+      // Remove element
+      const testValue = 'Friday';
+      options.splice(options.indexOf(testValue), 1);
+      testElement.remove(testValue);
+      // Verify remaining options
+      const remainingOptions = Array.from(getChildren(testElement.elt)).map(
+        el => el.value
+      );
+      assert.deepEqual(options, remainingOptions);
+    });
+
+    test('calling value() should return selected value', function() {
+      const options = ['Monday', 'Friday', 'Saturday', 'Sunday'];
+      const selectedValue = options[1];
+      testElement = myp5.createRadio();
+      for (const option of options) testElement.option(option);
+      testElement.selected(selectedValue);
+      assert.deepEqual(testElement.value(), selectedValue);
+    });
+
+    test('calling selected(value) should select a value and return it', function() {
+      const options = ['Monday', 'Friday', 'Saturday', 'Sunday'];
+      testElement = myp5.createRadio();
+      for (const option of options) testElement.option(option);
+
+      for (const option of options) {
+        testElement.selected(option);
+        const selectedInput = testElement.option(option);
+        assert.deepEqual(selectedInput.checked, true);
+      }
+    });
+
+    test('calling selected() should return the currently selected option', function() {
+      const options = ['Monday', 'Friday', 'Saturday', 'Sunday'];
+      testElement = myp5.createRadio();
+      for (const option of options) testElement.option(option);
+
+      const testOption = getChildren(testElement.elt)[1];
+      testOption.setAttribute('checked', true);
+      const selectedOption = testElement.selected();
+      assert.deepEqual(selectedOption, testOption);
+      assert.isTrue(selectedOption.checked);
+    });
+
+    test('calling disable() should disable all the radio inputs', function() {
+      const options = ['Monday', 'Friday', 'Saturday', 'Sunday'];
+      testElement = myp5.createRadio();
+      for (const option of options) testElement.option(option);
+
+      testElement.disable();
+      for (const option of options) {
+        assert.isTrue(testElement.option(option).disabled);
+      }
+    });
+  });
+
+  suite('p5.prototype.createColorPicker', function() {
+    let myp5;
+    let testElement;
+
+    setup(function(done) {
+      new p5(function(p) {
+        p.setup = function() {
+          myp5 = p;
+          done();
+        };
+      });
+    });
+
+    teardown(function() {
+      myp5.remove();
+      if (testElement && testElement.parentNode) {
+        testElement.parentNode.removeChild(testElement);
+      }
+      testElement = null;
+    });
+
+    test('should be a function', function() {
+      assert.isFunction(myp5.createColorPicker);
+    });
+
+    test('should return p5.Element of input[color] type', function() {
+      testElement = myp5.createColorPicker();
+
+      assert.instanceOf(testElement, p5.Element);
+      assert.instanceOf(testElement.elt, HTMLInputElement);
+      assert.deepEqual(testElement.elt.type, 'color');
+    });
+
+    test('should accept a p5.Color as param', function() {
+      const testColor = myp5.color('red');
+      testElement = myp5.createColorPicker(testColor);
+
+      assert.deepEqual(testElement.elt.value, testColor.toString('#rrggbb'));
+    });
+
+    test('should accept a string as param', function() {
+      const testColorString = '#f00f00';
+      testElement = myp5.createColorPicker(testColorString);
+      assert.deepEqual(testElement.elt.value, testColorString);
+    });
+
+    test('calling color() should return the current color as p5.color', function() {
+      const testColorString = 'red';
+      const testColor = myp5.color(testColorString);
+      testElement = myp5.createColorPicker(testColorString);
+      assert.deepEqual(testElement.color(), testColor);
+    });
+
+    test('calling value() should return hex string of color', function() {
+      const testColor = myp5.color('aqua');
+      testElement = myp5.createColorPicker(testColor);
+      assert.deepEqual(testElement.value(), testColor.toString('#rrggbb'));
+    });
+  });
+
+  suite('p5.prototype.createInput', function() {
+    let myp5;
+    let testElement;
+
+    setup(function(done) {
+      new p5(function(p) {
+        p.setup = function() {
+          myp5 = p;
+          done();
+        };
+      });
+    });
+
+    teardown(function() {
+      myp5.remove();
+      if (testElement && testElement.parentNode) {
+        testElement.parentNode.removeChild(testElement);
+      }
+      testElement = null;
+    });
+
+    test('should be a function', function() {
+      assert.isFunction(myp5.createInput);
+    });
+
+    test('should return p5.Element of input type', function() {
+      testElement = myp5.createInput();
+      assert.instanceOf(testElement, p5.Element);
+      assert.instanceOf(testElement.elt, HTMLInputElement);
+    });
+
+    test('should set given value as input', function() {
+      const testValues = ['123', '', 'Hello world'];
+      for (const value of testValues) {
+        testElement = myp5.createInput(value);
+        assert.deepEqual(testElement.elt.value, value);
+      }
+    });
+
+    test('should create input of given type and value', function() {
+      const testType = 'password';
+      const testValue = '1234056789';
+      testElement = myp5.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;
+
+    setup(function(done) {
+      new p5(function(p) {
+        p.setup = function() {
+          myp5 = p;
+          done();
+        };
+      });
+    });
+
+    teardown(function() {
+      if (testElement && testElement.parentNode) {
+        testElement.parentNode.removeChild(testElement);
+      }
+      testElement = null;
+      myp5.remove();
+    });
+
+    const emptyCallback = () => {};
+    const createDummyFile = filename => {
+      return new File(['testFileBlob'], filename, {
+        type: 'text/plain'
+      });
+    };
+
+    test('should be a function', function() {
+      assert.isFunction(myp5.createFileInput);
+    });
+
+    test('should return input of file input', function() {
+      testElement = myp5.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);
+        };
+      }
+    );
+
+    test('should accept multiple files if specified', function() {
+      testElement = myp5.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);
+        };
+      }
+    );
+  });
+
+  suite('p5.prototype.createVideo', function() {
+    let myp5;
+    let testElement;
+
+    setup(function(done) {
+      new p5(function(p) {
+        p.setup = function() {
+          myp5 = p;
+          done();
+        };
+      });
+    });
+
+    teardown(function() {
+      myp5.remove();
+      if (testElement && testElement.parentNode) {
+        testElement.parentNode.removeChild(testElement);
+        testElement = null;
+      }
+    });
+
+    const mediaSources = [
+      '/test/unit/assets/nyan_cat.gif',
+      '/test/unit/assets/target.gif'
+    ];
+
+    test('should be a function', function() {
+      assert.isFunction(myp5.createVideo);
+    });
+
+    test('should return p5.Element of HTMLVideoElement', function() {
+      testElement = myp5.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 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() {
+      testElement = myp5.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'));
+        };
+      }
+    );
+
+    test('should work with tint()', function(done) {
+      const imgElt = myp5.createImg('/test/unit/assets/cat.jpg', '');
+      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', '');
+      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() {
+    let myp5;
+    let testElement;
+
+    setup(function(done) {
+      new p5(function(p) {
+        p.setup = function() {
+          myp5 = p;
+          done();
+        };
+      });
+    });
+
+    teardown(function() {
+      myp5.remove();
+      if (testElement && testElement.parentNode) {
+        testElement.parentNode.removeChild(testElement);
+        testElement = null;
+      }
+    });
+
+    const mediaSources = [
+      '/test/unit/assets/beat.mp3',
+      '/test/unit/assets/beat.mp3'
+    ];
+
+    test('should be a function', function() {
+      assert.isFunction(myp5.createAudio);
+    });
+
+    test('should return p5.Element of HTMLAudioElement', function() {
+      testElement = myp5.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 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() {
+      testElement = myp5.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 = myp5.createAudio(mediaSources, resolve);
+          testElement.elt.dispatchEvent(new Event('canplaythrough'));
+        };
+      }
+    );
+  });
+
+  suite('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;
+
+    setup(function(done) {
+      new p5(function(p) {
+        p.setup = function() {
+          myp5 = p;
+          done();
+        };
+      });
+    });
+
+    teardown(function() {
+      if (testElement && testElement.parentNode) {
+        testElement.parentNode.removeChild(testElement);
+      }
+      testElement = null;
+      myp5.remove();
+    });
+
+    test('should be a function', function() {
+      assert.isFunction(myp5.createCapture);
+    });
+
+    test('should return p5.Element of video type', function() {
+      testElement = myp5.createCapture(myp5.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 {
+        testElement = myp5.createCapture(myp5.VIDEO);
+        assert.fail();
+      } catch (error) {
+        assert.instanceOf(error, DOMException);
+      }
+
+      // Restore backup, very important.
+      navigator.mediaDevices.getUserMedia = backup;
+    });
+
+    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);
+      console.log(testElement.elt);
+      // Weird check, setter accepts : playinline, getter accepts playInline
+      assert.isTrue(testElement.elt.playsInline);
+    });
+  });
+
+  suite('p5.prototype.createElement', function() {
+    let myp5;
+    let testElement;
+
+    setup(function(done) {
+      new p5(function(p) {
+        p.setup = function() {
+          myp5 = p;
+          done();
+        };
+      });
+    });
+
+    teardown(function() {
+      myp5.remove();
+      if (testElement && testElement.parentNode) {
+        testElement.parentNode.removeChild(testElement);
+        testElement = null;
+      }
+    });
+
+    const testData = {
+      div: HTMLDivElement,
+      p: HTMLParagraphElement,
+      button: HTMLButtonElement,
+      input: HTMLInputElement,
+      video: HTMLVideoElement
+    };
+
+    test('should be a function', function() {
+      assert.isFunction(myp5.createElement);
+    });
+
+    test('should return a p5.Element of appropriate type', function() {
+      for (const [tag, domElName] of Object.entries(testData)) {
+        testElement = myp5.createElement(tag);
+        assert.instanceOf(testElement, p5.Element);
+        assert.instanceOf(testElement.elt, domElName);
+      }
+    });
+
+    test('should set given content as innerHTML', function() {
+      const testContent = 'Lorem ipsum';
+      testElement = myp5.createElement('div', testContent);
+      assert.deepEqual(testElement.elt.innerHTML, testContent);
+    });
+  });
+
+  // p5.Element.prototype.addClass
+  suite('p5.Element.prototype.addClass', function() {
+    let myp5;
+    let testElement;
+
+    setup(function(done) {
+      new p5(function(p) {
+        p.setup = function() {
+          myp5 = p;
+          done();
+        };
+      });
+    });
+
+    teardown(function() {
+      myp5.remove();
+      if (testElement && testElement.parentNode) {
+        testElement.parentNode.removeChild(testElement);
+      }
+      testElement = null;
+    });
+
+    test('should be a function', function() {
+      // Create any p5.Element
+      testElement = myp5.createElement('div');
+      assert.isFunction(testElement.addClass);
+    });
+
+    test('should add provided string to class names', function() {
+      const testClassName = 'jumbotron';
+      testElement = myp5.createElement('div');
+      testElement.addClass(testClassName);
+      assert.deepEqual(testElement.elt.className, testClassName);
+    });
+
+    test('should not add class name, if already exists', function() {
+      const testClassName1 = 'jumbotron';
+      const testClassName2 = 'container-fluid';
+      const expectedClassName = testClassName1 + ' ' + testClassName2;
+
+      testElement = myp5.createElement('div');
+      testElement.addClass(testClassName1);
+      testElement.addClass(testClassName2);
+
+      // Should not add the class name again
+      testElement.addClass(testClassName1);
+      assert.deepEqual(testElement.elt.className, expectedClassName);
+    });
+  });
+
+  // p5.Element.prototype.removeClass
+  suite('p5.Element.prototype.removeClass', function() {
+    let myp5;
+    let testElement;
+
+    setup(function(done) {
+      new p5(function(p) {
+        p.setup = function() {
+          myp5 = p;
+          done();
+        };
+      });
+    });
+
+    teardown(function() {
+      myp5.remove();
+      if (testElement && testElement.parentNode) {
+        testElement.parentNode.removeChild(testElement);
+      }
+      testElement = null;
+    });
+
+    test('should be a function', function() {
+      // Create any p5.Element
+      testElement = myp5.createElement('div');
+      assert.isFunction(testElement.removeClass);
+    });
+
+    test('should remove provided string from class names', function() {
+      const defaultClassNames = 'col-md-9 col-sm-12';
+      const testClassName = 'jumbotron';
+
+      testElement = myp5.createElement('div');
+      testElement.addClass(defaultClassNames);
+      testElement.addClass(testClassName);
+
+      // Removing a class name
+      testElement.removeClass(testClassName);
+      assert.deepEqual(testElement.elt.className, defaultClassNames);
+    });
+
+    test('should not throw error if class name not exists', function() {
+      const testClassName1 = 'jumbotron';
+      const testClassName2 = 'container-fluid';
+
+      testElement = myp5.createElement('div');
+      testElement.addClass(testClassName1);
+
+      // Handling the curse of 'this'
+      testElement.removeClass = testElement.removeClass.bind(testElement);
+      assert.doesNotThrow(testElement.removeClass, testClassName2);
+      assert.deepEqual(testElement.elt.className, testClassName1);
+    });
+  });
+
+  // p5.Element.prototype.hasClass
+  suite('p5.Element.prototype.hasClass', function() {
+    let myp5;
+    let testElement;
+
+    setup(function(done) {
+      new p5(function(p) {
+        p.setup = function() {
+          myp5 = p;
+          done();
+        };
+      });
+    });
+
+    teardown(function() {
+      myp5.remove();
+      if (testElement && testElement.parentNode) {
+        testElement.parentNode.removeChild(testElement);
+      }
+      testElement = null;
+    });
+
+    test('should be a function', function() {
+      // Create any p5.Element
+      testElement = myp5.createElement('div');
+      assert.isFunction(testElement.hasClass);
+    });
+
+    test('should return true for existing class name', function() {
+      const defaultClassNames = 'col-md-9 jumbotron';
+      const testClassName = 'jumbotron';
+
+      testElement = myp5.createElement('div');
+      testElement.addClass(defaultClassNames);
+
+      assert.isTrue(testElement.hasClass(testClassName));
+    });
+
+    test('should return false for non-existing class name', function() {
+      const defaultClassNames = 'col-md-9 jumbotron';
+      const testClassName = 'container-fluid';
+
+      testElement = myp5.createElement('div');
+      testElement.addClass(defaultClassNames);
+
+      assert.isFalse(testElement.hasClass(testClassName));
+    });
+  });
+
+  // p5.Element.prototype.toggleClass
+  suite('p5.Element.prototype.toggleClass', function() {
+    let myp5;
+    let testElement;
+
+    setup(function(done) {
+      new p5(function(p) {
+        p.setup = function() {
+          myp5 = p;
+          done();
+        };
+      });
+    });
+
+    teardown(function() {
+      myp5.remove();
+      if (testElement && testElement.parentNode) {
+        testElement.parentNode.removeChild(testElement);
+      }
+      testElement = null;
+    });
+
+    test('should be a function', function() {
+      // Create any p5.Element
+      testElement = myp5.createElement('div');
+      assert.isFunction(testElement.toggleClass);
+    });
+
+    test('should remove an existing class name', function() {
+      const defaultClassName = 'container-fluid';
+      const testClassName = 'jumbotron';
+
+      testElement = myp5.createElement('div');
+      testElement.addClass(defaultClassName);
+      testElement.addClass(testClassName);
+
+      testElement.toggleClass(testClassName);
+      assert.deepEqual(testElement.elt.className, defaultClassName);
+    });
+
+    test('should add an non-existing class name', function() {
+      const defaultClassName = 'container-fluid';
+      const testClassName = 'jumbotron';
+
+      testElement = myp5.createElement('div');
+      testElement.addClass(defaultClassName);
+
+      testElement.toggleClass(testClassName);
+      assert.deepEqual(
+        testElement.elt.className,
+        defaultClassName + ' ' + testClassName
+      );
+    });
+  });
+
+  // p5.Element.prototype.child
+  suite('p5.Element.prototype.child', function() {
+    let myp5;
+    let testElement;
+
+    setup(function(done) {
+      new p5(function(p) {
+        p.setup = function() {
+          myp5 = p;
+          done();
+        };
+      });
+    });
+
+    teardown(function() {
+      myp5.remove();
+      if (testElement && testElement.parentNode) {
+        testElement.parentNode.removeChild(testElement);
+      }
+      testElement = null;
+    });
+
+    test('should be a function', function() {
+      testElement = myp5.createElement('div');
+      assert.isFunction(testElement.child);
+    });
+
+    test('should return all child nodes by default', function() {
+      testElement = myp5.createElement('div');
+      const childElement = myp5.createElement('p');
+
+      // Add child element by using DOM API
+      testElement.elt.appendChild(childElement.elt);
+
+      const childNodes = testElement.child();
+      assert.deepEqual(childNodes.length, testElement.elt.childElementCount);
+      childNodes.forEach((childElement, index) => {
+        const domChild = testElement.elt.children[index];
+        assert.deepEqual(childElement, domChild);
+      });
+    });
+
+    test('should append p5 element as child', function() {
+      testElement = myp5.createElement('div');
+      const childElement = myp5.createElement('p');
+
+      testElement.child(childElement);
+      const childNodes = Array.from(testElement.elt.children);
+      assert.isTrue(childNodes.includes(childElement.elt));
+    });
+
+    test('should append dom element as child', function() {
+      testElement = myp5.createElement('div');
+      const childElement = myp5.createElement('p');
+
+      testElement.child(childElement.elt);
+      const childNodes = Array.from(testElement.elt.children);
+      assert.isTrue(childNodes.includes(childElement.elt));
+    });
+
+    test('should append element as child from a given id', function() {
+      testElement = myp5.createElement('div');
+      const childId = 'testChildElement';
+      const childElement = myp5.createElement('p');
+      childElement.id(childId);
+
+      testElement.child(childId);
+      const childNodes = Array.from(testElement.elt.children);
+      assert.isTrue(childNodes.includes(childElement.elt));
+    });
+
+    test('should not throw error if mathcing element is not found from a given id', function() {
+      testElement = myp5.createElement('div');
+      const randomChildId = 'testChildElement';
+      expect(() => testElement.child(randomChildId)).to.not.throw();
+    });
+  });
+
+  // p5.Element.prototype.center
+  suite('p5.Element.prototype.center', function() {
+    let myp5;
+    let testElement;
+
+    setup(function(done) {
+      new p5(function(p) {
+        p.setup = function() {
+          myp5 = p;
+          done();
+        };
+      });
+    });
+
+    teardown(function() {
+      myp5.remove();
+      if (testElement && testElement.parentNode) {
+        testElement.parentNode.removeChild(testElement);
+      }
+      testElement = null;
+    });
+
+    test('should be a function', function() {
+      testElement = myp5.createElement('div');
+      assert.isFunction(testElement.center);
+    });
+
+    // test('should center an element horizontally', function() {
+    //   // center doesn't work.
+    // });
+
+    // test('should center an element vertically', function() {
+    //   // center doesn't work.
+    // });
+
+    // test('should center an element horizontally and vertically', function() {
+    //   // center doesn't work.
+    // });
+  });
+
+  // p5.Element.prototype.html
+  suite('p5.Element.prototype.html', function() {
+    let myp5;
+    let testElement;
+
+    setup(function(done) {
+      new p5(function(p) {
+        p.setup = function() {
+          myp5 = p;
+          done();
+        };
+      });
+    });
+
+    teardown(function() {
+      myp5.remove();
+      if (testElement && testElement.parentNode) {
+        testElement.parentNode.removeChild(testElement);
+      }
+      testElement = null;
+    });
+
+    test('should be a function', function() {
+      // Create any p5.Element
+      testElement = myp5.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 testHTML = '<p>Hello World</p>';
+
+      testElement.elt.innerHTML = testHTML;
+      assert.deepEqual(testElement.html(), testHTML);
+    });
+
+    test('should replace the inner HTML of element', function() {
+      testElement = myp5.createElement('div');
+      const initialtestHTML = '<p>Hello World</p>';
+      const modifiedtestHTML = '<p>Hello World !!!</p>';
+
+      testElement.html(initialtestHTML);
+      assert.deepEqual(testElement.elt.innerHTML, initialtestHTML);
+
+      testElement.html(modifiedtestHTML);
+      assert.deepEqual(testElement.elt.innerHTML, modifiedtestHTML);
+    });
+
+    test('should append to the inner HTML if second param is true', function() {
+      testElement = myp5.createElement('div');
+      const testHTML1 = '<p>Hello World</p>';
+      const testHTML2 = '<p>Hello World !!!</p>';
+
+      testElement.html(testHTML1);
+      assert.deepEqual(testElement.elt.innerHTML, testHTML1);
+
+      testElement.html(testHTML2, true);
+      assert.deepEqual(testElement.elt.innerHTML, testHTML1 + testHTML2);
+    });
+
+    test('should replace the inner HTML if second param is false', function() {
+      testElement = myp5.createElement('div');
+      const testHTML1 = '<p>Hello World</p>';
+      const testHTML2 = '<p>Hello World !!!</p>';
+
+      testElement.html(testHTML1);
+      assert.deepEqual(testElement.elt.innerHTML, testHTML1);
+
+      testElement.html(testHTML2, false);
+      assert.deepEqual(testElement.elt.innerHTML, testHTML2);
+    });
+  });
+
+  // p5.Element.prototype.position
+  suite('p5.Element.prototype.position', function() {
+    let myp5;
+    let testElement;
+
+    setup(function(done) {
+      new p5(function(p) {
+        p.setup = function() {
+          myp5 = p;
+          done();
+        };
+      });
+    });
+
+    teardown(function() {
+      myp5.remove();
+      if (testElement && testElement.parentNode) {
+        testElement.parentNode.removeChild(testElement);
+      }
+      testElement = null;
+    });
+
+    test('should be a function', function() {
+      // Create any p5.Element
+      testElement = myp5.createElement('a');
+      assert.isFunction(testElement.position);
+    });
+
+    test('should return current position if no args are given', function() {
+      testElement = myp5.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');
+      testElement.position(20, 70);
+      assert.deepEqual(testElement.elt.style.position, 'absolute');
+    });
+
+    test('should set given params as properties', function() {
+      let testElement = myp5.createButton('testButton');
+      testElement.position(20, 80, 'static');
+
+      assert.deepEqual(testElement.elt.style.position, 'static');
+      assert.deepEqual(testElement.elt.style.left, '20px');
+      assert.deepEqual(testElement.elt.style.top, '80px');
+    });
+  });
+
+  // p5.Element.prototype._translate
+
+  // p5.Element.prototype._rotate
+
+  // p5.Element.prototype.style
+
+  // p5.Element.prototype.attribute
+
+  // p5.Element.prototype.removeAttribute
+
+  // p5.Element.prototype.value
+
+  // p5.Element.prototype.show
+
+  // p5.Element.prototype.hide
+
+  // p5.Element.prototype.size
+
+  // 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
+
+  // p5.MediaElement.stop
+
+  // p5.MediaElement.pause
+
+  // p5.MediaElement.loop
+
+  // p5.MediaElement.noLoop
+
+  // p5.MediaElement.shouldAutoplay
+
+  // p5.MediaElement.autoplay
+
+  // p5.MediaElement.volume
+
+  // p5.MediaElement.speed
+
+  // p5.MediaElement.time
+
+  // p5.MediaElement.prototype.duration
+
+  // p5.MediaElement.prototype._ensureCanvas
+
+  // p5.MediaElement.prototype.loadPixels
+
+  // p5.MediaElement.prototype.updatePixels
+
+  // p5.MediaElement.prototype.get
+
+  // p5.MediaElement.prototype._getPixel
+
+  // p5.MediaElement.prototype.set
+
+  // p5.MediaElement.prototype.copy
+
+  // p5.MediaElement.prototype.mask
+
+  // p5.MediaElement.prototype.isModified
+
+  // p5.MediaElement.prototype.setModified
+
+  // p5.MediaElement.prototype.onended
+
+  // p5.MediaElement.prototype.connect
+
+  // p5.MediaElement.prototype.disconnect
+
+  // p5.MediaElement.prototype.showControls
+
+  // p5.MediaElement.prototype.hideControls
+
+  // p5.MediaElement.prototype.addCue
+
+  // p5.MediaElement.prototype.removeCue
+
+  // p5.MediaElement.prototype.clearCues
+
+  // p5.MediaElement.prototype._onTimeUpdate
+
+  // p5.File
+
+  // p5.File._createLoader
+
+  // p5.File._load
+});