Setup minimal acceptance tests

karma.conf.js

@@ -4,7 +4,7 @@ const webpackConfig = require('./webpack.config');
 module.exports = function(config) {
   let configuration = {
     frameworks: ['mocha'],
-    reporters: ['progress'],
+    reporters: ['mocha'],
     port: 9876,
 
     browsers: ['Chrome'],
@@ -24,16 +24,11 @@ module.exports = function(config) {
       'tests/**/*-test.js': ['webpack']
     },
 
-    webpack: Object.assign({}, webpackConfig, {
-      // enzyme externals
-      externals: {
-        'react/addons': true,
-        'react/lib/ExecutionEnvironment': true,
-        'react/lib/ReactContext': true
-      }
-    }),
+    webpack: webpackConfig,
 
-    webpackMiddleware: webpackConfig.devServer,
+    webpackMiddleware: {
+      stats: "errors-only"
+    },
 
     mochaReporter: {
       showDiff: true
@@ -42,7 +37,8 @@ module.exports = function(config) {
     plugins: [
       'karma-chrome-launcher',
       'karma-mocha',
-      'karma-webpack'
+      'karma-webpack',
+      'karma-mocha-reporter'
     ]
   };
 

package.json

@@ -16,14 +16,15 @@
     "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.24.1",
     "chai": "^4.0.2",
-    "chai-enzyme": "^0.8.0",
-    "enzyme": "^2.9.1",
+    "chai-jquery": "^2.0.0",
     "eslint": "^4.3.0",
     "eslint-loader": "^1.9.0",
     "eslint-plugin-react": "^7.1.0",
+    "jquery": "^3.2.1",
     "karma": "^1.7.0",
     "karma-chrome-launcher": "^2.2.0",
     "karma-mocha": "^1.3.0",
+    "karma-mocha-reporter": "^2.2.3",
     "karma-webpack": "^2.0.3",
     "mocha": "^3.4.2",
     "react": "^15.6.1",

tests/app-test.js

@@ -1,10 +1,35 @@
 /* global it */
 import { expect } from 'chai';
+import $ from 'jquery';
 
 import { describeApplication } from './helpers';
 
-describeApplication('Acceptance', function() {
+describeApplication('eHoldings', function() {
   it('should render the app', function() {
-    expect(this.$.find('h1')).to.have.text('Folio Resource Management');
+    expect($('h1')).to.have.text('Folio Resource Management');
+  });
+
+  it('has a searchbox with options to search for vendor, package and title');
+
+  describe("searching for the vendor 'ebsco'", function() {
+    it("displays vendor entries related to 'ebsco'");
+    it("displays the name, number of packages available, and packages subscribed to for each vendor");
+
+    describe("clicking on first result", function() {
+      it("shows vendor details");
+      it("shows packages for vendor");
+    });
+
+    describe("sorting by name", function() {
+      it("sorts by name");
+    });
+  });
+
+  describe("searching for the vendor 'fhqwhgads'", function() {
+    it("displays 'no results' message");
+  });
+
+  describe("encountering a server error", function() {
+    it("dies with grace");
   });
 });

tests/helpers.js

@@ -1,15 +1,17 @@
 /* global describe, beforeEach, afterEach */
 import React from 'react';
 import chai from 'chai';
-import chaiEnzyme from 'chai-enzyme';
-import { mount } from 'enzyme';
+import chaiJquery from 'chai-jquery';
+import $ from 'jquery';
+import { render, unmountComponentAtNode } from 'react-dom';
 
 import App from '../src/components/app';
 
-// use enzyme matchers
-chai.use(chaiEnzyme());
+// use jquery matchers
+chai.use((chai, utils) => chaiJquery(chai, utils, $));
 
-/**
+/*
+ * TODO: FIX THIS DESCRIPTION
  * Sets up the entire Folio application, mounts it with enzyme, and tears it down
  * Use this helper for end-to-end acceptance testing intead of the normal 'describe'
  *
@@ -35,13 +37,11 @@ export function describeApplication(name, setup) {
       rootElement.id = 'react-testing';
       document.body.appendChild(rootElement);
 
-      this.$ = mount(<App/>, {
-        attachTo: rootElement
-      });
+      this.app = render(<App/>, rootElement);
     });
 
     afterEach(function() {
-      this.$.detach();
+      unmountComponentAtNode(rootElement);
       document.body.removeChild(rootElement);
       rootElement = null;
     });