Test config (#122)

* Automatically reset / clear mocks between tests

* Fix test for private view

* Fix tooltip test

* Fix router tests

* Fix all other tests

jest.config.js

@@ -1,5 +1,8 @@
 module.exports = {
 	preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
 	testMatch: ['**/?(*.)+(spec|test).[jt]s?(x)'],
-	coveragePathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/.jest/']
+	coveragePathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/.jest/'],
+	restoreMocks: true,
+	clearMocks: true,
+	resetMocks: true
 };

src/api.test.ts

@@ -8,13 +8,11 @@ describe('API', () => {
 	beforeAll(() => {
 		globalThis.window = Object.create(window);
 		Vue.use(VueCompositionAPI);
-		jest.spyOn(auth, 'logout');
-		jest.spyOn(auth, 'checkAuth');
 	});
 
 	beforeEach(() => {
-		(auth.logout as jest.Mock).mockClear();
-		(auth.checkAuth as jest.Mock).mockClear();
+		jest.spyOn(auth, 'logout');
+		jest.spyOn(auth, 'checkAuth');
 	});
 
 	it('Calculates the correct API root URL based on window', () => {

src/auth.test.ts

@@ -12,13 +12,11 @@ describe('Auth', () => {
 		Vue.config.productionTip = false;
 		Vue.config.devtools = false;
 		Vue.use(VueCompositionAPI);
-		jest.spyOn(api, 'get');
-		jest.spyOn(api, 'post');
 	});
 
 	beforeEach(() => {
-		(api.get as jest.Mock).mockClear();
-		(api.post as jest.Mock).mockClear();
+		jest.spyOn(api, 'get');
+		jest.spyOn(api, 'post');
 	});
 
 	describe('checkAuth', () => {

src/components/v-item-group/v-item-group.vue

@@ -52,6 +52,7 @@ export default createComponent({
 				mandatory: mandatory
 			}
 		);
+		return {};
 	}
 });
 </script>

src/directives/tooltip/tooltip.test.ts

@@ -10,13 +10,15 @@ import Tooltip, {
 	onEnterTooltip
 } from './tooltip';
 
-jest.useFakeTimers();
-
 const localVue = createLocalVue();
 localVue.use(VueCompositionAPI);
 localVue.component('v-button', VButton);
 
 describe('Tooltip', () => {
+	beforeEach(() => {
+		jest.useFakeTimers();
+	});
+
 	afterEach(() => {
 		document.getElementsByTagName('html')[0].innerHTML = '';
 	});

src/router.test.ts

@@ -26,13 +26,11 @@ describe('Router', () => {
 		Vue.config.productionTip = false;
 		Vue.config.devtools = false;
 		Vue.use(VueCompositionAPI);
-		jest.spyOn(api, 'get');
-		jest.spyOn(api, 'post');
 	});
 
 	beforeEach(() => {
-		(api.get as jest.Mock).mockClear();
-		(api.post as jest.Mock).mockClear();
+		jest.spyOn(api, 'get');
+		jest.spyOn(api, 'post');
 	});
 
 	it('Fetches the projects using projectsStore on first load', async () => {

src/views/private/private-view.test.ts

@@ -2,60 +2,65 @@ import { shallowMount, createLocalVue, Wrapper } from '@vue/test-utils';
 import VueCompositionAPI from '@vue/composition-api';
 import PrivateView from './private-view.vue';
 import VOverlay from '@/components/v-overlay';
-import useWindowSize from '@/compositions/window-size';
-
-let mockWidth = 50;
-
-jest.mock('@/compositions/window-size', () =>
-	jest.fn().mockImplementation(() => {
-		return {
-			width: {
-				value: mockWidth
-			},
-			height: {
-				value: mockWidth
-			}
-		};
-	})
-);
+import * as windowSize from '@/compositions/window-size';
 
 const localVue = createLocalVue();
 localVue.use(VueCompositionAPI);
 localVue.component('v-overlay', VOverlay);
 
 describe('Views / Private', () => {
-	beforeEach(() => {
-		(useWindowSize as jest.Mock).mockClear();
-	});
-
 	it('Shows nav with overlay if screen is < 960px', async () => {
-		mockWidth = 600;
+		jest.spyOn(windowSize, 'default').mockImplementation(() => ({
+			width: { value: 600 },
+			height: { value: 600 }
+		}));
+
 		const component = shallowMount(PrivateView, { localVue });
 		expect((component.vm as any).navWithOverlay).toBe(true);
 	});
 
 	it('Does not render overlay for nav if screen is >= 960px', async () => {
-		mockWidth = 960;
+		jest.spyOn(windowSize, 'default').mockImplementation(() => ({
+			width: { value: 960 },
+			height: { value: 960 }
+		}));
+
 		let component = shallowMount(PrivateView, { localVue });
 		expect((component.vm as any).navWithOverlay).toBe(false);
 
-		mockWidth = 1000;
+		(windowSize.default as jest.Mock).mockImplementation(() => ({
+			width: { value: 1000 },
+			height: { value: 1000 }
+		}));
+
 		component = shallowMount(PrivateView, { localVue });
 		expect((component.vm as any).navWithOverlay).toBe(false);
 	});
 
 	it('Shows drawer with overlay if screen is < 1260px', async () => {
-		mockWidth = 600;
+		jest.spyOn(windowSize, 'default').mockImplementation(() => ({
+			width: { value: 600 },
+			height: { value: 600 }
+		}));
+
 		const component = shallowMount(PrivateView, { localVue });
 		expect((component.vm as any).drawerWithOverlay).toBe(true);
 	});
 
 	it('Does not render overlay for drawer if screen is >= 1260px', async () => {
-		mockWidth = 1260;
+		jest.spyOn(windowSize, 'default').mockImplementation(() => ({
+			width: { value: 1260 },
+			height: { value: 1260 }
+		}));
+
 		let component = shallowMount(PrivateView, { localVue });
 		expect((component.vm as any).drawerWithOverlay).toBe(false);
 
-		mockWidth = 1300;
+		(windowSize.default as jest.Mock).mockImplementation(() => ({
+			width: { value: 1300 },
+			height: { value: 1300 }
+		}));
+
 		component = shallowMount(PrivateView, { localVue });
 		expect((component.vm as any).drawerWithOverlay).toBe(false);
 	});