Add full integration test: compare galleries to previously generated snapshot

pull/67/merge
Romain 7 years ago
parent dc40fbac09
commit afd3915778

4
.gitignore vendored

@ -1,3 +1,5 @@
node_modules
example/website
test-integration/output-actual
test-integration/output-expected/public
test-integration/output-expected/metadata.json
.DS_Store

@ -21,6 +21,10 @@ mocha
echo "--- Update CLI arguments in README"
./scripts/readme
# TODO: add all dependencies like <ffmpeg> if we want this to run on Travis CI
# echo "--- Running integration tests"
# ./test-integration/test.sh
echo "================"
echo "Build successful"
echo "================"

@ -0,0 +1,11 @@
{
"input": "input",
"title": "Photo album",
"download-photos": "large",
"download-videos": "large",
"sort-albums-by": "title",
"sort-media-by": "date",
"albums-from": "folders",
"theme": "mosaic",
"cleanup": true
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

@ -0,0 +1,120 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>Photo album - 2016</title>
<link rel="stylesheet" href="public/reset.css" />
<link rel="stylesheet" href="public/viewer.css" />
<link rel="stylesheet" href="public/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="public/light-gallery/css/lightgallery.css" />
<link rel="stylesheet" href="public/videojs/video-js.min.css" />
<link rel="stylesheet" href="public/style.css" />
</head>
<body>
<div id="content">
<!--
Gallery title
-->
<header style="color: #17baef;">
<h1><a href="index.html">Photo album</a></h1>
</header>
<!--
Breadcrumbs of parent albums
-->
<nav class="breadcrumbs">
<div class="mask"></div>
<a class="breadcrumb-item" href="index.html">Home</a>
<span class="separator">&gt;</span><a class="breadcrumb-item" href="2016.html">2016</a>
</nav>
<!--
Main gallery panel
-->
<section id="content">
<!--
Nested albums, if any
-->
<ul id="albums">
</ul>
<!--
All photos and videos
-->
<ul id="media">
<li data-src="media/large/2016/2016-05-23 13.42.16.jpg"
data-sub-html=""
data-download-url="media/large/2016/2016-05-23 13.42.16.jpg">
<a href="media/large/2016/2016-05-23 13.42.16.jpg">
<img src="media/thumbs/2016/2016-05-23 13.42.16.jpg"
width="120"
height="120"
alt="2016-05-23 13.42.16.jpg" />
</a>
</li> <li data-src="media/large/2016/2016-06-14 09.19.03.jpg"
data-sub-html=""
data-download-url="media/large/2016/2016-06-14 09.19.03.jpg">
<a href="media/large/2016/2016-06-14 09.19.03.jpg">
<img src="media/thumbs/2016/2016-06-14 09.19.03.jpg"
width="120"
height="120"
alt="2016-06-14 09.19.03.jpg" />
</a>
</li> <li data-src="media/large/2016/2016-10-30 18.41.28.jpg"
data-sub-html=""
data-download-url="media/large/2016/2016-10-30 18.41.28.jpg">
<a href="media/large/2016/2016-10-30 18.41.28.jpg">
<img src="media/thumbs/2016/2016-10-30 18.41.28.jpg"
width="120"
height="120"
alt="2016-10-30 18.41.28.jpg" />
</a>
</li> </ul>
</section>
<!--
Optional footer
-->
</div>
<!-- Video loader -->
<div id="videos">
</div>
<!-- jQuery -->
<script src="public/jquery.min.js"></script>
<!-- VideoJS -->
<script src="public/videojs/video.js"></script>
<!-- LightGallery -->
<script src="public/light-gallery/js/lightgallery.js"></script>
<script src="public/light-gallery/js/lg-autoplay.js"></script>
<script src="public/light-gallery/js/lg-pager.js"></script>
<script src="public/light-gallery/js/lg-thumbnail.js"></script>
<script src="public/light-gallery/js/lg-video.js"></script>
<script>
$(document).ready(function() {
$("#media").lightGallery({
thumbWidth: 80,
controls: true,
loop : false,
download: true,
counter: true,
videojs: true
});
});
</script>
</body>
</html>

@ -0,0 +1,118 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>Photo album - 2017</title>
<link rel="stylesheet" href="public/reset.css" />
<link rel="stylesheet" href="public/viewer.css" />
<link rel="stylesheet" href="public/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="public/light-gallery/css/lightgallery.css" />
<link rel="stylesheet" href="public/videojs/video-js.min.css" />
<link rel="stylesheet" href="public/style.css" />
</head>
<body>
<div id="content">
<!--
Gallery title
-->
<header style="color: #17baef;">
<h1><a href="index.html">Photo album</a></h1>
</header>
<!--
Breadcrumbs of parent albums
-->
<nav class="breadcrumbs">
<div class="mask"></div>
<a class="breadcrumb-item" href="index.html">Home</a>
<span class="separator">&gt;</span><a class="breadcrumb-item" href="2017.html">2017</a>
</nav>
<!--
Main gallery panel
-->
<section id="content">
<!--
Nested albums, if any
-->
<ul id="albums">
</ul>
<!--
All photos and videos
-->
<ul id="media">
<li data-src="media/large/2017/2017-01-15 12.38.41.jpg"
data-sub-html=""
data-download-url="media/large/2017/2017-01-15 12.38.41.jpg">
<a href="media/large/2017/2017-01-15 12.38.41.jpg">
<img src="media/thumbs/2017/2017-01-15 12.38.41.jpg"
width="120"
height="120"
alt="2017-01-15 12.38.41.jpg" />
</a>
</li><li data-html="#media5"
data-download-url="media/large/2017/2017-03-22 20.12.58.mp4">
<a href="media/large/2017/2017-03-22 20.12.58.mp4">
<img src="media/thumbs/2017/2017-03-22 20.12.58.jpg"
width="120"
height="120"
alt="2017-03-22 20.12.58.mp4" />
</a>
<img class="video-overlay" src="public/play.png" />
</li>
</ul>
</section>
<!--
Optional footer
-->
</div>
<!-- Video loader -->
<div id="videos">
<div id="media5" style="display:none;">
<video class="lg-video-object lg-html5 video-js vjs-default-skin vjs-big-play-centered" poster="media/large/2017/2017-03-22 20.12.58.jpg" preload="none" controls>
<source src="media/large/2017/2017-03-22 20.12.58.mp4" type="video/mp4" />
Your browser does not support HTML5 video
</video>
</div>
</div>
<!-- jQuery -->
<script src="public/jquery.min.js"></script>
<!-- VideoJS -->
<script src="public/videojs/video.js"></script>
<!-- LightGallery -->
<script src="public/light-gallery/js/lightgallery.js"></script>
<script src="public/light-gallery/js/lg-autoplay.js"></script>
<script src="public/light-gallery/js/lg-pager.js"></script>
<script src="public/light-gallery/js/lg-thumbnail.js"></script>
<script src="public/light-gallery/js/lg-video.js"></script>
<script>
$(document).ready(function() {
$("#media").lightGallery({
thumbWidth: 80,
controls: true,
loop : false,
download: true,
counter: true,
videojs: true
});
});
</script>
</body>
</html>

@ -0,0 +1,110 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>Photo album - Home</title>
<link rel="stylesheet" href="public/reset.css" />
<link rel="stylesheet" href="public/viewer.css" />
<link rel="stylesheet" href="public/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="public/light-gallery/css/lightgallery.css" />
<link rel="stylesheet" href="public/videojs/video-js.min.css" />
<link rel="stylesheet" href="public/style.css" />
</head>
<body>
<div id="content">
<!--
Gallery title
-->
<header style="color: #17baef;">
<h1><a href="index.html">Photo album</a></h1>
</header>
<!--
Breadcrumbs of parent albums
-->
<nav class="breadcrumbs">
<div class="mask"></div>
<a class="breadcrumb-item" href="index.html">Home</a>
</nav>
<!--
Main gallery panel
-->
<section id="content">
<!--
Nested albums, if any
-->
<ul id="albums">
<li>
<a href="2016.html">
<h3>2016</h3>
<div class="meta">
<time>23 May 2016 - 30 Oct 2016</time><span class="separator">,</span>
<span class="summary">3 photos</span>
</div>
<ul class="grid clearfix"><li><img src="media/thumbs/2016/2016-05-23 13.42.16.jpg" /></li><li><img src="media/thumbs/2016/2016-06-14 09.19.03.jpg" /></li><li><img src="media/thumbs/2016/2016-10-30 18.41.28.jpg" /></li><li><img src="public/missing.png" /></li><li><img src="public/missing.png" /></li><li><img src="public/missing.png" /></li><li><img src="public/missing.png" /></li><li><img src="public/missing.png" /></li> </ul>
</a>
</li><li>
<a href="2017.html">
<h3>2017</h3>
<div class="meta">
<time>15 Jan 2017 - 22 Mar 2017</time><span class="separator">,</span>
<span class="summary">1 photo, 1 video</span>
</div>
<ul class="grid clearfix"><li><img src="media/thumbs/2017/2017-01-15 12.38.41.jpg" /></li><li><img src="media/thumbs/2017/2017-03-22 20.12.58.jpg" /></li><li><img src="public/missing.png" /></li><li><img src="public/missing.png" /></li><li><img src="public/missing.png" /></li><li><img src="public/missing.png" /></li><li><img src="public/missing.png" /></li><li><img src="public/missing.png" /></li> </ul>
</a>
</li> </ul>
<!--
All photos and videos
-->
<ul id="media">
</ul>
</section>
<!--
Optional footer
-->
</div>
<!-- Video loader -->
<div id="videos">
</div>
<!-- jQuery -->
<script src="public/jquery.min.js"></script>
<!-- VideoJS -->
<script src="public/videojs/video.js"></script>
<!-- LightGallery -->
<script src="public/light-gallery/js/lightgallery.js"></script>
<script src="public/light-gallery/js/lg-autoplay.js"></script>
<script src="public/light-gallery/js/lg-pager.js"></script>
<script src="public/light-gallery/js/lg-thumbnail.js"></script>
<script src="public/light-gallery/js/lg-video.js"></script>
<script>
$(document).ready(function() {
$("#media").lightGallery({
thumbWidth: 80,
controls: true,
loop : false,
download: true,
counter: true,
videojs: true
});
});
</script>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

@ -0,0 +1,15 @@
#!/bin/bash
set -eou pipefail
# Run tests inside the integration folder
pushd "${BASH_SOURCE%/*}" >/dev/null || exit
trap finish EXIT
function finish {
popd >/dev/null
}
# cleanup
rm -rf output-expected
# run thumbsup
thumbsup --config config.json --output output-expected

@ -0,0 +1,23 @@
#!/bin/bash
set -eou pipefail
# Run tests inside the integration folder
pushd "${BASH_SOURCE%/*}" >/dev/null || exit
trap finish EXIT
function finish {
popd >/dev/null
}
# cleanup
rm -rf output-actual
# run thumbsup
thumbsup --config config.json --output output-actual
# compare with expected output (checked-in)
diff -rub -x "metadata.json" -x "public" -x ".DS_Store" output-expected/ output-actual/
echo "-------------------------------"
echo "Output is identical to snapshot"
echo "BUILD SUCCESSFUL"
echo "-------------------------------"
Loading…
Cancel
Save