test: integration for Followers List Uploaded! Banner

Author: Eric-Zhang-Developer

src/app/__tests__/page.test.tsx

@@ -38,6 +38,23 @@ describe("User Flow", () => {
       const mutualFollowerItem = screen.queryByRole("listitem", { name: /friend_alice/i });
       expect(mutualFollowerItem).not.toBeInTheDocument();
     });
+
+    it("should display the Followers List Uploaded! banner when uploading a single proper followers.json file", async () => {
+      // Assemble
+      render(<Home></Home>);
+      const user = userEvent.setup();
+      const followers = new File([JSON.stringify(mockFollowers)], "followers.json", {
+        type: "application/json",
+      });
+
+      // Act
+      const fileInput = screen.getByTestId("file-input");
+      await user.upload(fileInput, [followers]);
+
+      // Assert
+      const followersListUploaded = await screen.findByText("Followers List Uploaded!");
+      expect(followersListUploaded).toBeInTheDocument();
+    });
   });
 
   describe("Reset Button", () => {
@@ -65,7 +82,6 @@ describe("User Flow", () => {
       // Assert (Final)
       const fileInputAfterReset = await screen.findByTestId("file-input");
       expect(fileInputAfterReset).toBeInTheDocument();
-
     });
   });
 });

src/app/page.tsx

@@ -88,7 +88,7 @@ export default function Home() {
                   <input {...getInputProps()} data-testid="file-input"></input>
 
                   {/* Conditional rendering to show if a user has uploaded single files*/}
-                  {hasProcessedFollowers && <div className="bg-slate-200 px-5 md:px-20 py-2 border-2 rounded-2xl">Followers List Uploaded!</div>}
+                  {hasProcessedFollowers && <div className="bg-slate-200 px-5 md:px-20 py-2 border-2 rounded-2xl" aria-label="Followers List Uploaded!">Followers List Uploaded!</div>}
 
                   {hasProcessedFollowing && <div className="bg-slate-200 px-5 md:px-20 py-2 border-2 rounded-2xl">Following List Uploaded!</div>}