Skip to content

Commit e6fc6c4

Browse files
simeydotmesimeydotme
committed
update/improve some tests
1 parent 0e1b90a commit e6fc6c4

File tree

13 files changed

+1266
-7597
lines changed

13 files changed

+1266
-7597
lines changed

‎dist/range-slider-pips.js‎

Lines changed: 173 additions & 173 deletions
Large diffs are not rendered by default.

‎dist/range-slider-pips.mjs‎

Lines changed: 173 additions & 173 deletions
Large diffs are not rendered by default.

‎dist/svelte/components/RangeSlider.svelte‎

Lines changed: 39 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ const checkMinMax = () => {
100100
max = coerceFloat(max, precision);
101101
};
102102
const checkValueIsNumber = () => {
103-
if (typeof value !== "number") {
103+
if (!isFiniteNumber(value)) {
104104
value = (max + min) / 2;
105105
console.error("'value' prop should be a Number");
106106
}
@@ -109,6 +109,9 @@ const checkValuesIsArray = () => {
109109
if (!Array.isArray(values)) {
110110
values = [value];
111111
console.error("'values' prop should be an Array");
112+
} else if (values.some((v) => !isFiniteNumber(v))) {
113+
values = values.map((v) => isFiniteNumber(v) ? v : (max + min) / 2);
114+
console.error("'values' prop should be an Array of Numbers");
112115
}
113116
};
114117
const checkAriaLabels = () => {
@@ -165,29 +168,34 @@ $: formatter, checkFormatters();
165168
$: handleFormatter, checkFormatters();
166169
$: rangeFormatter, checkFormatters();
167170
$: hasRange = range === true && values.length === 2 || (range === "min" || range === "max") && values.length === 1;
168-
$: {
169-
const trimmedValues = trimRange(values, range);
171+
$: ((uValues, uValue) => {
172+
const trimmedValues = trimRange(uValues, range);
170173
const trimmedAlignedValues = trimmedValues.map((v) => constrainAndAlignValue(v, min, max, step, precision, limits));
171-
if (!(values.length === trimmedAlignedValues.length) || !values.every((item, i) => coerceFloat(item, precision) === trimmedAlignedValues[i])) {
172-
values = trimmedAlignedValues;
173-
}
174-
if (valueLength !== values.length) {
175-
springPositions = springStore(
176-
values.map((v) => valueAsPercent(v, min, max)),
177-
springValues
174+
if (!(uValues.length === trimmedAlignedValues.length) || !uValues.every((item, i) => coerceFloat(item, precision) === trimmedAlignedValues[i])) {
175+
uValues = trimmedAlignedValues;
176+
}
177+
if (valueLength !== uValues.length) {
178+
createSpring(uValues);
179+
} else if (slider) {
180+
updateSpring(uValues);
181+
}
182+
values = uValues;
183+
valueLength = uValues.length;
184+
})(values, value);
185+
const createSpring = (values2) => {
186+
springPositions = springStore(
187+
values2.map((v) => valueAsPercent(v, min, max)),
188+
springValues
189+
);
190+
};
191+
const updateSpring = (values2) => {
192+
requestAnimationFrame(() => {
193+
springPositions.set(
194+
values2.map((v) => valueAsPercent(v, min, max)),
195+
{ hard: !spring }
178196
);
179-
} else {
180-
if (slider) {
181-
requestAnimationFrame(() => {
182-
springPositions.set(
183-
values.map((v) => valueAsPercent(v, min, max)),
184-
{ hard: !spring }
185-
);
186-
});
187-
}
188-
}
189-
valueLength = values.length;
190-
}
197+
});
198+
};
191199
$: orientationStart = vertical ? reversed ? "top" : "bottom" : reversed ? "right" : "left";
192200
$: orientationEnd = vertical ? reversed ? "bottom" : "top" : reversed ? "left" : "right";
193201
function updateSliderSize(slider2) {
@@ -532,15 +540,15 @@ function ariaLabelFormatter(value2, index) {
532540
class:rsFocus={focus}
533541
class:rsPips={pips}
534542
class:rsPipLabels={all === 'label' || first === 'label' || last === 'label' || rest === 'label'}
535-
style:--slider-length={sliderSize}
536-
{style}
543+
style={`--slider-length: ${sliderSize};${style ?? ''}`}
537544
on:mousedown={sliderInteractStart}
538545
on:mouseup={sliderInteractEnd}
539546
on:touchstart|preventDefault={sliderInteractStart}
540547
on:touchend|preventDefault={sliderInteractEnd}
541548
>
542549
{#each values as value, index}
543-
{@const zindex = `${focus && activeHandle === index ? 3 : ''}`}
550+
{@const zindex = focus && activeHandle === index ? `z-index: 3; ` : ``}
551+
{@const mountOpacity = isMounted ? `` : `opacity: 0; `}
544552
<span
545553
role="slider"
546554
class="rangeHandle"
@@ -550,8 +558,7 @@ function ariaLabelFormatter(value2, index) {
550558
on:blur={sliderBlurHandle}
551559
on:focus={sliderFocusHandle}
552560
on:keydown={sliderKeydown}
553-
style:--handle-pos={$springPositions[index]}
554-
style="z-index: {zindex}; {isMounted ? '' : 'opacity: 0;'}"
561+
style={`--handle-pos: ${$springPositions[index]};${zindex}${mountOpacity}`}
555562
aria-label={ariaLabels[index]}
556563
aria-valuemin={range === true && index === 1 ? values[0] : min}
557564
aria-valuemax={range === true && index === 0 ? values[1] : max}
@@ -581,13 +588,14 @@ function ariaLabelFormatter(value2, index) {
581588
></span>
582589
{/if}
583590
{#if hasRange}
591+
{@const rangeStart = rangeStartPercent($springPositions)}
592+
{@const rangeEnd = rangeEndPercent($springPositions)}
593+
{@const rangeSize = rangeEnd - rangeStart}
594+
{@const mountOpacity = isMounted ? `` : `opacity: 0; `}
584595
<span
585596
class="rangeBar"
586597
class:rsPress={rangePressed}
587-
style:--range-start={rangeStartPercent($springPositions)}
588-
style:--range-end={rangeEndPercent($springPositions)}
589-
style:--range-size={rangeEndPercent($springPositions) - rangeStartPercent($springPositions)}
590-
style={isMounted ? '' : 'opacity: 0;'}
598+
style={`--range-start:${rangeStart};--range-end:${rangeEnd};--range-size:${rangeSize};${mountOpacity};`}
591599
>
592600
{#if rangeFloat}
593601
<span class="rangeFloat">

‎dist/svelte/utils.js‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -70,23 +70,23 @@ export const percentAsValue = function (percent, min, max) {
7070
* @return {number} the value after it's been aligned
7171
**/
7272
export const constrainAndAlignValue = function (value, min, max, step, precision = 2, limits = null) {
73+
value = isFiniteNumber(value) ? value : limits?.[0] ?? min;
7374
// if limits are provided, clamp the value between the limits
7475
// if no limits are provided, clamp the value between the min and max
7576
// before we start aligning the value
76-
value = clampValue(value, limits?.[0] ?? min, limits?.[1] ?? max);
77-
// escape early if the value is at/beyond the known limits
78-
if (limits?.[0] && value <= limits[0]) {
79-
return limits?.[0];
80-
}
81-
else if (limits?.[1] && value >= limits[1]) {
82-
return limits?.[1];
83-
}
84-
else if (max && value >= max) {
85-
return max;
86-
}
87-
else if (min && value <= min) {
88-
return min;
77+
if (value <= (limits?.[0] ?? min) || value >= (limits?.[1] ?? max)) {
78+
return (value = clampValue(value, limits?.[0] ?? min, limits?.[1] ?? max));
8979
}
80+
// escape early if the value is at/beyond the known limits
81+
// if (limits?.[0] && value <= limits[0]) {
82+
// return limits?.[0];
83+
// } else if (limits?.[1] && value >= limits[1]) {
84+
// return limits?.[1];
85+
// } else if (max && value >= max) {
86+
// return max;
87+
// } else if (min && value <= min) {
88+
// return min;
89+
// }
9090
// find the middle-point between steps
9191
// and see if the value is closer to the
9292
// next step, or previous step

‎tests/playwright/RangePips.limits.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ test.describe('Range and Limits Tests', () => {
157157
}
158158
}
159159

160-
// Move min handle to 40
160+
// Move min handle to 20
161161
await dragHandleTo(page, slider, handles.nth(0), 0.2);
162162
await expect(handles.nth(0)).toHaveAttribute('aria-valuenow', '20');
163163
await dragHandleTo(page, slider, handles.nth(1), 1);

‎tests/playwright/RangeSlider.formatters.handle.spec.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -350,7 +350,7 @@ test.describe('Handle Formatter Tests', () => {
350350
await expect(float).toBeVisible();
351351
// The heavy formatter should still complete within a reasonable time
352352
await expect(float).toContainText('.');
353-
await dragHandleTo(page, slider, handle, 20);
353+
await dragHandleTo(page, slider, handle, 1);
354354
await expect(float).toContainText('.');
355355
});
356356

@@ -385,6 +385,7 @@ test.describe('Handle Formatter Tests', () => {
385385
test.describe('Formatter Inheritance Tests', () => {
386386
test('handleFormatter inherits from formatter when not specified', async ({ page }) => {
387387
await page.goto('/test/range-slider/formatters/handle');
388+
await page.waitForLoadState('networkidle');
388389

389390
// Get the formatter inheritance test slider
390391
const slider = page.locator('#formatter-inheritance');
@@ -416,6 +417,8 @@ test.describe('Handle Formatter Tests', () => {
416417
});
417418

418419
await page.goto('/test/range-slider/formatters/handle');
420+
await page.waitForLoadState('networkidle');
421+
419422
const slider = page.locator('#null-handle-formatter');
420423
const handle = slider.locator('.rangeHandle');
421424
const float = handle.locator('.rangeFloat');

‎tests/playwright/RangeSlider.formatters.range.spec.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -337,6 +337,8 @@ test.describe('Formatter Tests', () => {
337337

338338
test('should handle heavy range formatter without performance issues', async ({ page }) => {
339339
const slider = page.locator('#heavy-formatter');
340+
const handle = slider.locator('.rangeHandle').first();
341+
const handleFloat = handle.locator('.rangeFloat');
340342
const rangeBar = slider.locator('.rangeBar');
341343
const rangeFloat = rangeBar.locator('.rangeFloat');
342344

@@ -345,6 +347,9 @@ test.describe('Formatter Tests', () => {
345347
await expect(rangeFloat).toBeVisible();
346348
// The heavy formatter should still complete within a reasonable time
347349
await expect(rangeFloat).toContainText('-');
350+
// shouldnt have a handle float
351+
await handle.hover();
352+
await expect(handleFloat).not.toBeVisible();
348353
});
349354

350355
test('should handle rapid handle movements with range formatters', async ({ page }) => {

‎tests/playwright/RangeSlider.minmax.spec.ts‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -384,7 +384,7 @@ test.describe('Min/Max Tests', () => {
384384

385385
await slider.scrollIntoViewIfNeeded();
386386

387-
await dragHandleTo(page, slider, handle, -2);
387+
await dragHandleTo(page, slider, handle, -0.1);
388388
await expect(handle).toHaveAttribute('aria-valuenow', '20');
389389
await expect(handle).toHaveCSS('translate', '0px');
390390
});
@@ -395,7 +395,7 @@ test.describe('Min/Max Tests', () => {
395395

396396
await slider.scrollIntoViewIfNeeded();
397397

398-
await dragHandleTo(page, slider, handle, 1.2);
398+
await dragHandleTo(page, slider, handle, 1.1);
399399
await expect(handle).toHaveAttribute('aria-valuenow', '80');
400400
await expect(handle).toHaveCSS('translate', '1000px');
401401
});
@@ -407,12 +407,12 @@ test.describe('Min/Max Tests', () => {
407407
await slider.scrollIntoViewIfNeeded();
408408

409409
// Drag to min
410-
await dragHandleTo(page, slider, handle, -1.2);
410+
await dragHandleTo(page, slider, handle, -0.1);
411411
await expect(handle).toHaveAttribute('aria-valuenow', '-80');
412412
await expect(handle).toHaveCSS('translate', '0px');
413413

414414
// Drag to max
415-
await dragHandleTo(page, slider, handle, 1.2);
415+
await dragHandleTo(page, slider, handle, 1.1);
416416
await expect(handle).toHaveAttribute('aria-valuenow', '-20');
417417
await expect(handle).toHaveCSS('translate', '1000px');
418418
});
@@ -754,13 +754,17 @@ test.describe('Min/Max Tests', () => {
754754
await page.waitForTimeout(100);
755755

756756
// Try to drag first handle below min
757-
await dragHandleTo(page, slider, handles.nth(0), -0.5);
757+
await dragHandleTo(page, slider, handles.nth(0), -0.1);
758758
await expect(handles.nth(0)).toHaveAttribute('aria-valuenow', '20'); // Should be clamped to min
759759

760760
// Try to drag second handle above max
761-
await dragHandleTo(page, slider, handles.nth(1), 1.5);
761+
await dragHandleTo(page, slider, handles.nth(1), 1.1);
762762
await expect(handles.nth(1)).toHaveAttribute('aria-valuenow', '80'); // Should be clamped to max
763763

764+
// Drag second handle to far left
765+
await dragHandleTo(page, slider, handles.nth(1), 0);
766+
await expect(handles.nth(1)).toHaveAttribute('aria-valuenow', '20'); // Should be clamped to max
767+
764768
// Try to drag first handle above second handle (should be allowed in non-range mode)
765769
await dragHandleTo(page, slider, handles.nth(0), 0.8);
766770
await expect(handles.nth(0)).toHaveAttribute('aria-valuenow', '68'); // 80% of (80-20) is 48. 48 + 20 = 68.

‎tests/playwright/RangeSlider.range.draggy.spec.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -168,14 +168,14 @@ test.describe('Range Tests', () => {
168168
await expect(handles.nth(1)).toHaveCSS('translate', '500px');
169169

170170
// Try to drag range in a way that would violate minimum gap
171-
await dragHandleTo(page, slider, range, 1.2);
171+
await dragHandleTo(page, slider, range, 1.1);
172172

173173
// Handles should maintain minimum gap
174174
await expect(handles.nth(0)).toHaveCSS('translate', '900px');
175175
await expect(handles.nth(1)).toHaveCSS('translate', '1000px');
176176

177177
// Try to drag range in a way that would violate maximum gap
178-
await dragHandleTo(page, slider, range, -0.2);
178+
await dragHandleTo(page, slider, range, -0.1);
179179

180180
// Handles should maintain maximum gap
181181
await expect(handles.nth(0)).toHaveCSS('translate', '0px');

‎tests/svelte4/package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)