setup github action for tests

.github/workflows/frontend.yml

@@ -0,0 +1,27 @@
+# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Test Frontend
+
+on: [push, pull_request]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [14.x, 16.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+      - run: npm ci
+      - run: npm run build --if-present
+      - run: npm test

package.json

@@ -10,6 +10,7 @@
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "@types/react-modal": "^3.13.1",
     "@types/styled-components": "^5.1.10",
     "lodash.debounce": "^4.0.8",
     "react": "^17.0.2",
@@ -35,7 +36,7 @@
   "scripts": {
     "start": "craco start",
     "build": "craco build",
-    "test": "craco test -- --config=config/jest.config.js",
+    "test": "craco test",
     "eject": "craco eject",
     "deploy": "dfx deploy --argument '(null)'",
     "prestart": "dfx start --background --no-artificial-delay || exit 0",

src/assets/fonts/CircularXX.css

@@ -19,26 +19,26 @@
   font-family: "CircularXX";
   font-weight: 100;
   src: local(CircularXX), local(CircularXXWeb-Light),
-    url(./CircularXXWeb-Light.woff2) format("woff2");
+    url(CircularXXWeb-Light.woff2) format("woff2");
 }
 
 @font-face {
   font-family: "CircularXX";
   font-weight: 400;
   src: local(CircularXX), local(CircularXXWeb-Book),
-    url(./CircularXXWeb-Book.woff2) format("woff2");
+    url(CircularXXWeb-Book.woff2) format("woff2");
 }
 
 @font-face {
   font-family: "CircularXX";
   font-weight: 700;
   src: local(CircularXX), local(CircularXXWeb-Medium),
-    url(./CircularXXWeb-Medium.woff) format("woff");
+    url(CircularXXWeb-Medium.woff) format("woff");
 }
 
 @font-face {
   font-family: "CircularXX";
   font-weight: 900;
   src: local(CircularXX), local(CircularXXWeb-Bold),
-    url(./CircularXXWeb-Bold.woff2) format("woff2");
+    url(CircularXXWeb-Bold.woff2) format("woff2");
 }

src/components/Explorer.tsx

@@ -217,7 +217,6 @@ export function Explorer({ state, ttl, logger }: ExplorerProps) {
         isOpen={showPackage}
         close={() => {
           setShowPackage(false);
-          setFileToModify("");
         }}
         loadPackage={loadPackage}
       />

src/components/PackageModal.tsx

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { useState, useContext } from "react";
+import { useContext } from "react";
 import { Modal } from "./shared/Modal";
 import { Button } from "./shared/Button";
 import { ListButton, SelectList } from "./shared/SelectList";

src/components/shared/Button.test.tsx

@@ -0,0 +1,18 @@
+import { render, screen } from "@testing-library/react";
+import { Button } from "./Button";
+
+describe("Button component", () => {
+  it("fires onClick once when clicked", () => {
+    const testFn = jest.fn();
+
+    render(<Button onClick={testFn}>Hello</Button>);
+
+    const buttonElement = screen.getByText(/hello/i);
+
+    expect(buttonElement).toBeInTheDocument();
+
+    buttonElement.click();
+
+    expect(testFn).toHaveBeenCalledTimes(1);
+  });
+});

src/components/shared/Button.tsx

@@ -13,26 +13,24 @@ export const Button = styled("button")<{
   padding: 0.6rem 1.6rem;
   font-size: 1.4rem;
   font-weight: 500;
-  height: ${(props) => (props.small ? "3.3rem" : "4.5rem")};
-  min-width: ${(props) => (props.small ? "5.6rem" : "7.8rem")};
-  ${(props) => (props.width ? `width: ${props.width}` : "")};
-  background-color: ${(props) =>
-    props.variant
-      ? props.variant === "primary"
+  height: ${({ small }) => (small ? "3.3rem" : "4.5rem")};
+  min-width: ${({ small }) => (small ? "5.6rem" : "7.8rem")};
+  ${({ width }) => (width ? `width: ${width}` : "")};
+  background-color: ${({ variant }) =>
+    variant
+      ? variant === "primary"
         ? "var(--colorPrimary)"
         : "white"
       : "var(--grey200)"};
-  color: ${(props) =>
-    props.variant === "primary"
+  color: ${({ variant }) =>
+    variant === "primary"
       ? "white"
-      : props.variant === "secondary"
+      : variant === "secondary"
       ? "var(--grey500)"
       : "var(--grey600)"};
-  border: ${(props) =>
-    `1px solid ${
-      props.variant === "secondary" ? "var(--grey400)" : "transparent"
-    }`};
-  border-radius: ${(props) => (props.small ? "1.7rem" : "2.3rem")};
+  border: ${({ variant }) =>
+    `1px solid ${variant === "secondary" ? "var(--grey400)" : "transparent"}`};
+  border-radius: ${({ small }) => (small ? "1.7rem" : "2.3rem")};
 
   &:not(:last-child) {
     margin-right: 2rem;
@@ -47,12 +45,10 @@ export const Button = styled("button")<{
   }
 
   &:hover {
-    background-color: ${(props) =>
-      props.variant === "primary"
-        ? "var(--colorPrimaryDark)"
-        : "var(--grey100)"};
-    ${(props) =>
-      !props.variant
+    background-color: ${({ variant }) =>
+      variant === "primary" ? "var(--colorPrimaryDark)" : "var(--grey100)"};
+    ${({ variant }) =>
+      !variant
         ? `color: var(--colorPrimary);
            border: 1px solid var(--grey300);
 

src/components/shared/Confirm.test.tsx

@@ -0,0 +1,61 @@
+import { useState } from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import { Confirm } from "./Confirm";
+
+describe("Confirm component", () => {
+  const confirmFn = jest.fn();
+  const cancelFn = jest.fn();
+
+  const StatefulConfirm = () => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <>
+        <button onClick={() => setIsOpen(true)}>Open Confirm</button>
+        <Confirm
+          isOpen={isOpen}
+          close={() => setIsOpen(false)}
+          onConfirm={confirmFn}
+          onCancel={cancelFn}
+        >
+          Hello
+        </Confirm>
+      </>
+    );
+  };
+
+  it("opens and calls the confirm function", async () => {
+    render(<StatefulConfirm />);
+
+    const buttonElement = screen.getByText(/open confirm/i);
+
+    buttonElement.click();
+
+    const confirmText = screen.getByText(/hello/i);
+    const confirmButton = screen.getByText(/continue/i);
+
+    await waitFor(() => expect(confirmText).toBeVisible());
+
+    confirmButton.click();
+
+    expect(confirmFn).toHaveBeenCalledTimes(1);
+    expect(confirmText).not.toBeVisible();
+  });
+
+  it("opens and calls the cancel function", async () => {
+    render(<StatefulConfirm />);
+    const buttonElement = screen.getByText(/open confirm/i);
+
+    buttonElement.click();
+
+    const confirmText = screen.getByText(/hello/i);
+    const cancelButton = screen.getByText(/cancel/i);
+
+    await waitFor(() => expect(confirmText).toBeVisible());
+
+    cancelButton.click();
+
+    expect(cancelFn).toHaveBeenCalledTimes(1);
+    expect(confirmText).not.toBeVisible();
+  });
+});

src/components/shared/Modal.tsx

@@ -33,7 +33,9 @@ const StyleOverrides = createGlobalStyle`
 `;
 
 // Tell ReactModal to which element it should attach its Portal/overlay.
-ReactModal.setAppElement("#root");
+if (process.env.NODE_ENV !== "test") {
+  ReactModal.setAppElement("#root");
+}
 // Override ReactModal's inline styles...
 ReactModal.defaultStyles = {
   ...ReactModal.defaultStyles,
@@ -77,6 +79,8 @@ export function Modal({
       contentLabel={label}
       onRequestClose={close}
       closeTimeoutMS={TIMING}
+      appElement={document.getElementById("root")!}
+      ariaHideApp={process.env.NODE_ENV !== "test"}
       {...props}
     >
       <StyleOverrides />

src/contexts/WorkplaceState.test.js

@@ -0,0 +1,69 @@
+import { workplaceReducer } from "./WorkplaceState";
+
+describe("WorkplaceState reducer", () => {
+  const defaultState = workplaceReducer.init({});
+
+  const newFileState = {
+    ...defaultState,
+    files: {
+      ...defaultState.files,
+      "New.mo": "Hello there!",
+    },
+  };
+
+  it("initializes correctly", () => {
+    expect(defaultState.canisters).toEqual({});
+    expect(defaultState.selectedCanister).toBe(null);
+    expect(defaultState.files).toEqual({ "Main.mo": "" });
+    expect(defaultState.selectedFile).toBe("Main.mo");
+    expect(defaultState.packages).toEqual({});
+  });
+
+  it("adds files", () => {
+    const withNewFile = workplaceReducer.reduce(defaultState, {
+      type: "saveFile",
+      payload: {
+        path: "New.mo",
+        contents: "Hello there!",
+      },
+    });
+
+    expect(withNewFile).toEqual(newFileState);
+  });
+
+  it("selects files", () => {
+    const withSelectedFile = workplaceReducer.reduce(newFileState, {
+      type: "selectFile",
+      payload: {
+        path: "New.mo",
+      },
+    });
+
+    expect(withSelectedFile.selectedFile).toBe("New.mo");
+  });
+
+  it("removes files", () => {
+    const withFileRemoved = workplaceReducer.reduce(newFileState, {
+      type: "deleteFile",
+      payload: {
+        path: "Main.mo",
+      },
+    });
+
+    expect(withFileRemoved.files).toEqual({ "New.mo": "Hello there!" });
+    expect(withFileRemoved.selectedFile).toBe("New.mo");
+  });
+
+  it("renames files", () => {
+    const withRenamedFile = workplaceReducer.reduce(defaultState, {
+      type: "renameFile",
+      payload: {
+        path: "Main.mo",
+        newPath: "Renamed.mo",
+      },
+    });
+
+    expect(withRenamedFile.files).toEqual({ "Renamed.mo": "" });
+    expect(withRenamedFile.selectedFile).toBe("Renamed.mo");
+  });
+});