test: setup linting with ESLint & fix files (#586)

.github/labeler.yml

@@ -5,8 +5,7 @@ GitHub Actions:
 
 Price addition:
 - 'src/views/AddPriceHome.vue'
-
-Multiple price addition:
+- 'src/views/AddPriceSingle.vue'
 - 'src/views/AddPriceMultiple.vue'
 
 Brands:
@@ -21,13 +20,11 @@ Brands:
 
 🔍 Search:
 - 'src/views/Search.vue'
-- 'src/views/SignIn.vue'
 
 Stats:
 - 'src/views/Stats.vue'
 
 User:
-- 'src/views/User.vue'
 - 'src/views/UserList.vue'
 - 'src/views/UserDetail.vue'
 
@@ -36,4 +33,3 @@ User dashboard:
 
 ⚙️ Settings:
 - 'src/views/UserSettings.vue'
-

.github/workflows/lint-and-test.yml

@@ -0,0 +1,25 @@
+name: Linting & e2e tests
+
+on: push
+
+jobs:
+  lint-and-test:
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      # Install npm dependencies, cache them correctly
+      - name: Cypress run
+        uses: cypress-io/github-action@v6
+        with:
+          # just perform install
+          runTests: false
+      - name: Lint with ESLint
+        run: yarn lint
+      - name: Run e2e tests
+        uses: cypress-io/github-action@v6
+        with:
+          # we have already installed all dependencies above
+          install: false
+          # run server in the background
+          start: yarn dev

CONTRIBUTING.md

@@ -22,6 +22,12 @@ We use the [yarn](https://yarnpkg.com/getting-started/install) for package manag
 yarn build
 ```
 
+## Lint
+
+```sh
+yarn lint
+```
+
 ## Tests
 
 ```sh

cypress.config.js

@@ -1,6 +1,6 @@
-const { defineConfig } = require("cypress");
+import { defineConfig } from 'cypress'
 
-module.exports = defineConfig({
+export default defineConfig({
   e2e: {
     specPattern: '**/*.cy.js',
     fixturesFolder: 'tests/fixtures',
@@ -13,4 +13,4 @@ module.exports = defineConfig({
     },
     baseUrl: 'http://localhost:5173',
   },
-});
+})

eslint.config.js

@@ -0,0 +1,21 @@
+import js from '@eslint/js'
+import pluginVue from 'eslint-plugin-vue'
+
+export default [
+  js.configs.recommended,
+  ...pluginVue.configs['flat/recommended'],
+  {
+    ignores: ['dist/**', '*.config.js', 'tests/**'],
+  },
+  {
+    rules: {
+      'no-unused-vars': 'warn',
+      'vue/no-mutating-props': ['error', { 'shallowOnly': true }],
+      'vue/no-reserved-component-names': 'off',
+      'vue/multi-word-component-names': 'off',
+      'vue/max-attributes-per-line': 'off',
+      'vue/attribute-hyphenation': 'off',
+      'vue/v-on-event-hyphenation': 'off',
+    }
+  },
+]

package.json

@@ -2,12 +2,14 @@
   "name": "open-prices",
   "version": "0.0.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "build-staging": "vite build  --base=/app/ --mode preprod",
     "build-prod": "vite build --base=/app/ --mode prod",
     "preview": "vite preview",
+    "lint": "eslint",
     "cy:open": "cypress open",
     "cy:run": "cypress run",
     "test": "start-server-and-test dev http://localhost:5173 cy:run"
@@ -37,6 +39,8 @@
     "autoprefixer": "^10.4.16",
     "cross-env": "^7.0.3",
     "cypress": "^13.8.1",
+    "eslint": "^9.3.0",
+    "eslint-plugin-vue": "^9.26.0",
     "postcss": "^8.4.31",
     "start-server-and-test": "^2.0.3",
     "vite": "^4.5.0"

src/components/BarcodeManualInputDialog.vue

@@ -2,10 +2,10 @@
   <v-dialog persistent>
     <v-card>
       <v-card-title>
-        {{ $t('BarcodeManualInput.Title') }} <v-btn style="float:right;" variant="text" density="compact" icon="mdi-close" @click="close"></v-btn>
+        {{ $t('BarcodeManualInput.Title') }} <v-btn style="float:right;" variant="text" density="compact" icon="mdi-close" @click="close" />
       </v-card-title>
 
-      <v-divider></v-divider>
+      <v-divider />
 
       <v-card-text>
         <v-form @submit.prevent="onSubmit">
@@ -18,13 +18,15 @@
             prepend-inner-icon="mdi-barcode"
             :hint="barcodeForm.barcode.length.toString()"
             persistent-hint
-          ></v-text-field>
+          />
 
           <v-btn
             type="submit"
             class="mt-2"
             :disabled="!formFilled"
-          >{{ $t('BarcodeManualInput.Submit') }}</v-btn>
+          >
+            {{ $t('BarcodeManualInput.Submit') }}
+          </v-btn>
         </v-form>
       </v-card-text>
     </v-card>
@@ -33,6 +35,7 @@
 
 <script>
 export default {
+  emits: ['barcode', 'close'],
   data() {
     return {
       barcodeForm: {

src/components/BarcodeScannerDialog.vue

@@ -2,16 +2,16 @@
   <v-dialog scrollable persistent>
     <v-card>
       <v-card-title>
-        {{ $t('BarcodeScanner.Scan') }} <v-btn style="float:right;" variant="text" density="compact" icon="mdi-close" @click="close"></v-btn>
+        {{ $t('BarcodeScanner.Scan') }} <v-btn style="float:right;" variant="text" density="compact" icon="mdi-close" @click="close" />
       </v-card-title>
 
-      <v-divider></v-divider>
+      <v-divider />
 
       <v-card-text>
-        <div id="reader" width="500px"></div>
+        <div id="reader" width="500px" />
       </v-card-text>
 
-      <v-divider></v-divider>
+      <v-divider />
 
       <v-card-actions class="justify-end">
         <div>
@@ -27,7 +27,7 @@
 </template>
 
 <script>
-import { Html5Qrcode, Html5QrcodeScanType, Html5QrcodeSupportedFormats } from 'html5-qrcode'
+import { Html5Qrcode, Html5QrcodeScanType } from 'html5-qrcode'
 
 const config = {
   fps: 10,
@@ -39,6 +39,7 @@ const config = {
 }
 
 export default {
+  emits: ['barcode', 'close'],
   data() {
     return {
       scanner: null,
@@ -52,11 +53,11 @@ export default {
       this.scanner = new Html5Qrcode('reader')
       this.scanner.start({ facingMode: 'environment' }, config, this.onScanSuccess, this.onScanFailure)
     },
-    onScanSuccess(decodedText, decodedResult) {
+    onScanSuccess(decodedText, decodedResult) {  // eslint-disable-line no-unused-vars
       this.$emit('barcode', decodedText)
       this.close()
     },
-    onScanFailure(error) {
+    onScanFailure(error) {  // eslint-disable-line no-unused-vars
       // console.warn(`Code scan error = ${error}`)
     },
     close() {

src/components/ChangeCurrencyDialog.vue

@@ -2,10 +2,10 @@
   <v-dialog>
     <v-card>
       <v-card-title>
-        {{ $t("ChangeCurrencyDialog.Title") }} <v-btn style="float:right;" variant="text" density="compact" icon="mdi-close" @click="close"></v-btn>
+        {{ $t("ChangeCurrencyDialog.Title") }} <v-btn style="float:right;" variant="text" density="compact" icon="mdi-close" @click="close" />
       </v-card-title>
 
-      <v-divider></v-divider>
+      <v-divider />
 
       <v-card-text>
         <v-row>
@@ -15,7 +15,7 @@
               :label="$t('ChangeCurrencyDialog.Currency')"
               :items="userFavoriteCurrencies"
               hide-details="auto"
-            ></v-select>
+            />
           </v-col>
           <v-col cols="12">
             <v-btn class="mb-2" size="small" prepend-icon="mdi-cog-outline" @click="goToSettings">
@@ -28,7 +28,7 @@
         </v-row>
       </v-card-text>
 
-      <v-divider></v-divider>
+      <v-divider />
 
       <v-card-actions>
         <v-btn elevation="1" @click="selectedCurrency">
@@ -43,6 +43,7 @@
 import { useAppStore } from '../store'
 
 export default {
+  emits: ['newCurrencySelected', 'close'],
   data() {
     return {
       userFavoriteCurrencies: [],
@@ -51,7 +52,6 @@ export default {
   },
   computed: {
   },
-  emits: ['newCurrencySelected', 'close'],
   mounted() {
     this.getCurrencyData()
   },

src/components/FilterMenu.vue

@@ -1,6 +1,6 @@
 <template>
   <v-menu scroll-strategy="close">
-    <template v-slot:activator="{ props }">
+    <template #activator="{ props }">
       <v-btn v-bind="props" size="x-small" class="mr-2" rounded="xl" prepend-icon="mdi-filter-variant" :append-icon="getCurrentFilterIcon" :active="currentFilterOrSource">
         {{ $t('Common.Filter') }}
       </v-btn>
@@ -10,8 +10,10 @@
         {{ $t('Common.' + filter.value) }}
       </v-list-item>
       <v-sheet v-if="showSource">
-        <v-divider></v-divider>
-        <v-list-subheader class="text-uppercase">{{ $t('Common.Source') }}</v-list-subheader>
+        <v-divider />
+        <v-list-subheader class="text-uppercase">
+          {{ $t('Common.Source') }}
+        </v-list-subheader>
         <v-list-item v-for="source in productSourceList" :key="source.key" :slim="true" :active="currentSource === source.key" @click="selectSource(source.key)">
           <v-icon>{{ source.icon }}</v-icon>
           {{ source.value }}
@@ -26,7 +28,10 @@ import constants from '../constants'
 
 export default {
   props: {
-    currentFilter: String,
+    currentFilter: {
+      type: String,
+      default: null
+    },
     currentSource: {
       type: String,
       default: null
@@ -41,6 +46,7 @@ export default {
       default: false
     }
   },
+  emits: ['update:currentFilter', 'update:currentSource'],
   data() {
     return {
       productSourceList: constants.PRODUCT_SOURCE_LIST,
@@ -63,7 +69,6 @@ export default {
       return source ? source.icon : ''
     },
   },
-  emits: ['update:currentFilter', 'update:currentSource'],
   methods: {
     selectFilter(filter) {
       this.$emit('update:currentFilter', filter)

src/components/Footer.vue

@@ -3,21 +3,31 @@
     <v-row>
       <v-col cols="12" md="6" align="center">
         <i18n-t keypath="Footer.TagLine" tag="span">
-          <template #name>{{ APP_NAME }}</template>
+          <template #name>
+            {{ APP_NAME }}
+          </template>
           <template #url>
-            <OpenFoodFactsLink display="link"></OpenFoodFactsLink>
+            <OpenFoodFactsLink display="link" />
           </template>
         </i18n-t>
-        <br />
-        <v-btn v-for="source in sourceList" class="mr-1" size="x-small" rounded="xl" active :prepend-icon="source.icon" :href="source.url" target="_blank">
+        <br>
+        <v-btn v-for="source in sourceList" :key="source.source" class="mr-1" size="x-small" rounded="xl" active :prepend-icon="source.icon" :href="source.url" target="_blank">
           {{ source.label }}
-          <v-tooltip activator="parent" open-on-click location="top">{{ source.name }}</v-tooltip>
+          <v-tooltip activator="parent" open-on-click location="top">
+            {{ source.name }}
+          </v-tooltip>
         </v-btn>
       </v-col>
       <v-col cols="12" md="6" align="center">
-        <v-btn class="mx-2" variant="text" href="https://prices.openfoodfacts.org" target="_blank">{{ $t('Footer.About') }}</v-btn>
-        <v-btn class="mx-2" variant="text" to="/stats">{{ $t('Footer.Stats') }}</v-btn>
-        <v-btn class="mx-2" variant="text" href="https://github.com/openfoodfacts/open-prices-frontend" target="_blank">Github</v-btn>
+        <v-btn class="mx-2" variant="text" href="https://prices.openfoodfacts.org" target="_blank">
+          {{ $t('Footer.About') }}
+        </v-btn>
+        <v-btn class="mx-2" variant="text" to="/stats">
+          {{ $t('Footer.Stats') }}
+        </v-btn>
+        <v-btn class="mx-2" variant="text" href="https://github.com/openfoodfacts/open-prices-frontend" target="_blank">
+          Github
+        </v-btn>
       </v-col>
     </v-row>
   </v-footer>
@@ -29,7 +39,7 @@ import constants from '../constants'
 
 export default {
   components: {
-    'OpenFoodFactsLink': defineAsyncComponent(() => import('../components/OpenFoodFactsLink.vue')),
+    OpenFoodFactsLink: defineAsyncComponent(() => import('../components/OpenFoodFactsLink.vue')),
   },
   data() {
     return {