- Add a debug mode to the casper script

- Have the casper script generate screenshots for the repo view and repo admin

screenshots/README.md

@@ -3,3 +3,9 @@ run with:
 ```
 casperjs screenshots.js
 ```
+
+debug run (i.e. hit localhost):
+
+```
+casperjs screenshots.js --d
+```

screenshots/screenshots.js

@@ -1,13 +1,17 @@
 var casper = require('casper').create({
   viewportSize: {
-    width: 1024,
+    width: 1280,
     height: 768
   },
   verbose: true,
   logLevel: "debug"
 });
 
-var rootUrl = 'https://quay.io/';
+var options = casper.cli.options;
+var isDebug = !!options['d'];
+
+var rootUrl = isDebug ? 'http://localhost:5001/' : 'https://quay.io/';
+var repo = isDebug ? 'simple' : 'r0';
 
 casper.start(rootUrl);
 
@@ -26,7 +30,7 @@ casper.then(function() {
 casper.thenOpen(rootUrl + 'signin', function () {
   this.fill('form', {
     'username': 'devtable',
-    'password': 'C>K98%y"_=54x"<',
+    'password': isDebug ? 'password': 'C>K98%y"_=54x"<',
   }, true);
 });
 
@@ -38,4 +42,24 @@ casper.then(function() {
   this.capture('user-home.png');
 });
 
+casper.thenOpen(rootUrl + 'repository/devtable/' + repo, function() {
+  // Wait for the tree to initialize.
+  this.waitForSelector('.image-tree', function() {
+    // Wait for the tree's animation to finish.
+    this.wait(4000);
+  });
+});
+
+casper.then(function() {
+  this.capture('repo-view.png');
+});
+
+casper.thenOpen(rootUrl + 'repository/devtable/' + repo + '/admin', function() {
+  this.waitForSelector('.repo-access-state');
+});
+
+casper.then(function() {
+  this.capture('repo-admin.png');
+});
+
 casper.run();

static/js/graphing.js

@@ -86,6 +86,7 @@ ImageHistoryTree.prototype.draw = function(container) {
     var vis = d3.select("#" + container).append("svg:svg")
         .attr("width", w + m[1] + m[3])
         .attr("height", h + m[0] + m[2])
+        .attr("class", "image-tree")
         .append("svg:g")
           .attr("transform", "translate(" + m[3] + "," + m[0] + ")");