Reorganize file locations/directory structure (#270)

Reorganize file locations

testUtils/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "react/jsx-pascal-case": 0
+  }
+}

testUtils/__snapshots__/enzymeHelpers.test.jsx.snap

@@ -0,0 +1,58 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`mountWithContexts injected ConfigProvider should mount and render with custom Config value 1`] = `
+<Foo>
+  <div>
+    Fizz
+    1.1
+  </div>
+</Foo>
+`;
+
+exports[`mountWithContexts injected ConfigProvider should mount and render with default values 1`] = `
+<Foo>
+  <div />
+</Foo>
+`;
+
+exports[`mountWithContexts injected I18nProvider should mount and render 1`] = `
+<div>
+  <span>
+    Text content
+  </span>
+</div>
+`;
+
+exports[`mountWithContexts injected I18nProvider should mount and render deeply nested consumer 1`] = `
+<Parent>
+  <WithI18n>
+    <I18n
+      update={true}
+      withHash={true}
+    >
+      <Component
+        i18n={"/i18n/"}
+      >
+        <div>
+          Text content
+        </div>
+      </Component>
+    </I18n>
+  </WithI18n>
+</Parent>
+`;
+
+exports[`mountWithContexts injected Router should mount and render 1`] = `
+<div>
+  <Link
+    replace={false}
+    to="/"
+  >
+    <a
+      onClick={[Function]}
+    >
+      home
+    </a>
+  </Link>
+</div>
+`;

testUtils/apiReusable.jsx

@@ -0,0 +1,34 @@
+// eslint-disable-next-line import/prefer-default-export
+export function describeNotificationMixin (Model, name) {
+  describe(name, () => {
+    const mockHttp = ({ post: jest.fn(() => Promise.resolve()) });
+    const ModelAPI = new Model(mockHttp);
+
+    afterEach(() => {
+      jest.clearAllMocks();
+    });
+
+    const parameters = [
+      ['success', true],
+      ['success', false],
+      ['error', true],
+      ['error', false],
+    ];
+    parameters.forEach(([type, state]) => {
+      const label = `[notificationType=${type}, associationState=${state}]`;
+      const testName = `updateNotificationTemplateAssociation ${label} makes expected http calls`;
+
+      test(testName, async (done) => {
+        await ModelAPI.updateNotificationTemplateAssociation(1, 21, type, state);
+
+        const expectedPath = `${ModelAPI.baseUrl}1/notification_templates_${type}/`;
+        expect(mockHttp.post).toHaveBeenCalledTimes(1);
+
+        const expectedParams = state ? { id: 21 } : { id: 21, disassociate: true };
+        expect(mockHttp.post.mock.calls.pop()).toEqual([expectedPath, expectedParams]);
+
+        done();
+      });
+    });
+  });
+}

testUtils/enzymeHelpers.jsx

@@ -0,0 +1,156 @@
+/*
+ * Enzyme helpers for injecting top-level contexts
+ * derived from https://lingui.js.org/guides/testing.html
+ */
+import React from 'react';
+import { shape, object, string, arrayOf } from 'prop-types';
+import { mount, shallow } from 'enzyme';
+import { I18nProvider } from '@lingui/react';
+import { ConfigProvider } from '../src/contexts/Config';
+
+const language = 'en-US';
+const intlProvider = new I18nProvider(
+  {
+    language,
+    catalogs: {
+      [language]: {}
+    }
+  },
+  {}
+);
+const {
+  linguiPublisher: { i18n: originalI18n }
+} = intlProvider.getChildContext();
+
+const defaultContexts = {
+  linguiPublisher: {
+    i18n: {
+      ...originalI18n,
+      _: key => key.id, // provide _ macro, for just passing down the key
+      toJSON: () => '/i18n/',
+    },
+  },
+  config: {
+    ansible_version: null,
+    custom_virtualenvs: [],
+    version: null,
+    toJSON: () => '/config/'
+  },
+  router: {
+    history: {
+      push: () => {},
+      replace: () => {},
+      createHref: () => {},
+      location: {
+        hash: '',
+        pathname: '',
+        search: '',
+        state: '',
+      },
+      toJSON: () => '/history/',
+    },
+    route: {
+      location: {
+        hash: '',
+        pathname: '',
+        search: '',
+        state: '',
+      },
+      match: {
+        params: {},
+        isExact: false,
+        path: '',
+        url: '',
+      }
+    },
+    toJSON: () => '/router/',
+  },
+};
+
+function wrapContexts (node, context) {
+  const { config } = context;
+  class Wrap extends React.Component {
+    render () {
+      // eslint-disable-next-line react/no-this-in-sfc
+      const { children, ...props } = this.props;
+      const component = React.cloneElement(children, props);
+      return (
+        <ConfigProvider value={config}>
+          {component}
+        </ConfigProvider>
+      );
+    }
+  }
+
+  return (
+    <Wrap>{node}</Wrap>
+  );
+}
+
+function applyDefaultContexts (context) {
+  if (!context) {
+    return defaultContexts;
+  }
+  const newContext = {};
+  Object.keys(defaultContexts).forEach(key => {
+    newContext[key] = {
+      ...defaultContexts[key],
+      ...context[key],
+    };
+  });
+  return newContext;
+}
+
+export function shallowWithContexts (node, options = {}) {
+  const context = applyDefaultContexts(options.context);
+  return shallow(wrapContexts(node, context));
+}
+
+export function mountWithContexts (node, options = {}) {
+  const context = applyDefaultContexts(options.context);
+  const childContextTypes = {
+    linguiPublisher: shape({
+      i18n: object.isRequired
+    }).isRequired,
+    config: shape({
+      ansible_version: string,
+      custom_virtualenvs: arrayOf(string),
+      version: string,
+    }),
+    router: shape({
+      route: shape({
+        location: shape({}),
+        match: shape({}),
+      }).isRequired,
+      history: shape({}).isRequired,
+    }),
+    ...options.childContextTypes
+  };
+  return mount(wrapContexts(node, context), { context, childContextTypes });
+}
+
+/**
+ * Wait for element(s) to achieve a desired state.
+ *
+ * @param[wrapper] - A ReactWrapper instance
+ * @param[selector] - The selector of the element(s) to wait for.
+ * @param[callback] - Callback to poll - by default this checks for a node count of 1.
+ */
+export function waitForElement (wrapper, selector, callback = el => el.length === 1) {
+  const interval = 100;
+  return new Promise((resolve, reject) => {
+    let attempts = 30;
+    (function pollElement () {
+      wrapper.update();
+      const el = wrapper.find(selector);
+      if (callback(el)) {
+        return resolve(el);
+      }
+      if (--attempts <= 0) {
+        const message = `Expected condition for <${selector}> not met: ${callback.toString()}`;
+        return reject(new Error(message));
+      }
+      return setTimeout(pollElement, interval);
+    }());
+  });
+}

