Upgrade vue3 and all dependencies
Start the process of porting everything to Vue 3. I have most things
working. npm run-scripts build works, npm install works. prettier
passes. Styles load, login works, webui loads.
This was primarily done using the linked documents below. It makes the
following design decisions:
1. Vue is put in compat 2 mode, which allows most of the components to
work as-is.
2. Bootstrap v4 is used along with bootstrap-vue to keep our components
working.
3. Minor changes are made to load the latest versions of vue-router,
vuex, and vue-i18n.
I suspect this patchset is good enough to start with, and we can clean
up the broken things one patchset at a time. The things that need to
happen are:
1. Get remaining features working again. This primiarily is vue-i18n
for mixins, and non vue components. This likely needs to be done by
not pulling in i18n into the non vue components, then using the .Vue
files to do the internationalization in the component context, NOT in
the mixin context. Alternatively, we could drop MixIns alltogether.
2. Get custom styles working again. Previously, we used some path
hackery in vue.config.js to optionally pre-load styles. This stops
working now that we're required to @import our modules. Likely we
need some rearangement of the paths such that custom styles are a
complete replacement (possibly importing the original) rather than
additive with overrides. That's a guess, but I don't really see
anyone else doing customization the way we've defined it here.
3. Bootstrap 5 no longer requires ANY custom vue modules, as it has
dropped the jquery dependency. We won't be able to pull in bootstrap
5 all at once, so pull in bootstrap 5 under an alias, like
"bootstrap5" that we can optionally import 5 or 4.
4. One at a time, start porting components over to Vue3 syntax and
bootstrap 5. This will be the bulk of the manual work and review.
The only thing I think left is getting unit tests passing, which I
commented out the pre-commit hook to make this PR.
Tested: Code builds. Needs better testing.
[1] https://router.vuejs.org/guide/migration/
[2] https://vue-i18n.intlify.dev/guide/migration/vue3
[3] https://vuelidate-next.netlify.app/migration_guide.html#package-name-and-imports
Change-Id: I5bb3187b9efbf2e4ff63e57994bc528756e2a981
Signed-off-by: Ed Tanous <ed@tanous.net>
diff --git a/tests/unit/AppHeader.spec.js b/tests/unit/AppHeader.spec.js
index 2d17e76..80460b9 100644
--- a/tests/unit/AppHeader.spec.js
+++ b/tests/unit/AppHeader.spec.js
@@ -1,13 +1,7 @@
-import { mount, createLocalVue, createWrapper } from '@vue/test-utils';
-import Vue from 'vue';
-import Vuex from 'vuex';
+import { mount, createWrapper } from '@vue/test-utils';
+import { createStore } from 'vuex';
import AppHeader from '@/components/AppHeader';
-// Silencing warnings about undefined Bootsrap-vue components
-Vue.config.silent = true;
-const localVue = createLocalVue();
-localVue.use(Vuex);
-
describe('AppHeader.vue', () => {
const actions = {
'global/getServerStatus': jest.fn(),
@@ -24,10 +18,9 @@
},
};
- const store = new Vuex.Store({ actions, modules });
+ const store = createStore({ actions, modules });
const wrapper = mount(AppHeader, {
store,
- localVue,
mocks: {
$t: (key) => key,
},
diff --git a/tests/unit/AppNavigation.spec.js b/tests/unit/AppNavigation.spec.js
index ce410c8..ca8a957 100644
--- a/tests/unit/AppNavigation.spec.js
+++ b/tests/unit/AppNavigation.spec.js
@@ -1,12 +1,9 @@
-import { mount, createLocalVue, createWrapper } from '@vue/test-utils';
+import { mount, createWrapper } from '@vue/test-utils';
import AppNavigation from '@/components/AppNavigation';
-import Vue from 'vue';
+import { createApp } from 'vue';
import Vuex from 'vuex';
import VueRouter from 'vue-router';
-import { BootstrapVue } from 'bootstrap-vue';
-
-const localVue = createLocalVue();
-localVue.use(Vuex);
+//import { BootstrapVue } from 'bootstrap-vue';
describe('AppNavigation.vue', () => {
let wrapper;
@@ -15,8 +12,9 @@
'global/userPrivilege': jest.fn(),
};
const store = new Vuex.Store({ actions });
- Vue.use(BootstrapVue);
- Vue.use(VueRouter);
+ const app = createApp();
+ //app.use(BootstrapVue);
+ app.use(VueRouter);
wrapper = mount(AppNavigation, {
store,
diff --git a/tests/unit/Global/InfoTooltip.spec.js b/tests/unit/Global/InfoTooltip.spec.js
index 6b9e110..2d7e74f 100644
--- a/tests/unit/Global/InfoTooltip.spec.js
+++ b/tests/unit/Global/InfoTooltip.spec.js
@@ -1,14 +1,10 @@
-import { mount, createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
import InfoTooltip from '@/components/Global/InfoTooltip';
-import { BootstrapVue } from 'bootstrap-vue';
process.env.BOOTSTRAP_VUE_NO_WARN = true;
-const localVue = createLocalVue();
-localVue.use(BootstrapVue);
describe('InfoTooltip.vue', () => {
const wrapper = mount(InfoTooltip, {
- localVue,
propsData: {
title: 'A tooltip test title',
},
diff --git a/tests/unit/Global/InputPasswordToggle.spec.js b/tests/unit/Global/InputPasswordToggle.spec.js
index 4a3a0b0..ed616ff 100644
--- a/tests/unit/Global/InputPasswordToggle.spec.js
+++ b/tests/unit/Global/InputPasswordToggle.spec.js
@@ -1,13 +1,8 @@
-import { mount, createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
-import BootstrapVue from 'bootstrap-vue';
-
-const localVue = createLocalVue();
-localVue.use(BootstrapVue);
describe('InputPasswordToggle.vue', () => {
const wrapper = mount(InputPasswordToggle, {
- localVue,
data() {
return {
isVisible: false,
diff --git a/tests/unit/Global/LoadingBar.spec.js b/tests/unit/Global/LoadingBar.spec.js
index 293ceb2..5191212 100644
--- a/tests/unit/Global/LoadingBar.spec.js
+++ b/tests/unit/Global/LoadingBar.spec.js
@@ -1,13 +1,8 @@
-import { mount, createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
import LoadingBar from '@/components/Global/LoadingBar';
-import BootstrapVue from 'bootstrap-vue';
-
-const localVue = createLocalVue();
-localVue.use(BootstrapVue);
describe('LoadingBar.vue', () => {
const wrapper = mount(LoadingBar, {
- localVue,
data() {
return {
loadingIndicatorValue: 0,
diff --git a/tests/unit/Global/PageContainer.spec.js b/tests/unit/Global/PageContainer.spec.js
index 78a3521..2d3a124 100644
--- a/tests/unit/Global/PageContainer.spec.js
+++ b/tests/unit/Global/PageContainer.spec.js
@@ -1,11 +1,8 @@
-import { mount, createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
import PageContainer from '@/components/Global/PageContainer';
-const localVue = createLocalVue();
-
describe('PageContainer.vue', () => {
const wrapper = mount(PageContainer, {
- localVue,
mocks: {
$t: (key) => key,
},
diff --git a/tests/unit/Global/PageSection.spec.js b/tests/unit/Global/PageSection.spec.js
index a1b951b..b554884 100644
--- a/tests/unit/Global/PageSection.spec.js
+++ b/tests/unit/Global/PageSection.spec.js
@@ -1,11 +1,8 @@
-import { mount, createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
import PageSection from '@/components/Global/PageSection';
-const localVue = createLocalVue();
-
describe('PageSection.vue', () => {
const wrapper = mount(PageSection, {
- localVue,
propsData: {
sectionTitle: 'PageSection test title',
},
diff --git a/tests/unit/Global/PageTitle.spec.js b/tests/unit/Global/PageTitle.spec.js
index 5cb2691..933212c 100644
--- a/tests/unit/Global/PageTitle.spec.js
+++ b/tests/unit/Global/PageTitle.spec.js
@@ -1,11 +1,8 @@
-import { mount, createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
import PageTitle from '@/components/Global/PageTitle';
-const localVue = createLocalVue();
-
describe('PageTitle.vue', () => {
const wrapper = mount(PageTitle, {
- localVue,
propsData: {
description: 'A page title test description',
},
diff --git a/tests/unit/Global/Search.spec.js b/tests/unit/Global/Search.spec.js
index eb553df..7942db0 100644
--- a/tests/unit/Global/Search.spec.js
+++ b/tests/unit/Global/Search.spec.js
@@ -1,13 +1,8 @@
-import { mount, createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
import Search from '@/components/Global/Search';
-import BootstrapVue from 'bootstrap-vue';
-
-const localVue = createLocalVue();
-localVue.use(BootstrapVue);
describe('Search.vue', () => {
const wrapper = mount(Search, {
- localVue,
mocks: {
$t: (key) => key,
},
diff --git a/tests/unit/Global/StatusIcon.spec.js b/tests/unit/Global/StatusIcon.spec.js
index 0fc8b7c..1cfee4c 100644
--- a/tests/unit/Global/StatusIcon.spec.js
+++ b/tests/unit/Global/StatusIcon.spec.js
@@ -1,11 +1,8 @@
-import { mount, createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
import StatusIcon from '@/components/Global/StatusIcon';
-const localVue = createLocalVue();
-
describe('StatusIcon.vue', () => {
const wrapper = mount(StatusIcon, {
- localVue,
propsData: {
status: 'info',
},
diff --git a/tests/unit/Global/TableCellCount.spec.js b/tests/unit/Global/TableCellCount.spec.js
index 025d67b..7ab73bf 100644
--- a/tests/unit/Global/TableCellCount.spec.js
+++ b/tests/unit/Global/TableCellCount.spec.js
@@ -1,11 +1,8 @@
-import { mount, createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
import TableCellCount from '@/components/Global/TableCellCount';
-const localVue = createLocalVue();
-
describe('TableCellCount.vue', () => {
const wrapper = mount(TableCellCount, {
- localVue,
propsData: {
filteredItemsCount: 5,
totalNumberOfCells: 100,
diff --git a/tests/unit/Global/TableToolbar.spec.js b/tests/unit/Global/TableToolbar.spec.js
index fc2beac..a3bcf3b 100644
--- a/tests/unit/Global/TableToolbar.spec.js
+++ b/tests/unit/Global/TableToolbar.spec.js
@@ -1,12 +1,8 @@
-import { mount, createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
import TableToolbar from '@/components/Global/TableToolbar';
-import BootstrapVue from 'bootstrap-vue';
-const localVue = createLocalVue();
-localVue.use(BootstrapVue);
describe('TableToolbar.vue', () => {
const wrapper = mount(TableToolbar, {
- localVue,
propsData: {
selectedItemsCount: 0,
},
diff --git a/tests/unit/Global/__snapshots__/PageSection.spec.js.snap b/tests/unit/Global/__snapshots__/PageSection.spec.js.snap
index 8e468b3..06064f6 100644
--- a/tests/unit/Global/__snapshots__/PageSection.spec.js.snap
+++ b/tests/unit/Global/__snapshots__/PageSection.spec.js.snap
@@ -7,6 +7,7 @@
<h2>
PageSection test title
</h2>
-
+
+
</div>
`;