keep test util backwards compatible

Author: Alice Koreman

src/code-view/__tests__/code-view.test.tsx

@@ -16,30 +16,21 @@ describe("CodeView", () => {
   test("correctly renders simple content", () => {
     render(<CodeView content={"Hello World"}></CodeView>);
     const wrapper = createWrapper()!.findCodeView();
-    expect(wrapper!.findContent()[0].getElement()).toHaveTextContent("Hello World");
+    expect(wrapper!.findContent().getElement()).toHaveTextContent("Hello World");
   });
 
   test("correctly renders multi line content", () => {
     render(<CodeView content={`# Hello World\n\nThis is a markdown example.`}></CodeView>);
     const wrapper = createWrapper()!.findCodeView()!;
     const content = wrapper.findContent();
-    expect(content[0].getElement()).toHaveTextContent("# Hello World");
-    expect(content[1].getElement()).toHaveTextContent("");
-    expect(content[2].getElement()).toHaveTextContent("This is a markdown example.");
+    expect(content.getElement()).toHaveTextContent("# Hello World This is a markdown example.");
   });
 
   test("correctly renders multi line content", () => {
-    const content = `# Hello World\n\nThis is a markdown example.`;
-
-    render(<CodeView content={content}></CodeView>);
-    const wrapper = createWrapper()!.findCodeView();
-    const contentElements = wrapper!.findContent();
-    expect(contentElements.length).toEqual(3);
-    const renderedContent = contentElements
-      .map((element) => element.getElement().textContent)
-      .join("")
-      .trim();
-    expect(renderedContent).toBe(content);
+    render(<CodeView content={`# Hello World\n\nThis is a markdown example.`}></CodeView>);
+    const wrapper = createWrapper()!.findCodeView()!;
+    const content = wrapper.findContent();
+    expect(content.getElement()).toHaveTextContent("# Hello World This is a markdown example.");
   });
 
   test("correctly renders copy button slot", () => {
@@ -84,13 +75,13 @@ describe("CodeView", () => {
       ></CodeView>,
     );
     const wrapper = createWrapper().findCodeView()!;
-    expect(wrapper!.findContent()[0].getElement().innerHTML).toContain("tokenized");
+    expect(wrapper!.findContent().getElement().innerHTML).toContain("tokenized");
   });
 
   test("correctly tokenizes content if highlight is set to language rules", () => {
     render(<CodeView content={'const hello: string = "world";'} highlight={typescriptHighlightRules}></CodeView>);
     const wrapper = createWrapper().findCodeView()!;
-    const element = wrapper!.findContent()[0].getElement();
+    const element = wrapper!.findContent().getElement();
 
     // Check that the content is tokenized following typescript rules.
     expect(getByText(element, "const")).toHaveClass("ace_type");
@@ -102,21 +93,21 @@ describe("CodeView", () => {
   test("sets nowrap class to line if linesWrapping undefined", () => {
     render(<CodeView content={"Hello World"}></CodeView>);
     const wrapper = createWrapper().findCodeView()!;
-    const element = wrapper!.findContent()[0].getElement();
+    const element = wrapper!.findContent().getElement();
     expect(element.outerHTML).toContain("code-line-nowrap");
   });
 
   test("sets nowrap class to line if linesWrapping false", () => {
     render(<CodeView lineWrapping={false} content={"Hello World"}></CodeView>);
     const wrapper = createWrapper().findCodeView()!;
-    const element = wrapper!.findContent()[0].getElement();
+    const element = wrapper!.findContent().getElement();
     expect(element.outerHTML).toContain("code-line-nowrap");
   });
 
   test("sets wrap class to line if linesWrapping true", () => {
     render(<CodeView lineWrapping={true} content={"Hello World"}></CodeView>);
     const wrapper = createWrapper().findCodeView()!;
-    const element = wrapper!.findContent()[0].getElement();
+    const element = wrapper!.findContent().getElement();
     expect(element.outerHTML).toContain("code-line-wrap");
   });
 });

src/test-utils/dom/code-view/index.ts

@@ -7,8 +7,8 @@ import styles from "../../../code-view/styles.selectors.js";
 export default class CodeViewWrapper extends ComponentWrapper {
   static rootSelector: string = styles.root;
 
-  findContent() {
-    return this.findAllByClassName(styles["code-line"])!;
+  findContent(): ElementWrapper {
+    return this.find("tbody")!;
   }
 
   findActions(): ElementWrapper | null {