Add Karma example (& fix date mocking bug) (#3)

* Add Karma example

* Remove testing check in webpack config for Karma example

* Update to latest `@bigtest/convergence` to fix date mocking issue

This also updates `@bigtest/interactor` & `@bigtest/mocha` since they
both rely on `@bigtest/convergence`.

Author: Robdel12

react/countdown-karma/.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": [
+    ["@babel/env", {
+      "modules": false
+    }],
+    "@babel/react",
+    ["@babel/stage-2", {
+      "decoratorsLegacy": true
+    }]
+  ]
+}

react/countdown-karma/.postcssrc

@@ -0,0 +1,6 @@
+{
+  "plugins": {
+    "autoprefixer": true,
+    "precss": true
+  }
+}

react/countdown-karma/bigtest/index.js

@@ -0,0 +1,7 @@
+import '@babel/polyfill';
+
+// other setup could be done here too, such as registering chai helpers
+
+// we import our tests using webpack's require.context
+const requireTest = require.context('.', true, /-test/);
+requireTest.keys().forEach(requireTest);

react/countdown-karma/bigtest/interactors/countdown.js

@@ -0,0 +1,14 @@
+import { interactor, text } from '@bigtest/interactor';
+
+export default @interactor class CountdownInteractor {
+  static defaultScope = '[data-test-countdown]';
+  years = text('[data-test-countdown-unit="years"]');
+  months = text('[data-test-countdown-unit="months"]');
+  days = text('[data-test-countdown-unit="days"]');
+  hours = text('[data-test-countdown-unit="hours"]');
+  minutes = text('[data-test-countdown-unit="minutes"]');
+  seconds = text('[data-test-countdown-unit="seconds"]');
+  milliseconds = text('[data-test-countdown-unit="milliseconds"]');
+  direction = text('[data-test-countdown-direction]');
+  target = text('[data-test-countdown-target]');
+}

react/countdown-karma/bigtest/interactors/form.js

@@ -0,0 +1,27 @@
+import { interactor, scoped } from '@bigtest/interactor';
+import SpinnerInteractor from './spinner';
+
+export default @interactor class DateFormInteractor {
+  // the default scope allows us to omit the selector when calling `new`
+  static defaultScope = '[data-test-date-form]';
+
+  // interactors are composable and nested methods return an instance
+  // of the top-most interactor for chaining
+  year = scoped('[data-test-year-field]', SpinnerInteractor);
+  month = scoped('[data-test-month-field]', SpinnerInteractor);
+  day = scoped('[data-test-day-field]', SpinnerInteractor);
+  hour = scoped('[data-test-hour-field]', SpinnerInteractor);
+  minute = scoped('[data-test-minute-field]', SpinnerInteractor);
+  submit = scoped('button[type="submit"]');
+
+  // getters can also be used for computed properties
+  get value() {
+    let year = this.year.value;
+    let month = parseInt(this.month.value, 10) + 1;
+    let day = this.day.value;
+    let hour = this.hour.value.padStart(2, '0');
+    let minute = this.minute.value.padStart(2, '0');
+
+    return `${year}/${month}/${day} @ ${hour}:${minute}`;
+  }
+}

react/countdown-karma/bigtest/interactors/spinner.js

@@ -0,0 +1,24 @@
+import { interactor, clickable, value } from '@bigtest/interactor';
+
+export default @interactor class SpinnerInteractor {
+  // common helpers provide easy to define interactions
+  prev = clickable('[data-test-spinner-option="prev"]');
+  next = clickable('[data-test-spinner-option="next"]');
+  value = value('input');
+
+  // complex interactions can be expressed as methods
+  select(option) {
+    let self = this;
+
+    // for each letter in `option`, send a keypress event
+    // that will trigger the spinner's typeahead feature
+    for (let key of option) {
+      self = self.trigger('keypress', {
+        charCode: key.charCodeAt()
+      });
+    }
+
+    // methods that return a new instance of itself are chainable
+    return self;
+  }
+}

react/countdown-karma/bigtest/tests/countdown-test.js

