test: clean up notification animation tests (#7341)

packages/notification/test/animation.test.js

@@ -1,36 +1,12 @@
 import { expect } from '@esm-bundle/chai';
 import { aTimeout, fixtureSync, oneEvent } from '@vaadin/testing-helpers';
 import '../vaadin-notification.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vaadin-notification-card',
-  css`
-    @keyframes test-animation {
-      100% {
-        opacity: 0;
-      }
-    }
-
-    :host {
-      width: 200px;
-      background: lightgrey;
-    }
-
-    :host([slot^='bottom']) {
-      animation: none !important;
-    }
-
-    :host([slot='middle'][closing]) {
-      animation: test-animation 100ms;
-    }
-  `,
-  { moduleId: 'vaadin-notification-card-animation-theme' },
-);
 
 describe('animated notifications', () => {
   let wrapper, notifications, container;
 
+  const animationDuration = 20;
+
   beforeEach(async () => {
     wrapper = fixtureSync(`
       <div>
@@ -41,16 +17,21 @@ describe('animated notifications', () => {
     notifications = Array.from(wrapper.children);
     container = notifications[0]._container;
 
-    // Change default duration and wait for both notifications to be opened
-    const duration = 20;
+    notifications[0]._card.style.animation = 'none';
+    notifications[1]._card.style.animationDuration = `${animationDuration}ms`;
+
     notifications.forEach((elm) => {
-      elm.duration = duration;
+      elm.duration = -1;
       elm.opened = true;
       elm.renderer = (root) => {
         root.textContent = 'Notification';
       };
     });
-    await aTimeout(duration);
+
+    // Notification 0 has no animation, it is fully opened immediately
+    // Notification 1 has animation, it is fully opened after the animation ends.
+    // Let's, however, start the tests while the opening animation is still running.
+    await aTimeout(animationDuration / 2);
   });
 
   afterEach(() => {
@@ -59,24 +40,31 @@ describe('animated notifications', () => {
 
   describe('animation', () => {
     it('should remove card immediately if no animation defined', () => {
+      notifications[0].close();
       expect(notifications[0]._card.parentNode).not.to.be.ok;
     });
 
     it('should not remove card after timeout if animation running', () => {
+      notifications[1].close();
       expect(notifications[1]._card.parentNode).to.be.ok;
     });
 
     it('should remove card after animation', async () => {
+      notifications[1].close();
       await oneEvent(notifications[1]._card, 'animationend');
       expect(notifications[1]._card.parentNode).not.to.be.ok;
     });
 
     it('should close the container when all active notifications disappear', async () => {
+      notifications[0].close();
+      notifications[1].close();
       await oneEvent(notifications[1]._card, 'animationend');
       expect(container.opened).to.be.false;
     });
 
     it('should set `closing` attribute and remove later', async () => {
+      notifications[0].close();
+      notifications[1].close();
       expect(notifications[0]._card.hasAttribute('closing')).to.be.false;
       expect(notifications[1]._card.hasAttribute('closing')).to.be.true;
       await oneEvent(notifications[1]._card, 'animationend');
@@ -85,6 +73,9 @@ describe('animated notifications', () => {
     });
 
     it('should set `opening` attribute and remove later', async () => {
+      notifications[1].close();
+      await oneEvent(notifications[1]._card, 'animationend');
+      notifications[1].open();
       expect(notifications[1]._card.hasAttribute('opening')).to.be.true;
       await oneEvent(notifications[1]._card, 'animationend');
       expect(notifications[1]._card.hasAttribute('opening')).to.be.false;