Merge branch 'develop' into dewanshmobile/FAB

Author: lindapaiste

.storybook/preview-head.html

@@ -0,0 +1,5 @@
+<script>
+    // https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/176#issuecomment-683150213
+    window.$RefreshReg$ = () => {};
+    window.$RefreshSig$ = () => () => {};
+</script>

client/common/ButtonOrLink.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen, fireEvent } from '../test-utils';
+import { render, screen, fireEvent, waitFor, history } from '../test-utils';
 import ButtonOrLink from './ButtonOrLink';
 
 describe('ButtonOrLink', () => {
@@ -25,8 +25,12 @@ describe('ButtonOrLink', () => {
     expect(link).toHaveAttribute('href', 'https://p5js.org');
   });
 
-  it('can render an internal link with react-router', () => {
+  it('can render an internal link with react-router', async () => {
     render(<ButtonOrLink href="/about">About</ButtonOrLink>);
-    // TODO: how can this be tested? Needs a router provider?
+
+    const link = screen.getByText('About');
+    fireEvent.click(link);
+
+    await waitFor(() => expect(history.location.pathname).toEqual('/about'));
   });
 });

client/modules/IDE/components/Modal.stories.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import Modal from './Modal';
+
+export default {
+  title: 'IDE/Modal',
+  component: Modal,
+  argTypes: {
+    onClose: { action: 'onClose' }
+  }
+};
+
+export const ModalDefault = {
+  args: {
+    title: 'Example Modal Title',
+    children: <p>Example modal body</p>
+  }
+};

client/modules/IDE/components/Modal.unit.test.jsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { fireEvent, render, screen } from '../../../test-utils';
+import Modal from './Modal';
+
+describe('Modal', () => {
+  it('can render title', () => {
+    render(
+      <Modal title="Foo" closeAriaLabel="Foo" onClose={jest.fn()}>
+        Bar
+      </Modal>
+    );
+
+    expect(screen.getByRole('heading', { name: 'Foo' })).toBeVisible();
+  });
+
+  it('can render child content', () => {
+    render(
+      <Modal title="Foo" closeAriaLabel="Foo" onClose={jest.fn()}>
+        Bar
+      </Modal>
+    );
+
+    expect(screen.getByText('Bar')).toBeVisible();
+  });
+
+  it('can call onClose when close button clicked', () => {
+    const handleClose = jest.fn();
+    render(
+      <Modal title="Foo" closeAriaLabel="Foo" onClose={handleClose}>
+        Bar
+      </Modal>
+    );
+
+    const buttonEl = screen.getByRole('button');
+    fireEvent.click(buttonEl);
+
+    expect(handleClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('can call onClose when click event occurs in a parent node', () => {
+    const handleClose = jest.fn();
+    render(
+      <div>
+        <h1>Parent</h1>
+        <Modal title="Foo" closeAriaLabel="Foo" onClose={handleClose}>
+          Bar
+        </Modal>
+      </div>
+    );
+
+    const headingEl = screen.getByRole('heading', { name: 'Parent' });
+    fireEvent.click(headingEl);
+
+    expect(handleClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('can ignore click event for closing when it occurs inside component', () => {
+    const handleClose = jest.fn();
+    render(
+      <Modal title="Foo" closeAriaLabel="Foo" onClose={handleClose}>
+        Bar
+      </Modal>
+    );
+
+    const headingEl = screen.getByRole('heading', { name: 'Foo' });
+    fireEvent.click(headingEl);
+
+    expect(handleClose).not.toHaveBeenCalled();
+  });
+});

client/test-utils.js

@@ -16,15 +16,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Provider } from 'react-redux';
 import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
 import { I18nextProvider } from 'react-i18next';
 import { ThemeProvider as StyledThemeProvider } from 'styled-components';
 
-import browserHistory from './browserHistory';
 import i18n from './i18n-test';
 import ThemeProvider from './modules/App/components/ThemeProvider';
 import configureStore from './store';
 import theme, { Theme } from './theme';
 
+export const history = createMemoryHistory();
+
 // re-export everything
 // eslint-disable-next-line import/no-extraneous-dependencies
 export * from '@testing-library/react';
@@ -33,7 +35,7 @@ const Providers = ({ children }) => (
   // eslint-disable-next-line react/jsx-filename-extension
   <StyledThemeProvider theme={{ ...theme[Theme.light] }}>
     <I18nextProvider i18n={i18n}>
-      <Router history={browserHistory}>{children}</Router>
+      <Router history={history}>{children}</Router>
     </I18nextProvider>
   </StyledThemeProvider>
 );
@@ -51,7 +53,7 @@ function reduxRender(
       <I18nextProvider i18n={i18n}>
         <Provider store={store}>
           <ThemeProvider>
-            <Router history={browserHistory}>{children}</Router>
+            <Router history={history}>{children}</Router>
           </ThemeProvider>
         </Provider>
       </I18nextProvider>

server/views/index.js

@@ -12,7 +12,7 @@ export function renderIndex() {
       ${process.env.NODE_ENV === 'production' ? `<link rel='stylesheet' href='${assetsManifest['/app.css']}' />` : ''}
       <link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
       <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
-      <link rel='shortcut icon' href='favicon.ico' type='image/x-icon' / >
+      <link rel='shortcut icon' href='/favicon.ico' type='image/x-icon' / >
       <script>
         if (!window.process) {
           window.process = {};