refactor then/catch/finally patterns to use async/await patterns (javascript); refactor front-end unit tests

Author: based-ghost

FullStackTesting/FullStackTesting.Web.Api/ClientApp/package.json

@@ -23,17 +23,17 @@
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.11.9",
-    "@types/jest": "^26.0.20",
-    "@vue/cli-plugin-babel": "^4.5.11",
-    "@vue/cli-plugin-e2e-nightwatch": "^4.5.11",
-    "@vue/cli-plugin-pwa": "^4.5.11",
-    "@vue/cli-plugin-typescript": "^4.5.11",
-    "@vue/cli-plugin-unit-jest": "^4.5.11",
-    "@vue/cli-service": "^4.5.11",
+    "@types/jest": "^26.0.21",
+    "@vue/cli-plugin-babel": "^4.5.12",
+    "@vue/cli-plugin-e2e-nightwatch": "^4.5.12",
+    "@vue/cli-plugin-pwa": "^4.5.12",
+    "@vue/cli-plugin-typescript": "^4.5.12",
+    "@vue/cli-plugin-unit-jest": "^4.5.12",
+    "@vue/cli-service": "^4.5.12",
     "@vue/test-utils": "1.1.3",
     "node-sass": "^5.0.0",
     "sass-loader": "^10.1.1",
-    "ts-jest": "^26.5.3",
+    "ts-jest": "^26.5.4",
     "typescript": "^4.2.3",
     "vue-template-compiler": "^2.6.12",
     "vuex-module-decorators": "^1.0.1"

FullStackTesting/FullStackTesting.Web.Api/ClientApp/src/App.vue

