Add a basic QueryBuilder unit test (#30481)

frontend/src/metabase/components/Badge/Badge.styled.jsx

@@ -11,7 +11,7 @@ const propTypes = {
   to: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   activeColor: PropTypes.string,
   inactiveColor: PropTypes.string,
-  isSingleLine: PropTypes.boolean,
+  isSingleLine: PropTypes.bool,
 };
 
 function RawMaybeLink({

frontend/src/metabase/query_builder/components/VisualizationResult.jsx

@@ -74,7 +74,11 @@ export default class VisualizationResult extends Component {
                 {supportsRowsPresentAlert && !isDirty && (
                   <p>
                     {jt`You can also ${(
-                      <a className="link" onClick={this.showCreateAlertModal}>
+                      <a
+                        className="link"
+                        key="link"
+                        onClick={this.showCreateAlertModal}
+                      >
                         {t`get an alert`}
                       </a>
                     )} when there are some results.`}

frontend/src/metabase/query_builder/containers/QueryBuilder.jsx

@@ -103,7 +103,7 @@ const mapStateToProps = (state, props) => {
     user: getUser(state, props),
     canManageSubscriptions: canManageSubscriptions(state, props),
     isAdmin: getUserIsAdmin(state, props),
-    fromUrl: props.location.query.from,
+    fromUrl: props.location.query?.from,
 
     mode: getMode(state),
 

frontend/src/metabase/query_builder/containers/QueryBuilder.unit.spec.tsx

+import React, { ComponentPropsWithoutRef } from "react";
+import { IndexRoute, Route } from "react-router";
+import { Card } from "metabase-types/api";
+import { createMockCard, createMockDataset } from "metabase-types/api/mocks";
+import {
+  createSampleDatabase,
+  ORDERS_ID,
+  SAMPLE_DB_ID,
+} from "metabase-types/api/mocks/presets";
+import {
+  setupAlertsEndpoints,
+  setupBookmarksEndpoints,
+  setupCardEndpoints,
+  setupCardQueryEndpoints,
+  setupDatabasesEndpoints,
+  setupSearchEndpoints,
+  setupTimelinesEndpoints,
+} from "__support__/server-mocks";
+import {
+  renderWithProviders,
+  screen,
+  waitForElementToBeRemoved,
+} from "__support__/ui";
+import QueryBuilder from "./QueryBuilder";
+
+const TEST_DB = createSampleDatabase();
+
+const TEST_CARD = createMockCard({
+  dataset_query: {
+    database: SAMPLE_DB_ID,
+    type: "query",
+    query: {
+      "source-table": ORDERS_ID,
+    },
+  },
+});
+
+const TEST_DATASET = createMockDataset();
+
+const TestQueryBuilder = (
+  props: ComponentPropsWithoutRef<typeof QueryBuilder>,
+) => {
+  return (
+    <div>
+      <link rel="icon" />
+      <QueryBuilder {...props} />
+    </div>
+  );
+};
+
+interface SetupOpts {
+  card?: Card;
+  initialRoute?: string;
+}
+
+const setup = async ({
+  card = TEST_CARD,
+  initialRoute = `/question/${card.id}`,
+}: SetupOpts = {}) => {
+  setupDatabasesEndpoints([TEST_DB]);
+  setupCardEndpoints(card);
+  setupCardQueryEndpoints(card, TEST_DATASET);
+  setupSearchEndpoints([]);
+  setupAlertsEndpoints(card, []);
+  setupBookmarksEndpoints([]);
+  setupTimelinesEndpoints([]);
+
+  renderWithProviders(
+    <Route path="/question">
+      <IndexRoute component={TestQueryBuilder} />
+      <Route path="notebook" component={TestQueryBuilder} />
+      <Route path=":slug" component={TestQueryBuilder} />
+      <Route path=":slug/notebook" component={TestQueryBuilder} />
+    </Route>,
+    {
+      withRouter: true,
+      initialRoute,
+    },
+  );
+
+  await waitForElementToBeRemoved(() => screen.queryByText(/Loading/));
+};
+
+describe("QueryBuilder", () => {
+  it("renders a structured question in the simple mode", async () => {
+    await setup();
+
+    expect(screen.getByDisplayValue(TEST_CARD.name)).toBeInTheDocument();
+  });
+
+  it("renders a structured question in the notebook mode", async () => {
+    await setup({
+      initialRoute: `/question/${TEST_CARD.id}/notebook`,
+    });
+
+    expect(screen.getByDisplayValue(TEST_CARD.name)).toBeInTheDocument();
+  });
+});

frontend/test/__support__/server-mocks/alert.ts

+import fetchMock from "fetch-mock";
+import { Alert, Card } from "metabase-types/api";
+
+export function setupAlertsEndpoints(card: Card, alerts: Alert[]) {
+  fetchMock.get(`path:/api/alert/question/${card.id}`, alerts);
+}

frontend/test/__support__/server-mocks/bookmark.ts

+import fetchMock from "fetch-mock";
+import { Bookmark } from "metabase-types/api";
+
+export function setupBookmarksEndpoints(bookmarks: Bookmark[]) {
+  fetchMock.get("path:/api/bookmark", bookmarks);
+}

frontend/test/__support__/server-mocks/card.ts

 import fetchMock from "fetch-mock";
-import { Card } from "metabase-types/api";
+import { Card, Dataset } from "metabase-types/api";
 import { createMockCard } from "metabase-types/api/mocks";
 import {
   getQuestionVirtualTableId,
@@ -47,6 +47,10 @@ export function setupUnauthorizedCardsEndpoints(cards: Card[]) {
   cards.forEach(card => setupUnauthorizedCardEndpoints(card));
 }
 
+export function setupCardQueryEndpoints(card: Card, dataset: Dataset) {
+  fetchMock.post(`path:/api/card/${card.id}/query`, dataset);
+}
+
 export function setupCardQueryDownloadEndpoint(card: Card, type: string) {
   fetchMock.post(`path:/api/card/${card.id}/query/${type}`, {});
 }

frontend/test/__support__/server-mocks/index.ts

 export * from "./action";
 export * from "./activity";
+export * from "./alert";
+export * from "./bookmark";
 export * from "./card";
 export * from "./collection";
 export * from "./dashboard";
@@ -12,3 +14,4 @@ export * from "./settings";
 export * from "./setup";
 export * from "./store";
 export * from "./table";
+export * from "./timeline";

frontend/test/__support__/server-mocks/timeline.ts

+import fetchMock from "fetch-mock";
+import { Timeline } from "metabase-types/api";
+
+export function setupTimelinesEndpoints(timelines: Timeline[]) {
+  fetchMock.get("path:/api/timeline", timelines);
+}

frontend/test/__support__/server-mocks/utils.ts

-import type { MockRequest } from "fetch-mock";
-
-export async function getRequestBody<T>(request: MockRequest): Promise<T> {
-  const body = await request.body;
-  return typeof body === "string" ? JSON.parse(body) : body;
-}