Merge pull request learningequality#12105 from AlexVelezLl/fix-vtl-ro…

…uting-bugs

Fix Vue Tesing Library routes bug

kolibri/core/assets/src/views/ContentRenderer/__tests__/ContentRendererError.spec.js

@@ -1,13 +1,11 @@
 import { render, screen } from '@testing-library/vue';
-import VueRouter from 'vue-router';
 import userEvent from '@testing-library/user-event';
 import ContentRendererError from '../ContentRendererError.vue';
 
 // Helper function to render the component with given props and a router
 const renderComponent = props => {
   return render(ContentRendererError, {
     props,
-    routes: new VueRouter(),
   });
 };
 

kolibri/core/assets/src/views/ContentRenderer/__tests__/ContentRendererLoading.spec.js

@@ -1,12 +1,9 @@
 import { render, screen } from '@testing-library/vue';
-import VueRouter from 'vue-router';
 import ContentRendererLoading from '../ContentRendererLoading.vue';
 
 describe('ContentRendererLoading', () => {
   test('the component should render correctly', () => {
-    render(ContentRendererLoading, {
-      routes: new VueRouter(),
-    });
+    render(ContentRendererLoading);
 
     expect(screen.getByRole('progressbar')).toBeInTheDocument();
   });

kolibri/core/assets/src/views/ContentRenderer/__tests__/DownloadButton.spec.js

@@ -1,6 +1,5 @@
 import Vue from 'vue';
 import { render, screen } from '@testing-library/vue';
-import VueRouter from 'vue-router';
 import useUser, { useUserMock } from 'kolibri.coreVue.composables.useUser';
 import DownloadButton from '../DownloadButton.vue';
 import { RENDERER_SUFFIX } from '../constants';
@@ -35,7 +34,6 @@ const renderComponent = props => {
   );
 
   return render(DownloadButton, {
-    routes: new VueRouter(),
     props: {
       files: [],
       nodeTitle: '',

kolibri/core/assets/src/views/CoreMenu/__tests__/CoreMenuDivider.spec.js

@@ -1,12 +1,9 @@
 import { render, screen } from '@testing-library/vue';
-import VueRouter from 'vue-router';
 import CoreMenuDivider from '../CoreMenuDivider.vue';
 
 describe('CoreMenuDivider', () => {
   test('renders the component', () => {
-    render(CoreMenuDivider, {
-      routes: new VueRouter(),
-    });
+    render(CoreMenuDivider);
 
     expect(screen.getByRole('listitem')).toBeInTheDocument();
   });

kolibri/core/assets/src/views/ExamReport/__tests__/AttemptIconDiff.spec.js

@@ -1,6 +1,5 @@
 import { render, screen } from '@testing-library/vue';
 import '@testing-library/jest-dom';
-import VueRouter from 'vue-router';
 import { themeTokens } from 'kolibri-design-system/lib/styles/theme';
 import AttemptIconDiff from '../AttemptIconDiff.vue';
 
@@ -14,7 +13,6 @@ const renderComponent = props => {
       diff: 1,
       ...props,
     },
-    routes: new VueRouter(),
   });
 };
 

kolibri/core/assets/src/views/ExamReport/__tests__/AttemptTextDiff.spec.js

@@ -1,11 +1,9 @@
 import { render, screen } from '@testing-library/vue';
 import '@testing-library/jest-dom';
-import VueRouter from 'vue-router';
 import AttemptTextDiff from '../AttemptTextDiff.vue';
 
 const renderComponent = props => {
   return render(AttemptTextDiff, {
-    routes: new VueRouter(),
     props,
     store: {
       getters: {

kolibri/core/assets/src/views/ExamReport/__tests__/TriesOverview.spec.js

@@ -1,6 +1,5 @@
 import { render, screen } from '@testing-library/vue';
 import '@testing-library/jest-dom';
-import VueRouter from 'vue-router';
 import TriesOverview from '../TriesOverview.vue';
 import * as tryValidatorModule from '../utils';
 
@@ -33,7 +32,6 @@ const renderComponent = props => {
       ...defaultProps,
       ...props,
     },
-    routes: new VueRouter(),
     mixins: [commonCoreStrings],
   });
 };

kolibri/core/assets/src/views/InteractionList/__tests__/InteractionItem.spec.js

@@ -1,5 +1,4 @@
 import { render, screen } from '@testing-library/vue';
-import VueRouter from 'vue-router';
 import { themeTokens } from 'kolibri-design-system/lib/styles/theme';
 import InteractionItem from '../InteractionItem.vue';
 
@@ -11,7 +10,6 @@ const renderComponent = props => {
 
   return render(InteractionItem, {
     props: { ...defaultProps, ...props },
-    routes: new VueRouter(),
   });
 };
 

kolibri/core/assets/src/views/InteractionList/__tests__/index.spec.js

@@ -1,5 +1,4 @@
 import { render, fireEvent, screen } from '@testing-library/vue';
-import VueRouter from 'vue-router';
 import InteractionList from '../';
 
 const renderComponent = props => {
@@ -13,7 +12,6 @@ const renderComponent = props => {
       ...defaultProps,
       ...props,
     },
-    routes: new VueRouter(),
   });
 };
 

kolibri/core/assets/src/views/__tests__/TotalPoints.spec.js

@@ -1,4 +1,3 @@
-import VueRouter from 'vue-router';
 import { render, screen, fireEvent } from '@testing-library/vue';
 import TotalPoints from '../TotalPoints.vue';
 import '@testing-library/jest-dom';
@@ -24,7 +23,6 @@ const getMockStore = () => {
 const renderComponent = store => {
   return render(TotalPoints, {
     store,
-    routes: new VueRouter(),
   });
 };
 

kolibri/core/assets/src/views/sync/__tests__/ConfirmationRegisterModal.spec.js

@@ -1,5 +1,4 @@
 import { render, screen, fireEvent, waitFor } from '@testing-library/vue';
-import VueRouter from 'vue-router';
 import { PortalResource, FacilityDatasetResource } from 'kolibri.resources';
 import { ERROR_CONSTANTS } from 'kolibri.coreVue.vuex.constants';
 import ConfirmationRegisterModal from '../ConfirmationRegisterModal.vue';
@@ -20,7 +19,6 @@ const renderComponent = props => {
       token: sampleToken,
       ...props,
     },
-    routes: new VueRouter(),
   });
 };
 

kolibri/core/assets/src/views/sync/__tests__/SelectSourceModal.spec.js

@@ -1,11 +1,9 @@
 import { render, fireEvent, screen } from '@testing-library/vue';
-import VueRouter from 'vue-router';
 import SelectSourceModal from '../SelectSourceModal.vue';
 
 const renderComponent = props => {
   return render(SelectSourceModal, {
     props,
-    routes: new VueRouter(),
   });
 };
 

kolibri/core/assets/src/views/userAccounts/__tests__/GenderDisplayText.spec.js

@@ -1,12 +1,10 @@
-import VueRouter from 'vue-router';
 import { render, screen } from '@testing-library/vue';
 import { FacilityUserGender } from 'kolibri.coreVue.vuex.constants';
 import GenderDisplayText from '../GenderDisplayText.vue';
 import '@testing-library/jest-dom';
 
 const renderComponent = gender => {
   return render(GenderDisplayText, {
-    routes: new VueRouter(),
     props: {
       gender,
     },

kolibri/core/assets/src/views/userAccounts/__tests__/GenderSelect.spec.js

@@ -1,12 +1,9 @@
 import { render, screen, fireEvent } from '@testing-library/vue';
-import VueRouter from 'vue-router';
 import GenderSelect from '../GenderSelect.vue';
 import '@testing-library/jest-dom';
 
 const renderComponent = () => {
-  return render(GenderSelect, {
-    routes: new VueRouter(),
-  });
+  return render(GenderSelect);
 };
 
 describe('GenderSelect', () => {

packages/kolibri-tools/jest.conf/setup.js

@@ -14,6 +14,8 @@ import logging from 'kolibri.lib.logging';
 import { i18nSetup } from 'kolibri.utils.i18n';
 import KThemePlugin from 'kolibri-design-system/lib/KThemePlugin';
 
+/* eslint-disable vue/one-component-per-file */
+
 global.beforeEach(() => {
   return new Promise(resolve => {
     Aphrodite.StyleSheetTestUtils.suppressStyleInjection();
@@ -35,6 +37,12 @@ logging.setLevel('silent');
 
 // Register Vue plugins and components
 Vue.use(Vuex);
+Vue.mixin({
+  beforeCreate: function() {
+    // This fix some problems between the VueRouter plugin, and Vue-testing-library.
+    this.$options.router = this.$options.router || undefined;
+  },
+});
 Vue.use(VueRouter);
 Vue.use(VueMeta);
 Vue.use(KThemePlugin);
@@ -69,3 +77,4 @@ global.flushPromises = function flushPromises() {
     scheduler(resolve);
   });
 };
+/* eslint-enable vue/one-component-per-file */