test: update tests

src/components/panel/PreviewControls.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import Button from "$components/ui/Button.svelte";
-  import type { SlideDirectionType } from "$lib/constants";
+  import { SlideDirection, type SlideDirectionType } from "$lib/constants";
   import ChevronLeft from "~icons/lucide/chevron-left";
   import ChevronRight from "~icons/lucide/chevron-right";
 
@@ -10,19 +10,19 @@
     max: number;
   }
 
-  let { current = $bindable(), direction = $bindable("next"), max }: Props = $props();
+  let { current = $bindable(), direction = $bindable(SlideDirection.NEXT), max }: Props = $props();
 
   let isFirst = $derived(current === 0);
   let isLast = $derived(current === max - 1);
 
   function prev() {
     if (current > 0) current--;
-    direction = "prev";
+    direction = SlideDirection.PREV;
   }
 
-  function next() {
+  async function next() {
     if (current < max - 1) current++;
-    direction = "next";
+    direction = SlideDirection.NEXT;
   }
 </script>
 

src/components/panel/PreviewManager.svelte

@@ -69,7 +69,7 @@
           </div>
         {/key}
       {:else}
-        <div class="empty-state">
+        <div class="empty-state" aria-label="Empty texts info">
           <StickyNote />
           <p>Добавьте тексты для создания панелей</p>
         </div>

src/components/ui/Alignment.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { TextAlignType } from "$lib/constants";
+  import { TextAlign, type TextAlignType } from "$lib/constants";
   import TextAlignCenter from "~icons/lucide/text-align-center";
   import TextAlignEnd from "~icons/lucide/text-align-end";
   import TextAlignStart from "~icons/lucide/text-align-start";
@@ -9,16 +9,26 @@
     align: TextAlignType;
   }
 
-  let { align = $bindable("left") }: Props = $props();
+  let { align = $bindable(TextAlign.LEFT) }: Props = $props();
+
+  function onAlignLeft() {
+    align = TextAlign.LEFT;
+  }
+  function onAlignCenter() {
+    align = TextAlign.CENTER;
+  }
+  function onAlignRight() {
+    align = TextAlign.RIGHT;
+  }
 </script>
 
-<button class="align-btn" class:active={align === "left"} onclick={() => (align = "left")}>
+<button aria-label="Set left" class="align-btn" class:active={align === TextAlign.LEFT} onclick={onAlignLeft}>
   <TextAlignStart />
 </button>
-<button class="align-btn" class:active={align === "center"} onclick={() => (align = "center")}>
+<button aria-label="Set center" class="align-btn" class:active={align === TextAlign.CENTER} onclick={onAlignCenter}>
   <TextAlignCenter />
 </button>
-<button class="align-btn" class:active={align === "right"} onclick={() => (align = "right")}>
+<button aria-label="Set right" class="align-btn" class:active={align === TextAlign.RIGHT} onclick={onAlignRight}>
   <TextAlignEnd />
 </button>
 

src/lib/constants.ts

@@ -64,6 +64,7 @@ export const TextAlign = {
 } as const;
 
 export type TextAlignType = (typeof TextAlign)[keyof typeof TextAlign];
+
 export const DEFAULT_TEXT_ALIGN: TextAlignType = TextAlign.CENTER;
 
 export const Theme = {