fix: cleanup tests

tutkli · Mar 7, 2024 · b241099 · b241099
1 parent 1ca7986
commit b241099
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 70 deletions.
diff --git a/libs/ngx-sonner/src/lib/toaster.component.ts b/libs/ngx-sonner/src/lib/toaster.component.ts
@@ -80,8 +80,8 @@ const GAP = 14;
                 [position]="position()"
                 [expandByDefault]="expand()"
                 [expanded]="expanded()"
-                [actionButtonStyle]="toastOptions().actionButtonStyle"
-                [cancelButtonStyle]="toastOptions().cancelButtonStyle"
+                [actionButtonStyle]="toastOptions().actionButtonStyle ?? ''"
+                [cancelButtonStyle]="toastOptions().cancelButtonStyle ?? ''"
                 [class]="toastOptions().class ?? ''"
                 [descriptionClass]="toastOptions().descriptionClass ?? ''"
                 [classes]="toastOptions().classes ?? {}"

diff --git a/libs/ngx-sonner/src/tests/toaster.spec.ts b/libs/ngx-sonner/src/tests/toaster.spec.ts
@@ -42,47 +42,19 @@ describe('Toaster', () => {
     expect(toasts.length).toBe(1);
   });
 
-  it('should render a toast that disappears after the default timeout', async () => {
-    const { user, trigger, container, detectChanges } = await setup({
+  it('should render a toast that disappears after the default duration', async () => {
+    const { user, trigger, queryByText, detectChanges } = await setup({
       cb: toast => toast('Hello world'),
     });
 
-    await user.click(trigger);
-    expect(
-      Array.from(container.querySelectorAll('[data-sonner-toast]')).length
-    ).toBe(1);
-    await sleep(4050);
-    detectChanges();
-    expect(
-      Array.from(container.querySelectorAll('[data-sonner-toast]')).length
-    ).toBe(1);
-  });
-
-  it('should show correct toast content based on promise state', async () => {
-    const { user, trigger, queryByText, getByText, detectChanges } =
-      await setup({
-        cb: toast =>
-          toast.promise<string>(
-            () =>
-              new Promise(resolve =>
-                setTimeout(() => {
-                  resolve('Loaded');
-                }, 2000)
-              ),
-            {
-              loading: 'Loading...',
-              success: data => data,
-              error: 'Error',
-            }
-          ),
-      });
+    expect(queryByText('Hello world')).toBeNull();
 
     await user.click(trigger);
-    expect(getByText('Loading...')).toBeVisible();
-    await sleep(2000);
+    expect(queryByText('Hello world')).not.toBeNull();
+
+    await sleep(4500);
     detectChanges();
-    expect(queryByText('Loading...')).toBeNull();
-    expect(getByText('Loaded')).toBeVisible();
+    expect(queryByText('Hello world')).toBeNull();
   });
 
   it('should show a toast with custom duration', async () => {
@@ -100,91 +72,118 @@ describe('Toaster', () => {
     expect(queryByText('Hello world')).toBeNull();
   });
 
-  it('should focus the toast when hotkey is pressed', async () => {
-    const { user, trigger, getByText } = await setup({
-      cb: toast => toast('Hello world', { duration: 5000 }),
-    });
-
-    await user.click(trigger);
-    expect(getByText('Hello world')).toBeVisible();
-
-    await user.keyboard('{Alt>}T{/Alt}');
-    await sleep(100);
-    expect(document.activeElement).toBeInstanceOf(HTMLOListElement);
-  });
-
-  it('should not immediately close the toast when reset', async () => {
+  it('should reset duration on a toast update', async () => {
     const { user, trigger, getByText, queryByText, detectChanges } =
       await setup({
         cb: toast => {
-          const id = toast('Loading', { duration: 4000 });
+          const id = toast('Loading', { duration: 2000 });
 
           setTimeout(() => {
             toast.success('Finished loading!', { id });
-          }, 1000);
+          }, 1500);
         },
       });
 
     await user.click(trigger);
     expect(getByText('Loading')).toBeVisible();
-    await sleep(2050);
+    await sleep(1500);
     detectChanges();
     expect(queryByText('Loading')).toBeNull();
     expect(getByText('Finished loading!')).toBeVisible();
-    await sleep(1000);
+    // there would only be ~.5 seconds left on the original toast
+    // so we're going to wait .5 seconds to make sure the timer is reset
+    await sleep(500);
     detectChanges();
     expect(getByText('Finished loading!')).toBeVisible();
+    // finally we'll wait another 1500ms to make sure the toast closes after 2 seconds
+    // since the original toast had a duration of 2 seconds
+    await sleep(2000);
+    detectChanges();
+    expect(queryByText('Finished loading!')).toBeNull();
   });
 
-  it('should reset duration on a toast update', async () => {
+  it('should allow duration updates on toast update', async () => {
     const { user, trigger, getByText, queryByText, detectChanges } =
       await setup({
         cb: toast => {
           const id = toast('Loading', { duration: 2000 });
 
           setTimeout(() => {
-            toast.success('Finished loading!', { id });
-          }, 1500);
+            toast.success('Finished loading!', { id, duration: 4000 });
+          }, 1000);
         },
       });
 
     await user.click(trigger);
     expect(getByText('Loading')).toBeVisible();
-    await sleep(1500);
+    await sleep(1200);
     detectChanges();
     expect(queryByText('Loading')).toBeNull();
     expect(getByText('Finished loading!')).toBeVisible();
-    // there would only be ~.5 seconds left on the original toast
-    // so we're going to wait .5 seconds to make sure the timer is reset
-    await sleep(500);
+    await sleep(2200);
     detectChanges();
     expect(getByText('Finished loading!')).toBeVisible();
-    // finally we'll wait another 1500ms to make sure the toast closes after 2 seconds
-    // since the original toast had a duration of 2 seconds
+  });
+
+  it('should show correct toast content based on promise state', async () => {
+    const { user, trigger, queryByText, getByText, detectChanges } =
+      await setup({
+        cb: toast =>
+          toast.promise<string>(
+            () =>
+              new Promise(resolve =>
+                setTimeout(() => {
+                  resolve('Loaded');
+                }, 2000)
+              ),
+            {
+              loading: 'Loading...',
+              success: data => data,
+              error: 'Error',
+            }
+          ),
+      });
+
+    await user.click(trigger);
+    expect(getByText('Loading...')).toBeVisible();
     await sleep(2000);
     detectChanges();
-    expect(queryByText('Finished loading!')).toBeNull();
+    expect(queryByText('Loading...')).toBeNull();
+    expect(getByText('Loaded')).toBeVisible();
   });
 
-  it('should allow duration updates on toast update', async () => {
+  it('should focus the toast when hotkey is pressed', async () => {
+    const { user, trigger, getByText } = await setup({
+      cb: toast => toast('Hello world', { duration: 5000 }),
+    });
+
+    await user.click(trigger);
+    expect(getByText('Hello world')).toBeVisible();
+
+    await user.keyboard('{Alt>}T{/Alt}');
+    await sleep(100);
+    expect(document.activeElement).toBeInstanceOf(HTMLOListElement);
+  });
+
+  it('should not immediately close the toast when reset', async () => {
     const { user, trigger, getByText, queryByText, detectChanges } =
       await setup({
         cb: toast => {
-          const id = toast('Loading', { duration: 2000 });
+          const id = toast('Loading', { duration: 4000 });
 
           setTimeout(() => {
-            toast.success('Finished loading!', { id, duration: 4000 });
+            toast.success('Finished loading!', { id });
           }, 1000);
         },
       });
 
     await user.click(trigger);
     expect(getByText('Loading')).toBeVisible();
-    await sleep(1200);
+    await sleep(2050);
     detectChanges();
     expect(queryByText('Loading')).toBeNull();
     expect(getByText('Finished loading!')).toBeVisible();
-    await sleep(2200);
+    await sleep(1000);
     detectChanges();
     expect(getByText('Finished loading!')).toBeVisible();
   });