Add more tests

package.json

@@ -23,8 +23,10 @@
     "@types/jest": "^27.4.0",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
+    "@types/react-test-renderer": "^17.0.1",
     "jest": "^27.4.7",
     "laravel-mix": "^6.0.27",
+    "react-test-renderer": "^17.0.2",
     "sass": "^1.37.5",
     "sass-loader": "^12.1.0",
     "ts-loader": "^9.2.6",

src/components/Button.spec.tsx

@@ -0,0 +1,43 @@
+import { fireEvent, render, screen, within } from '@testing-library/react';
+import Button from './Button';
+
+describe('<Button />', () => {
+  it('passes props correctly', () => {
+    const mockOnClick = jest.fn();
+
+    render(
+      <Button
+        className="foo"
+        href="https://bar.com"
+        icon="back"
+        onClick={mockOnClick}
+        text="baz"
+      />
+    );
+
+    const icon = screen.getByTestId('icon-back');
+    const button = screen.getByRole('link');
+
+    expect(icon).toBeInTheDocument();
+    expect(button).toHaveClass('foo');
+    expect(button).toHaveAttribute('href', 'https://bar.com');
+    expect(button).toHaveTextContent('baz');
+
+    fireEvent.click(button);
+
+    expect(mockOnClick).toHaveBeenCalled();
+  });
+
+  it('responds to small prop correctly', () => {
+    render(
+      // @ts-expect-error TODO: Fix params that should be optional in ts refactor.
+      <Button small href="https://bar.com" icon="back" />
+    );
+
+    const icon = screen.getByTestId('icon-back');
+
+    expect(icon).toHaveAttribute('height', '18');
+    expect(icon).toHaveAttribute('width', '18');
+    expect(icon).toHaveClass('me-1');
+  });
+});

src/components/Icon.tsx

@@ -58,8 +58,9 @@ type IconProps = {
 export default function Icon({ icon, size = 20, className }: IconProps) {
   const paths = icons[icon as keyof typeof icons];
 
-  return paths ? (
+  return (
     <svg
+      data-testid={`icon-${icon}`}
       className={className}
       fill="currentColor"
       height={size}
@@ -70,5 +71,5 @@ export default function Icon({ icon, size = 20, className }: IconProps) {
         <path key={index} fillRule="evenodd" d={path} />
       ))}
     </svg>
-  ) : null;
+  );
 }

src/components/Link.spec.tsx

@@ -0,0 +1,50 @@
+import { screen, render, fireEvent } from '@testing-library/react';
+import { Meeting } from '../types/Meeting';
+import Link from './Link';
+import { settings } from '../helpers/settings';
+
+jest.mock('../helpers/settings');
+
+let mockSettings = jest.mocked(settings);
+
+const mockMeeting: Meeting = {
+  name: 'Foo',
+  types: ['M'],
+  slug: 'bar-baz',
+} as Meeting;
+
+describe('<Link />', () => {
+  it('works without props', () => {
+    const { container } = render(
+      <Link meeting={mockMeeting} state={null} setState={null} />
+    );
+
+    expect(container.firstChild.nodeValue).toBe('Foo');
+  });
+
+  it('works with flags', () => {
+    mockSettings.flags = ['M'];
+
+    render(<Link meeting={mockMeeting} state={null} setState={null} />);
+
+    expect(screen.getByText(/men/i)).toBeInTheDocument();
+  });
+
+  it('works with setState', () => {
+    const mockSetState = jest.fn();
+
+    render(<Link meeting={mockMeeting} state={{}} setState={mockSetState} />);
+
+    const link = screen.getByRole('link');
+
+    expect(link).toHaveAttribute('href', 'https://test.com/');
+    expect(link).toHaveTextContent(/foo/i);
+    expect(screen.getByText(/men/i)).toBeInTheDocument();
+
+    fireEvent.click(link);
+
+    expect(mockSetState).toHaveBeenCalledWith({
+      input: { meeting: 'bar-baz' },
+    });
+  });
+});

src/components/Loading.spec.tsx

@@ -0,0 +1,7 @@
+import renderer from 'react-test-renderer';
+import Loading from './Loading';
+
+test('<Loading />', () => {
+  const tree = renderer.create(<Loading />).toJSON();
+  expect(tree).toMatchSnapshot();
+});

src/components/__snapshots__/Loading.spec.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Loading /> 1`] = `
+<div
+  className="align-items-center d-flex flex-grow-1 h-100 justify-content-center loading"
+>
+  <div
+    className="m-5 spinner-border text-secondary"
+  />
+</div>
+`;

yarn.lock

@@ -1621,6 +1621,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-test-renderer@^17.0.1":
+  version "17.0.1"
+  resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-17.0.1.tgz#3120f7d1c157fba9df0118dae20cb0297ee0e06b"
+  integrity sha512-3Fi2O6Zzq/f3QR9dRnlnHso9bMl7weKCviFmfF6B4LS1Uat6Hkm15k0ZAQuDz+UBq6B3+g+NM6IT2nr5QgPzCw==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@^17.0.38":
   version "17.0.39"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.39.tgz#d0f4cde092502a6db00a1cded6e6bf2abb7633ce"
@@ -5937,16 +5944,16 @@ react-infinite-scroller@^1.2.4:
   dependencies:
     prop-types "^15.5.8"
 
+"react-is@^16.12.0 || ^17.0.0", react-is@^17.0.1, react-is@^17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
+  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
+
 react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-is@^17.0.1:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
-  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
-
 react-map-gl@^6.1.16:
   version "6.1.19"
   resolved "https://registry.yarnpkg.com/react-map-gl/-/react-map-gl-6.1.19.tgz#7c5e2d6c0ba582376157af942fa004fe6f3c28b8"
@@ -5961,6 +5968,24 @@ react-map-gl@^6.1.16:
     resize-observer-polyfill "^1.5.1"
     viewport-mercator-project "^7.0.4"
 
+react-shallow-renderer@^16.13.1:
+  version "16.14.1"
+  resolved "https://registry.yarnpkg.com/react-shallow-renderer/-/react-shallow-renderer-16.14.1.tgz#bf0d02df8a519a558fd9b8215442efa5c840e124"
+  integrity sha512-rkIMcQi01/+kxiTE9D3fdS959U1g7gs+/rborw++42m1O9FAQiNI/UNRZExVUoAOprn4umcXf+pFRou8i4zuBg==
+  dependencies:
+    object-assign "^4.1.1"
+    react-is "^16.12.0 || ^17.0.0"
+
+react-test-renderer@^17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-17.0.2.tgz#4cd4ae5ef1ad5670fc0ef776e8cc7e1231d9866c"
+  integrity sha512-yaQ9cB89c17PUb0x6UfWRs7kQCorVdHlutU1boVPEsB8IDZH6n9tHxMacc3y0JoXOJUsZb/t/Mb8FUWMKaM7iQ==
+  dependencies:
+    object-assign "^4.1.1"
+    react-is "^17.0.2"
+    react-shallow-renderer "^16.13.1"
+    scheduler "^0.20.2"
+
 react@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"