Add basic frontend test.

__tests__/src/components/CubeListPage.test.js

@@ -1,24 +1,46 @@
 import React from 'react'
-import { render, fireEvent, waitForElement } from '@testing-library/react'
+import { FetchMock } from '@react-mock/fetch';
+import { render, fireEvent, waitForElement, wait } from '@testing-library/react'
 import '@testing-library/jest-dom/extend-expect'
 
 import exampleCardsFull from '../../../fixtures/examplecardsdetails';
 import CubeListPage from 'components/CubeListPage';
+import { treeCache } from 'components/AutocompleteInput';
+import { act } from 'react-dom/test-utils';
 
-const element = () =><CubeListPage cards={exampleCardsFull} cubeID="1" canEdit={true} maybe={exampleCardsFull} defaultTagColors={[]} defaultShowTagColors={true} defaultSorts={['Color Category', 'Types-Multicolor']} />;
+const element = () => (
+  <FetchMock
+    mocks={[
+      { matcher: '/cube/api/cardnames', response: { success: 'true' } },
+      { matcher: '/cube/api/cubecardnames/1', response: { success: 'true' } },
+    ]}
+  >
+    <CubeListPage cards={exampleCardsFull} cubeID="1" canEdit={true} maybe={exampleCardsFull} defaultTagColors={[]} defaultShowTagColors={true} defaultSorts={['Color Category', 'Types-Multicolor']} />;
+  </FetchMock>
+);
 
-describe('CubeListPage', () => {
-  test('displays cards', () => {
-    const { getByText } = render(element());
+test('CubeListPage has major functionality', async () => {
+  const { findByPlaceholderText, findByText, getAllByText, getByDisplayValue, getByPlaceholderText, getByText } = render(element());
 
-    expect(getByText('Ayara, First of Locthwain'));
-  });
+  expect(getByText(exampleCardsFull[0].details.name));
 
-  test('opens edit collapse', () => {
-    const { getByPlaceholderText, getByText } = render(element());
+  // TODO: These tests should be in their own files.
+  // Test Edit Collapse
+  fireEvent.click(getByText('Add/Remove'));
+  await findByPlaceholderText('Card to Remove');
 
-    fireEvent.click(getByText('Add/Remove'));
+  // Avoid act warnings.
+  await act(() => Promise.all(Object.values(treeCache)));
 
-    expect(getByPlaceholderText('Card to Add'));
-  });
+  expect(getByPlaceholderText('Card to Remove')).toBeInTheDocument();
+
+  // Test Sort Collapse
+  fireEvent.click(getByText('Sort'));
+  await findByText('Primary Sort');
+  fireEvent.change(getByDisplayValue('Color Category'), { target: { value: 'Color Identity' } });
+  fireEvent.change(getByDisplayValue('Types-Multicolor'), { target: { value: 'Unsorted' } });
+
+  for (const card of exampleCardsFull) {
+    expect(getAllByText(card.details.name).length).toBeGreaterThan(0);
+  }
 });

package.json

@@ -20,6 +20,7 @@
   "sideEffects": "false",
   "browserslist": "> 0.5%, Firefox ESR, not dead, not IE > 0, not IE_Mob > 0, not safari < 7, not kaios > 0",
   "dependencies": {
+    "@react-mock/fetch": "^0.3.0",
     "bad-words": "^3.0.3",
     "bcryptjs": "^2.4.3",
     "body-parser": "^1.19.0",

src/components/AutocompleteInput.js

@@ -165,7 +165,7 @@ deepmerge.all = function deepmergeAll(array, optionsArgument) {
 };
 
 // Map URL => Promise returning tree
-const treeCache = {};
+export const treeCache = {};
 
 const fetchTree = async (treeUrl, treePath) => {
   const response = await fetch(treeUrl);

src/components/CSRFForm.js

@@ -6,7 +6,7 @@ import { getCsrfToken } from '../util/CSRF';
 
 const CSRFForm = forwardRef(({ children, ...props }, ref) => (
   <Form ref={ref} {...props}>
-    <Input type="hidden" name="_csrf" value={getCsrfToken()} />
+    <Input type="hidden" name="_csrf" value={getCsrfToken() || ''} />
     {children}
   </Form>
 ));