test: add test for toast

packages/ui-ingredients/package.json

@@ -329,6 +329,7 @@
     "@sveltejs/vite-plugin-svelte": "4.0.0-next.6",
     "@testing-library/jest-dom": "6.5.0",
     "@testing-library/svelte": "5.2.3",
+    "@testing-library/user-event": "14.5.2",
     "@types/jsdom": "21.1.7",
     "@untitled-theme/icons-svelte": "0.10.9",
     "autoprefixer": "10.4.20",

packages/ui-ingredients/src/tests/accordion.test.ts → packages/ui-ingredients/src/tests/accordion/accordion.test.ts

@@ -1,8 +1,8 @@
 import {accordionAnatomy} from '$lib/index.js';
 import {render} from '@testing-library/svelte';
 import {axe} from 'vitest-axe';
+import {getAnatomySelector} from '../utils.js';
 import Accordion from './accordion.svelte';
-import {getAnatomySelector} from './utils.js';
 
 const items = [
   {value: '1', label: 'Item 1', content: 'Content 1'},

packages/ui-ingredients/src/tests/avatar.test.ts → packages/ui-ingredients/src/tests/avatar/avatar.test.ts

@@ -2,8 +2,8 @@ import {avatarAnatomy} from '$lib/index.js';
 import {faker} from '@faker-js/faker';
 import {render} from '@testing-library/svelte';
 import {axe} from 'vitest-axe';
+import {getAnatomySelector} from '../utils.js';
 import Avatar from './avatar.svelte';
-import {getAnatomySelector} from './utils.js';
 
 const src = faker.image.avatar();
 const name = faker.person.fullName();

packages/ui-ingredients/src/tests/carousel.test.ts → packages/ui-ingredients/src/tests/carousel/carousel.test.ts

@@ -2,8 +2,8 @@ import {carouselAnatomy} from '$lib/index.js';
 import {faker} from '@faker-js/faker';
 import {render} from '@testing-library/svelte';
 import {axe} from 'vitest-axe';
+import {getAnatomySelector} from '../utils.js';
 import Carousel from './carousel.svelte';
-import {getAnatomySelector} from './utils.js';
 
 const images = Array.from({length: 5}).map(() => faker.image.url());
 

packages/ui-ingredients/src/tests/checkbox.test.ts → packages/ui-ingredients/src/tests/checkbox/checkbox.test.ts

@@ -1,8 +1,8 @@
 import {checkboxAnatomy} from '$lib/index.js';
 import {render} from '@testing-library/svelte';
 import {axe} from 'vitest-axe';
+import {getAnatomySelector} from '../utils.js';
 import Checkbox from './checkbox.svelte';
-import {getAnatomySelector} from './utils.js';
 
 describe('Checkbox', () => {
   it.each(getAnatomySelector(checkboxAnatomy))(

packages/ui-ingredients/src/tests/clipboard.test.ts → packages/ui-ingredients/src/tests/clipboard/clipboard.test.ts

@@ -1,8 +1,8 @@
 import {clipboardAnatomy} from '$lib/index.js';
 import {render} from '@testing-library/svelte';
 import {axe} from 'vitest-axe';
+import {getAnatomySelector} from '../utils.js';
 import Clipboard from './clipboard.svelte';
-import {getAnatomySelector} from './utils.js';
 
 describe('Clipboard', () => {
   it.each(getAnatomySelector(clipboardAnatomy))(

packages/ui-ingredients/src/tests/collapsible.test.ts → packages/ui-ingredients/src/tests/collapsible/collapsible.test.ts

@@ -1,8 +1,8 @@
 import {collapsibleAnatomy} from '$lib/index.js';
 import {render} from '@testing-library/svelte';
 import {axe} from 'vitest-axe';
+import {getAnatomySelector} from '../utils.js';
 import Collapsible from './collapsible.svelte';
-import {getAnatomySelector} from './utils.js';
 
 describe('Collapsible', () => {
   it.each(getAnatomySelector(collapsibleAnatomy))(

packages/ui-ingredients/src/tests/combobox.test.ts → packages/ui-ingredients/src/tests/combobox/combobox.test.ts

@@ -1,8 +1,8 @@
 import {comboboxAnatomy} from '$lib/index.js';
 import {render} from '@testing-library/svelte';
 import {axe} from 'vitest-axe';
+import {getAnatomySelector} from '../utils.js';
 import Combobox from './combobox.svelte';
-import {getAnatomySelector} from './utils.js';
 
 const items = [
   {label: 'Item 1', value: '1'},

packages/ui-ingredients/src/tests/date-picker.test.ts → packages/ui-ingredients/src/tests/date-picker/date-picker.test.ts

@@ -1,8 +1,8 @@
 import {datePickerAnatomy} from '$lib/index.js';
 import {render} from '@testing-library/svelte';
 import {axe} from 'vitest-axe';
+import {getAnatomySelector} from '../utils.js';
 import DatePicker from './date-picker.svelte';
-import {getAnatomySelector} from './utils.js';
 
 describe('DatePicker', () => {
   it.skip.each(getAnatomySelector(datePickerAnatomy))(

packages/ui-ingredients/src/tests/dialog.test.ts → packages/ui-ingredients/src/tests/dialog/dialog.test.ts

@@ -1,8 +1,8 @@
 import {dialogAnatomy} from '$lib/index.js';
 import {render} from '@testing-library/svelte';
 import {axe} from 'vitest-axe';
+import {getAnatomySelector} from '../utils.js';
 import Dialog from './dialog.svelte';
-import {getAnatomySelector} from './utils.js';
 
 describe('Dialog', () => {
   it.each(getAnatomySelector(dialogAnatomy))('should render %s', (selector) => {

packages/ui-ingredients/src/tests/editable.test.ts → packages/ui-ingredients/src/tests/editable/editable.test.ts

@@ -1,8 +1,8 @@
 import {editableAnatomy} from '$lib/index.js';
 import {render} from '@testing-library/svelte';
 import {axe} from 'vitest-axe';
+import {getAnatomySelector} from '../utils.js';
 import Editable from './editable.svelte';
-import {getAnatomySelector} from './utils.js';
 
 describe('Editable', () => {
   it.each(getAnatomySelector(editableAnatomy))(

packages/ui-ingredients/src/tests/field.test.ts → packages/ui-ingredients/src/tests/field/field.test.ts

@@ -1,8 +1,8 @@
 import {fieldAnatomy} from '$lib/index.js';
 import {render} from '@testing-library/svelte';
 import {axe} from 'vitest-axe';
+import {getAnatomySelector} from '../utils.js';
 import Field from './field.svelte';
-import {getAnatomySelector} from './utils.js';
 
 describe('Field', () => {
   it.each(getAnatomySelector(fieldAnatomy))('should render %s', (selector) => {

packages/ui-ingredients/src/tests/file-upload.test.ts → packages/ui-ingredients/src/tests/file-upload/file-upload.test.ts

@@ -1,8 +1,8 @@
 import {fileUploadAnatomy} from '$lib/index.js';
 import {render} from '@testing-library/svelte';
 import {axe} from 'vitest-axe';
+import {getAnatomySelector} from '../utils.js';
 import FileUpload from './file-upload.svelte';
-import {getAnatomySelector} from './utils.js';
 
 describe('FileUpload', () => {
   it.each(getAnatomySelector(fileUploadAnatomy))(

packages/ui-ingredients/src/tests/hover-card.test.ts → packages/ui-ingredients/src/tests/hover-card/hover-card.test.ts

@@ -1,8 +1,8 @@
 import {hoverCardAnatomy} from '$lib/index.js';
 import {render} from '@testing-library/svelte';
 import {axe} from 'vitest-axe';
+import {getAnatomySelector} from '../utils.js';
 import HoverCard from './hover-card.svelte';
-import {getAnatomySelector} from './utils.js';
 
 describe('HoverCard', () => {
   it.each(getAnatomySelector(hoverCardAnatomy))(

packages/ui-ingredients/src/tests/menu.test.ts → packages/ui-ingredients/src/tests/menu/menu.test.ts

@@ -1,8 +1,8 @@
 import {menuAnatomy} from '$lib/index.js';
 import {render} from '@testing-library/svelte';
 import {axe} from 'vitest-axe';
+import {getAnatomySelector} from '../utils.js';
 import Menu from './menu.svelte';
-import {getAnatomySelector} from './utils.js';
 
 const items = [
   {label: 'Item 1', value: '1'},

packages/ui-ingredients/src/tests/number-input.test.ts → packages/ui-ingredients/src/tests/number-input/number-input.test.ts

@@ -1,8 +1,8 @@
 import {numberInputAnatomy} from '$lib/index.js';
 import {render} from '@testing-library/svelte';
 import {axe} from 'vitest-axe';
+import {getAnatomySelector} from '../utils.js';
 import NumberInput from './number-input.svelte';
-import {getAnatomySelector} from './utils.js';
 
 describe('NumberInput', () => {
   it.each(getAnatomySelector(numberInputAnatomy))(

packages/ui-ingredients/src/tests/pagination.test.ts → packages/ui-ingredients/src/tests/pagination/pagination.test.ts

@@ -1,8 +1,8 @@
 import {paginationAnatomy} from '$lib/index.js';
 import {render} from '@testing-library/svelte';
 import {axe} from 'vitest-axe';
+import {getAnatomySelector} from '../utils.js';
 import Pagination from './pagination.svelte';
-import {getAnatomySelector} from './utils.js';
 
 describe('Pagination', () => {
   it.each(getAnatomySelector(paginationAnatomy))(

packages/ui-ingredients/src/tests/pin-input.test.ts → packages/ui-ingredients/src/tests/pin-input/pin-input.test.ts

@@ -1,8 +1,8 @@
 import {pinInputAnatomy} from '$lib/index.js';
 import {render} from '@testing-library/svelte';
 import {axe} from 'vitest-axe';
+import {getAnatomySelector} from '../utils.js';
 import PinInput from './pin-input.svelte';
-import {getAnatomySelector} from './utils.js';
 
 describe('PinInput', () => {
   it.each(getAnatomySelector(pinInputAnatomy))(

packages/ui-ingredients/src/tests/popover.test.ts → packages/ui-ingredients/src/tests/popover/popover.test.ts

@@ -1,8 +1,8 @@
 import {popoverAnatomy} from '$lib/index.js';
 import {render} from '@testing-library/svelte';
 import {axe} from 'vitest-axe';
+import {getAnatomySelector} from '../utils.js';
 import Popover from './popover.svelte';
-import {getAnatomySelector} from './utils.js';
 
 describe('Popover', () => {
   it.each(getAnatomySelector(popoverAnatomy))(

packages/ui-ingredients/src/tests/progress.test.ts → packages/ui-ingredients/src/tests/progress/progress.test.ts

@@ -1,8 +1,8 @@
 import {progressAnatomy} from '$lib/index.js';
 import {render} from '@testing-library/svelte';
 import {axe} from 'vitest-axe';
+import {getAnatomySelector} from '../utils.js';
 import Progress from './progress.svelte';
-import {getAnatomySelector} from './utils.js';
 
 describe('Progress', () => {
   it.each(getAnatomySelector(progressAnatomy))(

packages/ui-ingredients/src/tests/qr-code.test.ts → packages/ui-ingredients/src/tests/qr-code/qr-code.test.ts

@@ -1,8 +1,8 @@
 import {qrCodeAnatomy} from '$lib/index.js';
 import {render} from '@testing-library/svelte';
 import {axe} from 'vitest-axe';
+import {getAnatomySelector} from '../utils.js';
 import QrCode from './qr-code.svelte';
-import {getAnatomySelector} from './utils.js';
 
 describe('QrCode', () => {
   it.each(getAnatomySelector(qrCodeAnatomy))('should render %s', (selector) => {

packages/ui-ingredients/src/tests/radio-group.test.ts → packages/ui-ingredients/src/tests/radio-group/radio-group.test.ts

@@ -1,8 +1,8 @@
 import {radioGroupAnatomy} from '$lib/index.js';
 import {render} from '@testing-library/svelte';
 import {axe} from 'vitest-axe';
+import {getAnatomySelector} from '../utils.js';
 import RadioGroup from './radio-group.svelte';
-import {getAnatomySelector} from './utils.js';
 
 const items = [
   {value: '1', label: 'Item 1'},

packages/ui-ingredients/src/tests/rating-group.test.ts → packages/ui-ingredients/src/tests/rating-group/rating-group.test.ts

@@ -1,8 +1,8 @@
 import {ratingGroupAnatomy} from '$lib/index.js';
 import {render} from '@testing-library/svelte';
 import {axe} from 'vitest-axe';
+import {getAnatomySelector} from '../utils.js';
 import RatingGroup from './rating-group.svelte';
-import {getAnatomySelector} from './utils.js';
 
 describe('RatingGroup', () => {
   it.each(getAnatomySelector(ratingGroupAnatomy))(

packages/ui-ingredients/src/tests/segment-group.test.ts → packages/ui-ingredients/src/tests/segment-group/segment-group.test.ts

@@ -1,8 +1,8 @@
 import {segmentGroupAnatomy} from '$lib/index.js';
 import {render} from '@testing-library/svelte';
 import {axe} from 'vitest-axe';
+import {getAnatomySelector} from '../utils.js';
 import SegmentGroup from './segment-group.svelte';
-import {getAnatomySelector} from './utils.js';
 
 const items = [
   {value: '1', label: 'Item 1'},

packages/ui-ingredients/src/tests/select.test.ts → packages/ui-ingredients/src/tests/select/select.test.ts

@@ -1,8 +1,8 @@
 import {selectAnatomy} from '$lib/index.js';
 import {render} from '@testing-library/svelte';
 import {axe} from 'vitest-axe';
+import {getAnatomySelector} from '../utils.js';
 import Select from './select.svelte';
-import {getAnatomySelector} from './utils.js';
 
 const items = [
   {value: '1', label: 'Option 1'},

packages/ui-ingredients/src/tests/signature-pad.test.ts → packages/ui-ingredients/src/tests/signature-pad/signature-pad.test.ts

@@ -1,8 +1,8 @@
 import {signaturePadAnatomy} from '$lib/index.js';
 import {render} from '@testing-library/svelte';
 import {axe} from 'vitest-axe';
+import {getAnatomySelector} from '../utils.js';
 import SignaturePad from './signature-pad.svelte';
-import {getAnatomySelector} from './utils.js';
 
 describe('SignaturePad', () => {
   it.each(getAnatomySelector(signaturePadAnatomy))(

packages/ui-ingredients/src/tests/slider.test.ts → packages/ui-ingredients/src/tests/slider/slider.test.ts

@@ -1,8 +1,8 @@
 import {sliderAnatomy} from '$lib/index.js';
 import {render} from '@testing-library/svelte';
 import {axe} from 'vitest-axe';
+import {getAnatomySelector} from '../utils.js';
 import Slider from './slider.svelte';
-import {getAnatomySelector} from './utils.js';
 
 describe('Slider', () => {
   it.each(getAnatomySelector(sliderAnatomy))('should render %s', (selector) => {

packages/ui-ingredients/src/tests/splitter.test.ts → packages/ui-ingredients/src/tests/splitter/splitter.test.ts

@@ -1,8 +1,8 @@
 import {splitterAnatomy} from '$lib/index.js';
 import {render} from '@testing-library/svelte';
 import {axe} from 'vitest-axe';
+import {getAnatomySelector} from '../utils.js';
 import Splitter from './splitter.svelte';
-import {getAnatomySelector} from './utils.js';
 
 describe('Splitter', () => {
   it.each(getAnatomySelector(splitterAnatomy))(

packages/ui-ingredients/src/tests/steps.test.ts → packages/ui-ingredients/src/tests/steps/steps.test.ts

@@ -1,8 +1,8 @@
-import { stepsAnatomy } from '$lib/index.js';
-import { render } from '@testing-library/svelte';
-import { axe } from 'vitest-axe';
+import {stepsAnatomy} from '$lib/index.js';
+import {render} from '@testing-library/svelte';
+import {axe} from 'vitest-axe';
+import {getAnatomySelector} from '../utils.js';
 import Steps from './steps.svelte';
-import { getAnatomySelector } from './utils.js';
 
 const items = [
   {title: 'Step 1', content: 'Step 1 Content'},

packages/ui-ingredients/src/tests/switch.test.ts → packages/ui-ingredients/src/tests/switch/switch.test.ts

@@ -1,8 +1,8 @@
 import {switchAnatomy} from '$lib/index.js';
 import {render} from '@testing-library/svelte';
 import {axe} from 'vitest-axe';
+import {getAnatomySelector} from '../utils.js';
 import Switch from './switch.svelte';
-import {getAnatomySelector} from './utils.js';
 
 describe('Switch', () => {
   it.each(getAnatomySelector(switchAnatomy))('should render %s', (selector) => {

packages/ui-ingredients/src/tests/tabs.test.ts → packages/ui-ingredients/src/tests/tabs/tabs.test.ts

@@ -2,8 +2,8 @@ import {tabsAnatomy} from '$lib/index.js';
 import {faker} from '@faker-js/faker';
 import {render} from '@testing-library/svelte';
 import {axe} from 'vitest-axe';
+import {getAnatomySelector} from '../utils.js';
 import Tabs from './tabs.svelte';
-import {getAnatomySelector} from './utils.js';
 
 const items = [
   {

packages/ui-ingredients/src/tests/tags-input.test.ts → packages/ui-ingredients/src/tests/tags-input/tags-input.test.ts

@@ -1,8 +1,8 @@
 import {tagsInputAnatomy} from '$lib/index.js';
 import {render} from '@testing-library/svelte';
 import {axe} from 'vitest-axe';
+import {getAnatomySelector} from '../utils.js';
 import TagsInput from './tags-input.svelte';
-import {getAnatomySelector} from './utils.js';
 
 describe('TagsInput', () => {
   it.each(getAnatomySelector(tagsInputAnatomy))(

packages/ui-ingredients/src/tests/time-picker.test.ts → packages/ui-ingredients/src/tests/time-picker/time-picker.test.ts

@@ -1,8 +1,8 @@
 import {timePickerAnatomy} from '$lib/index.js';
 import {render} from '@testing-library/svelte';
 import {axe} from 'vitest-axe';
+import {getAnatomySelector} from '../utils.js';
 import TimePicker from './time-picker.svelte';
-import {getAnatomySelector} from './utils.js';
 
 describe('TimePicker', () => {
   it.each(getAnatomySelector(timePickerAnatomy))(

packages/ui-ingredients/src/tests/timer.test.ts → packages/ui-ingredients/src/tests/timer/timer.test.ts

@@ -1,8 +1,8 @@
 import {timerAnatomy} from '$lib/index.js';
 import {render} from '@testing-library/svelte';
 import {axe} from 'vitest-axe';
+import {getAnatomySelector} from '../utils.js';
 import Timer from './timer.svelte';
-import {getAnatomySelector} from './utils.js';
 
 describe('Timer', () => {
   it.each(getAnatomySelector(timerAnatomy))('should render %s', (selector) => {

packages/ui-ingredients/src/tests/toast/toast.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import {createToaster, Toast, Toaster} from '$lib/index.js';
+
+  export const toaster = createToaster({
+    duration: 5000,
+  });
+</script>
+
+<button
+  type="button"
+  onclick={() => {
+    toaster.create({
+      title: 'Title',
+      description: 'Description',
+    });
+  }}
+  aria-label="Create toast"
+></button>
+
+<Toaster {toaster}>
+  <Toast.Root>
+    <Toast.Title />
+    <Toast.Description />
+    <Toast.CloseTrigger>Close</Toast.CloseTrigger>
+    <Toast.ActionTrigger>Action</Toast.ActionTrigger>
+  </Toast.Root>
+</Toaster>