Merge pull request xiaoluoboding#91 from CMarzin/add-playwright-test

Add playwright test from Sonner package and fix dismiss function

Author: xiaoluoboding

README.md

@@ -32,6 +32,7 @@ https://user-images.githubusercontent.com/6118824/228208185-be5aefd4-7fa8-4f95-a
   - [Introduction](#introduction)
   - [Table of Contents](#table-of-contents)
   - [Installation](#installation)
+  - [Test](#test)
   - [Usage](#usage)
     - [For Vue 3](#for-vue-3)
     - [For Nuxt 3](#for-nuxt-3)
@@ -74,6 +75,33 @@ or
 yarn add vue-sonner
 ```
 
+## Test
+
+To run the test you need two separate CLI window :
+
+### Launching the test
+
+To launch the test, you need to go in the test directory
+
+```bash
+cd ./test
+```
+
+and launch the following command
+
+```bash
+cd ./test
+pnpm test:e2e --ui
+```
+
+### Build and watch for change in order to fix the test
+
+This command will build the vue-sonner library in lib mode, and add a watch so every time you modify the code of the library, you will have a new bundle and can run the test again.
+
+```bash
+pnpm build:dev
+```
+
 ## Usage
 
 ### For Vue 3

package.json

@@ -5,6 +5,7 @@
   "author": "xiaoluoboding <xiaoluoboding@gmail.com>",
   "scripts": {
     "dev": "vite",
+    "build:dev": "vite build --mode lib --watch",
     "build:docs": "vite build --mode docs",
     "build:lib": "vite build --mode lib && pnpm run build:types",
     "build:types": "vue-tsc -p tsconfig.build.json && api-extractor run",

packages/Toast.vue

@@ -167,7 +167,7 @@
 <script lang="ts" setup>
 import './styles.css'
 
-import { computed, onMounted, onUnmounted, ref, watchEffect } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch, watchEffect } from 'vue'
 import { type HeightT, type ToastProps, type ToastT, isAction } from './types'
 import { useIsDocumentHidden } from './hooks'
 
@@ -407,11 +407,14 @@ watchEffect((onInvalidate) => {
   })
 })
 
-// watchEffect(() => {
-//   if (props.toast.delete) {
-//     deleteToast()
-//   }
-// })
+watch(
+  () => props.toast.delete,
+  (value) => {
+    if (value) {
+      deleteToast()
+    }
+  }
+)
 
 onMounted(() => {
   if (toastRef.value) {

packages/Toaster.vue

@@ -343,20 +343,13 @@ watch(
   }
 )
 
-watch(
-  () => listRef.value,
-  () => {
-    if (listRef.value) {
-      return () => {
-        if (lastFocusedElementRef.value) {
-          lastFocusedElementRef.value.focus({ preventScroll: true })
-          lastFocusedElementRef.value = null
-          isFocusWithinRef.value = false
-        }
-      }
-    }
+watchEffect(() => {
+  if (listRef.value && lastFocusedElementRef.value) {
+      lastFocusedElementRef.value.focus({ preventScroll: true })
+      lastFocusedElementRef.value = null
+      isFocusWithinRef.value = false
   }
-)
+})
 
 watchEffect(() => {
   // Ensure expanded is always false when no toasts are present / only one left