Add test job to CircleCI (#1235)

* Do not compile contrib when running screenshotter

* Add test job to CircleCI

* Update config.yml

* Fail if PR exists but running on the forked repo

* Update Screenshotter README.md

* Store artifact at the root

* Add CircleCI badge

* Add `codecov` to CircleCI

* Change build directory to `dist`

.circleci/config.yml

@@ -1,23 +1,31 @@
-defaults: &defaults
-  steps:
-    - checkout
-    - run:
+checkout_submodule: &checkout_submodule
+  run:
     name: Checkout submodule
     command: |
         git submodule sync
         git submodule update --init --recursive
 
-    - restore_cache:
+npm_cache_key: &npm_cache_key
+  npm-deps-v1-{{ checksum "package.json" }}
+
+restore_npm_cache: &restore_npm_cache
+  restore_cache:
     keys:
-          - npm-deps-{{ checksum "package.json" }}
-          - npm-deps-
-    - run:
+      - *npm_cache_key
+      - npm-deps-v1-
+
+npm_install: &npm_install
+  run:
     name: Install npm dependencies
     command: npm install
-    - save_cache:
-        key: npm-deps-{{ checksum "package.json" }}
-        paths:
-          - node_modules
+
+screenshotter: &screenshotter
+  steps:
+    - checkout
+    - *checkout_submodule
+
+    - *restore_npm_cache
+    - *npm_install
 
     - run:
         name: Verify screenshots and generate diffs and new screenshots
@@ -32,20 +40,66 @@ defaults: &defaults
 
 version: 2
 jobs:
+  test:
+    docker:
+      - image: circleci/node:6
+    steps:
+      - run:
+          name: Check whether the build is running on the main repository
+          command: |
+              if [[ $CIRCLE_PULL_REQUEST && $CIRCLE_PROJECT_USERNAME != "Khan" ]]; then
+                echo "Please disable CircleCI on your forked repository!"
+                exit 1
+              fi
+
+      - checkout
+      - *checkout_submodule
+
+      - *restore_npm_cache
+      - *npm_install
+      - save_cache:
+          key: *npm_cache_key
+          paths:
+            - node_modules
+
+      - run:
+          name: Run tests
+          command: npm test -- -- --coverage
+      - run:
+          name: Install codecov and upload results
+          command: |
+              sudo npm install -g codecov
+              codecov
+
+      - run:
+          name: Build KaTeX
+          command: npm run build
+
+      - store_artifacts:
+          path: dist/katex.js
+          destination: katex.js
+      - store_artifacts:
+          path: dist/katex.css
+          destination: katex.css
+      - store_artifacts:
+          path: dist/fonts
+          destination: fonts
+
   firefox:
     docker:
       - image: circleci/node:6
       - image: selenium/standalone-firefox:2.48.2
-    <<: *defaults
+    <<: *screenshotter
   chrome:
     docker:
       - image: circleci/node:6
       - image: selenium/standalone-chrome:2.48.2
-    <<: *defaults
+    <<: *screenshotter
 
 workflows:
   version: 2
   screenshotter:
     jobs:
+      - test
       - firefox
       - chrome

README.md

@@ -1,5 +1,6 @@
 # [<img src="https://khan.github.io/KaTeX/katex-logo.svg" width="130" alt="KaTeX">](https://khan.github.io/KaTeX/)
 [![Build Status](https://travis-ci.org/Khan/KaTeX.svg?branch=master)](https://travis-ci.org/Khan/KaTeX)
+[![CircleCI](https://circleci.com/gh/Khan/KaTeX.svg?style=svg)](https://circleci.com/gh/Khan/KaTeX)
 [![codecov](https://codecov.io/gh/Khan/KaTeX/branch/master/graph/badge.svg)](https://codecov.io/gh/Khan/KaTeX)
 [![Join the chat at https://gitter.im/Khan/KaTeX](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/Khan/KaTeX?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) [![Greenkeeper badge](https://badges.greenkeeper.io/Khan/KaTeX.svg)](https://greenkeeper.io/)
 ![](https://img.badgesize.io/Khan/KaTeX/v0.10.0-beta/dist/katex.min.js?compression=gzip)

dockers/Screenshotter/README.md

@@ -48,10 +48,9 @@ fashion are well suited for visual inspection, but for exact binary
 comparisons it would be neccessary to carefully set up the environment
 to match the one used by the Docker approach.
 
-You can also verify and generate screenshots online using a CI(continuous
-integration) service. Fork the project, enable [CircleCI](https://circleci.com/) on your repository,
-and push your changes. Diffs and generated screenshots are available at
-build artifacts.
+Screenshots can also be verified and generated by opening a pull request.
+Diffs and generated screenshots are available at the `Artifacts` section
+of CircleCI builds.
 
 ## Choosing the list of test cases
 

dockers/Screenshotter/screenshotter.js

@@ -14,7 +14,7 @@ const firefox = require("selenium-webdriver/firefox");
 
 const webpack = require('webpack');
 const webpackDevServer = require("webpack-dev-server");
-const webpackConfig = require("../../webpack.dev");
+const webpackConfig = require("../../webpack.dev")[0];
 const data = require("../../test/screenshotter/ss_data");
 
 // Change to KaTeX root directory so that webpack (in particular
@@ -162,7 +162,7 @@ function startServer() {
     }
     const port = Math.floor(Math.random() * (maxPort - minPort)) + minPort;
     const compiler = webpack(webpackConfig);
-    const wds = new webpackDevServer(compiler, webpackConfig[0].devServer);
+    const wds = new webpackDevServer(compiler, webpackConfig.devServer);
     const server = wds.listen(port);
     server.once("listening", function() {
         devServer = wds;