init

enlightApp/test/.eslintrc.json

@@ -0,0 +1,13 @@
+{
+  "extends": "plugin:testcafe/recommended",
+  "env": {
+    "jest/globals": true
+  },
+  "plugins": ["jest", "testcafe"],
+  "rules": {
+    "jest/no-disabled-tests": "warn",
+    "jest/no-focused-tests": "error",
+    "jest/no-identical-title": "error",
+    "no-console": "off"
+  }
+}

enlightApp/test/e2e/HomePage.e2e.ts

@@ -0,0 +1,82 @@
+/* eslint jest/expect-expect: off, jest/no-test-callback: off */
+import { ClientFunction, Selector } from 'testcafe';
+
+const getPageUrl = ClientFunction(() => window.location.href);
+const getPageTitle = ClientFunction(() => document.title);
+const counterSelector = Selector('[data-tid="counter"]');
+const buttonsSelector = Selector('[data-tclass="btn"]');
+const clickToCounterLink = (t) =>
+  t.click(Selector('a').withExactText('to Counter'));
+const incrementButton = buttonsSelector.nth(0);
+const decrementButton = buttonsSelector.nth(1);
+const oddButton = buttonsSelector.nth(2);
+const asyncButton = buttonsSelector.nth(3);
+const getCounterText = () => counterSelector().innerText;
+const assertNoConsoleErrors = async (t) => {
+  const { error } = await t.getBrowserConsoleMessages();
+  await t.expect(error).eql([]);
+};
+
+fixture`Home Page`.page('../../app/app.html').afterEach(assertNoConsoleErrors);
+
+test('e2e', async (t) => {
+  await t.expect(getPageTitle()).eql('Hello Electron React!');
+});
+
+test('should open window and contain expected page title', async (t) => {
+  await t.expect(getPageTitle()).eql('Hello Electron React!');
+});
+
+test(
+  'should not have any logs in console of main window',
+  assertNoConsoleErrors
+);
+
+test('should navigate to Counter with click on the "to Counter" link', async (t) => {
+  await t.click('[data-tid=container] > a').expect(getCounterText()).eql('0');
+});
+
+test('should navigate to /counter', async (t) => {
+  await t.click('a').expect(getPageUrl()).contains('/counter');
+});
+
+fixture`Counter Tests`
+  .page('../../app/app.html')
+  .beforeEach(clickToCounterLink)
+  .afterEach(assertNoConsoleErrors);
+
+test('should display updated count after the increment button click', async (t) => {
+  await t.click(incrementButton).expect(getCounterText()).eql('1');
+});
+
+test('should display updated count after the descrement button click', async (t) => {
+  await t.click(decrementButton).expect(getCounterText()).eql('-1');
+});
+
+test('should not change even counter if odd button clicked', async (t) => {
+  await t.click(oddButton).expect(getCounterText()).eql('0');
+});
+
+test('should change odd counter if odd button clicked', async (t) => {
+  await t
+    .click(incrementButton)
+    .click(oddButton)
+    .expect(getCounterText())
+    .eql('2');
+});
+
+test('should change if async button clicked and a second later', async (t) => {
+  await t
+    .click(asyncButton)
+    .expect(getCounterText())
+    .eql('0')
+    .expect(getCounterText())
+    .eql('1');
+});
+
+test('should back to home if back button clicked', async (t) => {
+  await t
+    .click('[data-tid="backButton"] > a')
+    .expect(Selector('[data-tid="container"]').visible)
+    .ok();
+});

enlightApp/test/features/counter/Counter.spec.tsx

