refactor(staggered-fade-and-slide): use Vue native staggered transition

packages/_vue3-migration-test/src/components/animations/index.ts

@@ -5,3 +5,4 @@ export { default as TestCrossFade } from './test-cross-fade.vue';
 export { default as TestFade } from './test-fade.vue';
 export { default as TestFadeAndSlide } from './test-fade-and-slide.vue';
 export { default as TestAnimationFactory } from './test-animation-factory.vue';
+export { default as TestStaggeredFadeAndSlide } from './test-staggered-fade-and-slide.vue';

packages/_vue3-migration-test/src/components/animations/test-staggered-fade-and-slide.vue

@@ -0,0 +1,68 @@
+<template>
+  <h1>Dinamic content:</h1>
+  <button @click="insert">Insert at random index</button>
+  <button @click="reset">Reset</button>
+
+  <StaggeredFadeAndSlide :stagger="500">
+    <li v-for="item in items" :key="item.id">
+      {{ item.id }} - {{ item.name }}
+      <button @click="remove(item)">x</button>
+    </li>
+  </StaggeredFadeAndSlide>
+
+  <br />
+  <h1>Animation as prop</h1>
+  <BaseSuggestions :suggestions="suggestions" :animation="StaggeredFadeAndSlide" :stagger="50">
+    <template #default="{ suggestion }">
+      <span>{{ suggestion.query }}</span>
+    </template>
+  </BaseSuggestions>
+
+  <br />
+  <h1>Static content:</h1>
+  <StaggeredFadeAndSlide :stagger="50">
+    <li key="1">Element to animate</li>
+    <li key="2">Element to animate</li>
+    <li key="3">Element to animate</li>
+  </StaggeredFadeAndSlide>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import StaggeredFadeAndSlide from '../../../../x-components/src/components/animations/staggered-fade-and-slide.vue';
+  import BaseSuggestions from '../../../../x-components/src/components/suggestions/base-suggestions.vue';
+  import {
+    getQuerySuggestionsStub,
+    createResultStub,
+    getResultsStub
+  } from '../../../../x-components/src/__stubs__';
+  const suggestions = getQuerySuggestionsStub('chip', 5);
+  const getInitialItems = () => getResultsStub(5);
+  const items = ref(getInitialItems());
+  let id = items.value.length + 1;
+  /**
+   * Insert a new item at a random index.
+   */
+  function insert() {
+    const i = Math.round(Math.random() * items.value.length);
+    items.value.splice(i, 0, createResultStub(`Product ${id++}`));
+  }
+  /**
+   * Reset the list of items.
+   */
+  function reset() {
+    items.value = getInitialItems();
+    id = items.value.length + 1;
+  }
+  /**
+   * Remove an item from the list.
+   *
+   * @param item - The item to remove.
+   */
+  function remove(item: any) {
+    const i = items.value.indexOf(item);
+    if (i > -1) {
+      items.value.splice(i, 1);
+    }
+  }
+</script>

packages/_vue3-migration-test/src/router.ts

@@ -50,7 +50,8 @@ import {
   TestAnimationFactory,
   TestIcons,
   TestDisplayEmitter,
-  TestBaseSwitch
+  TestBaseSwitch,
+  TestStaggeredFadeAndSlide
 } from './';
 
 const routes = [
@@ -308,6 +309,11 @@ const routes = [
     path: '/base-switch',
     name: 'BaseSwitch',
     component: TestBaseSwitch
+  },
+  {
+    path: '/staggered-fade-and-slide',
+    name: 'StaggeredFadeAndSlide',
+    component: TestStaggeredFadeAndSlide
   }
 ];
 

packages/x-components/src/components/animations/__tests__/staggered-fade-and-slide.spec.ts

@@ -0,0 +1,91 @@
+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');
+
+    // 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');
+
+    // 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');
+    }
+  });
+});