From 2ab8185f172e3d066b05d53fe53a61edd6ab9127 Mon Sep 17 00:00:00 2001
From: Anurag Hazra <hazru.anurag@gmail.com>
Date: Thu, 22 Oct 2020 20:12:09 +0530
Subject: [PATCH] test: improve meter and range calendar tests (#111)

* test: improved meter test coverage & removed redundant code

* test: assert live announcer tests in range calendar
---
 src/calendar/__tests__/RangeCalendar.test.tsx | 32 +++++++++++++++++++
 src/meter/MeterState.ts                       | 12 +++----
 src/meter/__tests__/Meter.test.tsx            | 14 ++++++++
 src/meter/helpers.ts                          | 16 ----------
 4 files changed, 52 insertions(+), 22 deletions(-)

diff --git a/src/calendar/__tests__/RangeCalendar.test.tsx b/src/calendar/__tests__/RangeCalendar.test.tsx
index 9947b1b16..57f2538d3 100644
--- a/src/calendar/__tests__/RangeCalendar.test.tsx
+++ b/src/calendar/__tests__/RangeCalendar.test.tsx
@@ -1,4 +1,6 @@
+jest.mock("../../utils/LiveAnnouncer");
 import * as React from "react";
+import { cleanup } from "@testing-library/react";
 import { axe, render, press } from "reakit-test-utils";
 
 import {
@@ -13,6 +15,13 @@ import {
   RangeCalendarInitialState,
 } from "../index";
 import { isEndSelection, isStartSelection } from "../../utils/test-utils";
+import { announce, destroyAnnouncer } from "../../utils/LiveAnnouncer";
+
+afterEach(cleanup);
+
+beforeEach(() => {
+  destroyAnnouncer();
+});
 
 const RangeCalendarComp: React.FC<RangeCalendarInitialState> = props => {
   const state = useRangeCalendarState(props);
@@ -105,6 +114,29 @@ describe("RangeCalendar", () => {
     expect(end).toHaveTextContent("30");
   });
 
+  it("should announce selected range after finishing selection", async () => {
+    const { getByLabelText: label } = render(
+      <RangeCalendarComp
+        defaultValue={{ start: "2019-10-07", end: "2019-10-30" }}
+      />,
+    );
+
+    press.Tab();
+    press.Tab();
+    press.Tab();
+    press.Tab();
+    press.Tab();
+    press.Enter(label(/Monday, October 7, 2019 selected/));
+    press.ArrowDown();
+    press.ArrowRight();
+    press.Enter(label(/Tuesday, October 15, 2019/));
+
+    expect(announce).toHaveBeenCalledTimes(2);
+    expect(announce).toHaveBeenLastCalledWith(
+      "Selected range, from 7th Oct 2019 to 15th Oct 2019",
+    );
+  });
+
   it("should be able to select ranges with keyboard navigation", () => {
     const { getByLabelText: label, getByTestId: testId, baseElement } = render(
       <RangeCalendarComp
diff --git a/src/meter/MeterState.ts b/src/meter/MeterState.ts
index 21b640ec9..81fd33484 100644
--- a/src/meter/MeterState.ts
+++ b/src/meter/MeterState.ts
@@ -3,8 +3,8 @@ import {
   useSealedState,
 } from "reakit-utils/useSealedState";
 
-import { isFunction, valueToPercent } from "../utils";
-import { getDefaultOptimumValue, calculateStatus, clamp } from "./helpers";
+import { isFunction, valueToPercent, clampValue } from "../utils";
+import { getDefaultOptimumValue, calculateStatus } from "./helpers";
 
 type Status = "safe" | "caution" | "danger" | undefined;
 
@@ -83,10 +83,10 @@ export const useMeterState = (
   const initialOptimum =
     sealed.optimum ?? getDefaultOptimumValue(initialLow, initialHigh);
 
-  const value = clamp(initialValue, min, max);
-  const optimum = clamp(initialOptimum, min, max);
-  let low = clamp(initialLow, min, max);
-  let high = clamp(initialHigh, min, max);
+  const value = clampValue(initialValue, min, max);
+  const optimum = clampValue(initialOptimum, min, max);
+  let low = clampValue(initialLow, min, max);
+  let high = clampValue(initialHigh, min, max);
 
   // More inequalities handled
   //  low ≤ high (if both low and high are specified)
diff --git a/src/meter/__tests__/Meter.test.tsx b/src/meter/__tests__/Meter.test.tsx
index 167b80c5a..52bfb5ae7 100644
--- a/src/meter/__tests__/Meter.test.tsx
+++ b/src/meter/__tests__/Meter.test.tsx
@@ -124,4 +124,18 @@ describe("Meter", () => {
     },
     data,
   );
+
+  test("useMeterState: low >= high", function () {
+    const { current } = renderMeterStateHook({ low: 1, high: 0.2 });
+
+    expect(current.low).toBe(0.2);
+    expect(current.high).toBe(0.2);
+  });
+
+  test("useMeterState: high >= low", function () {
+    const { current } = renderMeterStateHook({ high: 1, low: 0.2 });
+
+    expect(current.low).toBe(0.2);
+    expect(current.high).toBe(1);
+  });
 });
diff --git a/src/meter/helpers.ts b/src/meter/helpers.ts
index 30720350c..203b7b227 100644
--- a/src/meter/helpers.ts
+++ b/src/meter/helpers.ts
@@ -8,22 +8,6 @@ export function getDefaultOptimumValue(min: number, max: number) {
   return max < min ? min : min + (max - min) / 2;
 }
 
-/**
- * Handle Inequalities with received values
- *
- * minimum ≤ value ≤ maximum
- * minimum ≤ low ≤ maximum (if low is specified)
- * minimum ≤ high ≤ maximum (if high is specified)
- * minimum ≤ optimum ≤ maximum (if optimum is specified)
- *
- * @see https://html.spec.whatwg.org/multipage/form-elements.html#the-meter-element:attr-meter-max-3:~:text=following%20inequalities%20must%20hold
- */
-export function clamp(value: number, min: number, max: number) {
-  if (value == null) return 0;
-
-  return Math.min(Math.max(value, min), max);
-}
-
 type CalculateStatusProps = {
   value: number;
   optimum: number;