From 6ebb5c8ab263eaababf9d649a30f271f5c4dc58c Mon Sep 17 00:00:00 2001
From: Navin <navin007.a@gmail.com>
Date: Tue, 20 Oct 2020 14:29:16 +0530
Subject: [PATCH] =?UTF-8?q?refactor(tests):=20=E2=9C=85=20=20updated=20tes?=
 =?UTF-8?q?ts=20for=20meter=20&=20progress?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/meter/Meter.ts                       | 7 ++++---
 src/meter/MeterState.ts                  | 2 +-
 src/meter/__keys.ts                      | 7 ++++---
 src/meter/__tests__/Meter.test.tsx       | 2 +-
 src/progress/ProgressState.ts            | 2 +-
 src/progress/__keys.ts                   | 2 +-
 src/progress/__tests__/Progress.test.tsx | 2 +-
 7 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/meter/Meter.ts b/src/meter/Meter.ts
index 13436cf28..95067e437 100644
--- a/src/meter/Meter.ts
+++ b/src/meter/Meter.ts
@@ -5,7 +5,7 @@ import { METER_KEYS } from "./__keys";
 import { MeterStateReturn } from "./MeterState";
 
 export type MeterOptions = BoxOptions &
-  Pick<MeterStateReturn, "value" | "max" | "min">;
+  Pick<MeterStateReturn, "value" | "max" | "min" | "ariaValueText">;
 
 export type MeterHTMLProps = BoxHTMLProps;
 
@@ -16,8 +16,9 @@ const useMeter = createHook<MeterOptions, MeterHTMLProps>({
   compose: useBox,
   keys: METER_KEYS,
 
-  useProps(options, { "aria-valuetext": ariaValueText, ...htmlProps }) {
-    const { value, max, min } = options;
+  useProps(options, htmlProps) {
+    const { value, max, min, ariaValueText } = options;
+    console.log("%c ariaValueText", "color: #99adcc", ariaValueText);
 
     // Use the meter role if available, but fall back to progressbar if not
     // Chrome currently falls back from meter automatically, and Firefox
diff --git a/src/meter/MeterState.ts b/src/meter/MeterState.ts
index 3cd28cf87..21b640ec9 100644
--- a/src/meter/MeterState.ts
+++ b/src/meter/MeterState.ts
@@ -114,6 +114,6 @@ export const useMeterState = (
     percent,
     ariaValueText: isFunction(ariaValueText)
       ? ariaValueText?.(value, percent)
-      : `${value}%`,
+      : `${percent}%`,
   };
 };
diff --git a/src/meter/__keys.ts b/src/meter/__keys.ts
index 9d62f8cec..5f156523e 100644
--- a/src/meter/__keys.ts
+++ b/src/meter/__keys.ts
@@ -4,9 +4,10 @@ const METER_STATE_KEYS = [
   "min",
   "max",
   "low",
-  "optimum",
   "high",
-  "status",
+  "optimum",
+  "ariaValueText",
   "percent",
+  "status",
 ] as const;
-export const METER_KEYS = [...METER_STATE_KEYS, "getAriaValueText"] as const;
+export const METER_KEYS = METER_STATE_KEYS;
diff --git a/src/meter/__tests__/Meter.test.tsx b/src/meter/__tests__/Meter.test.tsx
index 43d4bd30f..167b80c5a 100644
--- a/src/meter/__tests__/Meter.test.tsx
+++ b/src/meter/__tests__/Meter.test.tsx
@@ -42,7 +42,7 @@ describe("Meter", () => {
           role="meter progressbar"
         />
       </div>
-  `);
+    `);
   });
 
   it("checks role", function () {
diff --git a/src/progress/ProgressState.ts b/src/progress/ProgressState.ts
index 669a6636c..c18a32fae 100644
--- a/src/progress/ProgressState.ts
+++ b/src/progress/ProgressState.ts
@@ -81,6 +81,6 @@ export function useProgressState(
     percent,
     ariaValueText: isFunction(ariaValueText)
       ? ariaValueText?.(value, percent)
-      : `${value}%`,
+      : `${percent}%`,
   };
 }
diff --git a/src/progress/__keys.ts b/src/progress/__keys.ts
index e6ad80a5d..75e16d755 100644
--- a/src/progress/__keys.ts
+++ b/src/progress/__keys.ts
@@ -4,8 +4,8 @@ const PROGRESS_STATE_KEYS = [
   "min",
   "max",
   "isIndeterminate",
-  "percent",
   "ariaValueText",
+  "percent",
   "setValue",
 ] as const;
 export const PROGRESS_KEYS = PROGRESS_STATE_KEYS;
diff --git a/src/progress/__tests__/Progress.test.tsx b/src/progress/__tests__/Progress.test.tsx
index 9bfdce89f..64a0a201c 100644
--- a/src/progress/__tests__/Progress.test.tsx
+++ b/src/progress/__tests__/Progress.test.tsx
@@ -25,7 +25,7 @@ describe("Progress", () => {
               aria-valuemax="100"
               aria-valuemin="0"
               aria-valuenow="10"
-              aria-valuetext="10"
+              aria-valuetext="10%"
               data-testid="progress"
               role="progressbar"
             />