From 23dd4284205c99f8bbc6ee74f9e9c4832268d1ad Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Sat, 13 Mar 2021 06:57:08 +0000
Subject: [PATCH 1/2] chore(deps): bump @testing-library/react in
 /packages/dev-frontend

Bumps [@testing-library/react](https://github.com/testing-library/react-testing-library) from 9.5.0 to 11.2.5.
- [Release notes](https://github.com/testing-library/react-testing-library/releases)
- [Changelog](https://github.com/testing-library/react-testing-library/blob/master/CHANGELOG.md)
- [Commits](https://github.com/testing-library/react-testing-library/compare/v9.5.0...v11.2.5)

Signed-off-by: dependabot[bot] <support@github.com>
---
 packages/dev-frontend/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dev-frontend/package.json b/packages/dev-frontend/package.json
index 969e1744c..04a349cff 100644
--- a/packages/dev-frontend/package.json
+++ b/packages/dev-frontend/package.json
@@ -12,7 +12,7 @@
     "@popperjs/core": "^2.9.1",
     "@testing-library/dom": "^7.30.0",
     "@testing-library/jest-dom": "^5.1.1",
-    "@testing-library/react": "^9.4.0",
+    "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^10.0.0",
     "@types/jest": "^26.0.20",
     "@types/react": "^17.0.0",

From 7a46074bb883286957a890d34f2bf3ff87456685 Mon Sep 17 00:00:00 2001
From: Daniel Simon <daniel.attila.simon@gmail.com>
Date: Sun, 14 Mar 2021 08:07:17 +0700
Subject: [PATCH 2/2] test: fix Dev UI smoke test after @testing-library/react
 upgrade

---
 .../src/components/Trove/Editor.tsx           | 77 ++++++++++---------
 1 file changed, 41 insertions(+), 36 deletions(-)

diff --git a/packages/dev-frontend/src/components/Trove/Editor.tsx b/packages/dev-frontend/src/components/Trove/Editor.tsx
index 36272b248..cbb18a1f8 100644
--- a/packages/dev-frontend/src/components/Trove/Editor.tsx
+++ b/packages/dev-frontend/src/components/Trove/Editor.tsx
@@ -5,14 +5,15 @@ import { Icon } from "../Icon";
 
 type RowProps = {
   label: string;
+  labelId?: string;
   labelFor?: string;
   unit?: string;
 };
 
-const Row: React.FC<RowProps> = ({ label, labelFor, unit, children }) => {
+const Row: React.FC<RowProps> = ({ label, labelId, labelFor, unit, children }) => {
   return (
     <Flex sx={{ alignItems: "stretch" }}>
-      <Label htmlFor={labelFor} sx={{ width: unit ? "106px" : "170px" }}>
+      <Label id={labelId} htmlFor={labelFor} sx={{ width: unit ? "106px" : "170px" }}>
         {label}
       </Label>
       {unit && (
@@ -27,6 +28,7 @@ const Row: React.FC<RowProps> = ({ label, labelFor, unit, children }) => {
 
 type StaticAmountsProps = {
   inputId: string;
+  labelledBy?: string;
   amount: string;
   color?: string;
   pendingAmount?: string;
@@ -39,6 +41,7 @@ type StaticAmountsProps = {
 const StaticAmounts: React.FC<StaticAmountsProps & SxProp> = ({
   sx,
   inputId,
+  labelledBy,
   amount,
   color,
   pendingAmount,
@@ -51,6 +54,7 @@ const StaticAmounts: React.FC<StaticAmountsProps & SxProp> = ({
     <Label
       variant={variant}
       id={inputId}
+      aria-labelledby={labelledBy}
       sx={{
         ...sx,
         ...(invalid ? { backgroundColor: "invalid" } : {}),
@@ -125,42 +129,43 @@ export const EditableRow: React.FC<EditableRowProps> = ({
   const [editing, setEditing] = editingState;
   const [invalid, setInvalid] = useState<boolean>(false);
 
-  return (
+  return editing === inputId ? (
     <Row {...{ label, labelFor: inputId, unit }}>
-      {editing === inputId ? (
-        <Input
-          autoFocus
-          sx={invalid ? { backgroundColor: "invalid" } : {}}
-          id={inputId}
-          type="number"
-          step="any"
-          defaultValue={editedAmount}
-          {...{ invalid }}
-          onChange={e => {
-            try {
-              setEditedAmount(e.target.value);
-              setInvalid(false);
-            } catch {
-              setInvalid(true);
-            }
-          }}
-          onBlur={() => {
-            setEditing(undefined);
+      <Input
+        autoFocus
+        sx={invalid ? { backgroundColor: "invalid" } : {}}
+        id={inputId}
+        type="number"
+        step="any"
+        defaultValue={editedAmount}
+        {...{ invalid }}
+        onChange={e => {
+          try {
+            setEditedAmount(e.target.value);
             setInvalid(false);
-          }}
-        />
-      ) : (
-        <StaticAmounts
-          inputId={inputId}
-          amount={amount}
-          color={color}
-          pendingAmount={pendingAmount}
-          pendingColor={pendingColor}
-          invalid={invalid}
-          variant={variant}
-          onClick={() => setEditing(inputId)}
-        />
-      )}
+          } catch {
+            setInvalid(true);
+          }
+        }}
+        onBlur={() => {
+          setEditing(undefined);
+          setInvalid(false);
+        }}
+      />
+    </Row>
+  ) : (
+    <Row labelId={`${inputId}-label`} {...{ label, unit }}>
+      <StaticAmounts
+        inputId={inputId}
+        labelledBy={`${inputId}-label`}
+        amount={amount}
+        color={color}
+        pendingAmount={pendingAmount}
+        pendingColor={pendingColor}
+        invalid={invalid}
+        variant={variant}
+        onClick={() => setEditing(inputId)}
+      />
     </Row>
   );
 };