refactor(tests): ✅ updated tests for meter & progress

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

src/meter/MeterState.ts

@@ -114,6 +114,6 @@ export const useMeterState = (
     percent,
     ariaValueText: isFunction(ariaValueText)
       ? ariaValueText?.(value, percent)
-      : `${value}%`,
+      : `${percent}%`,
   };
 };

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;

src/meter/__tests__/Meter.test.tsx

@@ -42,7 +42,7 @@ describe("Meter", () => {
           role="meter progressbar"
         />
       </div>
-  `);
+    `);
   });
 
   it("checks role", function () {

src/progress/ProgressState.ts

@@ -81,6 +81,6 @@ export function useProgressState(
     percent,
     ariaValueText: isFunction(ariaValueText)
       ? ariaValueText?.(value, percent)
-      : `${value}%`,
+      : `${percent}%`,
   };
 }

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;

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"
             />