glam/es5/tests/renderer/forward-test.js

'use strict';

var _tape = require('tape');

var _tape2 = _interopRequireDefault(_tape);

var _forward = require('../../lib/renderer/forward');

var _forward2 = _interopRequireDefault(_forward);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

(0, _tape2.default)('Forward Renderer', function (t) {
  t.test('Adds a canvas', function (t) {
    t.plan(3);

    var renderer = (0, _forward2.default)();
    var canvases = document.querySelectorAll('canvas');

    t.equals(canvases.length, 1, 'It auto-creates a canvas');
    t.equals(renderer.canvas, canvases[0], 'It added the canvas to the DOM');

    renderer.destroy();

    var canvasesAfter = document.querySelectorAll('canvas');

    t.equals(canvasesAfter.length, 0, 'It destroys the canvas');
  });

  t.test('Can be passed a canvas', function (t) {
    t.plan(3);

    var canvas = document.createElement('canvas');
    var renderer = (0, _forward2.default)({
      canvas: canvas,
      autoAddCanvas: false
    });
    var canvasesEmpty = document.querySelectorAll('canvas');

    t.equals(canvasesEmpty.length, 0, 'It does not auto-create or add a canvas');
    t.equals(renderer.canvas, canvas, 'It does set the canvas as the current');

    document.body.appendChild(canvas);

    renderer.destroy();

    var canvasesAfter = document.querySelectorAll('canvas');

    t.equals(canvasesAfter.length, 1, 'It does not destroy the canvas');
  });

  t.test('It does resize the canvas', function (t) {
    t.plan(6);
    var div = document.createElement('div');

    div.style.width = '100px';
    div.style.height = '50px';

    document.body.appendChild(div);

    var renderer = (0, _forward2.default)({
      parentEl: div
    });

    t.equals(renderer.canvas.width, 100, 'canvas is initially sized');
    t.equals(renderer.canvas.height, 50, 'canvas is initially sized');

    div.style.width = '66px';
    div.style.height = '33px';

    window.dispatchEvent(new window.Event('resize'));

    t.equals(renderer.canvas.width, 66, 'canvas gets resized on window resize');
    t.equals(renderer.canvas.height, 33, 'canvas gets resized on window resize');

    renderer.destroy();

    div.style.width = '55px';
    div.style.height = '44px';

    window.dispatchEvent(new window.Event('resize'));

    t.equals(renderer.canvas.width, 66, 'canvas does not resize after destroying the renderer');
    t.equals(renderer.canvas.height, 33, 'canvas does not resize after destroying the renderer');
  });

  t.test('It can set the canvas size', function (t) {
    t.plan(2);

    var renderer = (0, _forward2.default)({
      autoResizeCanvas: false,
      width: 77,
      height: 55
    });

    t.equals(renderer.canvas.width, 77, 'canvas width is correct');
    t.equals(renderer.canvas.height, 55, 'canvas height is correct');

    renderer.destroy();
  });
});