From b72ca241f28feb0381f66203eb0bb3f57de79d1e Mon Sep 17 00:00:00 2001 From: Tayyaba Taimur <19307765+tayyabataimur@users.noreply.github.com> Date: Fri, 24 Jan 2025 10:39:45 +0000 Subject: [PATCH] Fix tests --- .../lab/src/__tests__/slider/utils.spec.tsx | 93 ------------------- .../lab/stories/slider/slider.qa.stories.tsx | 13 +-- .../lab/stories/slider/slider.stories.tsx | 12 +-- 3 files changed, 10 insertions(+), 108 deletions(-) delete mode 100644 packages/lab/src/__tests__/slider/utils.spec.tsx diff --git a/packages/lab/src/__tests__/slider/utils.spec.tsx b/packages/lab/src/__tests__/slider/utils.spec.tsx deleted file mode 100644 index e6046c84bfa..00000000000 --- a/packages/lab/src/__tests__/slider/utils.spec.tsx +++ /dev/null @@ -1,93 +0,0 @@ -import { describe, expect, it } from "vitest"; -import { - clampValue, - getMarkStyles, - getNearestIndex, - getPercentage, - getPercentageDifference, - getPercentageOffset, - preventOverlappingValues, - roundToStep, -} from "../../slider/internal/utils"; - -describe("Slider utils", () => { - describe("roundToStep", () => { - it("should round values to the nearest step", () => { - expect(roundToStep(10.1, 5)).toEqual(10); - expect(roundToStep(5.5, 2)).toEqual(6); - expect(roundToStep(0.1115, 1)).toEqual(0); - }); - }); - - describe("clampValue", () => { - it("should clamp values between min and max", () => { - expect(clampValue(10, [0, 5])).toEqual(5); - expect(clampValue(-5, [0, 5])).toEqual(0); - expect(clampValue(2, [0, 5])).toEqual(2); - }); - }); - - describe("getPercentage", () => { - it("should return the percentage of a value between min and max", () => { - expect(getPercentage(0, 10, 5)).toEqual(50); - }); - }); - - describe("getPercentageDifference", () => { - it("should return the percentage difference between two values", () => { - expect(getPercentageDifference(0, 10, [0, 5])).toEqual("50%"); - }); - }); - - describe("getPercentageOffset", () => { - it("should return the percentage offset of a range value", () => { - expect(getPercentageOffset(0, 10, [0, 5])).toEqual("0%"); - }); - }); - - describe("getMarkStyles", () => { - it("should return an array of marks with their position", () => { - expect(getMarkStyles(0, 10, 5)).toEqual([ - { label: "0", value: 0, position: "0%" }, - { label: "5", value: 5, position: "50%" }, - { label: "10", value: 10, position: "100%" }, - ]); - }); - }); - - describe("getNearestIndex", () => { - it("should return the index of the nearest value in an array", () => { - expect(getNearestIndex([0, 5], 2)).toEqual(0); - expect(getNearestIndex([0, 5], 4)).toEqual(1); - expect(getNearestIndex([100, 120], 101)).toEqual(0); - expect(getNearestIndex([100, 120], 199)).toEqual(1); - expect(getNearestIndex([100, 120], 119)).toEqual(1); - }); - it("When values are equal", () => { - expect(getNearestIndex([5, 5], 2)).toEqual(0); - expect(getNearestIndex([5, 5], 8)).toEqual(1); - expect(getNearestIndex([100, 100], 99)).toEqual(0); - expect(getNearestIndex([100, 100], 101)).toEqual(1); - }); - }); - - describe("preventOverlappingValues", () => { - it("should prevent overlapping values", () => { - expect(preventOverlappingValues([2, 5], 4, 0)).toEqual(4); - expect(preventOverlappingValues([2, 5], 5, 0)).toEqual(5); - expect(preventOverlappingValues([2, 5], 6, 0)).toEqual(5); - - expect(preventOverlappingValues([2, 5], 1, 1)).toEqual(2); - expect(preventOverlappingValues([2, 5], 2, 1)).toEqual(2); - expect(preventOverlappingValues([2, 5], 3, 1)).toEqual(3); - - expect(preventOverlappingValues([100, 120], 119, 0)).toEqual(119); - expect(preventOverlappingValues([100, 120], 120, 0)).toEqual(120); - expect(preventOverlappingValues([100, 120], 121, 0)).toEqual(120); - - expect(preventOverlappingValues([100, 120], 99, 1)).toEqual(100); - expect(preventOverlappingValues([100, 120], 100, 1)).toEqual(100); - expect(preventOverlappingValues([100, 120], 101, 1)).toEqual(101); - }); - }); -}); diff --git a/packages/lab/stories/slider/slider.qa.stories.tsx b/packages/lab/stories/slider/slider.qa.stories.tsx index de1b6a2a451..9da71d2e79b 100644 --- a/packages/lab/stories/slider/slider.qa.stories.tsx +++ b/packages/lab/stories/slider/slider.qa.stories.tsx @@ -36,7 +36,7 @@ export const BottomLabel: StoryFn = (props) => { width={1200} {...props} > - + ); }; @@ -55,12 +55,7 @@ export const WithMarks: StoryFn = (props) => { width={1200} {...props} > - + ); }; @@ -81,11 +76,11 @@ export const Range: StoryFn = (props) => { > ); diff --git a/packages/lab/stories/slider/slider.stories.tsx b/packages/lab/stories/slider/slider.stories.tsx index c249e5ae7a7..09d695c18cd 100644 --- a/packages/lab/stories/slider/slider.stories.tsx +++ b/packages/lab/stories/slider/slider.stories.tsx @@ -9,7 +9,7 @@ import { Slider, type SliderProps } from "@salt-ds/lab"; import type { StoryFn } from "@storybook/react"; import { type ChangeEvent, useEffect, useState } from "react"; -const validateSingle = (value: string, bounds: [number, number]) => { +const validateSingle = (value: number, bounds: [number, number]) => { if (Number.isNaN(Number(value))) return false; if (Number(value) < bounds[0] || Number(value) > bounds[1]) return false; return true; @@ -68,7 +68,7 @@ export const CustomStep = () => ( Step: 0.3 (not multiple of total range) - + ); @@ -88,7 +88,7 @@ WithMarks.args = { }; export const WithInput = () => { - const [value, setValue] = useState("5"); + const [value, setValue] = useState(5); const [inputValue, setInputValue] = useState(value); const [validationStatus, setValidationStatus] = useState( undefined, @@ -97,13 +97,13 @@ export const WithInput = () => { const handleInputChange = (event: ChangeEvent) => { const inputValue = event.target.value; - setInputValue(inputValue); + setInputValue(Number.parseFloat(inputValue)); if (Number.isNaN(Number(inputValue))) return; - setValue(inputValue); + setValue(Number.parseFloat(inputValue)); }; const handleChange = (event: ChangeEvent) => { - setInputValue(event.target.value); + setInputValue(Number.parseFloat(event.target.value)); setValue(inputValue); };