@@ -0,0 +1,139 @@
+/* eslint react/jsx-props-no-spreading: off, @typescript-eslint/ban-ts-comment: off */
+import React from 'react';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import { BrowserRouter as Router } from 'react-router-dom';
+import renderer from 'react-test-renderer';
+import { Provider } from 'react-redux';
+import { configureStore } from '@reduxjs/toolkit';
+import Counter from '../../../app/features/counter/Counter';
+import * as counterSlice from '../../../app/features/counter/counterSlice';
+
+Enzyme.configure({ adapter: new Adapter() });
+jest.useFakeTimers();
+
+function setup(
+  preloadedState: { counter: { value: number } } = { counter: { value: 1 } }
+) {
+  const store = configureStore({
+    reducer: { counter: counterSlice.default },
+    preloadedState,
+  });
+
+  const getWrapper = () =>
+    mount(
+      <Provider store={store}>
+        <Router>
+          <Counter />
+        </Router>
+      </Provider>
+    );
+  const component = getWrapper();
+  return {
+    store,
+    component,
+    buttons: component.find('button'),
+    p: component.find('.counter'),
+  };
+}
+
+describe('Counter component', () => {
+  it('should should display count', () => {
+    const { p } = setup();
+    expect(p.text()).toMatch(/^1$/);
+  });
+
+  it('should first button should call increment', () => {
+    const { buttons } = setup();
+    const incrementSpy = jest.spyOn(counterSlice, 'increment');
+
+    buttons.at(0).simulate('click');
+    expect(incrementSpy).toBeCalled();
+    incrementSpy.mockRestore();
+  });
+
+  it('should match exact snapshot', () => {
+    const { store } = setup();
+    const tree = renderer
+      .create(
+        <Provider store={store}>
+          <Router>
+            <Counter />
+          </Router>
+        </Provider>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should second button should call decrement', () => {
+    const { buttons } = setup();
+    const decrementSyp = jest.spyOn(counterSlice, 'decrement');
+    buttons.at(1).simulate('click');
+    expect(decrementSyp).toBeCalled();
+    decrementSyp.mockRestore();
+  });
+
+  it('should third button should call incrementIfOdd', () => {
+    const { buttons } = setup();
+    const incrementIfOdd = jest.spyOn(counterSlice, 'incrementIfOdd');
+    buttons.at(2).simulate('click');
+    expect(incrementIfOdd).toBeCalled();
+    incrementIfOdd.mockRestore();
+  });
+
+  it('should fourth button should call incrementAsync', () => {
+    const { buttons } = setup();
+    const incrementAsync = jest.spyOn(counterSlice, 'incrementAsync');
+    buttons.at(3).simulate('click');
+    expect(incrementAsync).toBeCalled();
+    incrementAsync.mockRestore();
+  });
+
+  it('should display updated count after increment button click', () => {
+    const { buttons, p } = setup();
+    buttons.at(0).simulate('click');
+    expect(p.text()).toMatch(/^2$/);
+  });
+
+  it('should display updated count after decrement button click', () => {
+    const { buttons, p } = setup();
+    buttons.at(1).simulate('click');
+    expect(p.text()).toMatch(/^0$/);
+  });
+
+  it('shouldnt change if even and if odd button clicked', () => {
+    const { buttons, p } = setup({ counter: { value: 2 } });
+    buttons.at(2).simulate('click');
+    expect(p.text()).toMatch(/^2$/);
+  });
+
+  it('should change if odd and if odd button clicked', () => {
+    const { buttons, p } = setup({ counter: { value: 1 } });
+    buttons.at(2).simulate('click');
+    expect(p.text()).toMatch(/^2$/);
+  });
+});
+
+describe('Test counter actions', () => {
+  it('should not call incrementAsync before timer', () => {
+    const fn = counterSlice.incrementAsync(1000);
+    expect(fn).toBeInstanceOf(Function);
+    const dispatch = jest.fn();
+    // @ts-ignore
+    fn(dispatch);
+    jest.advanceTimersByTime(500);
+    expect(dispatch).not.toBeCalled();
+  });
+
+  it('should call incrementAsync after timer', () => {
+    const fn = counterSlice.incrementAsync(1000);
+    expect(fn).toBeInstanceOf(Function);
+    const dispatch = jest.fn();
+    // @ts-ignore
+    fn(dispatch);
+    jest.advanceTimersByTime(1001);
+    expect(dispatch).toBeCalled();
+  });
+});

enlightApp/test/features/counter/__snapshots__/Counter.spec.tsx.snap

@@ -0,0 +1,65 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Counter component should match exact snapshot 1`] = `
+<div>
+  <div
+    className="backButton"
+    data-tid="backButton"
+  >
+    <a
+      href="/"
+      onClick={[Function]}
+    >
+      <i
+        className="fa fa-arrow-left fa-3x"
+      />
+    </a>
+  </div>
+  <div
+    className="counter counter"
+    data-tid="counter"
+  >
+    1
+  </div>
+  <div
+    className="btnGroup"
+  >
+    <button
+      className="btn"
+      data-tclass="btn"
+      onClick={[Function]}
+      type="button"
+    >
+      <i
+        className="fa fa-plus"
+      />
+    </button>
+    <button
+      className="btn"
+      data-tclass="btn"
+      onClick={[Function]}
+      type="button"
+    >
+      <i
+        className="fa fa-minus"
+      />
+    </button>
+    <button
+      className="btn"
+      data-tclass="btn"
+      onClick={[Function]}
+      type="button"
+    >
+      odd
+    </button>
+    <button
+      className="btn"
+      data-tclass="btn"
+      onClick={[Function]}
+      type="button"
+    >
+      async
+    </button>
+  </div>
+</div>
+`;

enlightApp/test/reducers/__snapshots__/counter.spec.ts.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`reducers counter should handle DECREMENT_COUNTER 1`] = `
+Object {
+  "value": 0,
+}
+`;
+
+exports[`reducers counter should handle INCREMENT_COUNTER 1`] = `
+Object {
+  "value": 2,
+}
+`;
+
+exports[`reducers counter should handle initial state 1`] = `
+Object {
+  "value": 0,
+}
+`;
+
+exports[`reducers counter should handle unknown action type 1`] = `
+Object {
+  "value": 1,
+}
+`;

enlightApp/test/reducers/counter.spec.ts

@@ -0,0 +1,31 @@
+import { AnyAction } from 'redux';
+import counterReducer, {
+  increment,
+  decrement,
+} from '../../app/features/counter/counterSlice';
+
+describe('reducers', () => {
+  describe('counter', () => {
+    it('should handle initial state', () => {
+      expect(counterReducer(undefined, {} as AnyAction)).toMatchSnapshot();
+    });
+
+    it('should handle INCREMENT_COUNTER', () => {
+      expect(
+        counterReducer({ value: 1 }, { type: increment })
+      ).toMatchSnapshot();
+    });
+
+    it('should handle DECREMENT_COUNTER', () => {
+      expect(
+        counterReducer({ value: 1 }, { type: decrement })
+      ).toMatchSnapshot();
+    });
+
+    it('should handle unknown action type', () => {
+      expect(
+        counterReducer({ value: 1 }, { type: 'unknown' })
+      ).toMatchSnapshot();
+    });
+  });
+});