🪟 🔧 Add virtuoso to Formik's <syncCatalog /> (#9214)

airbytehq · Oct 19, 2023 · 75b4b0b · 75b4b0b
1 parent be1d8e2
commit 75b4b0b
Show file tree

Hide file tree

Showing 6 changed files with 725 additions and 629 deletions.
diff --git a/airbyte-webapp/cypress/pages/connection/StreamDetailsPageObject.ts b/airbyte-webapp/cypress/pages/connection/StreamDetailsPageObject.ts
@@ -83,11 +83,15 @@ export class StreamDetailsPageObject {
   }
 
   scrollToBottom() {
-    return cy.get("div[data-test-id='virtuoso-scroller']").scrollTo("bottom");
+    return cy.get(streamDetailsPanel).within(() => {
+      cy.get("div[data-test-id='virtuoso-scroller']").scrollTo("bottom");
+    });
   }
 
   scrollToTop() {
-    return cy.get("div[data-test-id='virtuoso-scroller']").scrollTo("top");
+    return cy.get(streamDetailsPanel).within(() => {
+      cy.get("div[data-test-id='virtuoso-scroller']").scrollTo("top");
+    });
   }
 
   enableSyncStream() {

diff --git a/airbyte-webapp/src/components/connection/CreateConnectionForm/CreateConnectionForm.test.tsx b/airbyte-webapp/src/components/connection/CreateConnectionForm/CreateConnectionForm.test.tsx
@@ -3,6 +3,7 @@ import { act, render as tlr } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React from "react";
 import selectEvent from "react-select-event";
+import { VirtuosoMockContext } from "react-virtuoso";
 
 import { mockConnection } from "test-utils/mock-data/mockConnection";
 import {
@@ -58,7 +59,13 @@ jest.mock("hooks/theme/useAirbyteTheme", () => ({
 jest.setTimeout(40000);
 
 describe("CreateConnectionForm", () => {
-  const Wrapper: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => <TestWrapper>{children}</TestWrapper>;
+  const Wrapper: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => (
+    <TestWrapper>
+      <VirtuosoMockContext.Provider value={{ viewportHeight: 1000, itemHeight: 50 }}>
+        {children}
+      </VirtuosoMockContext.Provider>
+    </TestWrapper>
+  );
   const render = async () => {
     let renderResult: ReturnType<typeof tlr>;