Updated animation cypress tests

Author: Eric Olkowski

packages/react-integration/cypress/integration/alertgroupanimations.spec.ts

@@ -3,32 +3,41 @@ describe('Alert Group Animations Demo Test', () => {
     cy.visit('http://localhost:3000/alert-group-animations-demo-nav-link');
   });
 
-  it('Renders alert group item initially with animation class', () => {
+  it('Renders alert group item with animation', () => {
     cy.clock();
     cy.get('#add-alert-button').click();
-    cy.get('.pf-v6-c-alert-group__item').should('have.class', 'pf-m-offstage-top');
-    cy.tick(100);
-    cy.get('#alert-close-button').click();
-    // Slightly more time than the fadeShort token used for timeout in component code
-    cy.tick(150);
-    cy.get('.pf-v6-c-alert').should('not.exist');
-  });
-
-  it('Renders alert group item with animation class removed after rendering', () => {
-    cy.get('#add-alert-button').click();
-    cy.get('.pf-v6-c-alert-group__item').should('not.have.class', 'pf-m-offstage-top');
-    cy.get('#alert-close-button').click();
+    cy.get('.pf-v6-c-alert-group__item').then(($groupItem) => {
+      const currentItem = $groupItem.get(0);
+      const height = currentItem.offsetHeight;
+      expect(height).to.equal(0);
+    });
+    cy.tick(1000);
+    cy.get('.pf-v6-c-alert-group__item').then(($groupItem) => {
+      const currentItem = $groupItem.get(0);
+      const height = currentItem.offsetHeight;
+      expect(height).to.be.greaterThan(0);
+    });
+    cy.clock().invoke('restore');
+    cy.get('#alert-close-button').click({ waitForAnimations: true });
     cy.get('.pf-v6-c-alert').should('not.exist');
   });
 
-  it('Adds animation class to alert group item before alert is removed', () => {
-    cy.get('#add-alert-button').click();
+  it('Removes alert group item with animation', () => {
+    let left: number;
     cy.clock();
+    cy.get('#add-alert-button').click();
+    cy.tick(1000);
+    cy.get('.pf-v6-c-alert-group__item').then(($groupItem) => {
+      const currentItem = $groupItem.get(0);
+      left = currentItem.getBoundingClientRect().left;
+    });
     cy.get('#alert-close-button').click();
-    // Slightly less time than the fadeShort token used for timeout in component code
     cy.tick(50);
-    cy.get('.pf-v6-c-alert-group__item').should('have.class', 'pf-m-offstage-right');
-    cy.tick(100);
-    cy.get('.pf-v6-c-alert').should('not.exist');
+    cy.get('.pf-v6-c-alert-group__item').then(($groupItem) => {
+      const currentItem = $groupItem.get(0);
+      const leftAfterAnimation = currentItem.getBoundingClientRect().left;
+
+      expect(left).to.be.lessThan(leftAfterAnimation);
+    });
   });
 });