Skip to content

Commit 17e2439

Browse files
Copilotsimeydotme
Copilot
and
simeydotme
committed
Add comprehensive tests for prefix/suffix span elements
Co-authored-by: simeydotme <2817396+simeydotme@users.noreply.github.com>
1 parent 96a07f1 commit 17e2439

File tree

2 files changed

+253
-0
lines changed

2 files changed

+253
-0
lines changed

‎src/routes/test/range-slider/formatters/pips/+page.svelte‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -169,4 +169,20 @@
169169

170170
<h3>Step values - tests formatting with non-unit step values</h3>
171171
<RangeSlider id="step-values" pips all="label" step={5} formatter={percentFormatter} />
172+
173+
<h2>Prefix and Suffix Tests</h2>
174+
<h3>Slider with prefix set on creation</h3>
175+
<RangeSlider id="prefix-initial" pips all="label" prefix="$" />
176+
177+
<h3>Slider with suffix set on creation</h3>
178+
<RangeSlider id="suffix-initial" pips all="label" suffix="%" />
179+
180+
<h3>Slider with both prefix and suffix set on creation</h3>
181+
<RangeSlider id="prefix-suffix-initial" pips all="label" prefix="Value: " suffix=" units" />
182+
183+
<h3>Slider with prefix set to empty string on creation</h3>
184+
<RangeSlider id="prefix-empty" pips all="label" prefix="" />
185+
186+
<h3>Slider with suffix set to empty string on creation</h3>
187+
<RangeSlider id="suffix-empty" pips all="label" suffix="" />
172188
</div>

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

