From 826ec634de4b657b9fdbf2e96a85f789a213db1f Mon Sep 17 00:00:00 2001 From: navin-moorthy Date: Tue, 15 Sep 2020 13:06:38 +0530 Subject: [PATCH] =?UTF-8?q?chore(meter-test):=20=E2=9C=85=20=20improve=20t?= =?UTF-8?q?est=20with=20jest-in-case?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 + .../__examples__/__tests__/Meter.test.tsx | 346 +----------------- .../__tests__/statehook-test-data.ts | 336 +++++++++++++++++ tsconfig.json | 1 + 4 files changed, 349 insertions(+), 336 deletions(-) create mode 100644 src/meter/__examples__/__tests__/statehook-test-data.ts diff --git a/package.json b/package.json index 07f7f8ab7..3271c8c52 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "@react-aria/link": "3.1.1", "@react-aria/utils": "3.2.1", "@react-stately/toggle": "3.2.0", + "@types/jest-in-case": "^1.0.2", "emotion": "10.0.27", "react-use-gesture": "7.0.16", "reakit": "1.2.4", @@ -78,6 +79,7 @@ "husky": "4.3.0", "jest": "26.4.2", "jest-axe": "4.0.0", + "jest-in-case": "^1.0.2", "jest-matcher-utils": "26.4.2", "lint-staged": "10.3.0", "prettier": "2.1.1", diff --git a/src/meter/__examples__/__tests__/Meter.test.tsx b/src/meter/__examples__/__tests__/Meter.test.tsx index 309fd1c1b..fdb9051aa 100644 --- a/src/meter/__examples__/__tests__/Meter.test.tsx +++ b/src/meter/__examples__/__tests__/Meter.test.tsx @@ -1,9 +1,11 @@ import * as React from "react"; +import cases from "jest-in-case"; import { render } from "reakit-test-utils"; import { renderHook } from "reakit-test-utils/hooks"; import { jestSerializerStripFunctions } from "reakit-test-utils/jestSerializerStripFunctions"; import { MeterComp } from "../index"; +import { data } from "./statehook-test-data"; import { useMeterState, UseMeterProps } from "../../index"; expect.addSnapshotSerializer(jestSerializerStripFunctions); @@ -100,340 +102,12 @@ describe("Meter", function () { expect(meter).toBeInTheDocument(); }); - it("meter state initial state", function () { - const result = renderMeterStateHook(); - - expect(result.current).toMatchObject({ - high: 1, - low: 0, - max: 1, - min: 0, - optimum: 0.5, - percent: 0, - status: "safe", - value: 0, - }); - }); - - it("meter state with value", function () { - const result = renderMeterStateHook({ value: 0.5 }); - - expect(result.current).toMatchObject({ - high: 1, - low: 0, - max: 1, - min: 0, - optimum: 0.5, - percent: 50, - status: "safe", - value: 0.5, - }); - }); - - it("meter state with custom props", function () { - const result = renderMeterStateHook({ - min: 0, - low: 2.5, - value: 5, - high: 7.5, - max: 10, - }); - - expect(result.current).toMatchObject({ - high: 7.5, - low: 2.5, - max: 10, - min: 0, - optimum: 5, - percent: 50, - status: "safe", - value: 5, - }); - }); - - it("meter state with optimum < min", function () { - const result = renderMeterStateHook({ - min: 0, - low: 2.5, - value: 5, - high: 7.5, - max: 10, - optimum: -5, - }); - - expect(result.current).toMatchObject({ - high: 7.5, - low: 2.5, - max: 10, - min: 0, - optimum: 0, - percent: 50, - status: "caution", - value: 5, - }); - }); - - it("meter state with optimum > max", function () { - const result = renderMeterStateHook({ - min: 0, - low: 2.5, - value: 5, - high: 7.5, - max: 10, - optimum: 15, - }); - - expect(result.current).toMatchObject({ - high: 7.5, - low: 2.5, - max: 10, - min: 0, - optimum: 10, - percent: 50, - status: "caution", - value: 5, - }); - }); - - it("meter state with optimum between low & high and value at same range", function () { - const result = renderMeterStateHook({ - min: 0, - low: 2.5, - value: 5, - high: 7.5, - max: 10, - optimum: 5, - }); - - expect(result.current).toMatchObject({ - high: 7.5, - low: 2.5, - max: 10, - min: 0, - optimum: 5, - percent: 50, - status: "safe", - value: 5, - }); - }); - - it("meter state with optimum between low & high and value below low", function () { - const result = renderMeterStateHook({ - min: 0, - low: 2.5, - value: 2, - high: 7.5, - max: 10, - optimum: 5, - }); - - expect(result.current).toMatchObject({ - high: 7.5, - low: 2.5, - max: 10, - min: 0, - optimum: 5, - percent: 20, - status: "caution", - value: 2, - }); - }); - - it("meter state with optimum between low & high and value above high", function () { - const result = renderMeterStateHook({ - min: 0, - low: 2.5, - value: 8, - high: 7.5, - max: 10, - optimum: 5, - }); - - expect(result.current).toMatchObject({ - high: 7.5, - low: 2.5, - max: 10, - min: 0, - optimum: 5, - percent: 80, - status: "caution", - value: 8, - }); - }); - - it("meter state with optimum at high", function () { - const result = renderMeterStateHook({ - min: 0, - low: 2.5, - value: 5, - high: 7.5, - max: 10, - optimum: 7.5, - }); - - expect(result.current).toMatchObject({ - high: 7.5, - low: 2.5, - max: 10, - min: 0, - optimum: 7.5, - percent: 50, - status: "safe", - value: 5, - }); - }); - - it("meter state with optimum at low", function () { - const result = renderMeterStateHook({ - min: 0, - low: 2.5, - value: 5, - high: 7.5, - max: 10, - optimum: 2.5, - }); - - expect(result.current).toMatchObject({ - high: 7.5, - low: 2.5, - max: 10, - min: 0, - optimum: 2.5, - percent: 50, - status: "safe", - value: 5, - }); - }); - - it("meter state with optimum < low & >= min and value at same range", function () { - const result = renderMeterStateHook({ - min: 0, - low: 2.5, - value: 0, - high: 7.5, - max: 10, - optimum: 2, - }); - - expect(result.current).toMatchObject({ - high: 7.5, - low: 2.5, - max: 10, - min: 0, - optimum: 2, - percent: 0, - status: "safe", - value: 0, - }); - }); - - it("meter state with optimum < low & >= min and value > low", function () { - const result = renderMeterStateHook({ - min: 0, - low: 2.5, - value: 5, - high: 7.5, - max: 10, - optimum: 2, - }); - - expect(result.current).toMatchObject({ - high: 7.5, - low: 2.5, - max: 10, - min: 0, - optimum: 2, - percent: 50, - status: "caution", - value: 5, - }); - }); - - it("meter state with optimum < low & >= min and value > high", function () { - const result = renderMeterStateHook({ - min: 0, - low: 2.5, - value: 8, - high: 7.5, - max: 10, - optimum: 2, - }); - - expect(result.current).toMatchObject({ - high: 7.5, - low: 2.5, - max: 10, - min: 0, - optimum: 2, - percent: 80, - status: "danger", - value: 8, - }); - }); - - it("meter state with optimum <= max & >= high & value at same range", function () { - const result = renderMeterStateHook({ - min: 0, - low: 2.5, - value: 8, - high: 7.5, - max: 10, - optimum: 9, - }); - - expect(result.current).toMatchObject({ - high: 7.5, - low: 2.5, - max: 10, - min: 0, - optimum: 9, - percent: 80, - status: "safe", - value: 8, - }); - }); - - it("meter state with optimum <= max & >= high & value < high", function () { - const result = renderMeterStateHook({ - min: 0, - low: 2.5, - value: 5, - high: 7.5, - max: 10, - optimum: 9, - }); - - expect(result.current).toMatchObject({ - high: 7.5, - low: 2.5, - max: 10, - min: 0, - optimum: 9, - percent: 50, - status: "caution", - value: 5, - }); - }); - - it("meter state with optimum <= max & >= high & value < low", function () { - const result = renderMeterStateHook({ - min: 0, - low: 2.5, - value: 2, - high: 7.5, - max: 10, - optimum: 9, - }); - - expect(result.current).toMatchObject({ - high: 7.5, - low: 2.5, - max: 10, - min: 0, - optimum: 9, - percent: 20, - status: "danger", - value: 2, - }); - }); + cases( + "meter state hook tests", + (opts: any) => { + const result = renderMeterStateHook(opts.in); + expect(result.current).toMatchObject(opts.out); + }, + data, + ); }); diff --git a/src/meter/__examples__/__tests__/statehook-test-data.ts b/src/meter/__examples__/__tests__/statehook-test-data.ts new file mode 100644 index 000000000..0ec2ed78d --- /dev/null +++ b/src/meter/__examples__/__tests__/statehook-test-data.ts @@ -0,0 +1,336 @@ +export const data = [ + { + name: "meter state initial state", + in: {}, + out: { + high: 1, + low: 0, + max: 1, + min: 0, + optimum: 0.5, + percent: 0, + status: "safe", + value: 0, + }, + }, + { + name: "meter state with value", + in: { value: 0.5 }, + out: { + high: 1, + low: 0, + max: 1, + min: 0, + optimum: 0.5, + percent: 50, + status: "safe", + value: 0.5, + }, + }, + { + name: "meter state with custom props", + in: { + min: 0, + low: 2.5, + value: 5, + high: 7.5, + max: 10, + }, + out: { + high: 7.5, + low: 2.5, + max: 10, + min: 0, + optimum: 5, + percent: 50, + status: "safe", + value: 5, + }, + }, + + { + name: "meter state with optimum < min", + in: { + min: 0, + low: 2.5, + value: 5, + high: 7.5, + max: 10, + optimum: -5, + }, + out: { + high: 7.5, + low: 2.5, + max: 10, + min: 0, + optimum: 0, + percent: 50, + status: "caution", + value: 5, + }, + }, + + { + name: "meter state with optimum > max", + in: { + min: 0, + low: 2.5, + value: 5, + high: 7.5, + max: 10, + optimum: 15, + }, + out: { + high: 7.5, + low: 2.5, + max: 10, + min: 0, + optimum: 10, + percent: 50, + status: "caution", + value: 5, + }, + }, + + { + name: "meter state with optimum between low & high and value at same range", + in: { + min: 0, + low: 2.5, + value: 5, + high: 7.5, + max: 10, + optimum: 5, + }, + out: { + high: 7.5, + low: 2.5, + max: 10, + min: 0, + optimum: 5, + percent: 50, + status: "safe", + value: 5, + }, + }, + + { + name: "meter state with optimum between low & high and value below low", + in: { + min: 0, + low: 2.5, + value: 2, + high: 7.5, + max: 10, + optimum: 5, + }, + out: { + high: 7.5, + low: 2.5, + max: 10, + min: 0, + optimum: 5, + percent: 20, + status: "caution", + value: 2, + }, + }, + + { + name: "meter state with optimum between low & high and value above high", + in: { + min: 0, + low: 2.5, + value: 8, + high: 7.5, + max: 10, + optimum: 5, + }, + out: { + high: 7.5, + low: 2.5, + max: 10, + min: 0, + optimum: 5, + percent: 80, + status: "caution", + value: 8, + }, + }, + + { + name: "meter state with optimum at high", + in: { + min: 0, + low: 2.5, + value: 5, + high: 7.5, + max: 10, + optimum: 7.5, + }, + out: { + high: 7.5, + low: 2.5, + max: 10, + min: 0, + optimum: 7.5, + percent: 50, + status: "safe", + value: 5, + }, + }, + + { + name: "meter state with optimum at low", + in: { + min: 0, + low: 2.5, + value: 5, + high: 7.5, + max: 10, + optimum: 2.5, + }, + out: { + high: 7.5, + low: 2.5, + max: 10, + min: 0, + optimum: 2.5, + percent: 50, + status: "safe", + value: 5, + }, + }, + + { + name: "meter state with optimum < low & >= min and value at same range", + in: { + min: 0, + low: 2.5, + value: 0, + high: 7.5, + max: 10, + optimum: 2, + }, + out: { + high: 7.5, + low: 2.5, + max: 10, + min: 0, + optimum: 2, + percent: 0, + status: "safe", + value: 0, + }, + }, + + { + name: "meter state with optimum < low & >= min and value > low", + in: { + min: 0, + low: 2.5, + value: 5, + high: 7.5, + max: 10, + optimum: 2, + }, + out: { + high: 7.5, + low: 2.5, + max: 10, + min: 0, + optimum: 2, + percent: 50, + status: "caution", + value: 5, + }, + }, + + { + name: "meter state with optimum < low & >= min and value > high", + in: { + min: 0, + low: 2.5, + value: 8, + high: 7.5, + max: 10, + optimum: 2, + }, + out: { + high: 7.5, + low: 2.5, + max: 10, + min: 0, + optimum: 2, + percent: 80, + status: "danger", + value: 8, + }, + }, + + { + name: "meter state with optimum <= max & >= high & value at same range", + in: { + min: 0, + low: 2.5, + value: 8, + high: 7.5, + max: 10, + optimum: 9, + }, + out: { + high: 7.5, + low: 2.5, + max: 10, + min: 0, + optimum: 9, + percent: 80, + status: "safe", + value: 8, + }, + }, + + { + name: "meter state with optimum <= max & >= high & value < high", + in: { + min: 0, + low: 2.5, + value: 5, + high: 7.5, + max: 10, + optimum: 9, + }, + out: { + high: 7.5, + low: 2.5, + max: 10, + min: 0, + optimum: 9, + percent: 50, + status: "caution", + value: 5, + }, + }, + + { + name: "meter state with optimum <= max & >= high & value < low", + in: { + min: 0, + low: 2.5, + value: 2, + high: 7.5, + max: 10, + optimum: 9, + }, + out: { + high: 7.5, + low: 2.5, + max: 10, + min: 0, + optimum: 9, + percent: 20, + status: "danger", + value: 2, + }, + }, +]; diff --git a/tsconfig.json b/tsconfig.json index 620210f32..f849c4343 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -18,6 +18,7 @@ "esModuleInterop": true, "allowSyntheticDefaultImports": true, "downlevelIteration": true, + "resolveJsonModule": true, "types": ["node", "jest", "@testing-library/jest-dom"] }, "exclude": ["node_modules"]