Adding Jest to Vue App and setting up test files

app_vue/.eslintrc.cjs

@@ -14,4 +14,5 @@ module.exports = {
   globals: {
     process: 'readonly', 
   },
+  "ignorePatterns": ["**/*.test.js", "**/*.config.js"],
 };

app_vue/README.md

@@ -53,21 +53,53 @@ Ensure you have followed the README file located here: api/README.md
 - this is used to calculate the optimal order of bins to visit
 - note that if it returns empty object {} it is likely that your request is passing incorrect lat/long or location data
 
+### JEST
+- We are using Jest and specifically the `@vue/test-utils` version of it (more info [here](https://test-utils.vuejs.org/))
+- Following [Given When Then](https://smartbear.com/blog/test-automation-with-gherkin-scenarios/) naming strategy so that tests are human understandable
+- Test file naming is in the form of `camelCase.test.js`
+- place test files next to relevant component, using same camelCase name
+
+### Vuetify testing
+- when testing a component with Vuetify see the following tutorial: [here](https://vuetifyjs.com/en/getting-started/unit-testing/)
+- in some cases you may see an error mentioning `stub value undefined` you can check whether switching from `shallowMount` to `mount` resolves this issue
+
+####  commands
+Ensure you are in `app_vue` folder from root
+
+```
+cd app_vue/
+```
+
+to run all tests:
+
+```
+npm test
+```
+
+to run a single test:
+
+```
+npm test -- <relative test.js path here>
+```
+
+#### code coverage
+After successfully running `npm test`, you can visit `app_vue/src/test/coverage` file path, and open up the `index.html` file there to view code coverage. 
+
 ## Folder structure
 
 (Last Updated as of Sep 5,2023)
 Note that all of these folders are under app_vue/:
 - src/assets -> holds images, stylesheets, fonts
 - components/shared -> holds components created for global use (ex. generalized button component)
-- components -> holds components pertaining to features that would be placed on our pages
+- components -> holds components pertaining to features that would be placed on our pages, as well as *.test.js files
 - data -> holds json mock data files
 - pages -> holds components loaded once on a per-route basis
 - router -> holds index.js which contains our configured routes (default is '/')
 - stores -> holds Vuex aka Pinia stores for state management
 - layout -> holds layout based components (ie. navbar/header/footer)
 - utils -> holds shared javascript functions, and services
 
-## Recommended Coding Strategy
+## Coding Strategies
 
 ### CSS
 - we are using the [BEM](https://getbem.com/) approach where possible
@@ -76,7 +108,7 @@ Note that all of these folders are under app_vue/:
 - we have also added some of the vuetify typography in our own mixins located in /assets/stylesheets/mixins
   - you can feel free to use `@include <mixinName>` in your custom class to avoid rewriting repetitive code
 
-### stores
+### Vue Pinia stores
 - we are using the concept of vue [stores](https://vuex.vuejs.org/guide/) in our app
 - we are also using a library called [pinia](https://pinia.vuejs.org/) to make the syntax for this a lot simpler, it is recommended by Vue itself!
 - think of it as a simple way to manage holding app state. You know its a good tool to use when you find that too many variables are being passed back and forth to components through events (hot potato style). That is where the store can come in and hold that variable globally for you.

app_vue/babel.config.js

@@ -0,0 +1,19 @@
+/*
+* export a configuration object that specifies the Babel presets to be used when running tests in the test environment
+*/ 
+module.exports = {
+  env: {
+      test: {
+          presets: [
+              [
+                  "@babel/preset-env",
+                  {
+                      targets: {
+                          node: "current",
+                      },
+                  },
+              ],
+          ],
+      },
+  },
+}

app_vue/jest.config.js

@@ -0,0 +1,27 @@
+const esModules = ['leaflet', '@vue-leaflet/vue-leaflet', 'vuetify', 'vue-feather'].join('|');
+module.exports = {
+  testEnvironment: 'jsdom',
+  transform: {
+    '^.+\\.vue$': '@vue/vue3-jest',
+    '^.+\\js$': 'babel-jest',
+    '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub'
+  },
+  transformIgnorePatterns: [`/node_modules/(?!${esModules})`],
+  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(js|ts)$',
+  moduleFileExtensions: ['vue', 'js'],
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1',
+    '^.+.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub'
+  },
+  coveragePathIgnorePatterns: ['/node_modules/', '/tests/'],
+  coverageReporters: ['text', 'json-summary'],
+  // Fix in order for vue-test-utils to work with Jest 29
+  // https://test-utils.vuejs.org/migration/#test-runners-upgrade-notes
+  testEnvironmentOptions: {
+    customExportConditions: ['node', 'node-addons']
+  },
+  verbose: true,
+  collectCoverage: true,
+  coverageDirectory: '<rootDir>/src/test/coverage',
+  coverageReporters: ['html', 'text']
+};