Skip to content

Commit 575cd8d

Browse files
mikededomikededo
committed
test: extend e2e tests
1 parent bfe1821 commit 575cd8d

File tree

18 files changed

+412
-12
lines changed

18 files changed

+412
-12
lines changed

‎packages/test/v3/__snapshots__/run.test.ts.snap

Lines changed: 39 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,20 @@ exports[`e2e > should lint with the config configuration > stdout 1`] = `
88
> eslint . -c eslint.config.test.mjs
99
1010
11+
/v3/src/components/button/styles.ts
12+
39:3 error TailwindCSS classes should be sorted svelte-tailwindcss/sort-classes
13+
14+
/v3/src/components/button/text-icon-button.svelte
15+
19:9 error TailwindCSS classes should be sorted svelte-tailwindcss/sort-classes
16+
17+
/v3/src/components/checkbox/checkbox.svelte
18+
15:9 error TailwindCSS classes should be sorted svelte-tailwindcss/sort-classes
19+
20+
/v3/src/components/container.svelte
21+
8:6 error Do not mix literal expressions with mustache expressions svelte-tailwindcss/no-literal-mustache-mix
22+
8:6 error TailwindCSS classes should be sorted svelte-tailwindcss/sort-classes
23+
12:1 warning Using '@apply' requires setting style lang to postcss svelte-tailwindcss/at-apply-require-postcss
24+
1125
/v3/src/routes/+page.svelte
1226
4:20 error TailwindCSS classes should be sorted svelte-tailwindcss/sort-classes
1327
5:21 error TailwindCSS classes should be sorted svelte-tailwindcss/sort-classes
@@ -21,8 +35,8 @@ exports[`e2e > should lint with the config configuration > stdout 1`] = `
2135
3:7 error TailwindCSS classes should be sorted svelte-tailwindcss/sort-classes
2236
10:1 error TailwindCSS classes should be sorted svelte-tailwindcss/sort-classes
2337
24-
✖ 9 problems (8 errors, 1 warning)
25-
8 errors and 1 warning potentially fixable with the \`--fix\` option.
38+
✖ 15 problems (13 errors, 2 warnings)
39+
13 errors and 2 warnings potentially fixable with the \`--fix\` option.
2640
2741
 ELIFECYCLE  Command failed with exit code 1.
2842
"
@@ -36,13 +50,18 @@ exports[`e2e > should lint with the default configuration > stdout 1`] = `
3650
> eslint . -c eslint.config.test.mjs
3751
3852
53+
/v3/src/components/container.svelte
54+
8:6 error Do not mix literal expressions with mustache expressions svelte-tailwindcss/no-literal-mustache-mix
55+
8:6 error TailwindCSS classes should be sorted svelte-tailwindcss/sort-classes
56+
12:1 error Using '@apply' requires setting style lang to postcss svelte-tailwindcss/at-apply-require-postcss
57+
3958
/v3/src/routes/+page.svelte
4059
17:6 error TailwindCSS classes should be sorted svelte-tailwindcss/sort-classes
4160
18:6 error Do not mix literal expressions with mustache expressions svelte-tailwindcss/no-literal-mustache-mix
4261
20:1 error Using '@apply' requires setting style lang to postcss svelte-tailwindcss/at-apply-require-postcss
4362
44-
✖ 3 problems (3 errors, 0 warnings)
45-
3 errors and 0 warnings potentially fixable with the \`--fix\` option.
63+
✖ 6 problems (6 errors, 0 warnings)
64+
6 errors and 0 warnings potentially fixable with the \`--fix\` option.
4665
4766
 ELIFECYCLE  Command failed with exit code 1.
4867
"
@@ -56,6 +75,20 @@ exports[`e2e > should lint with the settings configuration > stdout 1`] = `
5675
> eslint . -c eslint.config.test.mjs
5776
5877
78+
/v3/src/components/button/styles.ts
79+
39:3 error TailwindCSS classes should be sorted svelte-tailwindcss/sort-classes
80+
81+
/v3/src/components/button/text-icon-button.svelte
82+
19:9 error TailwindCSS classes should be sorted svelte-tailwindcss/sort-classes
83+
84+
/v3/src/components/checkbox/checkbox.svelte
85+
15:9 error TailwindCSS classes should be sorted svelte-tailwindcss/sort-classes
86+
87+
/v3/src/components/container.svelte
88+
8:6 error Do not mix literal expressions with mustache expressions svelte-tailwindcss/no-literal-mustache-mix
89+
8:6 error TailwindCSS classes should be sorted svelte-tailwindcss/sort-classes
90+
12:1 error Using '@apply' requires setting style lang to postcss svelte-tailwindcss/at-apply-require-postcss
91+
5992
/v3/src/routes/+page.svelte
6093
4:20 error TailwindCSS classes should be sorted svelte-tailwindcss/sort-classes
6194
5:21 error TailwindCSS classes should be sorted svelte-tailwindcss/sort-classes
@@ -69,8 +102,8 @@ exports[`e2e > should lint with the settings configuration > stdout 1`] = `
69102
3:7 error TailwindCSS classes should be sorted svelte-tailwindcss/sort-classes
70103
10:1 error TailwindCSS classes should be sorted svelte-tailwindcss/sort-classes
71104
72-
✖ 9 problems (9 errors, 0 warnings)
73-
9 errors and 0 warnings potentially fixable with the \`--fix\` option.
105+
✖ 15 problems (15 errors, 0 warnings)
106+
15 errors and 0 warnings potentially fixable with the \`--fix\` option.
74107
75108
 ELIFECYCLE  Command failed with exit code 1.
76109
"

‎packages/test/v3/src/components/button/button.svelte

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<script lang="ts">
2+
import type { HTMLAnchorAttributes } from 'svelte/elements';
3+
4+
import type { Props } from './styles.js';
5+
6+
import { sharedClasses } from './styles.js';
7+
8+
const { children, color = 'primary', variant = 'default', ...restProps }: Props = $props();
9+
10+
const elementProps = $derived({
11+
...restProps,
12+
'aria-disabled': restProps.disabled ? 'true' : restProps['aria-disabled']
13+
});
14+
const classes = $derived(sharedClasses({ className: restProps.class, color, variant }));
15+
</script>
16+
17+
{#if 'href' in elementProps}
18+
<a {...elementProps as HTMLAnchorAttributes} class={classes} href={elementProps.href}>
19+
{#if children}
20+
{@render children()}
21+
{/if}
22+
</a>
23+
{:else}
24+
<button {...elementProps} class={classes}>
25+
{#if children}
26+
{@render children()}
27+
{/if}
28+
</button>
29+
{/if}

‎packages/test/v3/src/components/button/index.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export { default as Button } from './button.svelte';
2+
export type { Props as ButtonProps } from './styles.js';
3+
export { default as TextIconButton } from './text-icon-button.svelte';

‎packages/test/v3/src/components/button/styles.ts

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
2+
3+
import { twMerge } from 'tailwind-merge';
4+
5+
export type ButtonVariant = 'condensed' | 'default' | 'expanded';
6+
export type ButtonColor = 'destructive' | 'muted' | 'primary' | 'surface';
7+
type BaseProps = {
8+
class?: string;
9+
disabled?: boolean;
10+
variant?: ButtonVariant;
11+
color?: ButtonColor;
12+
};
13+
export type Props = (
14+
| ({ href: string } & HTMLAnchorAttributes)
15+
| ({ href?: never } & HTMLButtonAttributes)
16+
) & BaseProps;
17+
18+
const VARIANTS: Record<ButtonVariant, string> = {
19+
condensed: 'py-1 px-2.5 h-unset text-xs font-normal',
20+
default: 'px-4 py-2 text-sm',
21+
expanded: 'px-6 py-3 text-md'
22+
};
23+
const COLORS: Record<ButtonColor, string> = {
24+
destructive:
25+
'bg-destructive-500 text-white hover:bg-destructive-500/90 stroke-destructive',
26+
muted:
27+
'bg-transparent text-foreground hover:bg-surface-50 stroke-foreground dark:text-white dark:stroke-white dark:hover:bg-surface-900 disabled:bg-surface-50 disabled:text-surface-200',
28+
primary:
29+
'bg-primary dark:bg-primary-800 text-white hover:bg-primary/90 dark:hover:bg-primary-800/90 stroke-white disabled:bg-primary/75 dark:disabled:bg-primary-800/75',
30+
surface:
31+
'bg-surface-50 dark:bg-surface-900 dark:text-white dark:stroke-white dark:hover:bg-surface-900/90 border border-transparent hover:border-surface-100 dark:hover:border-surface-700 disabled:bg-surface-50 disabled:text-surface-400 disabled:hover:border-surface-50'
32+
};
33+
34+
export const sharedClasses = ({
35+
className,
36+
color,
37+
variant
38+
}: { className?: null | string } & Required<Pick<BaseProps, 'color' | 'variant'>>) =>
39+
twMerge(
40+
'whitespace-nowrap rounded-full font-medium transition-all focus-visible:scale-[0.975] focus-visible:outline-hidden active:scale-[0.975] disabled:cursor-not-allowed disabled:active:scale-100',
41+
VARIANTS[variant],
42+
COLORS[color],
43+
className
44+
);

‎packages/test/v3/src/components/button/text-icon-button.svelte

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<script lang="ts">
2+
import type { Icon as LucideIcon } from 'lucide-svelte';
3+
import type { ComponentType } from 'svelte';
4+
5+
import type { ButtonProps } from './index.js';
6+
7+
import { twMerge } from 'tailwind-merge';
8+
9+
import Button from './button.svelte';
10+
11+
type Props = {
12+
label: string;
13+
Icon: ComponentType<LucideIcon>;
14+
children?: never;
15+
} & ButtonProps;
16+
const { Icon, label, ...restProps }: Props = $props();
17+
18+
const buttonClasses = $derived(
19+
twMerge('flex items-center gap-2 h-10 rounded-full text-sm', restProps.class)
20+
);
21+
</script>
22+
23+
<Button {...restProps} class={buttonClasses}>
24+
<Icon class="size-4" />
25+
<span>{label}</span>
26+
</Button>

‎packages/test/v3/src/components/checkbox/checkbox.svelte

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<script lang="ts">
2+
import { Check } from 'lucide-svelte';
3+
import { twMerge } from 'tailwind-merge';
4+
5+
type Props = {
6+
label: string;
7+
name: string;
8+
checked?: boolean;
9+
class?: string;
10+
labelPosition?: 'left' | 'right';
11+
};
12+
let { checked = $bindable(false), label, labelPosition, name, ...restProps }: Props = $props();
13+
14+
const classes = $derived(
15+
twMerge(
16+
'checkbox size-4 rounded-sm border border-surface-200 text-primary transition-all focus:border-primary aria-checked:bg-primary aria-checked:border-primary',
17+
restProps.class
18+
)
19+
);
20+
const flexDirection = $derived(labelPosition === 'left' ? 'flex-row' : 'flex-row-reverse');
21+
22+
const onClick = () => {
23+
checked = !checked;
24+
};
25+
</script>
26+
27+
<div class="flex items-center gap-2 {flexDirection}">
28+
<button
29+
class={classes}
30+
aria-checked={checked}
31+
aria-label={label}
32+
data-state={checked ? 'checked' : 'unchecked'}
33+
id={name}
34+
role="checkbox"
35+
type="button"
36+
value="on"
37+
onclick={onClick}
38+
>
39+
<Check class="size-3.5 stroke-white" strokeWidth={2.5} />
40+
</button>
41+
<label class="text-sm" for={name}>{label}</label>
42+
</div>
43+
44+
<style lang="postcss">
45+
.checkbox:focus {
46+
box-shadow: 0 0 0 4px var(--color-primary-100);
47+
}
48+
</style>

‎packages/test/v3/src/components/checkbox/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as Checkbox } from './checkbox.svelte';

‎packages/test/v3/src/components/container.svelte

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<script lang="ts">
2+
import type { Snippet } from 'svelte';
3+
4+
type Props = { children: Snippet; class?: string; }
5+
const { children, ...rest }: Props = $props();
6+
</script>
7+
8+
<div class="container custom-container mx-auto {rest.class} max-w-screen-lg">
9+
{@render children()}
10+
</div>
11+
12+
<style>
13+
.custom-container {
14+
@apply px-4 py-8 md:px-8;
15+
}
16+
</style>

‎packages/test/v3/src/components/index.ts

Whitespace-only changes.

‎packages/test/v4/__snapshots__/run.test.ts.snap

Lines changed: 39 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,20 @@ exports[`e2e > should lint with the config configuration > stdout 1`] = `
88
> eslint . -c eslint.config.test.mjs
99
1010
11+
/v4/src/components/button/styles.ts
12+
39:3 error TailwindCSS classes should be sorted svelte-tailwindcss/sort-classes
13+
14+
/v4/src/components/button/text-icon-button.svelte
15+
19:9 error TailwindCSS classes should be sorted svelte-tailwindcss/sort-classes
16+
17+
/v4/src/components/checkbox/checkbox.svelte
18+
15:9 error TailwindCSS classes should be sorted svelte-tailwindcss/sort-classes
19+
20+
/v4/src/components/container.svelte
21+
8:6 error Do not mix literal expressions with mustache expressions svelte-tailwindcss/no-literal-mustache-mix
22+
8:6 error TailwindCSS classes should be sorted svelte-tailwindcss/sort-classes
23+
12:1 warning Using '@apply' requires setting style lang to postcss svelte-tailwindcss/at-apply-require-postcss
24+
1125
/v4/src/routes/+layout.svelte
1226
7:6 error TailwindCSS classes should be sorted svelte-tailwindcss/sort-classes
1327
@@ -24,8 +38,8 @@ exports[`e2e > should lint with the config configuration > stdout 1`] = `
2438
3:7 error TailwindCSS classes should be sorted svelte-tailwindcss/sort-classes
2539
10:1 error TailwindCSS classes should be sorted svelte-tailwindcss/sort-classes
2640
27-
✖ 10 problems (9 errors, 1 warning)
28-
9 errors and 1 warning potentially fixable with the \`--fix\` option.
41+
✖ 16 problems (14 errors, 2 warnings)
42+
14 errors and 2 warnings potentially fixable with the \`--fix\` option.
2943
3044
 ELIFECYCLE  Command failed with exit code 1.
3145
"
@@ -39,6 +53,11 @@ exports[`e2e > should lint with the default configuration > stdout 1`] = `
3953
> eslint . -c eslint.config.test.mjs
4054
4155
56+
/v4/src/components/container.svelte
57+
8:6 error Do not mix literal expressions with mustache expressions svelte-tailwindcss/no-literal-mustache-mix
58+
8:6 error TailwindCSS classes should be sorted svelte-tailwindcss/sort-classes
59+
12:1 error Using '@apply' requires setting style lang to postcss svelte-tailwindcss/at-apply-require-postcss
60+
4261
/v4/src/routes/+layout.svelte
4362
7:6 error TailwindCSS classes should be sorted svelte-tailwindcss/sort-classes
4463
@@ -47,8 +66,8 @@ exports[`e2e > should lint with the default configuration > stdout 1`] = `
4766
18:6 error Do not mix literal expressions with mustache expressions svelte-tailwindcss/no-literal-mustache-mix
4867
20:1 error Using '@apply' requires setting style lang to postcss svelte-tailwindcss/at-apply-require-postcss
4968
50-
✖ 4 problems (4 errors, 0 warnings)
51-
4 errors and 0 warnings potentially fixable with the \`--fix\` option.
69+
✖ 7 problems (7 errors, 0 warnings)
70+
7 errors and 0 warnings potentially fixable with the \`--fix\` option.
5271
5372
 ELIFECYCLE  Command failed with exit code 1.
5473
"
@@ -62,6 +81,20 @@ exports[`e2e > should lint with the settings configuration > stdout 1`] = `
6281
> eslint . -c eslint.config.test.mjs
6382
6483
84+
/v4/src/components/button/styles.ts
85+
39:3 error TailwindCSS classes should be sorted svelte-tailwindcss/sort-classes
86+
87+
/v4/src/components/button/text-icon-button.svelte
88+
19:9 error TailwindCSS classes should be sorted svelte-tailwindcss/sort-classes
89+
90+
/v4/src/components/checkbox/checkbox.svelte
91+
15:9 error TailwindCSS classes should be sorted svelte-tailwindcss/sort-classes
92+
93+
/v4/src/components/container.svelte
94+
8:6 error Do not mix literal expressions with mustache expressions svelte-tailwindcss/no-literal-mustache-mix
95+
8:6 error TailwindCSS classes should be sorted svelte-tailwindcss/sort-classes
96+
12:1 error Using '@apply' requires setting style lang to postcss svelte-tailwindcss/at-apply-require-postcss
97+
6598
/v4/src/routes/+layout.svelte
6699
7:6 error TailwindCSS classes should be sorted svelte-tailwindcss/sort-classes
67100
@@ -78,8 +111,8 @@ exports[`e2e > should lint with the settings configuration > stdout 1`] = `
78111
3:7 error TailwindCSS classes should be sorted svelte-tailwindcss/sort-classes
79112
10:1 error TailwindCSS classes should be sorted svelte-tailwindcss/sort-classes
80113
81-
✖ 10 problems (10 errors, 0 warnings)
82-
10 errors and 0 warnings potentially fixable with the \`--fix\` option.
114+
✖ 16 problems (16 errors, 0 warnings)
115+
16 errors and 0 warnings potentially fixable with the \`--fix\` option.
83116
84117
 ELIFECYCLE  Command failed with exit code 1.
85118
"

‎packages/test/v4/src/components/button/button.svelte

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<script lang="ts">
2+
import type { HTMLAnchorAttributes } from 'svelte/elements';
3+
4+
import type { Props } from './styles.js';
5+
6+
import { sharedClasses } from './styles.js';
7+
8+
const { children, color = 'primary', variant = 'default', ...restProps }: Props = $props();
9+
10+
const elementProps = $derived({
11+
...restProps,
12+
'aria-disabled': restProps.disabled ? 'true' : restProps['aria-disabled']
13+
});
14+
const classes = $derived(sharedClasses({ className: restProps.class, color, variant }));
15+
</script>
16+
17+
{#if 'href' in elementProps}
18+
<a {...elementProps as HTMLAnchorAttributes} class={classes} href={elementProps.href}>
19+
{#if children}
20+
{@render children()}
21+
{/if}
22+
</a>
23+
{:else}
24+
<button {...elementProps} class={classes}>
25+
{#if children}
26+
{@render children()}
27+
{/if}
28+
</button>
29+
{/if}

‎packages/test/v4/src/components/button/index.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export { default as Button } from './button.svelte';
2+
export type { Props as ButtonProps } from './styles.js';
3+
export { default as TextIconButton } from './text-icon-button.svelte';

0 commit comments

Comments
 (0)