Lines changed: 237 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -405,4 +405,241 @@ test.describe('Pip Formatter Tests', () => {
405405
await expect(pips.last()).toHaveText('100.0%');
406406
});
407407
});
408+
409+
test.describe('Prefix and Suffix Span Element Tests', () => {
410+
test('should not render prefix/suffix spans when not provided', async ({ page }) => {
411+
const slider = page.locator('#dynamic-formatter');
412+
const pips = slider.locator('.rsPipVal');
413+
414+
// Initially no prefix/suffix
415+
await expect(pips.first().locator('.rsPipValPrefix')).toHaveCount(0);
416+
await expect(pips.first().locator('.rsPipValSuffix')).toHaveCount(0);
417+
});
418+
419+
test('should render prefix spans when prefix is set on slider creation', async ({ page }) => {
420+
const slider = page.locator('#prefix-initial');
421+
const prefixSpans = slider.locator('.rsPipValPrefix');
422+
const pips = slider.locator('.rsPipVal');
423+
424+
// Check that prefix spans are rendered
425+
const pipCount = await pips.count();
426+
await expect(prefixSpans).toHaveCount(pipCount);
427+
await expect(prefixSpans.first()).toHaveText('$');
428+
429+
// Verify the full text includes prefix
430+
await expect(pips.first()).toHaveText('$0');
431+
await expect(pips.nth(10)).toHaveText('$50');
432+
});
433+
434+
test('should render suffix spans when suffix is set on slider creation', async ({ page }) => {
435+
const slider = page.locator('#suffix-initial');
436+
const suffixSpans = slider.locator('.rsPipValSuffix');
437+
const pips = slider.locator('.rsPipVal');
438+
439+
// Check that suffix spans are rendered
440+
const pipCount = await pips.count();
441+
await expect(suffixSpans).toHaveCount(pipCount);
442+
await expect(suffixSpans.first()).toHaveText('%');
443+
444+
// Verify the full text includes suffix
445+
await expect(pips.first()).toHaveText('0%');
446+
await expect(pips.nth(10)).toHaveText('50%');
447+
});
448+
449+
test('should render both prefix and suffix spans when both are set on slider creation', async ({ page }) => {
450+
const slider = page.locator('#prefix-suffix-initial');
451+
const prefixSpans = slider.locator('.rsPipValPrefix');
452+
const suffixSpans = slider.locator('.rsPipValSuffix');
453+
const pips = slider.locator('.rsPipVal');
454+
455+
// Check that both spans are rendered
456+
const pipCount = await pips.count();
457+
await expect(prefixSpans).toHaveCount(pipCount);
458+
await expect(suffixSpans).toHaveCount(pipCount);
459+
await expect(prefixSpans.first()).toHaveText('Value: ');
460+
await expect(suffixSpans.first()).toHaveText(' units');
461+
462+
// Verify the full text includes both
463+
await expect(pips.first()).toHaveText('Value: 0 units');
464+
await expect(pips.nth(10)).toHaveText('Value: 50 units');
465+
});
466+
467+
test('should not render prefix spans when prefix is empty string', async ({ page }) => {
468+
const slider = page.locator('#prefix-empty');
469+
const prefixSpans = slider.locator('.rsPipValPrefix');
470+
471+
// No prefix spans should be rendered for empty string
472+
await expect(prefixSpans).toHaveCount(0);
473+
});
474+
475+
test('should not render suffix spans when suffix is empty string', async ({ page }) => {
476+
const slider = page.locator('#suffix-empty');
477+
const suffixSpans = slider.locator('.rsPipValSuffix');
478+
479+
// No suffix spans should be rendered for empty string
480+
await expect(suffixSpans).toHaveCount(0);
481+
});
482+
483+
test('should render prefix span when prefix is provided', async ({ page }) => {
484+
const slider = page.locator('#dynamic-formatter');
485+
const prefixButton = page.locator('#btn_prefix');
486+
487+
// Add prefix
488+
await prefixButton.click();
489+
490+
// Check that prefix spans are rendered
491+
const prefixSpans = slider.locator('.rsPipValPrefix');
492+
await expect(prefixSpans).not.toHaveCount(0);
493+
await expect(prefixSpans.first()).toHaveText('Value: ');
494+
495+
// Verify all pip labels have prefix spans
496+
const pipCount = await slider.locator('.rsPipVal').count();
497+
await expect(prefixSpans).toHaveCount(pipCount);
498+
});
499+
500+
test('should render suffix span when suffix is provided', async ({ page }) => {
501+
const slider = page.locator('#dynamic-formatter');
502+
const suffixButton = page.locator('#btn_suffix');
503+
504+
// Add suffix
505+
await suffixButton.click();
506+
507+
// Check that suffix spans are rendered
508+
const suffixSpans = slider.locator('.rsPipValSuffix');
509+
await expect(suffixSpans).not.toHaveCount(0);
510+
await expect(suffixSpans.first()).toHaveText(' units');
511+
512+
// Verify all pip labels have suffix spans
513+
const pipCount = await slider.locator('.rsPipVal').count();
514+
await expect(suffixSpans).toHaveCount(pipCount);
515+
});
516+
517+
test('should render both prefix and suffix spans when both are provided', async ({ page }) => {
518+
const slider = page.locator('#dynamic-formatter');
519+
const prefixButton = page.locator('#btn_prefix');
520+
const suffixButton = page.locator('#btn_suffix');
521+
522+
// Add both prefix and suffix
523+
await prefixButton.click();
524+
await suffixButton.click();
525+
526+
// Check that both spans are rendered
527+
const prefixSpans = slider.locator('.rsPipValPrefix');
528+
const suffixSpans = slider.locator('.rsPipValSuffix');
529+
const pipCount = await slider.locator('.rsPipVal').count();
530+
531+
await expect(prefixSpans).toHaveCount(pipCount);
532+
await expect(suffixSpans).toHaveCount(pipCount);
533+
await expect(prefixSpans.first()).toHaveText('Value: ');
534+
await expect(suffixSpans.first()).toHaveText(' units');
535+
});
536+
537+
test('should remove prefix spans when prefix is set to empty', async ({ page }) => {
538+
const slider = page.locator('#dynamic-formatter');
539+
const prefixButton = page.locator('#btn_prefix');
540+
541+
// Add prefix
542+
await prefixButton.click();
543+
await expect(slider.locator('.rsPipValPrefix')).not.toHaveCount(0);
544+
545+
// Remove prefix
546+
await prefixButton.click();
547+
await expect(slider.locator('.rsPipValPrefix')).toHaveCount(0);
548+
});
549+
550+
test('should remove suffix spans when suffix is set to empty', async ({ page }) => {
551+
const slider = page.locator('#dynamic-formatter');
552+
const suffixButton = page.locator('#btn_suffix');
553+
554+
// Add suffix
555+
await suffixButton.click();
556+
await expect(slider.locator('.rsPipValSuffix')).not.toHaveCount(0);
557+
558+
// Remove suffix
559+
await suffixButton.click();
560+
await expect(slider.locator('.rsPipValSuffix')).toHaveCount(0);
561+
});
562+
563+
test('should dynamically add/remove prefix during runtime', async ({ page }) => {
564+
const slider = page.locator('#dynamic-formatter');
565+
const prefixButton = page.locator('#btn_prefix');
566+
const pips = slider.locator('.rsPipVal');
567+
568+
// Initially no prefix
569+
await expect(pips.nth(10)).toHaveText('50');
570+
await expect(slider.locator('.rsPipValPrefix')).toHaveCount(0);
571+
572+
// Add prefix
573+
await prefixButton.click();
574+
await expect(pips.nth(10)).toHaveText('Value: 50');
575+
await expect(slider.locator('.rsPipValPrefix').first()).toHaveText('Value: ');
576+
577+
// Remove prefix
578+
await prefixButton.click();
579+
await expect(pips.nth(10)).toHaveText('50');
580+
await expect(slider.locator('.rsPipValPrefix')).toHaveCount(0);
581+
582+
// Add again
583+
await prefixButton.click();
584+
await expect(pips.nth(10)).toHaveText('Value: 50');
585+
await expect(slider.locator('.rsPipValPrefix').first()).toHaveText('Value: ');
586+
});
587+
588+
test('should dynamically add/remove suffix during runtime', async ({ page }) => {
589+
const slider = page.locator('#dynamic-formatter');
590+
const suffixButton = page.locator('#btn_suffix');
591+
const pips = slider.locator('.rsPipVal');
592+
593+
// Initially no suffix
594+
await expect(pips.nth(10)).toHaveText('50');
595+
await expect(slider.locator('.rsPipValSuffix')).toHaveCount(0);
596+
597+
// Add suffix
598+
await suffixButton.click();
599+
await expect(pips.nth(10)).toHaveText('50 units');
600+
await expect(slider.locator('.rsPipValSuffix').first()).toHaveText(' units');
601+
602+
// Remove suffix
603+
await suffixButton.click();
604+
await expect(pips.nth(10)).toHaveText('50');
605+
await expect(slider.locator('.rsPipValSuffix')).toHaveCount(0);
606+
607+
// Add again
608+
await suffixButton.click();
609+
await expect(pips.nth(10)).toHaveText('50 units');
610+
await expect(slider.locator('.rsPipValSuffix').first()).toHaveText(' units');
611+
});
612+
613+
test('should toggle both prefix and suffix independently', async ({ page }) => {
614+
const slider = page.locator('#dynamic-formatter');
615+
const prefixButton = page.locator('#btn_prefix');
616+
const suffixButton = page.locator('#btn_suffix');
617+
const pips = slider.locator('.rsPipVal');
618+
619+
// Add both
620+
await prefixButton.click();
621+
await suffixButton.click();
622+
await expect(pips.nth(10)).toHaveText('Value: 50 units');
623+
await expect(slider.locator('.rsPipValPrefix')).not.toHaveCount(0);
624+
await expect(slider.locator('.rsPipValSuffix')).not.toHaveCount(0);
625+
626+
// Remove prefix only
627+
await prefixButton.click();
628+
await expect(pips.nth(10)).toHaveText('50 units');
629+
await expect(slider.locator('.rsPipValPrefix')).toHaveCount(0);
630+
await expect(slider.locator('.rsPipValSuffix')).not.toHaveCount(0);
631+
632+
// Add prefix back
633+
await prefixButton.click();
634+
await expect(pips.nth(10)).toHaveText('Value: 50 units');
635+
await expect(slider.locator('.rsPipValPrefix')).not.toHaveCount(0);
636+
await expect(slider.locator('.rsPipValSuffix')).not.toHaveCount(0);
637+
638+
// Remove suffix only
639+
await suffixButton.click();
640+
await expect(pips.nth(10)).toHaveText('Value: 50');
641+
await expect(slider.locator('.rsPipValPrefix')).not.toHaveCount(0);
642+
await expect(slider.locator('.rsPipValSuffix')).toHaveCount(0);
643+
});
644+
});
408645
});

0 commit comments

Comments
 (0)