Builds in docker

Author: Archimedes Trajano

Dockerfile

@@ -1,5 +1,5 @@
 FROM chromedp/headless-shell as chrome
-FROM node:latest as build-stage
+FROM node:12 as build-stage
 WORKDIR /app
 COPY package*.json ./
 RUN npm ci

package-lock.json

@@ -9,8 +9,8 @@
     "test:unit": "vue-cli-service test:unit",
     "test:e2e": "vue-cli-service test:e2e",
     "lint": "vue-cli-service lint",
-    "fix": "eslint --ext .js,.vue --fix src",
-    "test": "jest --coverage",
+    "fmt": "vue-cli-service lint --fix",
+    "test": "vue-cli-service lint",
     "unit": "jest --coverage --watch",
     "x-build": "webpack --mode=production"
   },

package.json

@@ -1,15 +1,15 @@
 import Vuex from "vuex";
 import { shallowMount, createLocalVue } from "@vue/test-utils";
 
-import App from "@/components/App";
+import App from "@/components/App.vue";
 import "@/icons";
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
 
 describe("App.vue", () => {
   it("should not crash when prerendering", () => {
-    global.__PRERENDER_INJECTED = {};
+    (window as any).__PRERENDER_INJECTED = {};
 
     const wrapper = shallowMount(App, {
       mocks: {
@@ -22,6 +22,6 @@ describe("App.vue", () => {
     wrapper.html();
   });
   afterEach(() => {
-    delete global.__PRERENDER_INJECTED;
+    delete (window as any).__PRERENDER_INJECTED;
   });
 });

src/components/App.spec.ts

@@ -1,5 +1,6 @@
 import Vue from "vue";
-import DImg from "@/components/DImg";
+import DImg from "@/components/DImg.vue";
+import { expect } from "chai";
 
 describe("DImg.vue", () => {
   it("should change to the src url after the next tick", () => {
@@ -9,33 +10,33 @@ describe("DImg.vue", () => {
         src: "https://trajano.net/"
       }
     }).$mount();
-    expect(vm.$el.src).toEqual(
+    expect((vm.$el as HTMLImageElement).src).eq(
       "data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     );
     vm.$nextTick(() => {
-      expect(vm.$el.src).toEqual("https://trajano.net/");
+      expect((vm.$el as HTMLImageElement).src).eq("https://trajano.net/");
     });
   });
 
   it("should not change to the src url after the next tick when prerendering", () => {
-    global.__PRERENDER_INJECTED = {};
+    (window as any).__PRERENDER_INJECTED = {};
     const Constructor = Vue.extend(DImg);
     const vm = new Constructor({
       propsData: {
         src: "https://trajano.net/"
       }
     }).$mount();
-    expect(vm.$el.src).toEqual(
+    expect((vm.$el as HTMLImageElement).src).eq(
       "data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     );
     vm.$nextTick(() => {
-      expect(vm.$el.src).toEqual(
+      expect((vm.$el as HTMLImageElement).src).eq(
         "data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
       );
     });
   });
 
   afterEach(() => {
-    delete global.__PRERENDER_INJECTED;
+    // delete global.__PRERENDER_INJECTED;
   });
 });

src/components/DImg.spec.ts

@@ -24,9 +24,9 @@ export default {
     };
   },
   mounted() {
-    if (!global.__PRERENDER_INJECTED) {
-      this.dataSrc = this.src;
-    }
+    //if (!global.__PRERENDER_INJECTED) {
+    this.dataSrc = this.src;
+    //}
   }
 };
 </script>

src/components/DImg.vue

@@ -1,5 +1,5 @@
 import Vue from "vue";
-import MyFeature from "@/components/MyFeature";
+import MyFeature from "@/components/MyFeature.vue";
 import "@/icons";
 
 describe("MyFeature.vue", () => {

src/components/MyFeature.spec.ts

@@ -1,6 +1,6 @@
 import Vuex from "vuex";
 import { shallowMount, createLocalVue } from "@vue/test-utils";
-import PortfolioFooter from "@/components/PortfolioFooter";
+import PortfolioFooter from "@/components/PortfolioFooter.vue";
 import "@/icons";
 
 const localVue = createLocalVue();

src/components/PortfolioFooter.spec.ts

@@ -1,13 +1,14 @@
 import Vue from "vue";
-import RecruiterAndResumeBlock from "@/components/RecruiterAndResumeBlock";
+import RecruiterAndResumeBlock from "@/components/RecruiterAndResumeBlock.vue";
 import "@/icons";
+import { expect } from "chai";
 
 describe("RecruiterAndResumeBlock.vue", () => {
   it("should show the proper rate", () => {
     const Constructor = Vue.extend(RecruiterAndResumeBlock);
-    const vm = new Constructor({
+    const vm = (new Constructor({
       propsData: {}
-    }).$mount();
-    expect(vm.rate).toEqual(125);
+    }).$mount() as unknown) as { rate: number };
+    expect(vm.rate).eq(125);
   });
 });

src/components/RecruiterAndResumeBlock.spec.ts

@@ -37,13 +37,11 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  name: "RecruiterAndResumeBlock",
-  data() {
-    return {
-      rate: 125
-    };
-  }
-};
+<script lang="ts">
+import Vue from "vue";
+import Component from "vue-class-component";
+@Component
+export default class RecruiterAndResumeBlock extends Vue {
+  rate = 125;
+}
 </script>

src/components/RecruiterAndResumeBlock.vue

@@ -1,6 +1,6 @@
 import Vue from "vue";
 
-function deobfuscate(e) {
+function deobfuscate(e: string) {
   return e
     .replace("...", "@")
     .replace(/\.\.\./g, ".")
@@ -18,10 +18,14 @@ function deobfuscate(e) {
 
 Vue.directive("deobfuscate", {
   inserted(el) {
-    if (!global.__PRERENDER_INJECTED) {
-      /* Deobfuscate mailto and tel links */
-      el.innerHTML = deobfuscate(el.innerHTML);
-      el.href = deobfuscate(el.href);
+    // if (!global.__PRERENDER_INJECTED) {
+    /* Deobfuscate mailto and tel links */
+    el.innerHTML = deobfuscate(el.innerHTML);
+    if (el.hasAttribute("href")) {
+      (el as HTMLAnchorElement).href = deobfuscate(
+        (el as HTMLAnchorElement).href
+      );
     }
+    // }
   }
 });

src/directives/deobfuscate.ts

@@ -2,8 +2,8 @@ import Vue from "vue";
 import store from "../store";
 Vue.directive("scroll-spy", {
   inserted(el) {
-    if (!global.__PRERENDER_INJECTED) {
-      store.dispatch("ScrollSpy/addScrollSpy", { el });
-    }
+    //if (!global.__PRERENDER_INJECTED) {
+    store.dispatch("ScrollSpy/addScrollSpy", { el });
+    //}
   }
 });

src/directives/scrollSpy.ts

@@ -18,7 +18,7 @@ import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons/faExclama
 import { faGraduationCap } from "@fortawesome/free-solid-svg-icons/faGraduationCap";
 import { faMobileAlt } from "@fortawesome/free-solid-svg-icons/faMobileAlt";
 import { faUsers } from "@fortawesome/free-solid-svg-icons/faUsers";
-import FontAwesomeIcon from "./components/FontAwesomeIcon";
+import FontAwesomeIcon from "./components/FontAwesomeIcon.vue";
 
 library.add(
   faGithub,

src/icons.ts

@@ -1,7 +1,6 @@
 import Handlebars from "handlebars";
 
-module.exports = function(data) {
-  return new Handlebars.SafeString(
-    "<script type='application/ld+json'>" + JSON.stringify(data) + "</script>"
+export default (data: object) =>
+  new Handlebars.SafeString(
+    `<script type='application/ld+json'>${JSON.stringify(data)}</script>`
   );
-};

src/ld-json.ts

@@ -4,7 +4,7 @@ import "./app.scss";
 import "materialize-css";
 import "./icons";
 import "./directives";
-import App from "./components/App";
+import App from "@/components/App.vue";
 import store from "./store";
 
 /* eslint-disable no-new */

src/main.ts

@@ -1,4 +1,4 @@
-import { ActionContext, Module } from "vuex";
+import { Module } from "vuex";
 
 interface ScrollSpyState {
   scrollElements: HTMLElement[];
@@ -14,7 +14,7 @@ export const ScrollSpy: Module<ScrollSpyState, ScrollSpyState> = {
     }
   },
   actions: {
-    addScrollSpy({ commit }, payload) {
+    addScrollSpy({ commit }, payload: { el: HTMLElement }) {
       commit("addScrollSpy", { el: payload.el });
     }
   }