@@ -10,7 +10,7 @@
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
-import Navbar from '@/components/NavBar.vue';
+import { Navbar } from '@/components';
 
 @Component({
   components: {

FullStackTesting/FullStackTesting.Web.Api/ClientApp/src/api/base.service.ts

@@ -16,10 +16,10 @@ export abstract class BaseService {
     });
 
     this.$http.interceptors.response.use(
-      (response: AxiosResponse<any>) => {
+      (response: AxiosResponse) => {
         return response;
       },
-      (error: AxiosError<any>) => {
+      (error: AxiosError) => {
         alertAxiosError(error);
         return Promise.reject(error);
       }

FullStackTesting/FullStackTesting.Web.Api/ClientApp/src/api/employees.service.ts

@@ -22,12 +22,12 @@ class EmployeeService extends BaseService {
     return data;
   }
 
-  public async addEmployeeAsync(employee: IEmployee): Promise<any> {
+  public async addEmployeeAsync(employee: IEmployee): Promise<void> {
     const config: AxiosRequestConfig = { params: { id: employee.id } };
     await this.$http.post("AddEmployeeAsync", employee, config);
   }
 
-  public async deleteEmployeeAsync(employee: IEmployee): Promise<any> {
+  public async deleteEmployeeAsync(employee: IEmployee): Promise<void> {
     const config: AxiosRequestConfig = { params: { id: employee.id } };
     await this.$http.delete("DeleteEmployeeAsync", config);
   }

FullStackTesting/FullStackTesting.Web.Api/ClientApp/src/api/index.ts

@@ -0,0 +1,5 @@
+import { EmployeeApi } from './employees.service';
+
+export {
+  EmployeeApi
+};

FullStackTesting/FullStackTesting.Web.Api/ClientApp/src/components/AddEmployee.vue

@@ -84,7 +84,7 @@ import { alertAxiosSuccess } from "../utils";
 import { IDropdownOption, IEmployee } from "../types";
 import VCheckbox from "./VCheckbox.render";
 import VDropdown from "./VDropdown.render";
-import { dropdownTestData, modalIDs } from "../config/constants";
+import { dropdownTestData, modalIDs } from "../config";
 import { EmployeeModule } from "../store/modules/employee.module";
 
 @Component({
@@ -129,39 +129,40 @@ export default class AddEmployee extends Vue {
   }
 
   get employeeIds(): number[] {
-    return EmployeeModule.employees.map((employee) => employee.id) || [];
+    return EmployeeModule.employees.map(({ id }) => id);
   }
 
-  public handleAddEmployee(): void {
+  public async handleAddEmployee(): Promise<void> {
     if (!this.firstName || !this.lastName) {
       this.invalidInputs = true;
       return;
     }
 
     this.invalidInputs = false;
-
     const newEmployeeId: number = this.getNewEmployeeId();
-    const addEmployee: IEmployee = {
-      id: newEmployeeId,
-      ...EmployeeModule.activeEmployee,
-    };
-
-    EmployeeModule.AddEmployee(addEmployee).then(() => {
-      this.handleCloseModal();
-      EmployeeModule.GetAllEmployees().then(() => {
-        setTimeout(() => this.$emit("employeeAdded", newEmployeeId), 250);
-        alertAxiosSuccess("Employee was added!", "Success", 400);
-      });
-    });
+    const addEmployee: IEmployee = { id: newEmployeeId, ...EmployeeModule.activeEmployee };
+
+    try {
+      await EmployeeModule.AddEmployee(addEmployee);
+      await this.handleCloseModal();
+      await EmployeeModule.GetAllEmployees();
+      setTimeout(() => this.$emit("employeeAdded", newEmployeeId), 250);
+      alertAxiosSuccess("Employee was added!", "Success", 400);
+    } catch (e) {
+      console.error(e);
+    }
   }
 
-  public handleCloseModal(): void {
-    EmployeeModule.ResetActiveEmployeeFields().then(() => {
+  public async handleCloseModal(): Promise<void> {
+    try {
+      await EmployeeModule.ResetActiveEmployeeFields();
       this.$modal.hide(this.modalIDs.ADD_EMPLOYEE);
-    });
+    } catch (e) {
+      console.error(e);
+    }
   }
 
-  public getNewEmployeeId(): number {
+  private getNewEmployeeId(): number {
     let newId;
 
     do {

FullStackTesting/FullStackTesting.Web.Api/ClientApp/src/components/HomeContent.vue

@@ -26,7 +26,7 @@
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
-import { npmLinksConfig } from '../config/constants';
+import { npmLinksConfig } from '../config';
 
 @Component
 export default class HomeContent extends Vue {

FullStackTesting/FullStackTesting.Web.Api/ClientApp/src/components/NavBar.vue

@@ -1,5 +1,9 @@
 <template>
-  <nav id="nav" role="navigation" aria-label="main navigation">
+  <nav
+    id="nav"
+    role="navigation"
+    aria-label="main navigation"
+  >
     <router-link
       v-for="route in $router.options.routes"
       :key="route.path"

FullStackTesting/FullStackTesting.Web.Api/ClientApp/src/components/VCheckbox.render.tsx

@@ -33,6 +33,6 @@ export default class VCheckBox extends Vue {
   }
 
   private handleOnChange(e: Event): void {
-    this.$emit("checked", !!(e.target as HTMLInputElement).checked);
+    this.$emit("checked", (e.target as HTMLInputElement).checked);
   }
 }

FullStackTesting/FullStackTesting.Web.Api/ClientApp/src/components/VDropdown.render.tsx

@@ -56,14 +56,12 @@ export default class VDropdown extends Vue {
 
   public renderListOption(option: any, index: number): VNode {
     const optionLabel = this.getOptionLabelName(option);
+
     return (
       <li key={index}>
         <a
           role="button"
-          class={[
-            "dropdown-item",
-            { "selected-option": optionLabel === this.selectedOptionLabel },
-          ]}
+          class={["dropdown-item", { "selected-option": optionLabel === this.selectedOptionLabel }]}
           onClick={() => this.updateSelectedOption(option)}
         >
           {optionLabel}
@@ -89,17 +87,21 @@ export default class VDropdown extends Vue {
   }
 
   public keyDownHandler(e: KeyboardEvent): void {
-    if (e.keyCode === 38 || e.keyCode === 40) {
-      // up and down keys
-      this.toggleDropdownMenu();
-      e.preventDefault();
-    } else if (e.keyCode === 27) {
-      // Esc key
-      this.$refs.dropdownButton.focus();
-      this.hideDropdownMenu();
-    } else if (e.keyCode === 9) {
-      // Tab key
-      this.hideDropdownMenu();
+    switch (e.key) {
+      case 'ArrowUp':
+      case 'ArrowDown':
+        this.toggleDropdownMenu();
+        e.preventDefault();
+        break;
+      case 'Escape':
+        this.$refs.dropdownButton.focus();
+        this.hideDropdownMenu();
+        break;
+      case 'Tab':
+        this.hideDropdownMenu();
+        break;
+      default:
+        break;
     }
   }
 }