@stackoverfloweth/vue-compositions
Version:
A collection of reusable vue compositions.
57 lines • 1.93 kB
JavaScript
import { mount } from '@vue/test-utils';
import { describe, beforeEach, afterEach, it, vi, expect } from 'vitest';
import { h, isRef, ref } from 'vue';
import { useMedia } from '../useMedia';
import { timeout } from '../utilities/tests';
describe('media', () => {
const addEventListener = vi.fn();
const removeEventListener = vi.fn();
beforeEach(() => {
Object.defineProperty(window, 'matchMedia', {
writable: true,
value: vi.fn().mockImplementation(query => ({
matches: false,
media: query,
onchange: null,
addListener: vi.fn(),
removeListener: vi.fn(),
addEventListener,
removeEventListener,
dispatchEvent: vi.fn(),
})),
});
});
afterEach(() => {
vi.resetAllMocks();
});
it('returns a ref', () => {
const match = useMedia('(hover)');
expect(isRef(match)).toBe(true);
});
it('if query changes, media is called again', async () => {
const query = ref('(hover)');
useMedia(query);
query.value = '(touch)';
await timeout();
expect(window.matchMedia).toBeCalledTimes(2);
});
it('if query changes, event listener is updated', async () => {
const query = ref('(hover)');
useMedia(query);
query.value = '(touch)';
await timeout();
expect(removeEventListener).toBeCalledTimes(1);
expect(addEventListener).toBeCalledTimes(2);
});
it('if vue component is unmounted, event listener is removed', () => {
const wrapper = mount({
setup() {
useMedia('(hover)');
return () => h('p');
},
});
wrapper.unmount();
expect(removeEventListener).toBeCalledTimes(1);
});
});
//# sourceMappingURL=useMedia.spec.js.map