chore: update eslint and test and ci

Author: baby230211

.eslintrc.js

@@ -3,18 +3,21 @@ module.exports = {
     env: {
         browser: true,
         node: true,
+        'jest/globals': true,
     },
     parserOptions: {
-        parser: 'babel-eslint',
+        requireConfigFile: false,
+        parser: '@babel/eslint-parser',
     },
     extends: [
-        '@nuxtjs',
+        '@nuxtjs/eslint-config',
         'prettier',
-        'prettier/vue',
         'plugin:prettier/recommended',
         'plugin:nuxt/recommended',
     ],
-    plugins: ['prettier'],
+    plugins: ['prettier', 'jest'],
     // add your custom rules here
-    rules: {},
+    rules: {
+        'vue/multi-word-component-names': 'off',
+    },
 }

.github/workflows/ci.yml

@@ -17,30 +17,35 @@ jobs:
         strategy:
             matrix:
                 os: [ ubuntu-latest ]
-                node: [ 14 ]
 
         steps:
             -   name: Checkout 🛎
                 uses: actions/checkout@master
 
-            -   name: Setup node env 🏗
-                uses: actions/setup-node@v2.1.2
+            -   name: ⎔ Setup node 🏗
+                uses: actions/setup-node@v3
                 with:
-                    node-version: ${{ matrix.node }}
+                    node-version-file: ".nvmrc"
+                    cache: "yarn"
+
+            -   name: Get yarn cache directory path
+                id: yarn-cache-dir-path
+                run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
 
             -   name: Cache node_modules 📦
-                uses: actions/cache@v2
+                uses: actions/cache@v3
+                id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
                 with:
-                    path: ~/.npm
-                    key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+                    path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+                    key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
                     restore-keys: |
-                        ${{ runner.os }}-node-
+                        ${{ runner.os }}-yarn-e-
 
-            -   name: Install dependencies 👨🏻‍💻
-                run: npm ci
+            -   name: Install deps 👨🏻‍💻
+                run: yarn --frozen-lockfile
 
             -   name: Run linter 👀
-                run: npm run lint
+                run: yarn lint
 
             -   name: Run tests 🧪
-                run: npm run test
+                run: yarn test

components/bulletins/BulletinCardCollection.vue

@@ -19,9 +19,9 @@
 </template>
 
 <script>
-import { landingBulletinsConfig } from '@/configs/pageLanding'
 import BulletinCard from './BulletinCard.vue'
 import i18n from './BulletinCard.i18n'