@@ -0,0 +1,41 @@
+import { describe, beforeEach, it } from '@bigtest/mocha';
+import { travel } from 'timekeeper';
+import { expect } from 'chai';
+
+import { setupApplicationForTesting, visit, location } from './helpers';
+import CountdownInteractor from '../interactors/countdown';
+
+describe('Countdown', () => {
+  const countdown = new CountdownInteractor();
+
+  setupApplicationForTesting();
+
+  describe('with a date in the future', () => {
+    beforeEach(() => visit('/2019/1/2'));
+
+    it('displays the difference of time', () => {
+      expect(countdown.years).to.equal('1');
+    });
+
+    it('displays "until" and the target date', () => {
+      expect(countdown.direction).to.equal('Until');
+      expect(countdown.target).to.equal('January 2, 2019');
+    });
+  });
+
+  describe('with a date in the past', () => {
+    beforeEach(() => {
+      travel(new Date([2018, 1, 2]));
+      visit('/2017/1/1');
+    });
+
+    it('displays the difference of time', () => {
+      expect(countdown.years).to.equal('1');
+    });
+
+    it('displays "since" and the target date', () => {
+      expect(countdown.direction).to.equal('Since');
+      expect(countdown.target).to.equal('January 1, 2017');
+    });
+  });
+});

react/countdown-karma/bigtest/tests/helpers.js

@@ -0,0 +1,16 @@
+import { before, beforeEach } from '@bigtest/mocha';
+import { setupAppForTesting } from '@bigtest/react';
+import { freeze } from 'timekeeper';
+import App from '../../src/app';
+
+export { visit, location } from '@bigtest/react';
+
+export function setupApplicationForTesting() {
+  before(() => freeze(new Date([2018, 1, 1])));
+
+  beforeEach(async function() {
+    this.app = await setupAppForTesting(App, {
+      mountId: 'root'
+    });
+  });
+}

react/countdown-karma/bigtest/tests/picker-test.js

@@ -0,0 +1,70 @@
+import { describe, beforeEach, it } from '@bigtest/mocha';
+import { expect } from 'chai';
+
+import { setupApplicationForTesting, location } from './helpers';
+import DateFormInteractor from '../interactors/form';
+
+describe('Date Picker', () => {
+  const form = new DateFormInteractor();
+  setupApplicationForTesting();
+
+  it('has fields for year, month, day, hour, and minute', () => {
+    expect(form.year.isPresent).to.be.true;
+    expect(form.month.isPresent).to.be.true;
+    expect(form.day.isPresent).to.be.true;
+    expect(form.hour.isPresent).to.be.true;
+    expect(form.minute.isPresent).to.be.true;
+  });
+
+  it('defaults to today\'s date', () => {
+    expect(form.value).to.equal('2018/1/1 @ 00:00');
+  });
+
+  it('has a submit button', () => {
+    expect(form.submit.isPresent).to.be.true;
+  });
+
+  describe('selecting a date in the future', () => {
+    beforeEach(async () => {
+      await form.year.next();
+    });
+
+    it('displays a "get countdown" submit button', () => {
+      expect(form.submit.text).to.equal('Get Countdown');
+    });
+  });
+
+  describe('selecting a date in the past', () => {
+    beforeEach(async () => {
+      await form.year.prev();
+    });
+
+    it('displays a "get elapsed" submit button', () => {
+      expect(form.submit.text).to.equal('Get Elapsed');
+    });
+  });
+
+  describe('submitting a date', () => {
+    beforeEach(async () => {
+      await form.submit.click();
+    });
+
+    it('goes to the date countdown', () => {
+      expect(location().pathname).to.equal('/2018/01/01');
+    });
+  });
+
+  describe('submitting a date and time', () => {
+    beforeEach(async () => {
+      await form
+        .year.select('2019')
+        .hour.select('12')
+        .minute.select('30')
+        .submit.click();
+    });
+
+    it('includes the time in the URL', () => {
+      expect(location().pathname).to.equal('/2019/01/01/12:30');
+    });
+  });
+});

react/countdown-karma/karma.conf.js

@@ -0,0 +1,33 @@
+module.exports = config => {
+  config.set({
+    frameworks: ["mocha"], // sets up the Mocha framework automatically
+    reporters: ["mocha"], // reports back to the CLI formatted like Mocha
+    browsers: ["Chrome"], // automatically launches chrome to run our tests
+
+    files: [
+      // karma-webpack will watch our files
+      { pattern: "bigtest/index.js", watched: false }
+    ],
+
+    preprocessors: {
+      // tells Karma that we'll be using Webpack to process this file
+      "bigtest/index.js": ["webpack"]
+    },
+
+    // Mocha reporter options
+    mochaReporter: {
+      showDiff: true
+    },
+
+    // our webpack config exports a function
+    webpack: require("./webpack.config")(),
+
+    // webpack dev middleware options
+    webpackMiddleware: {
+      stats: "minimal"
+    }
+
+    // for more Karma config options, check out the documentation
+    // http://karma-runner.github.io/2.0/config/configuration-file.html
+  });
+};