diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json index b0737c8e..2ef1c202 100644 --- a/frontend/.eslintrc.json +++ b/frontend/.eslintrc.json @@ -14,7 +14,7 @@ "prettier/prettier": "error", "no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }], "no-multi-spaces": ["error", { "ignoreEOLComments": false }], - "import/no-extraneous-dependencies": ["error"], + "import/no-extraneous-dependencies": ["error", {"devDependencies": true}], "eol-last": ["error", "always"], "no-multiple-empty-lines": [ "error", @@ -29,7 +29,7 @@ "jest/valid-expect": "error" }, "parserOptions": { - "parser": "babel-eslint" + "parser": "@babel/eslint-parser" }, "settings": { "import/resolver": { diff --git a/frontend/Dockerfile b/frontend/Dockerfile index 189bb015..51a10ed6 100644 --- a/frontend/Dockerfile +++ b/frontend/Dockerfile @@ -1,4 +1,4 @@ -FROM node:12 +FROM node:19 EXPOSE 8080 diff --git a/frontend/babel.config.js b/frontend/babel.config.js index 3490e08c..4f45f32b 100644 --- a/frontend/babel.config.js +++ b/frontend/babel.config.js @@ -1,3 +1,3 @@ module.exports = { - presets: ['@vue/app'] + presets: ['@vue/app'], }; diff --git a/frontend/jest.config.js b/frontend/jest.config.js index 0ce51989..abf72e7c 100644 --- a/frontend/jest.config.js +++ b/frontend/jest.config.js @@ -4,5 +4,4 @@ module.exports = { testMatch: ['**/?(*.)+(spec).js'], collectCoverage: true, collectCoverageFrom: ['src/**/*', '!src/assets/**'], - transformIgnorePatterns: ['/node_modules/(?!(vue-scrollactive)/)'] }; diff --git a/frontend/jest/utils.js b/frontend/jest/utils.js index 9f85d81e..94c9279e 100644 --- a/frontend/jest/utils.js +++ b/frontend/jest/utils.js @@ -1,32 +1,53 @@ -import { mount as nativeMount, createLocalVue } from '@vue/test-utils'; -import Vuetify from 'vuetify'; +import { mount as nativeMount } from '@vue/test-utils'; +import { vi } from 'vitest'; +import { createVuetify } from 'vuetify'; +import { createStore } from 'vuex'; import Vuex from 'vuex'; +import * as components from 'vuetify/components'; +import * as directives from 'vuetify/directives'; +import HacknightWrapper from '../src/components/Dashboard/Hacknight/HacknightWrapper.vue'; +import HacknightsParticipants from '../src/components/Dashboard/HacknightsParticipants/HacknightsParticipants.vue'; +import DashboardHeader from '../src/components/Dashboard/Header/DashboardHeader.vue'; +import ParticipantsSearch from '../src/components/Dashboard/Participants/ParticipantsSearch/ParticipantsSearch.vue'; +import ParticipantsList from '../src/components/Dashboard/Participants/ParticipantsList.vue'; +import ParticipantsChart from '../src/components/Dashboard/ParticipantsChart/ParticipantsChart.vue'; +import DashboardMain from '../src/components/Dashboard/DashboardMain.vue'; +import AboutUs from '../src/components/HomePage/AboutUs/AboutUs.vue'; +import ContactUs from '../src/components/HomePage/ContactUs/ContactUs.vue'; +import HomePageHeader from '../src/components/HomePage/Header/HomePageHeader.vue'; +import JoinUs from '../src/components/HomePage/JoinUs/JoinUs.vue'; +import OurProjects from '../src/components/HomePage/OurProjects/OurProjects.vue'; +import ModalContent from '../src/components/HomePage/OurProjects/ModalContent/ModalContent.vue'; +import PageFooter from '../src/components/HomePage/PageFooter/PageFooter.vue'; +import SocialMedia from '../src/components/HomePage/SocialMedia/SocialMedia.vue'; +import HomePage from '../src/components/HomePage/HomePage.vue'; +import LoginForm from '../src/components/Login/LoginForm.vue'; const storeObject = { modules: { hacknight: { namespaced: true, getters: { - getHacknights: jest.fn(() => []), - getHacknight: jest.fn(() => ({ participants: [] })), - getError: jest.fn() + getHacknights: vi.fn(() => []), + getHacknight: vi.fn(() => ({ participants: [] })), + getError: vi.fn(), }, - actions: { getHacknights: jest.fn() } + actions: { getHacknights: vi.fn() }, }, participant: { namespaced: true, - getters: { getParticipants: jest.fn(() => []), getError: jest.fn() }, - actions: { getParticipants: jest.fn() } + getters: { getParticipants: vi.fn(() => []), getError: vi.fn() }, + actions: { getParticipants: vi.fn() }, }, auth: { namespaced: true, - getters: { getError: jest.fn() } + getters: { getError: vi.fn() }, }, contact: { namespaced: true, - getters: { successfullySent: jest.fn(), msgErrorRaised: jest.fn() } - } - } + getters: { successfullySent: vi.fn(), msgErrorRaised: vi.fn() }, + }, + }, }; // mount function from @vue/test-utils @@ -34,12 +55,36 @@ const storeObject = { // source: https://vuetifyjs.com/en/getting-started/unit-testing/#mocking-vuetify export const getMountWithVuetify = () => { - const localVue = createLocalVue(); - const vuetify = new Vuetify(); + const vuetify = createVuetify({ + components, + directives, + }); - return Component => { - return nativeMount(Component, { localVue, vuetify }); - }; + return nativeMount({ + props: {}, + global: { + components: { + HacknightWrapper, + HacknightsParticipants, + DashboardHeader, + ParticipantsSearch, + ParticipantsList, + ParticipantsChart, + DashboardMain, + AboutUs, + ContactUs, + HomePageHeader, + JoinUs, + OurProjects, + ModalContent, + PageFooter, + SocialMedia, + HomePage, + LoginForm, + }, + plugins: [vuetify], + }, + }); }; // mount function from @vue/test-utils @@ -47,32 +92,68 @@ export const getMountWithVuetify = () => { // source: https://vue-test-utils.vuejs.org/guides/using-with-vuex.html export const getMountWithVuex = () => { - const localVue = createLocalVue(); - localVue.use(Vuex); + const store = createStore(storeObject); - return Component => { - const store = new Vuex.Store(storeObject); - - return nativeMount(Component, { store, localVue, stubs: ['apexchart'] }); - }; + return nativeMount({ + props: {}, + global: { + components: { + HacknightWrapper, + HacknightsParticipants, + DashboardHeader, + ParticipantsSearch, + ParticipantsList, + ParticipantsChart, + DashboardMain, + AboutUs, + ContactUs, + HomePageHeader, + JoinUs, + OurProjects, + ModalContent, + PageFooter, + SocialMedia, + HomePage, + LoginForm, + }, + plugins: [store], + }, + }); }; // Use this function if you need to test a component // that uses both Vuex and Vuetify export const getMountWithProviders = () => { - const localVue = createLocalVue(); - localVue.use(Vuex); - const vuetify = new Vuetify(); - - return Component => { - const store = new Vuex.Store(storeObject); + const store = createStore(storeObject); + const vuetify = createVuetify({ + components, + directives, + }); - return nativeMount(Component, { - store, - localVue, - vuetify, - stubs: ['apexchart'] - }); - }; + return nativeMount({ + props: {}, + global: { + components: { + HacknightWrapper, + HacknightsParticipants, + DashboardHeader, + ParticipantsSearch, + ParticipantsList, + ParticipantsChart, + DashboardMain, + AboutUs, + ContactUs, + HomePageHeader, + JoinUs, + OurProjects, + ModalContent, + PageFooter, + SocialMedia, + HomePage, + LoginForm, + }, + plugins: [store, vuetify], + }, + }); }; diff --git a/frontend/package.json b/frontend/package.json index 4458d4c3..95fea749 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -5,47 +5,54 @@ "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", - "test": "vue-cli-service test:unit --collect-coverage", + "test": "vitest", "test:watch": "vue-cli-service test:unit --watch", "lint": "vue-cli-service lint --no-fix --max-warnings 0", "lint:fix": "vue-cli-service lint " }, "dependencies": { - "@mdi/font": "^4.5.95", - "apexcharts": "^3.27.1", - "axios": "^0.21.1", - "eslint-plugin-jest": "^24.5.0", + "@mdi/font": "^7.2.96", + "@vuelidate/core": "^2.0.2", + "@vuelidate/validators": "^2.0.2", + "apexcharts": "^3.37.3", + "axios": "^1.3.5", + "eslint-plugin-jest": "^27.2.1", "lodash": "^4.17.21", - "vue": "^2.6.10", - "vue-apexcharts": "^1.6.1", - "vue-router": "^3.3.4", - "vue-scrollactive": "^0.9.3", - "vuelidate": "^0.7.4", - "vuetify": "^2.6.10", - "vuex": "^3.0.1", - "vue-gtag": "^1.16.1" + "vue": "3.2.47", + "vue-gtag": "^2.0.1", + "vue-router": "^4.1.6", + "vue3-apexcharts": "^1.4.1", + "vuetify": "3.3.17", + "vuex": "^4.1.0" }, "devDependencies": { - "@vue/cli-plugin-babel": "^3.8.0", - "@vue/cli-plugin-eslint": "^3.8.0", - "@vue/cli-plugin-unit-jest": "~4.5.0", - "@vue/cli-service": "^3.8.0", - "@vue/test-utils": "^1.0.3", - "babel-eslint": "^10.0.1", - "eslint": "^5.8.0", - "eslint-config-prettier": "^4.3.0", - "eslint-plugin-import": "^2.17.3", - "eslint-plugin-prettier": "^3.1.0", - "eslint-plugin-vue": "^5.0.0-beta.4", - "husky": "^2.3.0", - "prettier": "^1.17.1", + "@babel/core": "^7.0.0", + "@babel/eslint-parser": "^7.21.3", + "@vitejs/plugin-vue": "^4.3.4", + "@vue/babel-preset-app": "^5.0.8", + "@vue/cli-plugin-babel": "^5.0.8", + "@vue/cli-plugin-eslint": "^5.0.8", + "@vue/cli-service": "^5.0.8", + "@vue/compiler-dom": "^3.2.47", + "@vue/compiler-sfc": "^3.2.47", + "@vue/server-renderer": "^3.2.47", + "@vue/test-utils": "^2.4.1", + "eslint": "^8.38.0", + "eslint-config-prettier": "^8.8.0", + "eslint-plugin-import": "^2.27.5", + "eslint-plugin-prettier": "^4.2.1", + "eslint-plugin-vue": "^9.10.0", + "husky": "^8.0.3", + "jsdom": "^22.1.0", + "prettier": "^2.8.7", "sass": "~1.32.12", - "sass-loader": "^7.1.0", - "style-loader": "^0.23.1", - "vue-cli-plugin-vuetify": "^0.6.3", - "vue-template-compiler": "^2.6.10", - "vuetify-loader": "^1.3.0", - "webpack": "^4.39.3" + "sass-loader": "^13.2.2", + "style-loader": "^3.3.2", + "typescript": "^4.9.4", + "vite": "^4.4.9", + "vitest": "^0.34.6", + "webpack": "^5.75.0", + "webpack-plugin-vuetify": "^2.0.0" }, "postcss": { "plugins": { diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 24988f47..5404680f 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -1,5 +1,5 @@