Skip to content

Commit

Permalink
test: added KTour unit test (#436)
Browse files Browse the repository at this point in the history
* wip: init KTour component

* wip: complete KTour component placement、mask、current zIndex、open props

* test: added KTour unit test

* test: added KTour unit test
  • Loading branch information
baiwusanyu-c committed Apr 15, 2024
1 parent e4521b6 commit 705341e
Show file tree
Hide file tree
Showing 14 changed files with 643 additions and 70 deletions.
24 changes: 0 additions & 24 deletions components/Calendar/__test__/__snapshots__/calendar.spec.ts.snap

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
Expand Up @@ -24,4 +24,4 @@ exports[`Test: KCarousel > props: cls 1`] = `"<div aria-hidden="true" class="k-c

exports[`Test: KCarousel > props: initialIndex 1`] = `"<div aria-hidden="true" class="k-carousel"><div class="k-carousel-wrap" style="height: 0px;"><div class="k-carousel-item-wrap" data-active="1" data-carousel-container="" style="width: 300%; left: -100%; transition: left .5s ease 0s;"><div class="bg-green-400/15" style="height: 280px;"></div> <div class="bg-red-500/15" style="height: 280px;"></div> <div class="bg-blue-600/15" style="height: 280px;"></div></div></div> <div class="k-carousel-arrow"> </div> <div class="k-indicators"><div role="button" class="k-indicators-item" aria-hidden="true"></div><div role="button" class="k-indicators-item k-indicators-item--active" aria-hidden="true"></div><div role="button" class="k-indicators-item" aria-hidden="true"></div></div></div>"`;

exports[`Test: KCarousel > slot: custom arrow indicators 1`] = `"<div aria-hidden="true" class="k-carousel" style="height: 300px;"><div class="k-carousel-wrap" style="height: 0px;"><div class="k-carousel-item-wrap" data-active="0" data-carousel-container="" style="width: 600%; left: -0%; transition: left .5s ease 0s;"><div class="bg-orange-100 fcc" style="height: 280px;"><h1>0</h1></div> <div class="bg-orange-200 fcc" style="height: 280px;"><h1>1</h1></div> <div class="bg-orange-100 fcc" style="height: 280px;"><h1>2</h1></div> <div class="bg-orange-200 fcc" style="height: 280px;"><h1>3</h1></div> <div class="bg-orange-100 fcc" style="height: 280px;"><h1>4</h1></div> <div class="bg-orange-200 fcc" style="height: 280px;"><h1>5</h1></div></div></div> <div slot="arrow" class="flex"><div class="k-carousel-arrow"><div aria-hidden="true" class="ml-10px cursor-pointer" slot="prev">🏀</div> <div aria-hidden="true" class="mr-10px cursor-pointer" slot="next">🏀</div></div></div> <div slot="indicators"><div class="k-carousel-indicators demo-indicators"><div slot="item" class="flex"><div class="demo-carousel-item demo-carousel-item--active svelte-1c5n2gd" role="button" aria-hidden="true"></div><div class="demo-carousel-item svelte-1c5n2gd" role="button" aria-hidden="true"></div><div class="demo-carousel-item svelte-1c5n2gd" role="button" aria-hidden="true"></div><div class="demo-carousel-item svelte-1c5n2gd" role="button" aria-hidden="true"></div><div class="demo-carousel-item svelte-1c5n2gd" role="button" aria-hidden="true"></div><div class="demo-carousel-item svelte-1c5n2gd" role="button" aria-hidden="true"></div></div></div></div></div>"`;
exports[`Test: KCarousel > slot: custom arrow indicators 1`] = `"<div aria-hidden="true" class="k-carousel" style="height: 300px;"><div class="k-carousel-wrap" style="height: 0px;"><div class="k-carousel-item-wrap" data-active="0" data-carousel-container="" style="width: 600%; left: -0%; transition: left .5s ease 0s;"><div class="bg-orange-100 fcc" style="height: 280px;"><h1>0</h1></div> <div class="bg-orange-200 fcc" style="height: 280px;"><h1>1</h1></div> <div class="bg-orange-100 fcc" style="height: 280px;"><h1>2</h1></div> <div class="bg-orange-200 fcc" style="height: 280px;"><h1>3</h1></div> <div class="bg-orange-100 fcc" style="height: 280px;"><h1>4</h1></div> <div class="bg-orange-200 fcc" style="height: 280px;"><h1>5</h1></div></div></div> <div slot="arrow" class="flex"><div class="k-carousel-arrow"><div aria-hidden="true" class="ml-10px cursor-pointer" slot="prev">🏀</div> <div aria-hidden="true" class="mr-10px cursor-pointer" slot="next">🏀</div></div></div> <div slot="indicators"><div class="k-indicators demo-indicators"><div slot="item" class="flex"><div class="demo-carousel-item demo-carousel-item--active svelte-1c5n2gd" role="button" aria-hidden="true"></div><div class="demo-carousel-item svelte-1c5n2gd" role="button" aria-hidden="true"></div><div class="demo-carousel-item svelte-1c5n2gd" role="button" aria-hidden="true"></div><div class="demo-carousel-item svelte-1c5n2gd" role="button" aria-hidden="true"></div><div class="demo-carousel-item svelte-1c5n2gd" role="button" aria-hidden="true"></div><div class="demo-carousel-item svelte-1c5n2gd" role="button" aria-hidden="true"></div></div></div></div></div>"`;
6 changes: 3 additions & 3 deletions components/Carousel/__test__/fixture/custom.svelte
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script lang="ts">
import { KCarousel, KCarouselArrow, KIndicators } from '@ikun-ui/carousel';
import { clsx } from 'clsx';
import { KCarousel, KCarouselArrow } from '@ikun-ui/carousel';
import { KIndicators } from '@ikun-ui/indicators';
import clsx from 'clsx';
$: itemCls = (index: number, activeIndex: number) =>
clsx(`demo-carousel-item`, {
[`demo-carousel-item--active`]: activeIndex === index
Expand Down
49 changes: 49 additions & 0 deletions components/Tour/__test__/__snapshots__/tour.spec.ts.snap

Large diffs are not rendered by default.

27 changes: 27 additions & 0 deletions components/Tour/__test__/fixture/open.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<script>
import { KTour } from '@ikun-ui/tour';
let refEl = null;
let refEl2 = null;
let steps = [];
$: {
steps = [
{
title: '111111111111111111',
target: refEl
},
{
title: 'custom-title',
target: refEl2
}
];
}
let open = false;
const handleClick = () => {
open = true;
};
</script>

<KTour {open} {steps} current={1}></KTour>
<button bind:this={refEl}>111</button>
<button bind:this={refEl2}>222</button>
<button on:click={handleClick} id="bwsy_trigger">trigger</button>
28 changes: 28 additions & 0 deletions components/Tour/__test__/fixture/slots.btn.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<script>
import { KTour } from '@ikun-ui/tour';
let refEl = null;
let refEl2 = null;
let steps = [];
$: {
steps = [
{
title: '111111111111111111',
target: refEl
},
{
title: 'custom-title',
target: refEl2
}
];
}
let open = true;
</script>

<KTour {open} {steps} mask={false} current={1}>
<button slot="prevButton" id="bwsy_prev" let:handlePrev on:click={handlePrev}>上一步</button>
<button slot="nextButton" id="bwsy_next" let:handleNext on:click={handleNext}>下一步</button>
</KTour>
<div class="w-full h-2000px fcc">
<button bind:this={refEl}>111</button>
<button bind:this={refEl2}>222</button>
</div>
29 changes: 29 additions & 0 deletions components/Tour/__test__/fixture/slots.close.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<script>
import { KTour } from '@ikun-ui/tour';
let refEl = null;
let refEl2 = null;
let steps = [];
$: {
steps = [
{
title: '111111111111111111',
target: refEl
},
{
title: 'custom-title',
target: refEl2
}
];
}
let open = true;
</script>

<KTour {open} {steps} mask={false} current={1}>
<div slot="closeIcon" id="bwsy" let:handleClose on:click={handleClose} aria-hidden="true">
custom close
</div>
</KTour>
<div class="w-full h-2000px fcc">
<button bind:this={refEl}>111</button>
<button bind:this={refEl2}>222</button>
</div>
30 changes: 30 additions & 0 deletions components/Tour/__test__/fixture/slots.descr.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<script>
import { KTour } from '@ikun-ui/tour';
let refEl = null;
let refEl2 = null;
let steps = [];
$: {
steps = [
{
title: '111111111111111111',
target: refEl
},
{
title: 'custom-title',
description: 'custom-description',
target: refEl2
}
];
}
let open = true;
</script>

<KTour {open} {steps} mask={false} current={1}>
<div slot="description" let:current let:description>
{current}-{description}
</div>
</KTour>
<div class="w-full h-2000px fcc">
<button bind:this={refEl}>111</button>
<button bind:this={refEl2}>222</button>
</div>
30 changes: 30 additions & 0 deletions components/Tour/__test__/fixture/slots.footer.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<script>
import { KTour } from '@ikun-ui/tour';
let refEl = null;
let refEl2 = null;
let steps = [];
$: {
steps = [
{
title: '111111111111111111',
target: refEl
},
{
title: 'custom-title',
target: refEl2
}
];
}
let open = true;
</script>

<KTour {open} {steps} mask={false} current={1}>
<div slot="footer" let:current let:handleNext let:handlePrev>
<button id="bwsy_prev" on:click={handlePrev}>上一步{current}</button>
<button id="bwsy_next" on:click={handleNext}>下一步{current}</button>
</div>
</KTour>
<div class="w-full h-2000px fcc">
<button bind:this={refEl}>111</button>
<button bind:this={refEl2}>222</button>
</div>
29 changes: 29 additions & 0 deletions components/Tour/__test__/fixture/slots.indicator.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<script>
import { KTour } from '@ikun-ui/tour';
let refEl = null;
let refEl2 = null;
let steps = [];
$: {
steps = [
{
title: '111111111111111111',
target: refEl
},
{
title: 'custom-title',
target: refEl2
}
];
}
let open = true;
</script>

<KTour {open} {steps} mask={false} current={1}>
<div slot="indicators" let:current>
indicators-{current}
</div>
</KTour>
<div class="w-full h-2000px fcc">
<button bind:this={refEl}>111</button>
<button bind:this={refEl2}>222</button>
</div>
29 changes: 29 additions & 0 deletions components/Tour/__test__/fixture/slots.title.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<script>
import { KTour } from '@ikun-ui/tour';
let refEl = null;
let refEl2 = null;
let steps = [];
$: {
steps = [
{
title: '111111111111111111',
target: refEl
},
{
title: 'custom-title',
target: refEl2
}
];
}
let open = true;
</script>

<KTour {open} {steps} mask={false} current={1}>
<div slot="title" let:current let:title>
{current}-{title}
</div>
</KTour>
<div class="w-full h-2000px fcc">
<button bind:this={refEl}>111</button>
<button bind:this={refEl2}>222</button>
</div>

0 comments on commit 705341e

Please sign in to comment.