Add test code examples for Vue component including `Transition` #327

Original file line number	Diff line number	Diff line change
		@@ -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>

42 changes: 42 additions & 0 deletions src/__tests__/transition.js

Show comments View file Open in desktop

Original file line number	Diff line number	Diff line change
		@@ -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()
	})

Navigation Menu