From 3fd33b57212c8ac395c66e34d8fca2d17239a994 Mon Sep 17 00:00:00 2001
From: lorumic <michele.lorusso@canonical.com>
Date: Wed, 28 Jun 2023 08:51:28 +0200
Subject: [PATCH] fix(empty-state) test improvements following code review

---
 src/components/EmptyState/EmptyState.test.tsx | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/components/EmptyState/EmptyState.test.tsx b/src/components/EmptyState/EmptyState.test.tsx
index 124689681..3348b440e 100644
--- a/src/components/EmptyState/EmptyState.test.tsx
+++ b/src/components/EmptyState/EmptyState.test.tsx
@@ -1,45 +1,46 @@
-import { render } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import React from "react";
 
 import EmptyState from "./EmptyState";
 
 describe("EmptyState ", () => {
   it("renders the title", () => {
-    const { container } = render(
-      <EmptyState title="Test title" image={<img alt="" src="" />} />
-    );
-    expect(container).toContainHTML("Test title");
+    render(<EmptyState title="Test title" image={<img alt="" src="" />} />);
+    expect(
+      screen.getByRole("heading", { name: "Test title" })
+    ).toBeInTheDocument();
   });
 
   it("renders the image", () => {
-    const { container } = render(
+    render(
       <EmptyState
         title="Test title"
         image={<img alt="" src="path/to/image" />}
       />
     );
-    expect(container).toContainHTML("path/to/image");
+    expect(screen.getByRole("img")).toHaveAttribute("src", "path/to/image");
   });
 
   it("renders the content", () => {
-    const { container } = render(
+    render(
       <EmptyState title="Test title" image={<img alt="" src="" />}>
         Empty
       </EmptyState>
     );
-    expect(container).toContainHTML("Empty");
+    expect(screen.getByText("Empty")).toBeInTheDocument();
   });
 
   it("passes extra classes to the wrapping element", async () => {
-    const { container } = render(
+    render(
       <EmptyState
         title="Test title"
         image={<img alt="" src="" />}
         className="extra-class"
+        data-testid="wrapper"
       >
         Empty
       </EmptyState>
     );
-    expect(container).toContainHTML('div class="extra-class"');
+    expect(screen.getByTestId("wrapper")).toHaveClass("extra-class");
   });
 });