Move dag.doc_md test from app-level to component-level (#47103)

airflow/ui/src/mocks/handlers/dag.ts

@@ -20,47 +20,47 @@
 /* eslint-disable unicorn/no-null */
 import { http, HttpResponse, type HttpHandler } from "msw";
 
+export const MOCK_DAG = {
+  asset_expression: null,
+  catchup: false,
+  concurrency: 16,
+  dag_display_name: "tutorial_taskflow_api",
+  dag_id: "tutorial_taskflow_api",
+  dag_run_timeout: null,
+  default_view: "grid",
+  description: null,
+  doc_md:
+    "\n    ### TaskFlow API Tutorial Documentation\n    This is a simple data pipeline example which demonstrates the use of\n    the TaskFlow API using three simple tasks for Extract, Transform, and Load.\n    Documentation that goes along with the Airflow TaskFlow API tutorial is\n    located\n    [here](https://airflow.apache.org/docs/apache-airflow/stable/tutorial_taskflow_api.html)\n    ",
+  end_date: null,
+  file_token:
+    ".eJw9yUsOgCAMBcC7cAB7JPISizR82kCJcnvjxtUsJlDWxlQwPEvhjU7TV0pk27N2goxU9f7lB80qxxPXJF-uQ1CjY5avI0wO2-EFouohiw.fhdU5u0Pb7lElEd-AUUXqjHSsdo",
+  fileloc: "/airflow/dags/tutorial_taskflow_api.py",
+  has_import_errors: false,
+  has_task_concurrency_limits: false,
+  is_active: true,
+  is_paused: false,
+  is_paused_upon_creation: null,
+  last_expired: null,
+  last_parsed: "2025-01-13T04:33:54.141792Z",
+  last_parsed_time: "2025-01-13T04:34:13.543097Z",
+  max_active_runs: 16,
+  max_active_tasks: 16,
+  max_consecutive_failed_dag_runs: 0,
+  next_dagrun: null,
+  next_dagrun_create_after: null,
+  next_dagrun_data_interval_end: null,
+  next_dagrun_data_interval_start: null,
+  owners: ["airflow"],
+  params: {},
+  render_template_as_native_obj: false,
+  start_date: "2021-01-01T00:00:00Z",
+  tags: [{ dag_id: "tutorial_taskflow_api", name: "example" }],
+  template_search_path: null,
+  timetable_description: "Never, external triggers only",
+  timetable_summary: null,
+  timezone: "UTC",
+};
+
 export const handlers: Array<HttpHandler> = [
-  http.get("/public/dags/tutorial_taskflow_api/details", () =>
-    HttpResponse.json({
-      asset_expression: null,
-      catchup: false,
-      concurrency: 16,
-      dag_display_name: "tutorial_taskflow_api",
-      dag_id: "tutorial_taskflow_api",
-      dag_run_timeout: null,
-      default_view: "grid",
-      description: null,
-      doc_md:
-        "\n    ### TaskFlow API Tutorial Documentation\n    This is a simple data pipeline example which demonstrates the use of\n    the TaskFlow API using three simple tasks for Extract, Transform, and Load.\n    Documentation that goes along with the Airflow TaskFlow API tutorial is\n    located\n    [here](https://airflow.apache.org/docs/apache-airflow/stable/tutorial_taskflow_api.html)\n    ",
-      end_date: null,
-      file_token:
-        ".eJw9yUsOgCAMBcC7cAB7JPISizR82kCJcnvjxtUsJlDWxlQwPEvhjU7TV0pk27N2goxU9f7lB80qxxPXJF-uQ1CjY5avI0wO2-EFouohiw.fhdU5u0Pb7lElEd-AUUXqjHSsdo",
-      fileloc: "/airflow/dags/tutorial_taskflow_api.py",
-      has_import_errors: false,
-      has_task_concurrency_limits: false,
-      is_active: true,
-      is_paused: false,
-      is_paused_upon_creation: null,
-      last_expired: null,
-      last_parsed: "2025-01-13T04:33:54.141792Z",
-      last_parsed_time: "2025-01-13T04:34:13.543097Z",
-      max_active_runs: 16,
-      max_active_tasks: 16,
-      max_consecutive_failed_dag_runs: 0,
-      next_dagrun: null,
-      next_dagrun_create_after: null,
-      next_dagrun_data_interval_end: null,
-      next_dagrun_data_interval_start: null,
-      owners: ["airflow"],
-      params: {},
-      render_template_as_native_obj: false,
-      start_date: "2021-01-01T00:00:00Z",
-      tags: [{ dag_id: "tutorial_taskflow_api", name: "example" }],
-      template_search_path: null,
-      timetable_description: "Never, external triggers only",
-      timetable_summary: null,
-      timezone: "UTC",
-    }),
-  ),
+  http.get("/public/dags/tutorial_taskflow_api/details", () => HttpResponse.json(MOCK_DAG)),
 ];

airflow/ui/src/pages/Dag/Dag.test.tsx → airflow/ui/src/pages/Dag/DagHeader.test.tsx

@@ -21,8 +21,12 @@ import { render, screen, waitFor } from "@testing-library/react";
 import { setupServer, type SetupServerApi } from "msw/node";
 import { afterEach, describe, it, expect, beforeAll, afterAll } from "vitest";
 
+import type { DAGDetailsResponse } from "openapi/requests/types.gen";
 import { handlers } from "src/mocks/handlers";
-import { AppWrapper } from "src/utils/AppWrapper";
+import { MOCK_DAG } from "src/mocks/handlers/dag";
+import { BaseWrapper } from "src/utils/Wrapper";
+
+import { Header } from "./Header";
 
 let server: SetupServerApi;
 
@@ -35,13 +39,28 @@ afterEach(() => server.resetHandlers());
 afterAll(() => server.close());
 
 describe("Dag Documentation Modal", () => {
-  it("Display documentation button only when docs_md is present", async () => {
-    render(<AppWrapper initialEntries={["/dags/tutorial_taskflow_api"]} />);
+  it("Display documentation button when doc_md is present", async () => {
+    render(
+      <BaseWrapper>
+        <Header dag={MOCK_DAG as unknown as DAGDetailsResponse} />
+      </BaseWrapper>,
+    );
 
     await waitFor(() => expect(screen.getByTestId("markdown-button")).toBeInTheDocument());
     await waitFor(() => screen.getByTestId("markdown-button").click());
     await waitFor(() =>
       expect(screen.getByText(/taskflow api tutorial documentation/iu)).toBeInTheDocument(),
     );
   });
+
+  it("Do not display documentation button only doc_md is not present", () => {
+    render(
+      <BaseWrapper>
+        {/* eslint-disable-next-line unicorn/no-null */}
+        <Header dag={{ ...MOCK_DAG, doc_md: null } as unknown as DAGDetailsResponse} />
+      </BaseWrapper>,
+    );
+
+    expect(screen.queryByTestId("markdown-button")).toBeNull();
+  });
 });