Merge pull request #435 from DSACMS/cb3c/install-vitest-javascript-un…

…it-testing

FFS-2455: Install vitest javascript unit testing and refactor JS code that calls Internal API's

.github/workflows/js-vitest.yml

@@ -0,0 +1,17 @@
+name: Vitest Javascript Unit Tests 
+
+on:
+  pull_request:
+    paths: ['app/**']
+
+jobs:
+  vitest:
+    name: Vitest 
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Set up Ruby & Javascript
+        uses: ./.github/actions/setup-languages
+      - name: Run Vitest 
+        working-directory: app
+        run: npm run test 

app/.gitignore

@@ -61,4 +61,7 @@ terraform.tfstate.backup
 /config/credentials/production.key
 
 #Profiler
-/profiler
+/profiler
+
+# Vitest
+.vitest

app/app/javascript/controllers/cbv/employer_search.js

@@ -1,5 +1,7 @@
 import { Controller } from "@hotwired/stimulus"
-import { loadPinwheel, initializePinwheel, fetchToken, trackUserAction } from "../../utilities/pinwheel"
+import { loadPinwheel, initializePinwheel } from "../../utilities/pinwheel"
+import { fetchToken } from '../../utilities/api';
+import { trackUserAction } from '../../utilities/api';
 
 export default class extends Controller {
   static targets = [

app/app/javascript/utilities/api.js

@@ -0,0 +1,19 @@
+import { fetchInternal } from './fetchInternal';
+
+export const PINWHEEL_USER_ACTION = '/api/pinwheel/user_action';
+export const PINWHEEL_TOKENS_GENERATE = '/api/pinwheel/tokens';
+
+export const trackUserAction = (eventName, attributes, scope="pinwheel") => {
+  return fetchInternal(PINWHEEL_USER_ACTION, {
+    method: 'post',
+    body: JSON.stringify({ [scope]: { event_name: eventName, attributes } }),
+  })
+};
+
+export const fetchToken = (response_type, id, locale) => {
+  return fetchInternal(PINWHEEL_TOKENS_GENERATE, {
+    method: 'post',
+    body: JSON.stringify({ response_type, id, locale }),
+  })
+};
+

app/app/javascript/utilities/fetchInternal.js

@@ -0,0 +1,20 @@
+import CSRF from './csrf';
+
+
+export const fetchInternal = (uri, params) => {
+  const defaultHeaders = {
+    'X-CSRF-Token': CSRF.token,
+    'Content-Type': 'application/json'
+  };
+
+  return fetch(uri, addHeadersToParams(defaultHeaders, params))
+    .then(response => response.json());
+};
+const addHeadersToParams = (defaultHeaders, params) => {
+  const requestedHeaders = params.headers;
+  params.headers = requestedHeaders ?
+    Object.assign({}, defaultHeaders, requestedHeaders) :
+    defaultHeaders;
+
+  return params;
+};

app/app/javascript/utilities/fetchInternalAPIService.js

@@ -0,0 +1,20 @@
+import CSRF from './csrf';
+
+
+export const fetchInternalAPIService = (uri, params) => {
+  const defaultHeaders = {
+    'X-CSRF-Token': CSRF.token,
+    'Content-Type': 'application/json'
+  };
+
+  return fetch(uri, _addHeadersToParams(defaultHeaders, params))
+    .then(response => response.json());
+};
+const _addHeadersToParams = (defaultHeaders, params) => {
+  const requestedHeaders = params.headers;
+  params.headers = requestedHeaders ?
+    Object.assign({}, defaultHeaders, requestedHeaders) :
+    defaultHeaders;
+
+  return params;
+};

app/app/javascript/utilities/pinwheel.js

@@ -1,8 +1,5 @@
 import loadScript from 'load-script';
-import CSRF from './csrf';
 
-const PINWHEEL_TOKENS_GENERATE = '/api/pinwheel/tokens';
-const PINWHEEL_USER_ACTION = '/api/pinwheel/user_action';
 
 export function loadPinwheel() {
   return new Promise((resolve, reject) => {
@@ -25,24 +22,4 @@ export function initializePinwheel(Pinwheel, linkToken, callbacks) {
   return Pinwheel;
 }
 
-export const trackUserAction = (eventName, attributes) => {
-  return fetch(PINWHEEL_USER_ACTION, {
-    method: 'post',
-    headers: {
-      'X-CSRF-Token': CSRF.token,
-      'Content-Type': 'application/json'
-    },
-    body: JSON.stringify({ pinwheel: { event_name: eventName, attributes } }),
-  }).then(response => response.json());
-}
 
-export const fetchToken = (response_type, id, locale) => {
-  return fetch(PINWHEEL_TOKENS_GENERATE, {
-    method: 'post',
-    headers: {
-      'X-CSRF-Token': CSRF.token,
-      'Content-Type': 'application/json'
-    },
-    body: JSON.stringify({ response_type, id, locale }),
-  }).then(response => response.json());
-}