@itwin/reports-config-widget-react 0.1.0 → 0.2.1

package/src/test/ReportMappings.test.tsx

@@ -12,33 +12,24 @@ import type {
 } from "@itwin/core-frontend";
 import { NoRenderApp } from "@itwin/core-frontend";
 import { ReportsConfigWidget } from "../ReportsConfigWidget";
-import { setupServer } from "msw/node";
 import {
+  act,
   render,
   screen,
   TestUtils,
   waitForElementToBeRemoved,
   within,
 } from "./test-utils";
-import userEvent from "@testing-library/user-event";
 import * as moq from "typemoq";
-import type { RequestHandler } from "msw";
-import { rest } from "msw";
 import type {
-  ExtractionStatusSingle,
-  Mapping,
-  MappingCollection,
   MappingSingle,
   Report,
   ReportMappingCollection,
 } from "@itwin/insights-client";
-import {
-  ExtractorState,
-} from "@itwin/insights-client";
+import type { ReportMappingAndMapping } from "../widget/components/ReportMappings";
 import { ReportMappings } from "../widget/components/ReportMappings";
-import { Constants, IModelState } from "@itwin/imodels-client-management";
-import { REPORTS_CONFIG_BASE_URL } from "../widget/ReportsConfigUiProvider";
-import { REFRESH_DELAY } from "../widget/components/Extraction";
+import type { GetSingleIModelParams, IModelOperations, OperationOptions } from "@itwin/imodels-client-management";
+import { IModelState } from "@itwin/imodels-client-management";
 import type {
   SelectionManager,
   SelectionScopesManager,
@@ -48,9 +39,10 @@ import {
   SelectionChangeEvent,
 } from "@itwin/presentation-frontend";
 import type { BeEvent } from "@itwin/core-bentley";
-
-// For the extraction test
-jest.setTimeout(20000);
+import type BulkExtractor from "../widget/components/BulkExtractor";
+import type { ReportMappingHorizontalTileProps } from "../widget/components/ReportMappingHorizontalTile";
+import { Text } from "@itwin/itwinui-react";
+import { EmptyLocalization } from "@itwin/core-common";
 
 const mockITwinId = faker.datatype.uuid();
 // Lets work with two iModels for now.
@@ -181,7 +173,7 @@ const mockReportMappingsFactory = (): ReportMappingCollection => {
 
 const mockMappingsFactory = (
   mockReportMappings: ReportMappingCollection
-): [MappingSingle[], RequestHandler[]] => {
+): MappingSingle[] => {
   const mockMappings: MappingSingle[] = mockReportMappings.mappings.map(
     (mapping, index) => ({
       mapping: {
@@ -203,34 +195,78 @@ const mockMappingsFactory = (
     })
   );
 
-  const iModelHandlers: RequestHandler[] = mockMappings.map((mapping) =>
-    rest.get(
-      `${REPORTS_CONFIG_BASE_URL}/insights/reporting/datasources/imodels/${mapping.mapping._links.imodel.href
-      }/mappings/${mapping.mapping.id}`,
-      async (_req, res, ctx) => {
-        return res(ctx.delay(), ctx.status(200), ctx.json(mapping));
-      }
-    )
-  );
-
-  return [mockMappings, iModelHandlers];
+  return mockMappings;
 };
 
 const connectionMock = moq.Mock.ofType<IModelConnection>();
+const mockBulkExtractor = moq.Mock.ofType<BulkExtractor>();
 const selectionManagerMock = moq.Mock.ofType<SelectionManager>();
 const selectionScopesManagerMock = moq.Mock.ofType<SelectionScopesManager>();
+const mockIModelsClient = moq.Mock.ofType<IModelOperations<OperationOptions>>();
+
+interface AddMappingsModalProps {
+  reportId: string;
+  existingMappings: ReportMappingAndMapping[];
+  show: boolean;
+  returnFn: () => Promise<void>;
+}
+
+jest.mock("../widget/components/Constants.ts", () => ({
+  STATUS_CHECK_INTERVAL: 10,
+}));
+
+jest.mock("../widget/components/ReportMappingHorizontalTile", () => ({
+  ReportMappingHorizontalTile: (props: ReportMappingHorizontalTileProps) => {
+    return (<div data-testid="horizontal-tile">
+      <Text>{props.mapping.mappingName}</Text>
+      <Text title={props.mapping.mappingDescription}>{props.mapping.iModelName}</Text>
+    </div>);
+  },
+}));
 
 jest.mock("@itwin/appui-react", () => ({
   ...jest.requireActual("@itwin/appui-react"),
   useActiveIModelConnection: () => connectionMock.object,
 }));
 
-const server = setupServer();
+let returnFn: () => Promise<void>;
+jest.mock("../widget/components/AddMappingsModal", () => ({
+  ...jest.requireActual("../widget/components/AddMappingsModal"),
+  AddMappingsModal: (props: AddMappingsModalProps) => {
+    returnFn = props.returnFn;
+    return <div data-testid="add-mappings-modal"/>;
+  },
+}));
+
+jest.mock("@itwin/imodels-client-management", () => ({
+  ...jest.requireActual("@itwin/imodels-client-management"),
+  IModelsClient: jest.fn().mockImplementation(() => ({
+    iModels: mockIModelsClient.object,
+  })),
+  toArray: jest.fn().mockImplementation(async () => {
+    return mockProjectIModels.iModels;
+  }),
+}));
+
+const mockGetMapping = jest.fn();
+const mockGetMappings = jest.fn();
+const mockGetReportMappings = jest.fn();
+const mockDeleteReportMapping = jest.fn();
+
+jest.mock("@itwin/insights-client", () => ({
+  ...jest.requireActual("@itwin/insights-client"),
+  MappingsClient: jest.fn().mockImplementation(() => ({
+    getMapping: mockGetMapping,
+    getMappings: mockGetMappings,
+  })),
+  ReportsClient: jest.fn().mockImplementation(() => ({
+    getReportMappings: mockGetReportMappings,
+    deleteReportMapping: mockDeleteReportMapping,
+  })),
+}));
 
 beforeAll(async () => {
-  // This is required by the i18n module within iTwin.js
-  (global as any).XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest; // eslint-disable-line @typescript-eslint/no-var-requires
-  await NoRenderApp.startup();
+  await NoRenderApp.startup({localization: new EmptyLocalization()});
   await Presentation.initialize();
   const selectionSet = moq.Mock.ofType<SelectionSet>();
   const onChanged = moq.Mock.ofType<BeEvent<(ev: SelectionSetEvent) => void>>();
@@ -256,134 +292,62 @@ beforeAll(async () => {
   Presentation.setSelectionManager(selectionManagerMock.object);
   await TestUtils.initializeUiFramework(connectionMock.object);
   await ReportsConfigWidget.initialize();
-  server.listen();
 });
 
 afterAll(() => {
   TestUtils.terminateUiFramework();
-  server.close();
 });
 
 afterEach(() => {
-  server.resetHandlers();
+  mockGetMapping.mockReset();
+  mockGetMappings.mockReset();
+  mockGetReportMappings.mockReset();
+  mockDeleteReportMapping.mockReset();
+  mockIModelsClient.reset();
+  mockBulkExtractor.reset();
 });
 
 describe("Report Mappings View", () => {
   it("shows all report mappings", async () => {
     const mockReportMappings = mockReportMappingsFactory();
-    const [mockMappings, iModelHandlers] =
-      mockMappingsFactory(mockReportMappings);
-
-    server.use(
-      rest.get(
-        `${REPORTS_CONFIG_BASE_URL}/insights/reporting/reports/${mockReportId}/datasources/imodelMappings`,
-        async (_req, res, ctx) => {
-          return res(
-            ctx.delay(),
-            ctx.status(200),
-            ctx.json(mockReportMappings)
-          );
-        }
-      ),
-      rest.get(
-        `${Constants.api.baseUrl}/${mockIModelId1}`,
-        async (_req, res, ctx) => {
-          return res(
-            ctx.delay(),
-            ctx.status(200),
-            ctx.json(mockIModelsResponse[0])
-          );
-        }
-      ),
-      rest.get(
-        `${Constants.api.baseUrl}/${mockIModelId2}`,
-        async (_req, res, ctx) => {
-          return res(
-            ctx.delay(),
-            ctx.status(200),
-            ctx.json(mockIModelsResponse[1])
-          );
-        }
-      ),
-      ...iModelHandlers
-    );
+    const mockMappings = mockMappingsFactory(mockReportMappings);
 
-    render(<ReportMappings report={mockReport} goBack={jest.fn()} />);
+    mockIModelsClient.setup(async (x) => x.getSingle(moq.It.isObjectWith<GetSingleIModelParams>({ iModelId: mockIModelId1 })))
+      .returns(async () => mockIModelsResponse[0].iModel);
 
-    await waitForElementToBeRemoved(() => screen.getByText(/loading/i));
+    mockIModelsClient.setup(async (x) => x.getSingle(moq.It.isObjectWith<GetSingleIModelParams>({ iModelId: mockIModelId2 })))
+      .returns(async () => mockIModelsResponse[1].iModel);
 
-    const horizontalTiles = screen.getAllByTestId("horizontal-tile");
+    mockGetMapping.mockReturnValueOnce(mockMappings[0].mapping).mockReturnValueOnce(mockMappings[1].mapping);
+    mockGetReportMappings.mockReturnValueOnce(mockReportMappings.mappings);
 
-    expect(horizontalTiles).toHaveLength(mockMappings.length);
+    render(<ReportMappings report={mockReport} bulkExtractor={mockBulkExtractor.object} goBack={jest.fn()} />);
 
-    for (const [index, horizontalTile] of horizontalTiles.entries()) {
-      const reportMappingTile = within(horizontalTile);
-      const mockiModel = mockIModelsResponse.find(
-        (iModel) =>
-          iModel.iModel.id === mockMappings[index].mapping._links.imodel.href
-      );
-      expect(
-        reportMappingTile.getByText(
-          mockMappings[index].mapping.mappingName
-        )
-      ).toBeInTheDocument();
-      expect(
-        reportMappingTile.getByTitle(
-          mockMappings[index].mapping.description ?? ""
-        )
-      ).toBeInTheDocument();
-      expect(
-        reportMappingTile.getByText(mockiModel?.iModel.displayName ?? "")
-      ).toBeInTheDocument();
-    }
+    await waitForElementToBeRemoved(() => screen.getByText(/loading/i));
+
+    const horizontalTiles = screen.getAllByTestId("horizontal-tile");
+    assertHorizontalTiles(horizontalTiles, mockMappings);
   });
 
   it("search for a report mapping", async () => {
     const mockReportMappings = mockReportMappingsFactory();
-    const [mockMappings, iModelHandlers] =
-      mockMappingsFactory(mockReportMappings);
-
-    server.use(
-      rest.get(
-        `${REPORTS_CONFIG_BASE_URL}/insights/reporting/reports/${mockReportId}/datasources/imodelMappings`,
-        async (_req, res, ctx) => {
-          return res(
-            ctx.delay(),
-            ctx.status(200),
-            ctx.json(mockReportMappings)
-          );
-        }
-      ),
-      rest.get(
-        `${Constants.api.baseUrl}/${mockIModelId1}`,
-        async (_req, res, ctx) => {
-          return res(
-            ctx.delay(),
-            ctx.status(200),
-            ctx.json(mockIModelsResponse[0])
-          );
-        }
-      ),
-      rest.get(
-        `${Constants.api.baseUrl}/${mockIModelId2}`,
-        async (_req, res, ctx) => {
-          return res(
-            ctx.delay(),
-            ctx.status(200),
-            ctx.json(mockIModelsResponse[1])
-          );
-        }
-      ),
-      ...iModelHandlers
-    );
+    const mockMappings = mockMappingsFactory(mockReportMappings);
+
+    mockIModelsClient.setup(async (x) => x.getSingle(moq.It.isObjectWith<GetSingleIModelParams>({ iModelId: mockIModelId1 })))
+      .returns(async () => mockIModelsResponse[0].iModel);
+
+    mockIModelsClient.setup(async (x) => x.getSingle(moq.It.isObjectWith<GetSingleIModelParams>({ iModelId: mockIModelId2 })))
+      .returns(async () => mockIModelsResponse[1].iModel);
+    mockGetMapping.mockReturnValueOnce(mockMappings[0].mapping).mockReturnValueOnce(mockMappings[1].mapping);
+    mockGetReportMappings.mockReturnValueOnce(mockReportMappings.mappings);
 
     const { user } = render(
-      <ReportMappings report={mockReport} goBack={jest.fn()} />
+      <ReportMappings report={mockReport} bulkExtractor={mockBulkExtractor.object} goBack={jest.fn()} />
     );
 
     await waitForElementToBeRemoved(() => screen.getByText(/loading/i));
 
-    const searchButton = within(screen.getByTestId(/search-bar/i)).getByRole(
+    const searchButton = within(screen.getByTestId(/rcw-search-bar/i)).getByRole(
       "button"
     );
     await user.click(searchButton);
@@ -419,289 +383,49 @@ describe("Report Mappings View", () => {
     ).toBeInTheDocument();
   });
 
-  it("remove a report mapping", async () => {
-    const mockReportMappings = mockReportMappingsFactory();
-    const [_, iModelHandlers] = mockMappingsFactory(mockReportMappings);
-
-    const mockReportMappingsOriginalSize = mockReportMappings.mappings.length;
-
-    server.use(
-      rest.get(
-        `${REPORTS_CONFIG_BASE_URL}/insights/reporting/reports/${mockReportId}/datasources/imodelMappings`,
-        async (_req, res, ctx) => {
-          return res(
-            ctx.delay(),
-            ctx.status(200),
-            ctx.json(mockReportMappings)
-          );
-        }
-      ),
-      rest.get(
-        `${Constants.api.baseUrl}/${mockIModelId1}`,
-        async (_req, res, ctx) => {
-          return res(
-            ctx.delay(),
-            ctx.status(200),
-            ctx.json(mockIModelsResponse[0])
-          );
-        }
-      ),
-      rest.get(
-        `${Constants.api.baseUrl}/${mockIModelId2}`,
-        async (_req, res, ctx) => {
-          return res(
-            ctx.delay(),
-            ctx.status(200),
-            ctx.json(mockIModelsResponse[1])
-          );
-        }
-      ),
-      ...iModelHandlers,
-      rest.delete(
-        `${REPORTS_CONFIG_BASE_URL}/insights/reporting/reports/${mockReportId}/datasources/imodelMappings/${mockReportMappings.mappings[0].mappingId
-        }`,
-        async (_req, res, ctx) => {
-          mockReportMappings.mappings = mockReportMappings.mappings.filter(
-            (mapping) =>
-              mapping.mappingId !== mockReportMappings.mappings[0].mappingId
-          );
-          return res(ctx.delay(100), ctx.status(204));
-        }
-      )
-    );
-
-    const { user } = render(
-      <ReportMappings report={mockReport} goBack={jest.fn()} />
-    );
-
-    await waitForElementToBeRemoved(() => screen.getByText(/loading/i));
-
-    const firstMenuDropdown = within(
-      screen.getAllByTestId(/tile-action-button/i)[0]
-    ).getByRole("button");
-    await user.click(firstMenuDropdown);
-    const removeButton = screen.getByRole("menuitem", { name: /remove/i });
-    await user.click(removeButton);
-    // Delete modal dialog should appear
-    expect(screen.getByRole("dialog")).toBeInTheDocument();
-
-    const deleteButton = screen.getByRole("button", {
-      name: /delete/i,
-    });
-
-    await user.click(deleteButton);
-
-    await waitForElementToBeRemoved(() =>
-      screen.getByTestId(/rcw-loading-delete/i)
-    );
-    await waitForElementToBeRemoved(() => screen.getByRole("dialog"));
-
-    // Should be one less mapping
-    expect(screen.getAllByTestId("horizontal-tile")).toHaveLength(
-      mockReportMappingsOriginalSize - 1
-    );
-  });
-
   it("add mapping", async () => {
     const mockReportMappings = mockReportMappingsFactory();
-    const [mockMappings, iModelHandlers] =
-      mockMappingsFactory(mockReportMappings);
+    const mockMappings = mockMappingsFactory(mockReportMappings);
 
-    // Adding an extra unmapped mapping.
-    const extraMappingId = faker.datatype.uuid();
-    const extraMappingName = "mOcKNaMeExTrA";
-    const extraMappingDescription = "mOcKDeScRiPtIoNeXtRa";
+    mockIModelsClient.setup(async (x) => x.getSingle(moq.It.isObjectWith<GetSingleIModelParams>({ iModelId: mockIModelId1 })))
+      .returns(async () => mockIModelsResponse[0].iModel);
 
-    mockMappings.push({
-      mapping: {
-        id: extraMappingId,
-        mappingName: extraMappingName,
-        description: extraMappingDescription,
-        extractionEnabled: false,
-        createdOn: "",
-        createdBy: "",
-        modifiedOn: "",
-        modifiedBy: "",
-        _links: {
-          imodel: {
-            href: "",
-          },
-        },
-      },
-    });
+    mockIModelsClient.setup(async (x) => x.getSingle(moq.It.isObjectWith<GetSingleIModelParams>({ iModelId: mockIModelId2 })))
+      .returns(async () => mockIModelsResponse[1].iModel);
 
-    const mockMappingsResponse: MappingCollection = {
-      // Type guarding
-      mappings: mockMappings
-        .map((mapping) => mapping.mapping)
-        .filter((mapping): mapping is Mapping => !!mapping),
-      _links: {
-        next: undefined,
-        self: {
-          href: "",
-        },
-      },
-    };
-
-    server.use(
-      rest.get(
-        `${REPORTS_CONFIG_BASE_URL}/insights/reporting/reports/${mockReportId}/datasources/imodelMappings`,
-        async (_req, res, ctx) => {
-          return res(
-            ctx.delay(),
-            ctx.status(200),
-            ctx.json(mockReportMappings)
-          );
-        }
-      ),
-      rest.get(`${Constants.api.baseUrl}`, async (_req, res, ctx) => {
-        return res(ctx.delay(), ctx.status(200), ctx.json(mockProjectIModels));
-      }),
-      rest.get(
-        `${Constants.api.baseUrl}/${mockIModelId1}`,
-        async (_req, res, ctx) => {
-          return res(
-            ctx.delay(),
-            ctx.status(200),
-            ctx.json(mockIModelsResponse[0])
-          );
-        }
-      ),
-      rest.get(
-        `${Constants.api.baseUrl}/${mockIModelId2}`,
-        async (_req, res, ctx) => {
-          return res(
-            ctx.delay(),
-            ctx.status(200),
-            ctx.json(mockIModelsResponse[1])
-          );
-        }
-      ),
-      rest.get(
-        `${REPORTS_CONFIG_BASE_URL}/insights/reporting/datasources/imodels/${mockProjectIModels.iModels[0].id}/mappings`,
-        async (_req, res, ctx) => {
-          return res(
-            ctx.delay(),
-            ctx.status(200),
-            ctx.json(mockMappingsResponse)
-          );
-        }
-      ),
-      rest.post(
-        `${REPORTS_CONFIG_BASE_URL}/insights/reporting/reports/${mockReportId}/datasources/imodelMappings`,
-        async (_req, res, ctx) => {
-          return res(
-            ctx.delay(),
-            ctx.status(200),
-            ctx.json(mockReportMappings)
-          );
-        }
-      ),
-      ...iModelHandlers
-    );
+    mockGetMapping.mockReturnValueOnce(mockMappings[0].mapping).mockReturnValueOnce(mockMappings[1].mapping);
+    mockGetReportMappings.mockReturnValueOnce(mockReportMappings.mappings);
 
     const { user } = render(
-      <ReportMappings report={mockReport} goBack={jest.fn()} />
+      <ReportMappings report={mockReport} bulkExtractor={mockBulkExtractor.object} goBack={jest.fn()} />
     );
 
     await waitForElementToBeRemoved(() => screen.getByText(/loading/i));
 
+    mockGetMappings.mockReturnValueOnce(mockMappings.map((m: MappingSingle) => m.mapping));
+
     const addMappingButton = screen.getByRole("button", {
       name: /addmapping/i,
     });
 
     await user.click(addMappingButton);
 
-    await waitForElementToBeRemoved(() =>
-      screen.getByTestId(/rcw-action-loading-spinner/i)
-    );
-    // Add modal dialog should appear
-    const modal = screen.getByRole("dialog");
-    expect(screen.getByRole("dialog")).toBeInTheDocument();
-
-    const withinModal = within(modal);
-    expect(withinModal.getByText(/addmappings/i)).toBeInTheDocument();
+    const addMappingsModal = await screen.findByTestId("add-mappings-modal");
+    expect(addMappingsModal).toBeInTheDocument();
 
-    const addButton = withinModal.getByRole("button", {
-      name: /add/i,
-    });
-    // Add button should be disabled
-    expect(addButton).toBeDisabled();
-
-    // Already mapped mappings are disabled
-    for (let i = 0; i < mockMappings.length - 1; i++) {
-      const row = screen.getByRole("row", {
-        name: new RegExp(
-          `${mockMappings[i].mapping.mappingName} ${mockMappings[i].mapping.description}`,
-          "i"
-        ),
-      });
-
-      const checkbox = within(row).getByRole("checkbox");
-      expect(checkbox).toBeDisabled();
-    }
-
-    // Click on checkbox on new mapping
-    const unmappedRow = screen.getByRole("row", {
-      name: new RegExp(
-        `${mockMappings[mockMappings.length - 1].mapping.mappingName
-        } ${mockMappings[mockMappings.length - 1].mapping.description}`,
-        "i"
-      ),
+    await act(async () => {
+      await returnFn();
     });
 
-    const enabledCheckbox = within(unmappedRow).getByRole("checkbox");
-
-    await user.click(enabledCheckbox);
+    const horizontalTiles = screen.getAllByTestId("horizontal-tile");
+    assertHorizontalTiles(horizontalTiles, mockMappings);
 
-    await user.click(addButton);
-    // Modal should go away
-    await waitForElementToBeRemoved(() =>
-      screen.getByTestId(/rcw-action-loading-spinner/i)
-    );
-    await waitForElementToBeRemoved(() => screen.getByRole("dialog"));
+    expect(mockGetReportMappings).toBeCalledTimes(2);
   });
 
   it("odata feed url", async () => {
-    const mockReportMappings = mockReportMappingsFactory();
-    const [_, iModelHandlers] = mockMappingsFactory(mockReportMappings);
-
-    server.use(
-      rest.get(
-        `${REPORTS_CONFIG_BASE_URL}/insights/reporting/reports/${mockReportId}/datasources/imodelMappings`,
-        async (_req, res, ctx) => {
-          return res(
-            ctx.delay(),
-            ctx.status(200),
-            ctx.json(mockReportMappings)
-          );
-        }
-      ),
-      rest.get(
-        `${Constants.api.baseUrl}/${mockIModelId1}`,
-        async (_req, res, ctx) => {
-          return res(
-            ctx.delay(),
-            ctx.status(200),
-            ctx.json(mockIModelsResponse[0])
-          );
-        }
-      ),
-      rest.get(
-        `${Constants.api.baseUrl}/${mockIModelId2}`,
-        async (_req, res, ctx) => {
-          return res(
-            ctx.delay(),
-            ctx.status(200),
-            ctx.json(mockIModelsResponse[1])
-          );
-        }
-      ),
-      ...iModelHandlers
-    );
-
     const { user } = render(
-      <ReportMappings report={mockReport} goBack={jest.fn()} />
+      <ReportMappings report={mockReport} bulkExtractor={mockBulkExtractor.object} goBack={jest.fn()} />
     );
 
     await waitForElementToBeRemoved(() => screen.getByText(/loading/i));
@@ -724,174 +448,55 @@ describe("Report Mappings View", () => {
     expect(screen.getByText(/copiedtoclipboard/i)).toBeInTheDocument();
   });
 
-  it("full extraction", async () => {
+  it("update all datasets", async () => {
     const mockReportMappings = mockReportMappingsFactory();
-    const [_, iModelHandlers] = mockMappingsFactory(mockReportMappings);
-
-    const delay = REFRESH_DELAY + 1000;
+    const mockMappings = mockMappingsFactory(mockReportMappings);
 
-    // Faking timers currently makes all promise based queries from RTL become unpredictable.
-    // https://github.com/testing-library/dom-testing-library/issues/988
-    // Should come back to this later.
-    // Consequently, this test will be a bit slower.
-    // jest.useFakeTimers()
+    mockIModelsClient.setup(async (x) => x.getSingle(moq.It.isObjectWith<GetSingleIModelParams>({ iModelId: mockIModelId1 })))
+      .returns(async () => mockIModelsResponse[0].iModel);
 
-    Element.prototype.scrollIntoView = jest.fn();
+    mockIModelsClient.setup(async (x) => x.getSingle(moq.It.isObjectWith<GetSingleIModelParams>({ iModelId: mockIModelId2 })))
+      .returns(async () => mockIModelsResponse[1].iModel);
 
-    const mockIModel = mockIModelsResponse[0].iModel;
-    const mockRunId = faker.datatype.uuid();
+    mockGetMapping.mockReturnValueOnce(mockMappings[0].mapping).mockReturnValueOnce(mockMappings[1].mapping);
+    mockGetReportMappings.mockReturnValueOnce(mockReportMappings.mappings);
 
-    const mockExtractionResponse = {
-      run: {
-        id: mockRunId,
-        _links: {
-          status: {
-            href: "",
-          },
-        },
-      },
-    };
-
-    let mockStatusResponse: ExtractionStatusSingle = {
-      status: {
-        state: ExtractorState.Queued,
-        reason: "",
-        containsIssues: false,
-        _links: {
-          logs: {
-            href: "",
-          },
-        },
-      },
-    };
-
-    server.use(
-      rest.get(
-        `${REPORTS_CONFIG_BASE_URL}/insights/reporting/reports/${mockReportId}/datasources/imodelMappings`,
-        async (_req, res, ctx) => {
-          return res(
-            ctx.delay(),
-            ctx.status(200),
-            ctx.json(mockReportMappings)
-          );
-        }
-      ),
-      rest.get(
-        `${Constants.api.baseUrl}/${mockIModelId1}`,
-        async (_req, res, ctx) => {
-          return res(
-            ctx.delay(),
-            ctx.status(200),
-            ctx.json(mockIModelsResponse[0])
-          );
-        }
-      ),
-      rest.get(
-        `${Constants.api.baseUrl}/${mockIModelId2}`,
-        async (_req, res, ctx) => {
-          return res(
-            ctx.delay(),
-            ctx.status(200),
-            ctx.json(mockIModelsResponse[1])
-          );
-        }
-      ),
-      ...iModelHandlers,
-      rest.post(
-        `${REPORTS_CONFIG_BASE_URL}/insights/reporting/datasources/imodels/${mockIModel.id}/extraction/run`,
-        async (_req, res, ctx) => {
-          return res(
-            ctx.delay(800),
-            ctx.status(200),
-            ctx.json(mockExtractionResponse)
-          );
-        }
-      ),
-      rest.get(
-        `${REPORTS_CONFIG_BASE_URL}/insights/reporting/datasources/extraction/status/${mockRunId}`,
-        async (_req, res, ctx) => {
-          return res(
-            ctx.delay(),
-            ctx.status(200),
-            ctx.json(mockStatusResponse)
-          );
-        }
-      )
-    );
+    const iModels = mockIModelsResponse.map((iModel) => iModel.iModel.id);
+    mockBulkExtractor.setup(async (x) => x.runIModelExtractions(iModels)).returns(async () => Promise.resolve());
 
-    render(<ReportMappings report={mockReport} goBack={jest.fn()} />);
-
-    // https://github.com/testing-library/user-event/issues/833
-    const user = userEvent.setup({ delay: null });
+    const { user } = render(<ReportMappings report={mockReport} bulkExtractor={mockBulkExtractor.object} goBack={jest.fn()} />);
 
     await waitForElementToBeRemoved(() => screen.getByText(/loading/i));
 
-    const comboBox = screen.getByRole("combobox", {
-      name: /updatedataset/i,
-    });
-    await user.type(comboBox, mockIModel.displayName);
-
-    const option = screen.getByRole("menuitem", {
-      name: mockIModel.displayName,
-    });
-
-    await user.click(option);
+    const extractAllButton = screen.getByText(/UpdateAllDatasets/i);
+    expect(extractAllButton).toBeInTheDocument();
 
-    // Combobox should have correct status
-    const extractionComponent = screen.getByTestId("extraction-combo-box");
-    expect(
-      within(extractionComponent).getByDisplayValue(mockIModel.displayName)
-    ).toBeInTheDocument();
-    // Should be two in the document. One in the status and the other in the list.
-    // TODO Assert that it is in the correct HorizontalTile
-    const startingStates = await screen.findAllByTitle(/starting/i);
-    expect(startingStates).toHaveLength(2);
-
-    const loadingStates = await screen.findAllByTitle(/loading/i);
-    expect(loadingStates).toHaveLength(2);
-
-    // act(() => {
-    //   jest.advanceTimersByTime(2000)
-    // });
-    const queuedStates = await screen.findAllByTitle(/queued/i, undefined, {
-      timeout: delay,
-    });
-    expect(queuedStates).toHaveLength(2);
-
-    mockStatusResponse = {
-      status: {
-        state: ExtractorState.Running,
-        reason: "",
-        containsIssues: false,
-        _links: {
-          logs: {
-            href: "",
-          },
-        },
-      },
-    };
-
-    const runningStates = await screen.findAllByTitle(/running/i, undefined, {
-      timeout: delay,
-    });
-    expect(runningStates).toHaveLength(2);
+    await user.click(extractAllButton);
+    mockBulkExtractor.verify(async (x) => x.runIModelExtractions(iModels), moq.Times.once());
+  });
 
-    mockStatusResponse = {
-      status: {
-        state: ExtractorState.Succeeded,
-        reason: "",
-        containsIssues: false,
-        _links: {
-          logs: {
-            href: "",
-          },
-        },
-      },
-    };
+  const assertHorizontalTiles = (horizontalTiles: HTMLElement[], mockMappings: MappingSingle[]) => {
+    expect(horizontalTiles).toHaveLength(mockMappings.length);
 
-    const succeededStates = await screen.findAllByTitle(/success/i, undefined, {
-      timeout: delay,
-    });
-    expect(succeededStates).toHaveLength(2);
-  });
+    for (const [index, horizontalTile] of horizontalTiles.entries()) {
+      const reportMappingTile = within(horizontalTile);
+      const mockiModel = mockIModelsResponse.find(
+        (iModel) =>
+          iModel.iModel.id === mockMappings[index].mapping._links.imodel.href
+      );
+      expect(
+        reportMappingTile.getByText(
+          mockMappings[index].mapping.mappingName
+        )
+      ).toBeInTheDocument();
+      expect(
+        reportMappingTile.getByTitle(
+          mockMappings[index].mapping.description ?? ""
+        )
+      ).toBeInTheDocument();
+      expect(
+        reportMappingTile.getByText(mockiModel?.iModel.displayName ?? "")
+      ).toBeInTheDocument();
+    }
+  };
 });