update tests

getsentry · Jun 28, 2023 · 6d38774 · 6d38774
1 parent 6e99ea0
commit 6d38774
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 18 deletions.
diff --git a/snuba/admin/package-lock.json b/snuba/admin/package-lock.json
diff --git a/snuba/admin/package.json b/snuba/admin/package.json
@@ -41,7 +41,9 @@
     "jest": "^29.4.3",
     "jest-environment-jsdom": "^29.5.0",
     "react-bootstrap": "^2.7.4",
+    "resize-observer-polyfill": "^1.5.1",
     "ts-jest": "^29.0.5",
+    "use-resize-observer": "^9.1.0",
     "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0"
   },

diff --git a/snuba/admin/static/query_editor.tsx b/snuba/admin/static/query_editor.tsx
@@ -61,8 +61,6 @@ function QueryEditor(props: {
   >(undefined);
 
   const variableRegex = /{{([a-zA-Z0-9_]+)}}/;
-  const textAreaStyle = { width: "100%", height: 140 };
-
   const editor = useEditor({
     extensions: [
       StarterKit,
@@ -172,7 +170,7 @@ function QueryEditor(props: {
       ) : null}
 
       <RichTextEditor editor={editor}>
-        <RichTextEditor.Content />
+        <RichTextEditor.Content data-testid="text-editor-input" />
       </RichTextEditor>
       {renderParameterSetters()}
       <Prism withLineNumbers language="sql">

diff --git a/snuba/admin/static/tests/query_editor.spec.tsx b/snuba/admin/static/tests/query_editor.spec.tsx
@@ -6,6 +6,7 @@ import userEvent from "@testing-library/user-event";
 import QueryEditor from "../query_editor";
 
 describe("Query editor", () => {
+  global.ResizeObserver = require("resize-observer-polyfill");
   afterEach(cleanup);
   describe("when generating queries", () => {
     it("should replace all instances of parameter name when it has a non-empty parameter value", () => {
@@ -108,16 +109,19 @@ describe("Query editor", () => {
         }
       });
     });
-    describe("with text area input", () => {
+    describe("with text editor input", () => {
       it("should invoke call back with text area value when no labels are present", async () => {
         const user = userEvent.setup();
         let mockOnQueryUpdate = jest.fn<(query: string) => {}>();
         let { getByTestId } = render(
           <QueryEditor onQueryUpdate={mockOnQueryUpdate} />
         );
         const input = "abcde";
-        await act(async () => user.type(getByTestId("text-area-input"), input));
-        expect(mockOnQueryUpdate).toHaveBeenLastCalledWith(input);
+        const field = getByTestId("text-editor-input").querySelector("input");
+        if (field) {
+          await act(async () => user.type(field, input));
+          expect(mockOnQueryUpdate).toHaveBeenLastCalledWith(input);
+        }
       });
     });
   });

diff --git a/snuba/admin/static/tests/tracing/index.spec.tsx b/snuba/admin/static/tests/tracing/index.spec.tsx
@@ -15,6 +15,7 @@ import { ClickhouseNodeData } from "../../clickhouse_queries/types";
 
 import default_response from "./fixture";
 
+global.ResizeObserver = require("resize-observer-polyfill");
 it("select executor rows should appear", async () => {
   let mockClient = {
     ...Client(),
@@ -45,9 +46,12 @@ it("select executor rows should appear", async () => {
 
   expect(queryByText("Copy to clipboard", { exact: false })).toBeNull();
 
-  fireEvent.change(getByRole("textbox"), {
-    target: { value: "Foo" },
-  });
+  const field = getByRole("textbox").querySelector("input");
+  if (field) {
+    fireEvent.change(field, {
+      target: { value: "Foo" },
+    });
+  }
 
   const submitButton = screen.getByText("Execute query");
   expect(submitButton.getAttribute("disabled")).toBeFalsy();

diff --git a/snuba/admin/static/tracing/index.tsx b/snuba/admin/static/tracing/index.tsx
@@ -334,7 +334,7 @@ function TracingQueries(props: { api: Client }) {
         <a href="https://getsentry.github.io/snuba/clickhouse/death_queries.html">
           🛑 WARNING! BEFORE RUNNING QUERIES, READ THIS 🛑
         </a>
-        <RichTextEditor editor={editor}>
+        <RichTextEditor editor={editor} role="textbox">
           <RichTextEditor.Content />
         </RichTextEditor>
         <Prism withLineNumbers language="sql">

diff --git a/snuba/admin/yarn.lock b/snuba/admin/yarn.lock
@@ -714,6 +714,11 @@
     "@jridgewell/resolve-uri" "3.1.0"
     "@jridgewell/sourcemap-codec" "1.4.14"
 
+"@juggle/resize-observer@^3.3.1":
+  version "3.4.0"
+  resolved "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz"
+  integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
+
 "@linaria/core@4.2.9":
   version "4.2.9"
   resolved "https://registry.npmjs.org/@linaria/core/-/core-4.2.9.tgz"
@@ -4239,6 +4244,11 @@ requires-port@^1.0.0:
   resolved "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz"
   integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
 
+resize-observer-polyfill@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
 resolve-cwd@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz"
@@ -4724,6 +4734,13 @@ use-latest@^1.2.1:
   dependencies:
     use-isomorphic-layout-effect "^1.1.1"
 
+use-resize-observer@^9.1.0:
+  version "9.1.0"
+  resolved "https://registry.npmjs.org/use-resize-observer/-/use-resize-observer-9.1.0.tgz"
+  integrity sha512-R25VqO9Wb3asSD4eqtcxk8sJalvIOYBqS8MNZlpDSQ4l4xMQxC/J7Id9HoTqPq8FwULIn0PVW+OAqF2dyYbjow==
+  dependencies:
+    "@juggle/resize-observer" "^3.3.1"
+
 use-sidecar@^1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz"