Initial changes to remove webpack with vite and added some depencies …

…for jest
sanger · Oct 27, 2023 · 6ebf484 · 6ebf484
1 parent 3abd759
commit 6ebf484
Show file tree

Hide file tree

Showing 27 changed files with 2,451 additions and 7,213 deletions.
diff --git a/.env b/.env
@@ -1,5 +1,5 @@
 NODE_ENV=development
-VUE_APP_SEQUENCESCAPE_BASE_URL=http://localhost:3000/api/v2
-VUE_APP_SEQUENCESCAPE_API_KEY=development
-VUE_APP_PRINT_MY_BARCODE_BASE_URL=http://localhost:3000
-VUE_APP_LABEL_TEMPLATE_ID=33
+VITE_SEQUENCESCAPE_BASE_URL=http://localhost:3000/api/v2
+VITE_SEQUENCESCAPE_API_KEY=development
+VITE_PRINT_MY_BARCODE_BASE_URL=http://localhost:3000
+VITE_LABEL_TEMPLATE_ID=33
diff --git a/.env.production b/.env.production
@@ -1,4 +1,4 @@
-VUE_APP_SEQUENCESCAPE_BASE_URL=REPLACE_VUE_APP_SEQUENCESCAPE_BASE_URL
-VUE_APP_SEQUENCESCAPE_API_KEY=REPLACE_VUE_APP_SEQUENCESCAPE_API_KEY
-VUE_APP_PRINT_MY_BARCODE_BASE_URL=REPLACE_VUE_APP_PRINT_MY_BARCODE_BASE_URL
-VUE_APP_LABEL_TEMPLATE_ID=REPLACE_VUE_APP_LABEL_TEMPLATE_ID
+VITE_SEQUENCESCAPE_BASE_URL=REPLACE_VITE_SEQUENCESCAPE_BASE_URL
+VITE_SEQUENCESCAPE_API_KEY=REPLACE_VITE_SEQUENCESCAPE_API_KEY
+VITE_PRINT_MY_BARCODE_BASE_URL=REPLACE_VITE_PRINT_MY_BARCODE_BASE_URL
+VITE_LABEL_TEMPLATE_ID=REPLACE_VITE_LABEL_TEMPLATE_ID
diff --git a/.env.uat b/.env.uat
@@ -1,4 +1,4 @@
-VUE_APP_SEQUENCESCAPE_BASE_URL=REPLACE_VUE_APP_SEQUENCESCAPE_BASE_URL
-VUE_APP_SEQUENCESCAPE_API_KEY=REPLACE_VUE_APP_SEQUENCESCAPE_API_KEY
-VUE_APP_PRINT_MY_BARCODE_BASE_URL=REPLACE_VUE_APP_PRINT_MY_BARCODE_BASE_URL
-VUE_APP_LABEL_TEMPLATE_ID=REPLACE_VUE_APP_LABEL_TEMPLATE_ID
+VITE_SEQUENCESCAPE_BASE_URL=REPLACE_VITE_SEQUENCESCAPE_BASE_URL
+VITE_SEQUENCESCAPE_API_KEY=REPLACE_VITE_SEQUENCESCAPE_API_KEY
+VITE_PRINT_MY_BARCODE_BASE_URL=REPLACE_VITE_PRINT_MY_BARCODE_BASE_URL
+VITE_LABEL_TEMPLATE_ID=REPLACE_VITE_LABEL_TEMPLATE_ID
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -2,14 +2,12 @@ module.exports = {
   root: true,
   env: {
     node: true,
+    es2022: true,
   },
-  extends: ['plugin:vue/essential', 'eslint:recommended', 'prettier'],
+  extends: ['plugin:vue/vue3-recommended', 'eslint:recommended', 'prettier'],
   rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-console': import.meta.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': import.meta.NODE_ENV === 'production' ? 'error' : 'off',
     'prefer-const': 'error',
   },
-  parserOptions: {
-    parser: 'babel-eslint',
-  },
 }
diff --git a/babel.config.js b/babel.config.js
diff --git a/public/favicon.ico → favicon.ico b/public/favicon.ico → favicon.ico
diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
     <title>quanthub</title>
   </head>
   <body>
@@ -15,6 +15,6 @@
       >
     </noscript>
     <div id="app"></div>
-    <!-- built files will be auto injected -->
+    <script type="module" src="/src/main.js"></script>
   </body>
 </html>
diff --git a/jest.config.js → jest.config.cjs b/jest.config.js → jest.config.cjs
@@ -1,10 +1,12 @@
 module.exports = {
+  preset: './node_modules/vite-jest/jest-preset.js',
   moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
+  extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
   transform: {
-    '^.+\\.vue$': 'vue-jest',
+    '^.+\\.vue$': '@vue/vue2-jest',
     '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$':
       'jest-transform-stub',
-    '^.+\\.jsx?$': 'babel-jest',
+    // '^.+\\.jsx?$': 'babel-jest',
   },
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/src/$1',
@@ -14,4 +16,5 @@ module.exports = {
     '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)',
   ],
   testURL: 'http://localhost/',
+  // testEnvironment: "jest-environment-jsdom"
 }
diff --git a/package.json b/package.json
@@ -3,23 +3,26 @@
   "version": "2.1.0",
   "private": true,
   "scripts": {
-    "serve": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
-    "build": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
-    "test:unit": "vue-cli-service test:unit",
-    "test:e2e": "vue-cli-service test:e2e",
-    "lint": "vue-cli-service lint",
+    "dev": "vite",
+    "serve": "export NODE_OPTIONS=--openssl-legacy-provider && vite preview",
+    "build": "export NODE_OPTIONS=--openssl-legacy-provider && vite build",
+    "test:unit": " vite-jest",
+    "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
     "prettier-check": "prettier --check .",
-    "prettify": "prettier --write .",
-    "test": "vue-cli-service test:unit && vue-cli-service test:e2e"
+    "prettify": "prettier --write ."
   },
   "dependencies": {
+    "@vitejs/plugin-vue": "^1.6.1",
     "axios": "^0.21.4",
     "bootstrap-vue": "^2.23.1",
+    "buffer": "^6.0.3",
     "csv-parse": "^4.16.3",
     "isomorphic-fetch": "^2.2.1",
     "json-server": "^0.14.2",
     "jsorm": "^1.3.22",
     "mathjs": "^7.6.0",
+    "vite": "^2.5.4",
+    "vite-plugin-vue2": "1.9.0",
     "vue": "^2.7.5",
     "vue-router": "^3.5.4",
     "vue-simple-spinner": "^1.2.10"
@@ -28,37 +31,38 @@
     "@achrinza/node-ipc": "10.1.9"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.19",
-    "@vue/cli-plugin-e2e-cypress": "~4.5.19",
-    "@vue/cli-plugin-eslint": "~4.5.19",
-    "@vue/cli-plugin-unit-jest": "~4.5.19",
-    "@vue/cli-service": "4.5.15",
     "@vue/test-utils": "^1.3.0",
-    "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "^10.1.0",
-    "babel-jest": "^23.6.0",
+    "@vue/vue2-jest": "29",
+    "autoprefixer": "^10.4.16",
     "cypress": "8.6.0",
     "cypress-file-upload": "^5.0.8",
     "eslint": "^5.16.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-vue": "^5.2.3",
+    "esm": "^3.2.25",
     "flush-promises": "^1.0.2",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-serializer-vue": "^3.1.0",
     "lint-staged": "^7.3.0",
+    "node-stdlib-browser": "^1.2.0",
+    "postcss": "^8.4.31",
     "prettier": "^2.8.7",
-    "sass": "^1.62.1",
-    "sass-loader": "^10.3.1",
+    "sass": "^1.69.4",
+    "vite-jest": "^0.1.4",
+    "vite-plugin-node-polyfills": "^0.15.0",
     "vue-template-compiler": "^2.7.5"
   },
   "gitHooks": {
     "pre-commit": "lint-staged"
   },
   "lint-staged": {
     "*.js": [
-      "vue-cli-service lint",
+      "eslint",
       "git add"
     ],
     "*.vue": [
-      "vue-cli-service lint",
+      "eslint",
       "git add"
     ],
     "**/*": "prettier --write --ignore-unknown"

diff --git a/server.js b/server.js
@@ -1,6 +1,8 @@
 // server.js
-const jsonServer = require('json-server')
-const bodyParser = require('body-parser')
+// const jsonServer = require('json-server')
+// const bodyParser = require('body-parser')
+import jsonServer from 'json-server'
+import bodyParser from 'body-parser'
 const server = jsonServer.create()
 const router = jsonServer.router()
 const middlewares = jsonServer.defaults()

diff --git a/src/api/PrintMyBarcode.js b/src/api/PrintMyBarcode.js
@@ -1,9 +1,9 @@
 //TODO: Upgrade to SprayPaint?
-const { JSORMBase, attr } = require('jsorm/dist/jsorm')
+import { JSORMBase, attr } from 'jsorm/dist/jsorm'
 
 const ApplicationRecord = JSORMBase.extend({
   static: {
-    baseUrl: process.env.VUE_APP_PRINT_MY_BARCODE_BASE_URL,
+    baseUrl: import.meta.env.VITE_PRINT_MY_BARCODE_BASE_URL,
     apiNamespace: '/v1',
   },
 })

diff --git a/src/components/Plate.vue b/src/components/Plate.vue
@@ -69,10 +69,10 @@
 // The assumption is made that the data exists in local storage from when it was uploaded.
 // The QuantType is assigned from local storage and a QuantType component is created.
 
-import Row from '@/components/Row'
+import Row from '@/components/Row.vue'
 import Grid from '@/Grid'
 import QuantType from '@/QuantType'
-import Alert from '@/components/Alert'
+import Alert from '@/components/Alert.vue'
 import { ReplicateList as Replicates } from '@/Replicates'
 import axios from 'axios'
 import Spinner from 'vue-simple-spinner'
@@ -124,9 +124,9 @@ export default {
         headers: {
           'Content-Type': 'application/vnd.api+json',
           'X-Sequencescape-Client-Id':
-            process.env.VUE_APP_SEQUENCESCAPE_API_KEY,
+            import.meta.env.VITE_SEQUENCESCAPE_API_KEY,
         },
-        baseURL: process.env.VUE_APP_SEQUENCESCAPE_BASE_URL,
+        baseURL: import.meta.env.VITE_SEQUENCESCAPE_BASE_URL,
       }
     },
     request() {

diff --git a/src/components/PlateList.vue b/src/components/PlateList.vue
@@ -42,7 +42,7 @@
 </template>
 
 <script>
-import Upload from '@/components/Upload'
+import Upload from '@/components/Upload.vue'
 
 export default {
   name: 'Plates',

diff --git a/src/components/PrintJob.vue b/src/components/PrintJob.vue
@@ -66,15 +66,15 @@
 
 <script>
 import Model from '@/api/PrintMyBarcode'
-import Alert from '@/components/Alert'
+import Alert from '@/components/Alert.vue'
 import PrinterList from '@/config/PrinterList'
 
 export default {
   name: 'PrintJob',
   props: {
     labelTemplateId: {
       type: String,
-      default: process.env.VUE_APP_LABEL_TEMPLATE_ID,
+      default: import.meta.env.VITE_LABEL_TEMPLATE_ID,
     },
   },
   data() {

diff --git a/src/components/Upload.vue b/src/components/Upload.vue
@@ -65,9 +65,9 @@
 <script>
 // Uploads a file. Parse options dependent on quantType
 import Vue from 'vue'
-import QuantFile from '@/components/QuantFile'
+import QuantFile from '@/components/QuantFile.vue'
 import quantTypes from '@/config/quantTypes'
-import Alert from '@/components/Alert'
+import Alert from '@/components/Alert.vue'
 
 export default {
   name: 'Upload',

diff --git a/src/components/wells/index.js b/src/components/wells/index.js
@@ -1,8 +1,8 @@
-import Control from './Control'
-import Sample from './Sample'
-import Standard from './Standard'
-import Empty from './Empty'
-import Blank from './Blank'
+import Control from './Control.vue'
+import Sample from './Sample.vue'
+import Standard from './Standard.vue'
+import Empty from './Empty.vue'
+import Blank from './Blank.vue'
 
 export default {
   Control,

diff --git a/src/router.js b/src/router.js
@@ -1,9 +1,9 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import Plate from '@/components/Plate'
-import Upload from '@/components/Upload'
-import PrintJob from '@/components/PrintJob'
-import PlateList from '@/components/PlateList'
+import Plate from '@/components/Plate.vue'
+import Upload from '@/components/Upload.vue'
+import PrintJob from '@/components/PrintJob.vue'
+import PlateList from '@/components/PlateList.vue'
 
 Vue.use(Router)
 

diff --git a/tests/unit/Alert.spec.js b/tests/unit/Alert.spec.js
@@ -1,4 +1,4 @@
-import Alert from '@/components/Alert'
+import Alert from '@/components/Alert.vue'
 import { mount, localVue } from './testHelper'
 
 describe('Alert.vue', () => {

diff --git a/tests/unit/Plate.spec.js b/tests/unit/Plate.spec.js
@@ -1,10 +1,11 @@
-import Plate from '@/components/Plate'
+import Plate from '@/components/Plate.vue'
 import Grid from '@/Grid'
 import plateReader from '../data/plate_reader'
 import Store from '@/Store'
 import axios from 'axios'
 import flushPromises from 'flush-promises'
 import { mount, localVue, createContainer } from './testHelper'
+import { jest } from '@jest/globals';
 
 jest.mock('axios')
 
@@ -126,9 +127,9 @@ describe('Plate.vue', () => {
         headers: {
           'Content-Type': 'application/vnd.api+json',
           'X-Sequencescape-Client-Id':
-            process.env.VUE_APP_SEQUENCESCAPE_API_KEY,
+            import.meta.env.VITE_SEQUENCESCAPE_API_KEY,
         },
-        baseURL: process.env.VUE_APP_SEQUENCESCAPE_BASE_URL,
+        baseURL: import.meta.env.VITE_SEQUENCESCAPE_BASE_URL,
       })
     })
 

diff --git a/tests/unit/PrintJob.spec.js b/tests/unit/PrintJob.spec.js
@@ -1,8 +1,9 @@
-import PrintJob from '@/components/PrintJob'
+import PrintJob from '@/components/PrintJob.vue'
 import Model from '@/api/PrintMyBarcode'
 import flushPromises from 'flush-promises'
 import PrinterList from '@/config/PrinterList'
 import { mount, localVue } from './testHelper'
+import { jest } from '@jest/globals';
 
 describe('PrintJob.vue', () => {
   let cmp, printJob, date, attributes

diff --git a/tests/unit/QuantFile.spec.js b/tests/unit/QuantFile.spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import QuantFile from '@/components/QuantFile'
+import QuantFile from '@/components/QuantFile.vue'
 import flushPromises from 'flush-promises'
 import fs from 'fs'
 

diff --git a/tests/unit/Replicates.spec.js b/tests/unit/Replicates.spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import Well from '@/components/wells/Sample'
+import Well from '@/components/wells/Sample.vue'
 import {
   ReplicateList,
   Replicate,

diff --git a/tests/unit/Row.spec.js b/tests/unit/Row.spec.js
@@ -1,4 +1,4 @@
-import Row from '@/components/Row'
+import Row from '@/components/Row.vue'
 import Store from '@/Store'
 import { mount } from '@vue/test-utils'
 

diff --git a/tests/unit/Upload.spec.js b/tests/unit/Upload.spec.js
@@ -1,4 +1,4 @@
-import Upload from '@/components/Upload'
+import Upload from '@/components/Upload.vue'
 import { mount, localVue } from './testHelper'
 
 describe('Upload.vue', () => {

diff --git a/tests/unit/Wells.spec.js b/tests/unit/Wells.spec.js
@@ -1,9 +1,9 @@
 import Vue from 'vue'
 import { mount, localVue, createContainer } from './testHelper'
-import Wells from '@/components/wells'
+import Wells from '@/components/wells.vue'
 import Store from '@/Store'
 import { Store as newStore } from '@/Store'
-import Plate from '@/components/Plate'
+import Plate from '@/components/Plate.vue'
 import WellProperties from '@/mixins/WellProperties'
 import { components } from '@/mixins/WellTypes'