From 4e36f7d5a7872c1916a3b9cd529f1b0c25e7b1ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vi=CC=81ctor=20CG?= <victorcg@empathy.co>
Date: Thu, 15 Aug 2024 17:05:14 +0200
Subject: [PATCH] fix(staggered-fade-and-slide): add unit test

---
 .../staggered-fade-and-slide.spec.ts          | 99 +++++++++++++++++++
 .../animations/staggered-fade-and-slide.vue   |  2 +-
 2 files changed, 100 insertions(+), 1 deletion(-)
 create mode 100644 packages/x-components/src/components/animations/__tests__/staggered-fade-and-slide.spec.ts

diff --git a/packages/x-components/src/components/animations/__tests__/staggered-fade-and-slide.spec.ts b/packages/x-components/src/components/animations/__tests__/staggered-fade-and-slide.spec.ts
new file mode 100644
index 0000000000..70d2c19dbe
--- /dev/null
+++ b/packages/x-components/src/components/animations/__tests__/staggered-fade-and-slide.spec.ts
@@ -0,0 +1,99 @@
+import { mount } from '@vue/test-utils';
+import { ref, TransitionGroup } from 'vue';
+import StaggeredFadeAndSlide from '../staggered-fade-and-slide.vue';
+import { DISABLE_ANIMATIONS_KEY } from '../../decorators/injection.consts';
+
+function render({ appear = true, tag = 'div', stagger = 25, disableAnimation = false } = {}) {
+  const wrapper = mount(StaggeredFadeAndSlide, {
+    props: { appear, tag, stagger },
+    global: {
+      provide: {
+        [DISABLE_ANIMATIONS_KEY as string]: ref(disableAnimation)
+      },
+      stubs: {
+        'transition-group': false
+      }
+    },
+    slots: {
+      default: `
+        <p key="1">Fist paragraph</p>
+        <p key="2">Second paragraph</p>
+        <p key="3">Third paragraph</p>
+      `
+    }
+  });
+
+  return {
+    wrapper,
+    transitionGroup: wrapper.findComponent(TransitionGroup)
+  };
+}
+
+describe('testing StaggeredFadeAndSlide component', () => {
+  beforeAll(jest.useFakeTimers);
+  afterEach(jest.clearAllTimers);
+
+  it('renders the TransitionGroup with correct props', () => {
+    const appear = false;
+    const tag = 'ul';
+
+    const { transitionGroup } = render({ appear, tag });
+
+    expect(transitionGroup.exists()).toBeTruthy();
+    expect(transitionGroup.props('appear')).toBe(appear);
+    expect(transitionGroup.props('tag')).toBe(tag);
+    expect(transitionGroup.props('name')).toBe('x-staggered-fade-and-slide');
+  });
+
+  it('disables the animation when required', () => {
+    const { transitionGroup } = render({ disableAnimation: true });
+
+    expect(transitionGroup.props('name')).toBe('__no-animation__');
+  });
+
+  it('renders the animation component with the expected tag wrapping all slotted elements', () => {
+    const { wrapper } = render();
+
+    expect(wrapper.find('div')).toBeTruthy();
+    expect(wrapper.findAll('p')).toHaveLength(3);
+  });
+
+  it('renders each element with the expected delay', () => {
+    const transitionDuration = 250;
+    const stagger = 75;
+    const { wrapper } = render({ stagger });
+    const elements = wrapper.findAll('p');
+
+    for (const [i, el] of elements.entries()) {
+      expect(el.element.style.transitionDelay).toBe(`${i * stagger}ms`);
+    }
+
+    // Wait for the first transition to finish
+    jest.advanceTimersByTime(transitionDuration);
+
+    expect(elements[0].element.style.transitionDelay).toBe('0ms');
+    expect(elements[1].element.style.transitionDelay).not.toBe('0ms');
+    expect(elements[2].element.style.transitionDelay).not.toBe('0ms');
+
+    expect(elements[0].element.dataset.animated).toBe('true');
+    expect(elements[1].element.dataset.animated).toBeUndefined();
+    expect(elements[2].element.dataset.animated).toBeUndefined();
+
+    // Once the previous transition is finished wait for the stagger delay
+    jest.advanceTimersByTime(stagger);
+
+    expect(elements[1].element.style.transitionDelay).toBe('0ms');
+    expect(elements[2].element.style.transitionDelay).not.toBe('0ms');
+
+    expect(elements[1].element.dataset.animated).toBe('true');
+    expect(elements[2].element.dataset.animated).toBeUndefined();
+
+    // Once the previous transition is finished wait for the stagger delay
+    jest.advanceTimersByTime(stagger);
+
+    for (const el of elements) {
+      expect(el.element.style.transitionDelay).toBe('0ms');
+      expect(el.element.dataset.animated).toBe('true');
+    }
+  });
+});
diff --git a/packages/x-components/src/components/animations/staggered-fade-and-slide.vue b/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
index 2e5ec7cc2f..fa2aab7248 100644
--- a/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
+++ b/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, ref } from 'vue';
+  import { defineComponent } from 'vue';
   import { useDisableAnimation } from './use-disable-animation';
 
   /**