From bb092d239667520bf51a5c40399bd1d297530722 Mon Sep 17 00:00:00 2001
From: Michael Kimberlin <mkimberlin@gmail.com>
Date: Tue, 9 Apr 2024 14:41:45 -0500
Subject: [PATCH 1/3] Fix snapshot test that has async state updates

---
 web-ui/src/components/edit_skills/EditSkillsCard.jsx      | 2 +-
 web-ui/src/components/edit_skills/EditSkillsCard.test.jsx | 8 ++++----
 web-ui/src/setupTests.js                                  | 6 ++++++
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/web-ui/src/components/edit_skills/EditSkillsCard.jsx b/web-ui/src/components/edit_skills/EditSkillsCard.jsx
index 414e7e8892..7f86d145e6 100644
--- a/web-ui/src/components/edit_skills/EditSkillsCard.jsx
+++ b/web-ui/src/components/edit_skills/EditSkillsCard.jsx
@@ -163,7 +163,7 @@ const EditSkillsCard = ({ skill }) => {
     <Card className="pending-skills-card">
       <CardHeader subheader={description} title={name} />
       <CardContent>
-        <div>{members && submittedBy(members)}</div>
+        <div data-testid="skill-submitted-by" >{members && submittedBy(members)}</div>
       </CardContent>
       <CardActions>
         {skill.pending && <Button onClick={acceptSkill}>Accept</Button>}
diff --git a/web-ui/src/components/edit_skills/EditSkillsCard.test.jsx b/web-ui/src/components/edit_skills/EditSkillsCard.test.jsx
index 5b73dd8a8c..62e73c6a19 100644
--- a/web-ui/src/components/edit_skills/EditSkillsCard.test.jsx
+++ b/web-ui/src/components/edit_skills/EditSkillsCard.test.jsx
@@ -70,13 +70,13 @@ afterAll(() => server.close());
 
 describe("EditSkillsCard", () => {
   it("renders correctly with skill", async () => {
-    act(() => snapshot(
-      <AppContextProvider value={initialState}>
+    await waitForSnapshot("skill-submitted-by",
+      (<AppContextProvider value={initialState}>
         <BrowserRouter>
           <EditSkillsCard skill={pendingSkill} />
         </BrowserRouter>
-      </AppContextProvider>
-    ));
+      </AppContextProvider>)
+    );
   });
 
   it("renders correctly", () => {
diff --git a/web-ui/src/setupTests.js b/web-ui/src/setupTests.js
index 6c453f0a52..041e4fa2a1 100644
--- a/web-ui/src/setupTests.js
+++ b/web-ui/src/setupTests.js
@@ -3,6 +3,7 @@ import React from "react";
 import createFetchMock from 'vitest-fetch-mock';;
 import requestAnimationFrame from "raf/polyfill";
 import { render } from "@testing-library/react";
+import {screen} from '@testing-library/dom';
 import '@testing-library/jest-dom';
 
 const mockModule = await vi.importActual("react-dom");
@@ -30,6 +31,11 @@ global.snapshot = (component, options) =>
   expect(render(component, options).container).toMatchSnapshot();
 global.rootSnapshot = (component, options) =>
   expect(render(component, options).baseElement).toMatchSnapshot();
+global.waitForSnapshot = async (testId, component, options) => {
+  const rendered = render(component, options);
+  await screen.findByTestId(testId);
+  expect(rendered.container).toMatchSnapshot();
+}
 
 global.window = global.window || {};
 global.window.requestAnimationFrame = global.requestAnimationFrame = requestAnimationFrame;

From 7a1ca4b8706d38c3f6017e5edf1d4683a708ca85 Mon Sep 17 00:00:00 2001
From: Michael Kimberlin <mkimberlin@gmail.com>
Date: Tue, 9 Apr 2024 14:59:43 -0500
Subject: [PATCH 2/3] Actually add the updated snapshot

---
 .../EditSkillsCard.test.jsx.snap              | 79 ++++++++++++++++++-
 1 file changed, 78 insertions(+), 1 deletion(-)

diff --git a/web-ui/src/components/edit_skills/__snapshots__/EditSkillsCard.test.jsx.snap b/web-ui/src/components/edit_skills/__snapshots__/EditSkillsCard.test.jsx.snap
index 50b21ffa56..383db666e7 100644
--- a/web-ui/src/components/edit_skills/__snapshots__/EditSkillsCard.test.jsx.snap
+++ b/web-ui/src/components/edit_skills/__snapshots__/EditSkillsCard.test.jsx.snap
@@ -96,4 +96,81 @@ exports[`EditSkillsCard > renders correctly 1`] = `
 </div>
 `;
 
-exports[`EditSkillsCard > renders correctly with skill 1`] = `<div />`;
+exports[`EditSkillsCard > renders correctly with skill 1`] = `
+<div>
+  <div
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root pending-skills-card css-bhp9pd-MuiPaper-root-MuiCard-root"
+  >
+    <div
+      class="MuiCardHeader-root css-185gdzj-MuiCardHeader-root"
+    >
+      <div
+        class="MuiCardHeader-content css-1qbkelo-MuiCardHeader-content"
+      >
+        <span
+          class="MuiTypography-root MuiTypography-h5 MuiCardHeader-title css-1qvr50w-MuiTypography-root"
+        >
+          Le test skill
+        </span>
+        <span
+          class="MuiTypography-root MuiTypography-body1 MuiCardHeader-subheader css-nrdprl-MuiTypography-root"
+        >
+          le description
+        </span>
+      </div>
+    </div>
+    <div
+      class="MuiCardContent-root css-46bh2p-MuiCardContent-root"
+    >
+      <div
+        data-testid="skill-submitted-by"
+      >
+        <div>
+          Submitted by: 
+          <div
+            class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-gavykb-MuiChip-root"
+          >
+            <div
+              class="MuiAvatar-root MuiAvatar-circular MuiChip-avatar MuiChip-avatarMedium MuiChip-avatarColorDefault css-1wlk0hk-MuiAvatar-root"
+            >
+              <img
+                class="MuiAvatar-img css-1pqm26d-MuiAvatar-img"
+                src="http://localhost:8080/services/member-profiles/member-photos/undefined"
+              />
+            </div>
+            <span
+              class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
+            >
+              Current User
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="MuiCardActions-root MuiCardActions-spacing css-dnrpxu-MuiCardActions-root"
+    >
+      <button
+        class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1e6y48t-MuiButtonBase-root-MuiButton-root"
+        tabindex="0"
+        type="button"
+      >
+        Edit
+        <span
+          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+        />
+      </button>
+      <button
+        class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1e6y48t-MuiButtonBase-root-MuiButton-root"
+        tabindex="0"
+        type="button"
+      >
+        Delete
+        <span
+          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+        />
+      </button>
+    </div>
+  </div>
+</div>
+`;

From 6a6c924396d00e494efd41f6d86b5fcef989a12c Mon Sep 17 00:00:00 2001
From: Michael Kimberlin <mkimberlin@gmail.com>
Date: Tue, 9 Apr 2024 15:14:17 -0500
Subject: [PATCH 3/3] Look for the right thing in the test. :-/

---
 web-ui/src/components/edit_skills/EditSkillsCard.jsx   | 10 +++++-----
 .../__snapshots__/EditSkillsCard.test.jsx.snap         |  8 ++++----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/web-ui/src/components/edit_skills/EditSkillsCard.jsx b/web-ui/src/components/edit_skills/EditSkillsCard.jsx
index 7f86d145e6..78d4bb883d 100644
--- a/web-ui/src/components/edit_skills/EditSkillsCard.jsx
+++ b/web-ui/src/components/edit_skills/EditSkillsCard.jsx
@@ -142,20 +142,20 @@ const EditSkillsCard = ({ skill }) => {
     if (second) {
       const secondProfile = selectProfileMap(state)[second];
       return rest.length ? (
-        <div>
+        <div data-testid="skill-submitted-by">
           Submitted By: {chip(firstProfile)} {chip(secondProfile)}
           {rest && ` and ${rest.length} others`}.
         </div>
       ) : (
-        <div>
+        <div data-testid="skill-submitted-by">
           Submitted By: {chip(firstProfile)} {chip(secondProfile)}
         </div>
       );
     } else
       return firstProfile ? (
-        <div>Submitted by: {chip(firstProfile)}</div>
+        <div data-testid="skill-submitted-by">Submitted by: {chip(firstProfile)}</div>
       ) : (
-        <div>Submitted by: Unknown</div>
+        <div data-testid="skill-submitted-by">Submitted by: Unknown</div>
       );
   };
 
@@ -163,7 +163,7 @@ const EditSkillsCard = ({ skill }) => {
     <Card className="pending-skills-card">
       <CardHeader subheader={description} title={name} />
       <CardContent>
-        <div data-testid="skill-submitted-by" >{members && submittedBy(members)}</div>
+        <div>{members && submittedBy(members)}</div>
       </CardContent>
       <CardActions>
         {skill.pending && <Button onClick={acceptSkill}>Accept</Button>}
diff --git a/web-ui/src/components/edit_skills/__snapshots__/EditSkillsCard.test.jsx.snap b/web-ui/src/components/edit_skills/__snapshots__/EditSkillsCard.test.jsx.snap
index 383db666e7..07b0630f60 100644
--- a/web-ui/src/components/edit_skills/__snapshots__/EditSkillsCard.test.jsx.snap
+++ b/web-ui/src/components/edit_skills/__snapshots__/EditSkillsCard.test.jsx.snap
@@ -122,10 +122,10 @@ exports[`EditSkillsCard > renders correctly with skill 1`] = `
     <div
       class="MuiCardContent-root css-46bh2p-MuiCardContent-root"
     >
-      <div
-        data-testid="skill-submitted-by"
-      >
-        <div>
+      <div>
+        <div
+          data-testid="skill-submitted-by"
+        >
           Submitted by: 
           <div
             class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-gavykb-MuiChip-root"