UNPKG

quasar

Version:

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

119 lines (100 loc) 3.73 kB
import { describe, test, expect } from 'vitest' import useTransition, { useTransitionProps } from './use-transition.js' describe('[useTransition API]', () => { describe('[Variables]', () => { describe('[(variable)useTransitionProps]', () => { test('is defined correctly', () => { expect(useTransitionProps).toBeTypeOf('object') expect(Object.keys(useTransitionProps)).not.toHaveLength(0) }) }) }) describe('[Functions]', () => { describe('[(function)default]', () => { test('has correct return value', () => { expect( useTransition({}) ).toStrictEqual({ transitionStyle: expect.$ref( expect.any(String) ), transitionProps: expect.$ref({ appear: expect.any(Boolean), enterFromClass: expect.any(String), enterActiveClass: expect.any(String), enterToClass: expect.any(String), leaveFromClass: expect.any(String), leaveActiveClass: expect.any(String), leaveToClass: expect.any(String) }) }) }) test('props.transitionDuration is handled correctly', () => { const { transitionStyle } = useTransition({ transitionDuration: 555 }) expect( transitionStyle.value ).toMatch(/555ms/) }) test('props.transitionShow is handled correctly', () => { const { transitionProps } = useTransition({ transitionShow: 'some-transition' }) expect( transitionProps.value ).toMatchObject({ enterFromClass: 'q-transition--some-transition-enter-from', enterActiveClass: 'q-transition--some-transition-enter-active', enterToClass: 'q-transition--some-transition-enter-to' }) }) test('props.transitionHide is handled correctly', () => { const { transitionProps } = useTransition({ transitionHide: 'some-transition' }) expect( transitionProps.value ).toMatchObject({ leaveFromClass: 'q-transition--some-transition-leave-from', leaveActiveClass: 'q-transition--some-transition-leave-active', leaveToClass: 'q-transition--some-transition-leave-to' }) }) test('defaultShowFn + defaultHideFn is handled correctly', () => { const { transitionProps } = useTransition( {}, () => 'show', () => 'hide' ) expect( transitionProps.value ).toMatchObject({ enterFromClass: 'q-transition--show-enter-from', enterActiveClass: 'q-transition--show-enter-active', enterToClass: 'q-transition--show-enter-to', leaveFromClass: 'q-transition--hide-leave-from', leaveActiveClass: 'q-transition--hide-leave-active', leaveToClass: 'q-transition--hide-leave-to' }) }) test('props.transitionShow & props.transitionHide are handled correctly with defaultShowFn + defaultHideFn too', () => { const { transitionProps } = useTransition( { transitionShow: 'show', transitionHide: 'hide' }, () => 'X', () => 'Y' ) expect( transitionProps.value ).toMatchObject({ enterFromClass: 'q-transition--show-enter-from', enterActiveClass: 'q-transition--show-enter-active', enterToClass: 'q-transition--show-enter-to', leaveFromClass: 'q-transition--hide-leave-from', leaveActiveClass: 'q-transition--hide-leave-active', leaveToClass: 'q-transition--hide-leave-to' }) }) }) }) })