Commit a41c5ff0 authored by Ghislain Loas's avatar Ghislain Loas

Add qunit submodule and javascript tests for slider_navigation

parent fbaa91c5
[submodule "library/storm"]
path = library/storm
url = git@git.afi-sa.fr:afi/storm.git
[submodule "tests_js/lib/qunit-phantomjs-runner"]
path = tests_js/lib/qunit-phantomjs-runner
url = http://git.afi-sa.fr/afi/qunit-phantomjs-runner.git
.slider_button {
background: url('../../images/buttons/green_button.png') no-repeat 0px 0px;
}
* {
color: red;
}
\ No newline at end of file
/**
* Copyright (c) 2014, Agence Française Informatique (AFI). All rights reserved.
*
* AFI-OPAC 2.0 is free software; you can redistribute it and/or modify
* it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE as published by
* the Free Software Foundation.
*
* There are special exceptions to the terms and conditions of the AGPL as it
* is applied to this software (see README file).
*
* AFI-OPAC 2.0 is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU AFFERO GENERAL PUBLIC LICENSE for more details.
*
* You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
* along with AFI-OPAC 2.0; if not, write to the Free Software
* Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
*/
(function ( $ ) {
$.fn.slider_navigation = function (base_url, button_strategy) {
if ($('head').find('link[href*="slider.css"]').length < 1) {
$('head').append('<link media="screen" href="' + base_url + '/slider.css" rel="stylesheet" type="text/css"></link>');
}
var html = $(this);
var articles = html.find('article');
if(!articles.length>0){
return $(this);
}
prepareHtml();
var news_row = html.find('div.news_row');
var article_size = html.find('article:first-child').width();
var position = 0;
var strategy;
initArticles();
if(button_strategy === "next"){
strategy = new Strategy_Next_Previous(html, articles, article_size, news_row);
} else {
strategy = new Strategy(html, articles, article_size, position, news_row);
}
html = strategy.createButton();
html = strategy.implementsButtons();
function prepareHtml() {
html.find('div.article_full_separator').remove();
articles.wrapAll('<div class="news_row"></div>');
html.find('div.news_row').wrap('<div class="window"></div>');
html.find('div.window').wrap('<div class="slider_navigation"></div>');
html.find('div.slider_navigation').append('<div class="slider_navigation_controls"></div>');
}
function initArticles() {
news_row.css('margin-left', position+'px');
news_row.width(articles.length*article_size);
}
};
var initCssForHorizontalSlideOnElement = function(element, length) {
return element.css({'margin-left': length+'px',
'transition-property': 'all',
'transition-duration': '0.8s'});
}
var Strategy = function(html, articles, article_size, position, news_row) {
var html = html;
var articles = articles;
var article_size = article_size;
var position = position;
var news_row = news_row;
this.createButton = function() {
var slider_controls = html.find('div.slider_navigation_controls');
articles.each(function(index) {
slider_controls.append('<div class="slider_button" data-article="'+(index+=1)+'"></div>');
});
return html;
};
this.implementsButtons = function() {
html.find('div[data-article=1]').addClass('selected');
var current_position = 0;
html.find('div[data-article]').click(function() {
html.find('div[data-article]').removeClass('selected');
$(this).addClass('selected');
current_position = $(this).data('article');
position = (-1) * (current_position-1) * article_size;
initCssForHorizontalSlideOnElement(news_row, position);
});
return html;
}
};
var Strategy_Next_Previous = function(html, articles, article_size, news_row) {
var html = html;
var articles = articles;
var article_size = article_size;
var news_row = news_row;
this.createButton = function() {
html.find('div.slider_navigation_controls')
.append('<div class="slider_button" data-event="previous"></div>')
.append('<div class="slider_button" data-event="next"></div>');
return html;
};
this.implementsButtons = function() {
var right_cleat = ((articles.length * article_size) - article_size) * (-1);
var left_cleat = 0;
html.find('div[data-event="next"]').click(function() {
var old_margin = parseInt( news_row.css('margin-left'));
var length = (old_margin > right_cleat && (old_margin % article_size == 0))
? old_margin - article_size
: right_cleat;
initCssForHorizontalSlideOnElement(news_row, length);
});
html.find('div[data-event="previous"]').click(function() {
var old_margin = parseInt( news_row.css('margin-left'));
var length = (old_margin < left_cleat && (old_margin % article_size == 0))
? old_margin + article_size
: 0;
initCssForHorizontalSlideOnElement(news_row, length);
});
return html;
}
};
} (jQuery));
<!DOCTYPE html>
<!--
/**
* Copyright (c) 2012, Agence Française Informatique (AFI). All rights reserved.
*
* AFI-OPAC 2.0 is free software; you can redistribute it and/or modify
* it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE as published by
* the Free Software Foundation.
*
* There are special exceptions to the terms and conditions of the AGPL as it
* is applied to this software (see README file).
*
* AFI-OPAC 2.0 is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU AFFERO GENERAL PUBLIC LICENSE for more details.
*
* You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
* along with AFI-OPAC 2.0; if not, write to the Free Software
* Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
*/
-->
<html>
<head>
<meta charset="utf-8">
<title>QUnit tests</title>
<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-git.css">
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="../slider_navigation.js"></script>
<script src="http://code.jquery.com/qunit/qunit-1.13.0.js"></script>
<script src="agenda_slider_test.js"></script>
</body>
</html>
/**
* Copyright (c) 2014, Agence Française Informatique (AFI). All rights reserved.
*
* AFI-OPAC 2.0 is free software; you can redistribute it and/or modify
* it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE as published by
* the Free Software Foundation.
*
* There are special exceptions to the terms and conditions of the AGPL as it
* is applied to this software (see README file).
*
* AFI-OPAC 2.0 is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU AFFERO GENERAL PUBLIC LICENSE for more details.
*
* You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
* along with AFI-OPAC 2.0; if not, write to the Free Software
* Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
*/
var fixture;
QUnit.module('slider_navigation', {
setup: function() {
fixture = $('<div>'
+'<article style="width:50px;">Bokeh</article>'
+'<article>Biquette</article>'
+'<article>Bokeh la biquette</article>'
+'</div>');
fixture.slider_navigation('../', 'next');
}
});
test('slider buttons should be next_event type', function() {
deepEqual(fixture.find('div.slider_button[data-event="next"], div.slider_button[data-event="previous"]').length, 2, fixture.html());
});
test('Click on next button should display "Biquette"', function() {
fixture.find('div.slider_button[data-event="next"]').trigger('click');
deepEqual(fixture.find('div.news_row').css('margin-left'), '-50px', fixture.html());
});
test('Click on next then previous should display "Bokeh"', function() {
fixture.find('div.slider_button[data-event="next"]').trigger('click');
fixture.find('div.slider_button[data-event="previous"]').trigger('click');
deepEqual(fixture.find('div.news_row').css('margin-left'), '0px', fixture.html());
});
test('Click 2 times on next should display "Bokeh la biquette"', function() {
fixture.find('div.slider_button[data-event="next"]').trigger('click');
fixture.find('div.slider_button[data-event="next"]').trigger('click');
deepEqual(fixture.find('div.news_row').css('margin-left'), '-100px', fixture.html());
});
test('Click 2 times on next then click on previous should display "Biquette"', function() {
fixture.find('div.slider_button[data-event="next"]').trigger('click');
fixture.find('div.slider_button[data-event="next"]').trigger('click');
fixture.find('div.slider_button[data-event="previous"]').trigger('click');
deepEqual(fixture.find('div.news_row').css('margin-left'), '-50px', fixture.html());
});
test('Click 3 times on next should display "Bokeh la biquette"', function() {
fixture.find('div.slider_button[data-event="next"]').trigger('click');
fixture.find('div.slider_button[data-event="next"]').trigger('click');
fixture.find('div.slider_button[data-event="next"]').trigger('click');
deepEqual(fixture.find('div.news_row').css('margin-left'), '-100px', fixture.html());
});
test('Click on previous should stay on "Bokeh"', function() {
fixture.find('div.slider_button[data-event="previous"]').trigger('click');
deepEqual(fixture.find('div.news_row').css('margin-left'), '0px', fixture.html());
});
<!DOCTYPE html>
<!--
/**
* Copyright (c) 2012, Agence Française Informatique (AFI). All rights reserved.
*
* AFI-OPAC 2.0 is free software; you can redistribute it and/or modify
* it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE as published by
* the Free Software Foundation.
*
* There are special exceptions to the terms and conditions of the AGPL as it
* is applied to this software (see README file).
*
* AFI-OPAC 2.0 is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU AFFERO GENERAL PUBLIC LICENSE for more details.
*
* You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
* along with AFI-OPAC 2.0; if not, write to the Free Software
* Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
*/
-->
<html>
<head>
<meta charset="utf-8">
<title>QUnit tests</title>
<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-git.css">
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="../slider_navigation.js"></script>
<script src="http://code.jquery.com/qunit/qunit-1.13.0.js"></script>
<script src="news_slider_test.js"></script>
</body>
</html>
/**
* Copyright (c) 2014, Agence Française Informatique (AFI). All rights reserved.
*
* AFI-OPAC 2.0 is free software; you can redistribute it and/or modify
* it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE as published by
* the Free Software Foundation.
*
* There are special exceptions to the terms and conditions of the AGPL as it
* is applied to this software (see README file).
*
* AFI-OPAC 2.0 is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU AFFERO GENERAL PUBLIC LICENSE for more details.
*
* You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
* along with AFI-OPAC 2.0; if not, write to the Free Software
* Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
*/
var fixture;
var html = $('html');
html.find('div').css('color', 'green');
QUnit.module('slider_navigation', {
setup: function() {
fixture = $('<div>'
+'<article style="width:50px;">Bokeh</article>'
+'<div class="article_full_separator"></div>'
+'<article>Biquette</article>'
+'</div>');
fixture.slider_navigation("..");
}
});
test('no articles should return', function() {
var empty = $('<body><div><div></div></div></body>');
empty.slider_navigation();
deepEqual(empty.find('div').length, 1, empty.html());
});
test('div.article_full_separator should have been delete', function() {
deepEqual(fixture.find('div.article_full_separator').length, 0, fixture.html());
});
test('control button for article Bokeh should be set as button 1', function() {
deepEqual(fixture.find('div.slider_button[data-article=1]').length, 1, fixture.html());
});
test('control button for article Biquette should be set as button 2', function() {
deepEqual(fixture.find('div.slider_button[data-article=2]').length, 1, fixture.html());
});
test('articles should be wrapped in div.news_row', function() {
deepEqual(fixture.find('div.news_row article').length, 2, fixture.html());
});
test('div.news_row should be wrapped in div.window', function() {
deepEqual(fixture.find('div.window div.news_row').length, 1, fixture.html());
});
test('div.window and div.slider_navigation_controls should be wrapped in div.slider_navigation', function() {
deepEqual(fixture.find('div.slider_navigation div.window, div.slider_navigation div.slider_navigation_controls').length, 2, fixture.html());
});
test('slider buttons should be wrapped in div.slider_navigation_controls', function() {
deepEqual(fixture.find('div.slider_navigation_controls div.slider_button').length, 2, fixture.html());
});
test('first slider buttons should be selected', function() {
deepEqual(fixture.find('div.slider_button.selected').length, 1, fixture.html());
});
test('click slider buttons should select it', function() {
fixture.find('div.slider_button[data-article=2]').trigger('click');
deepEqual(fixture.find('div.slider_button[data-article=2].selected').length, 1, fixture.html());
});
test('only one slider buttons should be selected', function() {
fixture.find('div.slider_button[data-article=2]').trigger('click');
deepEqual(fixture.find('div.slider_button[data-article].selected').length, 1, fixture.html());
});
test('div.news_row should be at position 1', function() {
deepEqual(fixture.find('div.news_row').css('margin-left'), '0px', fixture.html());
});
test('div.news_row should be at position 2', function() {
fixture.find('div.slider_button[data-article=2]').trigger('click');
deepEqual(fixture.find('div.news_row').css('margin-left'), '-50px', fixture.html());
});
test('div.news_row should be at position 2', function() {
fixture.find('div.slider_button[data-article=2]').trigger('click');
fixture.find('div.slider_button[data-article=1]').trigger('click');
deepEqual(fixture.find('div.news_row').css('margin-left'), '0px', fixture.html());
});
test('div.news_row width should be 100px', function() {
deepEqual(fixture.find('div.news_row').width(), 100, fixture.html());
});
test('slider.css should be loaded only once', function() {
deepEqual(html.find('link[href*="slider.css"]').length, 1, html.html());
});
../../../../../tests_js/lib/qunit-phantomjs-runner
\ No newline at end of file
#!/bin/sh
MY_DIR="$(dirname "${BASH_SOURCE[0]}")"
phantomjs $MY_DIR/qunit-phantomjs-runner/runner.js $MY_DIR/news_slider.html
phantomjs $MY_DIR/qunit-phantomjs-runner/runner.js $MY_DIR/agenda_slider.html
Subproject commit 86c8c41c95cbc17a2753ce141357021a4263a58a
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment