feat(pauseResume): Add unit test case.

Ref naver#111
jongmoon · Mar 9, 2016 · b86b46b · b86b46b
1 parent 877d646
commit b86b46b
Show file tree

Hide file tree

Showing 2 changed files with 175 additions and 0 deletions.
diff --git a/test/unit/js/pauseResume.test.js b/test/unit/js/pauseResume.test.js
@@ -0,0 +1,132 @@
+/**
+* Copyright (c) 2015 NAVER Corp.
+* egjs projects are licensed under the MIT license
+*/
+
+// jscs:disable
+// to resolve transform style value
+QUnit.config.reorder = false;
+
+var hooks = {
+	beforeEach: function() {
+		this.$el = $("#box1");
+	},
+	afterEach: function() {
+		this.$el.css({"left": 0});
+	}
+};
+
+module("Initialization", hooks);
+test("pause", function(assert) {
+	var done = assert.async();
+
+	// Given
+	var destLeft = 200;
+	var duration = 1000;
+	var prevLeft;
+	this.$el.animate({"left": destLeft}, duration, "linear");
+
+	// When
+	setTimeout($.proxy(function() {
+		this.$el.stop();
+
+		prevLeft = parseFloat(this.$el.css("left"));
+	}, this), duration / 2);
+
+	//Then
+	setTimeout($.proxy(function() {
+		equal(prevLeft, parseFloat(this.$el.css("left")), "It is not moved after paused.");
+		//if status is paused, fx-queue will be "inprogress".
+		this.$el.stop();
+		done();
+	}, this), duration);
+});
+
+test("resume", function(assert) {
+	var done = assert.async();
+
+	// Given
+	var destLeft = 200;
+	var duration = 400;
+	var pauseAfter = duration / 2;
+	var pauseDuration = duration / 2;
+	this.$el.animate({"left": destLeft}, duration);
+
+	// When
+	setTimeout($.proxy(function() {
+		this.$el.pause();
+	}, this), pauseAfter);
+
+	setTimeout($.proxy(function() {
+		this.$el.resume();
+	}, this), pauseDuration);
+
+	//Then
+	setTimeout($.proxy(function() {
+		equal(parseFloat(this.$el.css("left")), destLeft, "The box is moved to destination after resumed.");
+		done();
+	}, this), duration + pauseDuration);
+});
+
+test("chaining", function(assert) {
+	var done = assert.async();
+
+	// Given
+	var destLeft = [200, 400, 600];
+	var duration = 300;
+	var totalDuration = duration * 3;
+	var pauseAfter = 100;
+	var pauseDuration = 100;
+
+	this.$el
+		.animate({"left": destLeft[0]}, duration)
+		.animate({"left": destLeft[1]}, duration)
+		.animate({"left": destLeft[2]}, duration)
+
+	// When
+	setTimeout($.proxy(function() {
+		this.$el.pause();
+	}, this), pauseAfter);
+
+	setTimeout($.proxy(function() {
+		this.$el.resume();
+	}, this), pauseDuration);
+
+	//Then
+	setTimeout($.proxy(function() {
+		equal(parseFloat(this.$el.css("left")), destLeft[2], "The box is moved to destination after resumed.");
+		done();
+	}, this), totalDuration + pauseDuration);
+});
+
+test("relative values", function(assert) {
+	var done = assert.async();
+
+	// Given
+	var destLeft = ["+=200", "+=200", "+=200"];
+	var duration = 300;
+	var totalDuration = duration * 3;
+	var pauseAfter = 100;
+	var pauseDuration = 100;
+
+	this.$el
+		.animate({"left": destLeft[0]}, duration)
+		.animate({"left": destLeft[1]}, duration)
+		.animate({"left": destLeft[2]}, duration)
+
+	// When
+	setTimeout($.proxy(function() {
+		this.$el.pause();
+	}, this), pauseAfter);
+
+	setTimeout($.proxy(function() {
+		this.$el.resume();
+	}, this), pauseDuration);
+
+	//Then
+	setTimeout($.proxy(function() {
+		equal(parseFloat(this.$el.css("left")), 600, "The box is moved to destination after resumed.");
+		done();
+	}, this), totalDuration + pauseDuration);
+});
+
diff --git a/test/unit/pauseResume.test.html b/test/unit/pauseResume.test.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi"> -->
+
+<link rel="stylesheet" href="../../bower_components/qunit/qunit/qunit.css">
+<!-- user css start -->
+<style>
+.box {
+	width:120px;
+	height:120px;
+	position:absolute;
+	border:solid;
+}
+</style>
+<!-- user css end -->
+<script src="../../bower_components/qunit/qunit/qunit.js"></script>
+<script src="../../bower_components/jquery/jquery.js"></script>
+<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script> -->
+</head>
+<body>
+ <h1 id="qunit-header">Pause/Resume 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-fixture1">
+<!-- UI content Start -->
+ <div id="box1" class="box" style="color:blue"></div>
+ <!-- UI content End -->
+ </div>
+
+<!-- user script files start -->
+<script src="lib/module.js"></script>
+<script src="../../src/eg.js"></script>
+<script src="../../src/hook/pauseResume.js"></script>
+<!-- user script files end -->
+<!-- test script files start -->
+<script src="js/pauseResume.test.js"></script>
+<!-- test script files end -->
+</body>
+</html>