+import { landingBulletinsConfig } from '@/configs/pageLanding'
 
 export default {
     i18n,

components/core/buttons/TextButton.vue

@@ -186,7 +186,8 @@ export default {
 .core-button.--bordered {
     & > a {
         @apply z-10 text-primary-100;
-        background: linear-gradient(#121023, #121023) padding-box,
+        background:
+            linear-gradient(#121023, #121023) padding-box,
             linear-gradient(
                     276.15deg,
                     #61c8a4 0.74%,
@@ -243,7 +244,8 @@ export default {
     @apply z-20 opacity-0;
     border-radius: inherit;
     content: '';
-    background: linear-gradient(#121023, #121023) padding-box,
+    background:
+        linear-gradient(#121023, #121023) padding-box,
         linear-gradient(
                 96.26deg,
                 #5fbeab 5.5%,

components/core/footer/FooterHistory.vue

@@ -21,9 +21,9 @@
 </template>
 
 <script>
+import i18n from './Footer.i18n'
 import { landingFooterHistoryConfig } from '@/configs/pageLanding'
 import ExtLink from '@/components/core/links/ExtLink'
-import i18n from './Footer.i18n'
 
 export default {
     i18n,

components/core/header/nav-bar/NavBar.vue

@@ -73,10 +73,10 @@
 </template>
 
 <script>
-import navBarItems from '@/components/core/header/nav-bar/nav-bar-items'
-import { ExtLink, LocaleLink } from '@/components/core/links'
 import NavBarItemDropdown from './NavBarItemDropdown'
 import i18n from './NavBar.i18n'
+import navBarItems from '@/components/core/header/nav-bar/nav-bar-items'
+import { ExtLink, LocaleLink } from '@/components/core/links'
 
 export default {
     i18n,

components/core/header/nav-bar/NavBarHamburger.vue

@@ -91,11 +91,11 @@
 </template>
 
 <script>
+import i18n from './NavBar.i18n'
+import navBarItems from './nav-bar-items'
 import IconHamburgerMenuIcon from '@/components/core/icons/IconHamburgerMenuIcon'
 import NavBarItemAccordion from '@/components/core/header/nav-bar/NavBarItemAccordion'
 import { ExtLink, LocaleLink } from '@/components/core/links'
-import i18n from './NavBar.i18n'
-import navBarItems from './nav-bar-items'
 
 export default {
     i18n,

components/core/links/LocaleLink.vue

@@ -35,7 +35,7 @@ export default {
             return {
                 'core-localeLink': true,
                 highlight: this.highlight,
-                'underline': this.underline,
+                underline: this.underline,
                 '--customized': this.customized,
             }
         },

components/core/markdown/MarkdownRenderer.vue

@@ -44,7 +44,11 @@ export default {
 }
 .markdown code {
     @apply rounded-md px-1 py-0.5;
-    font-family: Source Sans Pro, -apple-system, Roboto, Helvetica Neue,
+    font-family:
+        Source Sans Pro,
+        -apple-system,
+        Roboto,
+        Helvetica Neue,
         sans-serif !important;
     background-color: rgba(110, 118, 129, 0.4);
 }

components/events/RelatedCardCollection.vue

@@ -37,9 +37,9 @@
 </template>
 
 <script>
+import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
 import i18n from '@/i18n/conference/speeches.i18n'
 import SpeechCard from '@/components/events/SpeechCard'
-import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
 export default {
     i18n,
     name: 'RelatedCardCollection',

jest.config.js

@@ -4,10 +4,11 @@ module.exports = {
         '^~/(.*)$': '<rootDir>/$1',
         '^vue$': 'vue/dist/vue.common.js',
     },
+    testEnvironment: 'jsdom',
     moduleFileExtensions: ['js', 'vue', 'json'],
     transform: {
         '^.+\\.js$': 'babel-jest',
-        '.*\\.(vue)$': 'vue-jest',
+        '.*\\.(vue)$': '@vue/vue2-jest',
     },
     collectCoverage: true,
     collectCoverageFrom: [

nuxt.config.js

@@ -73,6 +73,8 @@ export default {
 
     // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
     buildModules: [
+        // https://go.nuxtjs.dev/eslint
+        '@nuxtjs/eslint-module',
         // https://go.nuxtjs.dev/tailwindcss
         '@nuxtjs/tailwindcss',
         // https://github.com/nuxt-community/dotenv-module

package.json

@@ -28,18 +28,32 @@
         "vue-dompurify-html": "2.3.0"
     },
     "devDependencies": {
-        "@nuxt/types": "^2.17.0",
+        "@babel/core": "^7.22.9",
+        "@babel/eslint-parser": "^7.22.9",
         "@fortawesome/free-brands-svg-icons": "^6.4.0",
         "@fortawesome/free-regular-svg-icons": "^6.4.0",
         "@fortawesome/free-solid-svg-icons": "^6.4.0",
-        "@nuxt/eslint-config": "^0.1.1",
+        "@nuxt/types": "^2.17.0",
         "@nuxtjs/dotenv": "^1.4.1",
+        "@nuxtjs/eslint-config": "^12.0.0",
+        "@nuxtjs/eslint-module": "^3.1.0",
         "@nuxtjs/fontawesome": "^1.1.2",
         "@nuxtjs/gtm": "^2.4.0",
         "@nuxtjs/router": "^1.7.0",
         "@nuxtjs/tailwindcss": "5.3.2",
         "@tailwindcss/aspect-ratio": "^0.4.2",
+        "@vue/test-utils": "1",
+        "@vue/vue2-jest": "28",
+        "babel-jest": "^29.6.1",
         "eslint": "^8.45.0",
-        "json-server": "^0.17.3"
+        "eslint-config-prettier": "^8.8.0",
+        "eslint-plugin-jest": "^27.2.3",
+        "eslint-plugin-nuxt": "^4.0.0",
+        "eslint-plugin-prettier": "^5.0.0",
+        "jest": "^29.6.1",
+        "jest-environment-jsdom": "^29.6.1",
+        "json-server": "^0.17.3",
+        "prettier": "^3.0.0",
+        "prettier-plugin-tailwindcss": "^0.4.1"
     }
 }

tailwind.config.js

@@ -56,7 +56,7 @@ module.exports = {
                 },
             },
             stroke: (theme) => theme('colors'),
-            boxShadow: (theme) => ({
+            boxShadow: () => ({
                 'pink-500': `6px 6px 0 theme('colors.pink.500')`,
             }),
             fill: (theme) => theme('colors'),