Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Use mocha+expect.js as testing framework.

  • Loading branch information...
commit 23a5bbbd517e3003817a3afcb94cc2522d3bd25c 1 parent 58987fb
@blueimp authored
Showing with 170 additions and 153 deletions.
  1. +12 −8 test/index.html
  2. +158 −145 test/test.js
View
20 test/index.html
@@ -15,17 +15,21 @@
<head>
<meta charset="utf-8">
<title>JavaScript Load Image Test</title>
-<link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css">
+<link rel="stylesheet" href="http://blueimp.github.com/cdn/css/mocha.min.css">
</head>
<body>
-<h1 id="qunit-header">JavaScript Load Image Test</h1>
-<h2 id="qunit-banner"></h2>
-<div id="qunit-testrunner-toolbar"></div>
-<h2 id="qunit-userAgent"></h2>
-<ol id="qunit-tests"></ol>
-<div id="qunit-fixture"></div>
+<div id="mocha"></div>
+<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+<script src="http://blueimp.github.com/cdn/js/mocha.min.js"></script>
+<script src="http://blueimp.github.com/cdn/js/expect.min.js"></script>
+<script>
+mocha.setup('bdd');
+$(function () {
+ mocha.run();
+});
+</script>
+<script type="text/html" id="template">{%=o.value%}</script>
<script src="../load-image.js"></script>
-<script src="http://code.jquery.com/qunit/git/qunit.js"></script>
<script src="base64-binary.js"></script>
<script src="test.js"></script>
</body>
View
303 test/test.js
@@ -9,7 +9,9 @@
* http://www.opensource.org/licenses/MIT
*/
-(function ($) {
+/*global window, describe, it, expect, require */
+
+(function (expect, loadImage) {
'use strict';
// 80x60px GIF image (color black, base64 data):
@@ -17,151 +19,162 @@
'OctNqLs968+w+G4kiW5omm6sq27gvH8kzX9o3n+s73/g8MCofE' +
'ovGITCqXzKbzCY1Kp9Sq9YrNarfcrvcLDovH5PKsAAA7',
imageUrl = 'data:image/gif;base64,' + b64Data,
- BlobBuilder = $.MozBlobBuilder || $.WebKitBlobBuilder || $.BlobBuilder,
+ BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder,
builder = new BlobBuilder(),
blob;
- builder.append($.Base64Binary.decodeArrayBuffer(b64Data));
+ builder.append(window.Base64Binary.decodeArrayBuffer(b64Data));
blob = builder.getBlob('image/gif');
- $.module('Loading');
-
- $.test('Return the img element or FileReader object to allow aborting the image load', function () {
- var img = $.loadImage(blob, function () {});
- $.strictEqual(img && typeof img.onload, 'function');
- });
-
- $.asyncTest('Load image url', function () {
- $.ok($.loadImage(imageUrl, function (img) {
- $.start();
- $.strictEqual(img.width, 80);
- $.strictEqual(img.height, 60);
- }));
- });
-
- $.asyncTest('Load image blob', function () {
- $.ok($.loadImage(blob, function (img) {
- $.start();
- $.strictEqual(img.width, 80);
- $.strictEqual(img.height, 60);
- }));
- });
-
- $.asyncTest('Return image loading error to callback', function () {
- $.ok($.loadImage('404', function (img) {
- $.start();
- $.ok(img instanceof $.Event);
- $.strictEqual(img.type, 'error');
- }));
- });
-
- $.module('Scaling');
-
- $.asyncTest('Scale to options.maxWidth', function () {
- $.ok($.loadImage(blob, function (img) {
- $.start();
- $.strictEqual(img.width, 40);
- $.strictEqual(img.height, 30);
- }, {maxWidth: 40}));
- });
-
- $.asyncTest('Scale to options.maxHeight', function () {
- $.ok($.loadImage(blob, function (img) {
- $.start();
- $.strictEqual(img.width, 20);
- $.strictEqual(img.height, 15);
- }, {maxHeight: 15}));
- });
-
- $.asyncTest('Scale to options.minWidth', function () {
- $.ok($.loadImage(blob, function (img) {
- $.start();
- $.strictEqual(img.width, 160);
- $.strictEqual(img.height, 120);
- }, {minWidth: 160}));
- });
-
- $.asyncTest('Scale to options.minHeight', function () {
- $.ok($.loadImage(blob, function (img) {
- $.start();
- $.strictEqual(img.width, 320);
- $.strictEqual(img.height, 240);
- }, {minHeight: 240}));
- });
-
- $.asyncTest('Scale to options.minWidth but respect options.maxWidth', function () {
- $.ok($.loadImage(blob, function (img) {
- $.start();
- $.strictEqual(img.width, 160);
- $.strictEqual(img.height, 120);
- }, {minWidth: 240, maxWidth: 160}));
- });
-
- $.asyncTest('Scale to options.minHeight but respect options.maxHeight', function () {
- $.ok($.loadImage(blob, function (img) {
- $.start();
- $.strictEqual(img.width, 160);
- $.strictEqual(img.height, 120);
- }, {minHeight: 180, maxHeight: 120}));
- });
-
- $.asyncTest('Scale to options.minWidth but respect options.maxHeight', function () {
- $.ok($.loadImage(blob, function (img) {
- $.start();
- $.strictEqual(img.width, 160);
- $.strictEqual(img.height, 120);
- }, {minWidth: 240, maxHeight: 120}));
- });
-
- $.asyncTest('Scale to options.minHeight but respect options.maxWidth', function () {
- $.ok($.loadImage(blob, function (img) {
- $.start();
- $.strictEqual(img.width, 160);
- $.strictEqual(img.height, 120);
- }, {minHeight: 180, maxWidth: 160}));
- });
-
- $.asyncTest('Do not scale to max settings without min settings', function () {
- $.ok($.loadImage(blob, function (img) {
- $.start();
- $.strictEqual(img.width, 80);
- $.strictEqual(img.height, 60);
- }, {maxWidth: 160, maxHeight: 120}));
- });
-
- $.asyncTest('Do not scale to min settings without max settings', function () {
- $.ok($.loadImage(blob, function (img) {
- $.start();
- $.strictEqual(img.width, 80);
- $.strictEqual(img.height, 60);
- }, {minWidth: 40, minHeight: 30}));
- });
-
- $.module('Canvas');
-
- $.asyncTest('Return img element to callback if options.canvas is not true', function () {
- $.ok($.loadImage(blob, function (img) {
- $.start();
- $.ok(!img.getContext);
- $.strictEqual(img.nodeName.toLowerCase(), 'img');
- }));
- });
-
- $.asyncTest('Return canvas element to callback if options.canvas is true', function () {
- $.ok($.loadImage(blob, function (img) {
- $.start();
- $.ok(img.getContext);
- $.strictEqual(img.nodeName.toLowerCase(), 'canvas');
- }, {canvas: true}));
- });
-
- $.asyncTest('Return scaled canvas element to callback', function () {
- $.ok($.loadImage(blob, function (img) {
- $.start();
- $.ok(img.getContext);
- $.strictEqual(img.nodeName.toLowerCase(), 'canvas');
- $.strictEqual(img.width, 40);
- $.strictEqual(img.height, 30);
- }, {canvas: true, maxWidth: 40}));
- });
-
-}(this));
+ describe('Loading', function () {
+
+ it('Return the img element or FileReader object to allow aborting the image load', function () {
+ var img = loadImage(blob, function () {});
+ expect(img).to.be.an(Object);
+ expect(img.onload).to.be.a('function');
+ expect(img.onerror).to.be.a('function');
+ });
+
+ it('Load image url', function (done) {
+ expect(loadImage(imageUrl, function (img) {
+ done();
+ expect(img.width).to.be(80);
+ expect(img.height).to.be(60);
+ })).to.be.ok();
+ });
+
+ it('Load image blob', function (done) {
+ expect(loadImage(blob, function (img) {
+ done();
+ expect(img.width).to.be(80);
+ expect(img.height).to.be(60);
+ })).to.be.ok();
+ });
+
+ it('Return image loading error to callback', function (done) {
+ expect(loadImage('404', function (img) {
+ done();
+ expect(img).to.be.a(window.Event);
+ expect(img.type).to.be('error');
+ })).to.be.ok();
+ });
+
+ });
+
+ describe('Scaling', function () {
+
+ it('Scale to options.maxWidth', function (done) {
+ expect(loadImage(blob, function (img) {
+ done();
+ expect(img.width).to.be(40);
+ expect(img.height).to.be(30);
+ }, {maxWidth: 40})).to.be.ok();
+ });
+
+ it('Scale to options.maxHeight', function (done) {
+ expect(loadImage(blob, function (img) {
+ done();
+ expect(img.width).to.be(20);
+ expect(img.height).to.be(15);
+ }, {maxHeight: 15})).to.be.ok();
+ });
+
+ it('Scale to options.minWidth', function (done) {
+ expect(loadImage(blob, function (img) {
+ done();
+ expect(img.width).to.be(160);
+ expect(img.height).to.be(120);
+ }, {minWidth: 160})).to.be.ok();
+ });
+
+ it('Scale to options.minHeight', function (done) {
+ expect(loadImage(blob, function (img) {
+ done();
+ expect(img.width).to.be(320);
+ expect(img.height).to.be(240);
+ }, {minHeight: 240})).to.be.ok();
+ });
+
+ it('Scale to options.minWidth but respect options.maxWidth', function (done) {
+ expect(loadImage(blob, function (img) {
+ done();
+ expect(img.width).to.be(160);
+ expect(img.height).to.be(120);
+ }, {minWidth: 240, maxWidth: 160})).to.be.ok();
+ });
+
+ it('Scale to options.minHeight but respect options.maxHeight', function (done) {
+ expect(loadImage(blob, function (img) {
+ done();
+ expect(img.width).to.be(160);
+ expect(img.height).to.be(120);
+ }, {minHeight: 180, maxHeight: 120})).to.be.ok();
+ });
+
+ it('Scale to options.minWidth but respect options.maxHeight', function (done) {
+ expect(loadImage(blob, function (img) {
+ done();
+ expect(img.width).to.be(160);
+ expect(img.height).to.be(120);
+ }, {minWidth: 240, maxHeight: 120})).to.be.ok();
+ });
+
+ it('Scale to options.minHeight but respect options.maxWidth', function (done) {
+ expect(loadImage(blob, function (img) {
+ done();
+ expect(img.width).to.be(160);
+ expect(img.height).to.be(120);
+ }, {minHeight: 180, maxWidth: 160})).to.be.ok();
+ });
+
+ it('Do not scale to max settings without min settings', function (done) {
+ expect(loadImage(blob, function (img) {
+ done();
+ expect(img.width).to.be(80);
+ expect(img.height).to.be(60);
+ }, {maxWidth: 160, maxHeight: 120})).to.be.ok();
+ });
+
+ it('Do not scale to min settings without max settings', function (done) {
+ expect(loadImage(blob, function (img) {
+ done();
+ expect(img.width).to.be(80);
+ expect(img.height).to.be(60);
+ }, {minWidth: 40, minHeight: 30})).to.be.ok();
+ });
+
+ });
+
+ describe('Canvas', function () {
+
+ it('Return img element to callback if options.canvas is not true', function (done) {
+ expect(loadImage(blob, function (img) {
+ done();
+ expect(img.getContext).to.not.be.ok();
+ expect(img.nodeName.toLowerCase()).to.be('img');
+ })).to.be.ok();
+ });
+
+ it('Return canvas element to callback if options.canvas is true', function (done) {
+ expect(loadImage(blob, function (img) {
+ done();
+ expect(img.getContext).to.be.ok();
+ expect(img.nodeName.toLowerCase()).to.be('canvas');
+ }, {canvas: true})).to.be.ok();
+ });
+
+ it('Return scaled canvas element to callback', function (done) {
+ expect(loadImage(blob, function (img) {
+ done();
+ expect(img.getContext).to.be.ok();
+ expect(img.nodeName.toLowerCase()).to.be('canvas');
+ expect(img.width).to.be(40);
+ expect(img.height).to.be(30);
+ }, {canvas: true, maxWidth: 40})).to.be.ok();
+ });
+
+ });
+
+}(
+ this.expect || require('expect.js'),
+ this.loadImage || require('../load-image').loadImage
+));
Please sign in to comment.
Something went wrong with that request. Please try again.