fix: filter undefined refs from group, add test cases

fix #9
ngxpert · Dec 7, 2024 · af1ed00 · af1ed00
1 parent 8b59a9a
commit af1ed00
Show file tree

Hide file tree

Showing 5 changed files with 155 additions and 3 deletions.
diff --git a/cypress/e2e/toast_grouping.cy.ts b/cypress/e2e/toast_grouping.cy.ts
@@ -0,0 +1,114 @@
+/// <reference types="cypress" />
+
+describe('Toast Grouping', () => {
+  beforeEach(() => {
+    cy.visit('/');
+    cy.get('#grouping').scrollIntoView();
+  });
+
+  it('should show pre-grouped notifications', () => {
+    // Click the pre-grouping example button
+    cy.get('#grouping-pre').click();
+
+    // Check parent toast appears with retry and longer timeout
+    cy.get('.hot-toast-bar-base', { timeout: 10000 }).should('be.visible');
+    cy.get('.hot-toast-bar-base').within(() => {
+      cy.contains('New Activities', { timeout: 5000 }).should('be.visible');
+      cy.contains('5 New Activities', { timeout: 5000 }).should('be.visible');
+      cy.contains("What's happening around you!", { timeout: 5000 }).should('be.visible');
+    });
+
+    // Check expand/collapse functionality with wait
+    cy.get('.hot-toast-group-btn').should('be.visible').click();
+    cy.wait(500); // Wait for expansion animation
+
+    // Verify all child notifications are visible
+    cy.get('.hot-toast-bar-base-group').within(() => {
+      cy.contains('New Message!', { timeout: 5000 }).should('be.visible');
+      cy.contains('Level Up!', { timeout: 5000 }).should('be.visible');
+      cy.contains('Reminder: Meeting Today', { timeout: 5000 }).should('be.visible');
+      cy.contains('Special Offer!', { timeout: 5000 }).should('be.visible');
+      cy.contains('Task Assigned', { timeout: 5000 }).should('be.visible');
+      cy.contains('Sarah sent you a message.', { timeout: 5000 }).should('be.visible');
+      cy.contains('Just Now', { timeout: 5000 }).should('be.visible');
+    });
+
+    // Test collapse with wait
+    cy.get('.hot-toast-group-btn').should('be.visible').click();
+    cy.wait(500); // Wait for collapse animation
+
+    // Verify collapsed state
+    cy.get('.hot-toast-bar-base-group').within(() => {
+      cy.contains('New Message!', { timeout: 5000 }).should('not.be.visible');
+    });
+  });
+
+  it('should handle dynamic notifications', () => {
+    const titles = ['New Message!', 'Level Up!', 'Reminder: Meeting Today'];
+
+    cy.get('#grouping-post').click();
+    cy.get('.hot-toast-bar-base', { timeout: 10000 }).should('be.visible');
+
+    titles.forEach(() => {
+      cy.contains('Add notification').click();
+      cy.wait(200);
+    });
+
+    cy.get('.hot-toast-group-btn').should('be.visible').click();
+    cy.wait(500);
+
+    cy.get('.hot-toast-bar-base-group')
+      .find('.hot-toast-bar-base')
+      .should('have.length', titles.length)
+      .each((el, index) => {
+        expect(el).to.contain(titles[index]);
+      });
+  });
+
+  it('should handle dismissible notifications', () => {
+    // Force click the hidden test button
+    cy.get('#test-dismissible-toasts').click({ force: true });
+
+    // Check parent toast appears with retry and longer timeout
+    cy.get('.hot-toast-bar-base', { timeout: 10000 }).should('be.visible');
+    cy.get('.hot-toast-bar-base').within(() => {
+      // Wait for all notifications to be added and visible
+      cy.contains(/[0-5] New Activities/, { timeout: 10000 }).should('be.visible');
+      cy.contains("What's happening around you!", { timeout: 5000 }).should('be.visible');
+      cy.get('.hot-toast-close-btn').should('be.visible');
+    });
+
+    // Check expand/collapse functionality with wait
+    cy.get('.hot-toast-group-btn').should('be.visible').click();
+    cy.wait(500); // Wait for expansion animation
+
+    // Verify all child notifications are visible and have close buttons
+    cy.get('.hot-toast-bar-base-group').within(() => {
+      cy.contains('New Message!', { timeout: 5000 }).should('be.visible');
+      cy.contains('Level Up!', { timeout: 5000 }).should('be.visible');
+      cy.contains('Reminder: Meeting Today', { timeout: 5000 }).should('be.visible');
+      cy.contains('Special Offer!', { timeout: 5000 }).should('be.visible');
+      cy.contains('Task Assigned', { timeout: 5000 }).should('be.visible');
+      cy.contains('Sarah sent you a message.', { timeout: 5000 }).should('be.visible');
+      cy.contains('Just Now', { timeout: 5000 }).should('be.visible');
+
+      // Check close buttons in child notifications
+      cy.get('.hot-toast-close-btn').should('have.length.at.least', 1);
+    });
+
+    // Test close functionality
+    cy.get('.hot-toast-bar-base-group').within(() => {
+      cy.get('.hot-toast-close-btn').first().click();
+      cy.contains('New Message!', { timeout: 5000 }).should('not.exist');
+    });
+
+    // Test collapse with wait
+    cy.get('.hot-toast-group-btn').should('be.visible').click();
+    cy.wait(500); // Wait for collapse animation
+
+    // Verify collapsed state
+    cy.get('.hot-toast-bar-base-group').within(() => {
+      cy.contains('Level Up!', { timeout: 5000 }).should('not.be.visible');
+    });
+  });
+});
diff --git a/...xpert/hot-toast/src/lib/components/hot-toast-group-item/hot-toast-group-item.component.ts b/...xpert/hot-toast/src/lib/components/hot-toast-group-item/hot-toast-group-item.component.ts
@@ -137,7 +137,7 @@ export class HotToastGroupItemComponent implements OnChanges, OnInit, AfterViewI
   }
 
   get groupChildrenToastRefs() {
-    return this.toastRef.groupRefs;
+    return this.toastRef.groupRefs.filter((ref) => !!ref);
   }
   set groupChildrenToastRefs(value: CreateHotToastRef<unknown>[]) {
     (this.toastRef as { groupRefs: CreateHotToastRef<unknown>[] }).groupRefs = value;

diff --git a/projects/ngxpert/hot-toast/src/lib/components/hot-toast/hot-toast.component.ts b/projects/ngxpert/hot-toast/src/lib/components/hot-toast/hot-toast.component.ts
@@ -155,7 +155,7 @@ export class HotToastComponent implements OnInit, AfterViewInit, OnDestroy, OnCh
   }
 
   get groupChildrenToastRefs() {
-    return this.groupRefs;
+    return this.groupRefs.filter((ref) => !!ref);
   }
   set groupChildrenToastRefs(value: CreateHotToastRef<unknown>[]) {
     this.groupRefs = value;

diff --git a/src/app/sections/grouping/grouping.component.html b/src/app/sections/grouping/grouping.component.html
@@ -109,3 +109,7 @@ <h2 class="ml-5 mr-5 mb-4 text-2xl font-bold">
     </div>
   </div>
 </ng-template>
+<div style="display: none;">
+  <!-- Test buttons for toast options -->
+  <button id="test-dismissible-toasts" (click)="showDismissibleToasts()"></button>
+</div>
diff --git a/src/app/sections/grouping/grouping.component.ts b/src/app/sections/grouping/grouping.component.ts
@@ -31,7 +31,7 @@ export class GroupingComponent implements OnInit {
     { label: 'HTML', value: 'html' },
     { label: 'CSS', value: 'css' },
   ];
-  readonly commonOptions: ToastOptions<unknown> = { autoClose: false };
+  readonly commonOptions: ToastOptions<unknown> = { autoClose: false, dismissible: true };
   readonly childNotifications = (ngTemplateGroupItem: Content): HotToastGroupChild[] => [
     {
       options: {
@@ -132,6 +132,7 @@ export class GroupingComponent implements OnInit {
           this.parentRef = this.toast.show(this.ngTemplateGroup, {
             position: 'top-right',
             autoClose: false,
+            dismissible: true,
             className: 'hot-toast-custom-class',
             group: {
               className: 'hot-toast-custom-class',
@@ -185,4 +186,37 @@ export class GroupingComponent implements OnInit {
       parentRef.show();
     });
   }
+
+  // Hidden method for testing dismissible toasts
+  showDismissibleToasts() {
+    // Create parent toast first but don't show it
+    const parentBuilder = new HotToastBuilder(this.ngTemplateGroup, this.toast).setOptions({
+      position: 'top-right',
+      autoClose: false,
+      dismissible: true,
+      className: 'hot-toast-custom-class',
+      group: {
+        className: 'hot-toast-custom-class',
+      },
+    });
+
+    // Create child toasts with dismissible option
+    const childrenWithDismissible = this.childNotifications(this.ngTemplateGroupItem).map((child) => {
+      return new HotToastBuilder(child.options.message, this.toast).setOptions({
+        ...child.options,
+        dismissible: true,
+      });
+    });
+
+    // Add children to parent
+    childrenWithDismissible.forEach((child) => parentBuilder.addChild(child));
+
+    // Create the toast with all children (but don't show yet)
+    const parentRef = parentBuilder.create();
+
+    // Once all refs are attached, show the parent toast
+    parentRef.afterGroupRefsAttached.subscribe(() => {
+      parentRef.show();
+    });
+  }
 }