Add initial rapid experiment details page and edit form - Fixes #2687

app/Dockerfile

@@ -31,7 +31,7 @@ COPY ./package.json /app/package.json
 COPY ./yarn.lock /app/yarn.lock
 COPY ./experimenter/static/core/package.json /app/experimenter/static/core/package.json
 COPY ./experimenter/static/rapid/package.json /app/experimenter/static/rapid/package.json
-RUN yarn install
+RUN yarn install --frozen-lockfile
 
 # Build assets
 COPY ./experimenter/static/ /app/experimenter/static/

app/experimenter/static/rapid/.eslintrc.js

@@ -21,6 +21,10 @@ const baseSettings = {
             pattern: "experimenter-rapid/**",
             group: "parent",
           },
+          {
+            pattern: "experimenter-types/**",
+            group: "parent",
+          },
         ],
         pathGroupsExcludedImportTypes: ["builtin"],
         alphabetize: {

app/experimenter/static/rapid/__tests__/.eslintrc

@@ -1,9 +1,5 @@
 {
   "env": {
     "jest": true
-  },
-  "globals": {
-    "fetchMock": "writable",
-    "renderWithRouter": "writable"
   }
 }

app/experimenter/static/rapid/__tests__/app.test.tsx

@@ -0,0 +1,71 @@
+import { cleanup, waitFor } from "@testing-library/react";
+import fetchMock from "jest-fetch-mock";
+import React from "react";
+
+import App from "experimenter-rapid/components/App";
+
+import { renderWithRouter } from "./utils";
+
+afterEach(cleanup);
+
+describe("<App />", () => {
+  it("root route shows link to create page", () => {
+    const { getByText } = renderWithRouter(<App />);
+    expect(getByText("Create a new experiment")).toBeInTheDocument();
+  });
+
+  it("unknown route shows 404 message", () => {
+    const { getByText } = renderWithRouter(<App />, {
+      route: "/a/route/that/does/not/exist/",
+    });
+    expect(getByText("404")).toBeInTheDocument();
+  });
+
+  it("includes the experiment form page at `/new/`", () => {
+    const { getByText } = renderWithRouter(<App />, {
+      route: "/new/",
+    });
+    expect(getByText("Create a New A/A Experiment")).toBeInTheDocument();
+  });
+
+  it("includes the experiment form page at `/:experimentSlug/edit/`", async () => {
+    fetchMock.mockOnce(async () => {
+      return JSON.stringify({
+        slug: "test-slug",
+        name: "Test Name",
+        objectives: "Test objectives",
+        owner: "[email protected]",
+      });
+    });
+
+    const { getByText, getByLabelText } = renderWithRouter(<App />, {
+      route: "/test-slug/edit/",
+    });
+    expect(getByText("Create a New A/A Experiment")).toBeInTheDocument();
+
+    const nameField = getByLabelText("Public Name") as HTMLInputElement;
+    await waitFor(() => {
+      return expect(nameField.value).toEqual("Test Name");
+    });
+  });
+
+  it("includes the experiment details page at `/:experimentSlug/`", async () => {
+    fetchMock.mockOnce(async () => {
+      return JSON.stringify({
+        slug: "test-slug",
+        name: "Test Name",
+        objectives: "Test objectives",
+        owner: "[email protected]",
+      });
+    });
+
+    const { getByText, getByDisplayValue } = renderWithRouter(<App />, {
+      route: "/test-slug/",
+    });
+    expect(getByText("Experiment Summary")).toBeInTheDocument();
+
+    await waitFor(() => {
+      return expect(getByDisplayValue("[email protected]")).toBeInTheDocument();
+    });
+  });
+});

app/experimenter/static/rapid/__tests__/experimentDetails.test.tsx

@@ -0,0 +1,58 @@
+import { cleanup, fireEvent, waitFor } from "@testing-library/react";
+import fetchMock from "jest-fetch-mock";
+import React from "react";
+
+import {
+  renderWithRouter,
+  wrapInExperimentProvider,
+} from "experimenter-rapid/__tests__/utils";
+import ExperimentDetails from "experimenter-rapid/components/experiments/ExperimentDetails";
+
+afterEach(async () => {
+  await cleanup();
+  fetchMock.resetMocks();
+});
+
+describe("<ExperimentDetails />", () => {
+  it("renders without issues", async () => {
+    const { getByDisplayValue } = renderWithRouter(
+      wrapInExperimentProvider(<ExperimentDetails />, {
+        initialState: {
+          slug: "test-slug",
+          name: "Test Name",
+          objectives: "Test objectives",
+          owner: "[email protected]",
+        },
+      }),
+    );
+
+    await waitFor(() => {
+      return expect(getByDisplayValue("[email protected]")).toBeInTheDocument();
+    });
+
+    expect(getByDisplayValue("Test Name")).toBeInTheDocument();
+    expect(getByDisplayValue("Test objectives")).toBeInTheDocument();
+  });
+
+  it("sends you to the edit page when the 'Back' button is clicked", async () => {
+    const { getByText, history } = renderWithRouter(
+      wrapInExperimentProvider(<ExperimentDetails />, {
+        initialState: {
+          slug: "test-slug",
+          name: "Test Name",
+          objectives: "Test objectives",
+          owner: "[email protected]",
+        },
+      }),
+    );
+
+    const historyPush = jest.spyOn(history, "push");
+
+    const backButton = getByText("Back");
+    fireEvent.click(backButton);
+
+    await waitFor(() => expect(historyPush).toHaveBeenCalledTimes(1));
+    const lastEntry = history.entries.pop() || { pathname: "" };
+    expect(lastEntry.pathname).toBe("/test-slug/edit/");
+  });
+});