test: add an example to use Transition

Author: ytak-sagit

src/__tests__/components/TransitionSample.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <button @click="toggle">toggle</button>
+    <transition @after-enter="onAfterEnter">
+      <div v-show="isShown">
+        <p>{{ showingText }}</p>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup>
+import {ref} from 'vue'
+
+const isShown = ref(false)
+const showingText = ref('')
+
+const onAfterEnter = () => (showingText.value = 'Completed.')
+const toggle = () => {
+  isShown.value = !isShown.value
+  showingText.value = isShown.value ? 'Now fade in...' : 'Now fade out...'
+}
+</script>
+
+<style scoped>
+.v-enter-active,
+.v-leave-active {
+  transition: all 0.8s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  transform: translateY(100%);
+  opacity: 0;
+}
+</style>

src/__tests__/transition.js

@@ -0,0 +1,42 @@
+import '@testing-library/jest-dom'
+
+import {fireEvent, render} from '..'
+
+import TransitionSample from './components/TransitionSample'
+
+test('shows the text', async () => {
+  // In Vue Test Utils, the <Transition> component is stubbed
+  // by default, but javascript hooks are not supported.
+  // If you want to test user interactions using javascript hooks,
+  // you can turn off the <Transition> component stubbing
+  // by setting global stubs transition to false.
+  const {getByRole, findByText} = render(TransitionSample, {
+    global: {
+      stubs: {
+        transition: false,
+      },
+    },
+  })
+
+  // Trigger fade in the text.
+  await fireEvent.click(getByRole('button', {name: 'toggle'}))
+
+  // If setting transition stubs, this assertion is failed
+  // because javascript hooks are not called and the text is not changed.
+  expect(await findByText('Completed.')).toBeVisible()
+})
+
+test('hides the text', async () => {
+  // If there is no need to use JavaScript Hooks,
+  // you can render with the default settings.
+  const {getByRole, queryByText} = render(TransitionSample)
+
+  // Trigger fade in the text.
+  const toggleButton = getByRole('button', {name: 'toggle'})
+  await fireEvent.click(toggleButton)
+
+  // And trigger fade out the text.
+  await fireEvent.click(toggleButton)
+
+  expect(queryByText('Now fade out...')).not.toBeVisible()
+})