ci: add toaster tests

CI: add tests

libs/ngx-sonner/src/lib/loader.component.ts

@@ -9,7 +9,7 @@ import {
   selector: 'ngx-sonner-loader',
   standalone: true,
   template: `
-    <div class="sonner-loading-wrapper" [attr.data-visible]="visible()">
+    <div class="sonner-loading-wrapper" [attr.data-visible]="isVisible()">
       <div class="sonner-spinner">
         @for (_ of bars; track $index) {
           <div class="sonner-loading-bar"></div>
@@ -20,6 +20,6 @@ import {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class LoaderComponent {
-  visible = input.required({ transform: booleanAttribute });
+  isVisible = input.required({ transform: booleanAttribute });
   bars = Array(12).fill(0);
 }

libs/ngx-sonner/src/lib/toast.component.ts

@@ -182,7 +182,7 @@ const defaultClasses: ToastClassnames = {
           <button
             data-button
             data-cancel
-            [style]="cancelButtonStyle()"
+            [style]="cancelButtonStyle() ?? toast().cancelButtonStyle"
             [class]="cn(classes().cancelButton, toast().classes?.cancelButton)"
             (click)="onCancelClick()">
             {{ cancel.label }}
@@ -191,7 +191,7 @@ const defaultClasses: ToastClassnames = {
         @if (toast().action; as action) {
           <button
             data-button
-            [style]="actionButtonStyle()"
+            [style]="actionButtonStyle() ?? toast().actionButtonStyle"
             [class]="cn(classes().actionButton, toast().classes?.actionButton)"
             (click)="onActionClick($event)">
             {{ action.label }}
@@ -220,8 +220,8 @@ export class ToastComponent implements AfterViewInit, OnDestroy {
   expandByDefault = input.required<ToastProps['expandByDefault']>();
   closeButton = input.required<ToastProps['closeButton']>();
   interacting = input.required<ToastProps['interacting']>();
-  cancelButtonStyle = input<ToastProps['cancelButtonStyle']>('');
-  actionButtonStyle = input<ToastProps['actionButtonStyle']>('');
+  cancelButtonStyle = input<ToastProps['cancelButtonStyle']>();
+  actionButtonStyle = input<ToastProps['actionButtonStyle']>();
   duration = input<ToastProps['duration']>(TOAST_LIFETIME);
   descriptionClass = input<ToastProps['descriptionClass']>('');
   _classes = input<ToastProps['classes']>({}, { alias: 'classes' });

libs/ngx-sonner/src/lib/toaster.component.ts

@@ -21,7 +21,7 @@ import { LoaderComponent } from './loader.component';
 import { ToastPositionPipe } from './pipes/toast-position.pipe';
 import { toastState } from './state';
 import { ToastComponent } from './toast.component';
-import {Position, Theme, ToasterProps} from './types';
+import { Position, Theme, ToasterProps } from './types';
 
 // Default lifetime of a toasts (in ms)
 const TOAST_LIFETIME = 4000;
@@ -80,15 +80,15 @@ 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 ?? {}"
                 [duration]="toastOptions().duration ?? duration()"
                 [unstyled]="toastOptions().unstyled ?? false">
                 <ngx-sonner-loader
-                  [visible]="toast.type === 'loading'"
+                  [isVisible]="toast.type === 'loading'"
                   loading-icon />
                 <ngx-sonner-icon type="success" success-icon />
                 <ngx-sonner-icon type="error" error-icon />

libs/ngx-sonner/src/test-setup.ts

@@ -5,4 +5,43 @@ globalThis.ngJest = {
     errorOnUnknownProperties: true,
   },
 };
+import '@testing-library/jest-dom';
 import 'jest-preset-angular/setup-jest';
+
+export const mediaQueryState = {
+  matches: false,
+};
+
+const listeners: ((event: unknown) => void)[] = [];
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: mediaQueryState.matches,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+    addEventListener: jest.fn((type, callback) => {
+      if (type === 'change') {
+        listeners.push(callback);
+      }
+    }),
+    removeEventListener: jest.fn((type, callback) => {
+      const index = listeners.indexOf(callback);
+      if (index !== -1) {
+        listeners.splice(index, 1);
+      }
+    }),
+    dispatchEvent: jest.fn(event => {
+      if (event.type === 'change') {
+        for (const callback of listeners) {
+          callback({
+            matches: mediaQueryState.matches,
+            media: '(prefers-color-scheme: light)',
+          });
+        }
+      }
+    }),
+  })),
+});

libs/ngx-sonner/src/tests/toaster-test.component.ts

@@ -0,0 +1,30 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { NgxSonnerToaster, ToasterProps, toast } from 'ngx-sonner';
+
+type ToastFn = (t: typeof toast) => void;
+
+export type ToastTestInputs = {
+  cb: ToastFn;
+  dir?: ToasterProps['dir'];
+  theme?: ToasterProps['theme'];
+};
+
+@Component({
+  selector: 'ngx-sonner-test',
+  standalone: true,
+  imports: [NgxSonnerToaster],
+  template: `
+    <ngx-sonner-toaster [dir]="dir()" [theme]="theme()" />
+    <button data-testid="trigger" (click)="onClick()">Trigger</button>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ToasterTestComponent {
+  cb = input.required<ToastTestInputs['cb']>();
+  dir = input<ToasterProps['dir']>();
+  theme = input<ToasterProps['theme']>('light');
+
+  onClick() {
+    this.cb()(toast);
+  }
+}