testUtils/enzymeHelpers.test.jsx

@@ -0,0 +1,161 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { mountWithContexts, waitForElement } from './enzymeHelpers';
+import { Config } from '../src/contexts/Config';
+
+describe('mountWithContexts', () => {
+  describe('injected I18nProvider', () => {
+    test('should mount and render', () => {
+      const Child = withI18n()(({ i18n }) => (
+        <div>
+          <span>{i18n._(t`Text content`)}</span>
+        </div>
+      ));
+      const wrapper = mountWithContexts(<Child />);
+      expect(wrapper.find('div')).toMatchSnapshot();
+    });
+
+    test('should mount and render deeply nested consumer', () => {
+      const Child = withI18n()(({ i18n }) => (
+        <div>{i18n._(t`Text content`)}</div>
+      ));
+      const Parent = () => (<Child />);
+      const wrapper = mountWithContexts(<Parent />);
+      expect(wrapper.find('Parent')).toMatchSnapshot();
+    });
+  });
+
+  describe('injected Router', () => {
+    it('should mount and render', () => {
+      const wrapper = mountWithContexts(
+        <div>
+          <Link to="/">home</Link>
+        </div>
+      );
+
+      expect(wrapper.find('div')).toMatchSnapshot();
+    });
+
+    it('should mount and render with stubbed context', () => {
+      const context = {
+        router: {
+          history: {
+            push: jest.fn(),
+            replace: jest.fn(),
+            createHref: jest.fn(),
+          },
+          route: {
+            location: {},
+            match: {}
+          }
+        }
+      };
+      const wrapper = mountWithContexts(
+        (
+          <div>
+            <Link to="/">home</Link>
+          </div>
+        ),
+        { context }
+      );
+
+      const link = wrapper.find('Link');
+      expect(link).toHaveLength(1);
+      link.simulate('click', { button: 0 });
+      wrapper.update();
+
+      expect(context.router.history.push).toHaveBeenCalledWith('/');
+    });
+  });
+
+  describe('injected ConfigProvider', () => {
+    it('should mount and render with default values', () => {
+      const Foo = () => (
+        <Config>
+          {value => (
+            <div>
+              {value.custom_virtualenvs[0]}
+              {value.version}
+            </div>
+          )}
+        </Config>
+      );
+      const wrapper = mountWithContexts(<Foo />);
+      expect(wrapper.find('Foo')).toMatchSnapshot();
+    });
+
+    it('should mount and render with custom Config value', () => {
+      const config = {
+        custom_virtualenvs: ['Fizz', 'Buzz'],
+        version: '1.1',
+      };
+      const Foo = () => (
+        <Config>
+          {value => (
+            <div>
+              {value.custom_virtualenvs[0]}
+              {value.version}
+            </div>
+          )}
+        </Config>
+      );
+      const wrapper = mountWithContexts(
+        <Foo />,
+        { context: { config } }
+      );
+      expect(wrapper.find('Foo')).toMatchSnapshot();
+    });
+  });
+});
+
+/**
+ * This is a fixture for testing async components. It renders a div
+ * after a short amount of time.
+ */
+class TestAsyncComponent extends Component {
+  constructor (props) {
+    super(props);
+    this.state = { displayElement: false };
+  }
+
+  componentDidMount () {
+    setTimeout(() => this.setState({ displayElement: true }), 500);
+  }
+
+  render () {
+    const { displayElement } = this.state;
+    if (displayElement) {
+      return (<div id="test-async-component" />);
+    }
+    return null;
+  }
+}
+
+describe('waitForElement', () => {
+  it('waits for the element and returns it', async (done) => {
+    const selector = '#test-async-component';
+    const wrapper = mountWithContexts(<TestAsyncComponent />);
+    expect(wrapper.exists(selector)).toEqual(false);
+
+    const elem = await waitForElement(wrapper, selector);
+    expect(elem.props().id).toEqual('test-async-component');
+    expect(wrapper.exists(selector)).toEqual(true);
+    done();
+  });
+
+  it('eventually throws an error for elements that don\'t exist', async (done) => {
+    const wrapper = mountWithContexts(<div />);
+
+    let error;
+    try {
+      await waitForElement(wrapper, '#does-not-exist');
+    } catch (err) {
+      error = err;
+    } finally {
+      expect(error).toEqual(new Error('Expected condition for <#does-not-exist> not met: el => el.length === 1'));
+      done();
+    }
+  });
+});

testUtils/testUtils.js

@@ -0,0 +1,4 @@
+
+const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+/* eslint-disable-next-line import/prefer-default-export */
+export { sleep };