Chore/tests (#73)

* chore/tests: install testing libraries
* chore/tests: upgrade dependencies
* chore/tests: configure linters
* chore/tests: add basic component tests
* chore/tests: version bump

client/src/App.test.js

@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

client/src/features/control/__tests__/MessageControl.test.js

@@ -0,0 +1,36 @@
+import { render, screen } from '@testing-library/react';
+import SocketProvider from 'app/context/socketContext';
+import MessageControl from '../MessageControl';
+
+// need to inject the socket provider to make component
+// render without failing
+const MockMessageControl = () => {
+  return (
+    <SocketProvider>
+      <MessageControl />
+    </SocketProvider>
+  );
+};
+
+describe('Message Control input blocks', () => {
+  test('Presenter dialog', async () => {
+    // Presenter dialog and button
+    // substring match, ignore case
+    render(<MockMessageControl />);
+    expect(screen.getByPlaceholderText(/presenter/i)).toBeInTheDocument();
+  });
+
+  test('Public dialog', async () => {
+    // Public dialog and button
+    // substring match, ignore case
+    render(<MockMessageControl />);
+    expect(screen.getByPlaceholderText(/public/i)).toBeInTheDocument();
+  });
+
+  test('Lower third', async () => {
+    // Lower third dialog and button
+    // substring match, ignore case
+    render(<MockMessageControl />);
+    expect(screen.getByPlaceholderText(/lower third/i)).toBeInTheDocument();
+  });
+});

client/src/features/control/__tests__/PlaybackControl.test.js

@@ -0,0 +1,18 @@
+import { render, screen } from '@testing-library/react';
+import SocketProvider from 'app/context/socketContext';
+import PlaybackControl from '../PlaybackControl';
+
+test('check that playback control renders', async () => {
+  // need to inject the socket provider to make component
+  // render without failing
+  render(
+    <SocketProvider>
+      <PlaybackControl />
+    </SocketProvider>
+  );
+
+  // Text labels for times
+  // substring match, ignore case
+  expect(screen.getByText(/started/i)).toBeInTheDocument();
+  expect(screen.getByText(/finish/i)).toBeInTheDocument();
+});

client/src/features/info/__tests__/Info.test.js

@@ -0,0 +1,23 @@
+import { render, screen } from '@testing-library/react';
+import SocketProvider from 'app/context/socketContext';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import Info from '../Info';
+
+const queryClient = new QueryClient();
+
+test('check static info render', async () => {
+  // need to inject the socket provider to make component
+  // render without failing
+  render(
+    <QueryClientProvider client={queryClient}>
+      <SocketProvider>
+        <Info />
+      </SocketProvider>
+    </QueryClientProvider>
+  );
+
+  // Info titles
+  // substring match, ignore case
+  expect(screen.getByText(/running/i)).toBeInTheDocument();
+  expect(screen.getByText(/event/i)).toBeInTheDocument();
+});

client/src/features/menu/__tests__/EventListMenu.test.js

@@ -0,0 +1,21 @@
+import { render, screen } from '@testing-library/react';
+import MenuBar from "../MenuBar";
+import {queryClientMock} from "../../../__mocks__/QueryClient.mock";
+import {QueryClientProvider} from "react-query";
+
+const onOpenHandler = jest.fn();
+const renderInMock = () => {
+  render(
+    <QueryClientProvider client={queryClientMock}>
+      <MenuBar onOpen={onOpenHandler} />
+    </QueryClientProvider>
+  )
+};
+
+test('check that menu bar renders correctly', () => {
+  // need to inject the react query provider
+  renderInMock();
+
+  const nButtons = screen.getAllByRole("button").length;
+  expect(nButtons).toBe(7);
+});

client/src/features/menu/__tests__/MenuActionButtons.test.js

@@ -0,0 +1,18 @@
+import { render, screen } from '@testing-library/react';
+import MenuActionButtons from "../MenuActionButtons";
+
+const actionHandler = jest.fn();
+const renderInMock = () => {
+  render(<MenuActionButtons actionHandler={actionHandler} />)
+};
+
+test('check that menu bar renders correctly', () => {
+  // need to inject the react query provider
+  renderInMock();
+
+  const b = screen.getByRole('button', {
+    name: /create menu/i
+  })
+
+  expect(b).toBeInTheDocument();
+});

client/src/features/menu/__tests__/MenuBar.test.js

@@ -0,0 +1,21 @@
+import { render, screen } from '@testing-library/react';
+import MenuBar from "../MenuBar";
+import {queryClientMock} from "../../../__mocks__/QueryClient.mock";
+import {QueryClientProvider} from "react-query";
+
+const onOpenHandler = jest.fn();
+const renderInMock = () => {
+  render(
+    <QueryClientProvider client={queryClientMock}>
+      <MenuBar onOpen={onOpenHandler} />
+    </QueryClientProvider>
+  )
+};
+
+test('check that menu bar renders correctly', () => {
+  // need to inject the react query provider
+  renderInMock();
+
+  const nButtons = screen.getAllByRole("button").length;
+  expect(nButtons).toBe(7);
+});