Testing practice

.vscode/launch.json

@@ -0,0 +1,19 @@
+{
+  "configurations": [
+    {
+      "name": "Launch localhost",
+      "type": "firefox",
+      "request": "launch",
+      "reAttach": true,
+      "url": "http://localhost:4000",
+      "profile": "dev",
+      "keepProfileChanges": true,
+      "webRoot": "${workspaceFolder}"
+    },
+    {
+      "name": "Attach",
+      "type": "firefox",
+      "request": "attach"
+    }
+  ]
+}

README.md

@@ -1,7 +1,7 @@
 
 # Todo Application
 
-[![pages-build-deployment](https://github.com/brandonbeckwith-ccm/vue-crud-practice/actions/workflows/pages/pages-build-deployment/badge.svg?branch=gh-pages)](https://github.com/brandonbeckwith-ccm/vue-crud-practice/actions/workflows/pages/pages-build-deployment)
+[![pages-build-deployment](https://github.com/brandonbeckwith-ccm/vue-crud-practice/actions/workflows/pages/pages-build-deployment/badge.svg?branch=gh-pages)](https://github.com/brandonbeckwith-ccm/vue-crud-practice/actions/workflows/pages/pages-build-deployment) [![Test](https://github.com/brandonbeckwith-ccm/vue-crud-practice/actions/workflows/pull_test.yml/badge.svg)](https://github.com/brandonbeckwith-ccm/vue-crud-practice/actions/workflows/pull_test.yml)
 
 You can visit a deployed [GitHub Pages](https://brandonbeckwith-ccm.github.io/vue-crud-practice/) version.
 

package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "local": "vite",
     "build": "vue-tsc && vite build",
     "deploy": "git subtree push --prefix dist origin gh-pages",
     "test": "yarn vitest --dom run src",
@@ -29,7 +29,7 @@
     "unplugin-vue-components": "^0.26.0",
     "unplugin-vue-router": "^0.7.0",
     "vite": "^5.0.8",
-    "vitest": "^1.2.1",
+    "vitest": "^1.4.0",
     "vue-tsc": "^1.8.25"
   }
 }

src/components/AddTodoBar.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import useVuelidate from "@vuelidate/core";
 import { required } from "@vuelidate/validators";
-import { noSymbols, containsVue } from "../util/validators";
+import { noSymbols, containsVue } from "../util/Validators";
 import ResponsiveTextbox from "./ResponsiveTextbox.vue";
 import IconButton from "./IconButton.vue";
 
-const addInput = defineModel<string>()!;
+const addInput = defineModel<string>('');
 
 const emit = defineEmits<{ (e: "submit", invalid: boolean): void }>();
 

src/pages/edit.vue

@@ -7,7 +7,7 @@ import { deletePost, getPost, postPost } from "../util/httpRequests";
 import ResponsiveTextbox from "../components/ResponsiveTextbox.vue";
 import useVuelidate from "@vuelidate/core";
 import { required } from "@vuelidate/validators";
-import { noSymbols, containsVue } from "../util/validators";
+import { noSymbols, containsVue } from "../util/Validators";
 
 import IconButton from "../components/IconButton.vue";
 

src/spec/components/AddTodoBar.spec.ts

@@ -0,0 +1,53 @@
+import { describe, expect, it } from "vitest";
+import { flushPromises, mount } from "@vue/test-utils";
+import AddTodoBarVue from "../../components/AddTodoBar.vue";
+
+describe("Add Todo Component Tests", () => {
+  it("Emits submit events when clicking the submit button", async () => {
+    const wrapper = mount(AddTodoBarVue)
+    const button = wrapper.find('button')
+
+    button.trigger('click')
+    await flushPromises()
+
+    expect(wrapper.emitted('submit')).toBeTruthy()
+  });
+
+  it("Emits submit events when pressing enter in the text field", async () => {
+    const wrapper = mount(AddTodoBarVue)
+    const input = wrapper.find('input')
+
+    input.trigger('keypress.enter')
+    await flushPromises()
+
+    expect(wrapper.emitted('submit')).toBeTruthy()
+  })
+
+  it("Returns 'false' on a submission with no errors", async() => {
+    const wrapper = mount(AddTodoBarVue)
+    const input = wrapper.find('input')
+
+    input.setValue('vue')
+
+    input.trigger('keypress.enter')
+    await flushPromises()
+    const emitted = wrapper.emitted('submit')
+
+    await flushPromises()
+    expect(emitted![0][0]).toBeFalsy()
+  })
+
+  it("Returns 'true' on a submission with errors", async() => {
+    const wrapper = mount(AddTodoBarVue)
+    const input = wrapper.find('input')
+
+    input.setValue('vue!')
+
+    input.trigger('keypress.enter')
+    await flushPromises()
+    const emitted = wrapper.emitted('submit')
+
+    await flushPromises()
+    expect(emitted![0][0]).toBeTruthy()
+  })
+});

src/spec/components/ResponsiveTextbox.spec.ts

@@ -0,0 +1,40 @@
+import { describe, expect, it } from "vitest";
+import ResponsiveTextboxVue from "../../components/ResponsiveTextbox.vue";
+import { mount } from "@vue/test-utils";
+import { nextTick } from "vue";
+
+
+describe("Responsive Textbox Tests", () => {
+  const wrapper = mount(ResponsiveTextboxVue, {
+    props: {
+      modelValue: "Hah!",
+      "onUpdate:modelValue": (e: any) => ({modelValue: e})
+    }
+  })
+  it("Should update it's value from props", () => {
+    const input = wrapper.find("input")
+    expect(input.element.value).toBe("Hah!")
+  })
+
+  it("Should update text reactively", async () => {
+    const input = wrapper.find("input")
+
+    input.setValue("Wahoo!")
+
+    expect(input.element.value).toBe("Wahoo!")
+  })
+
+  it("Should be good for valid text", async () => {
+    const input = wrapper.find("input")
+    input.setValue("vue")
+    expect(input.classes()).toContain("good-text")
+  })
+
+  it("Should be bad for invalid text", async () => {
+    wrapper.setProps({invalid: true})
+    const input = wrapper.find("input")
+
+    await nextTick()
+    expect(input.classes()).toContain("bad-text")
+  })
+})

src/spec/components/TodoItem.spec.ts

@@ -0,0 +1,58 @@
+import { describe, expect, it, vi } from "vitest";
+import TodoItemVue from "../../components/TodoItem.vue";
+import { flushPromises, mount } from "@vue/test-utils";
+import { useRouter } from "vue-router";
+
+const mockPush = vi.fn();
+
+vi.mock("vue-router", () => ({
+  useRouter: vi.fn(() => {
+    push: mockPush;
+  }),
+}));
+
+describe("Todo Item row tests", () => {
+  it("Should render the todo passed as a prop", async () => {
+    const wrapper = mount(TodoItemVue, {
+      props: {
+        _id: "asdf",
+        todoName: "roflcopter",
+        isComplete: true,
+      },
+    });
+    const input = wrapper.find("input");
+    expect(input.element.value).toBe("roflcopter");
+  });
+
+  it("Should emit a 'deleteEvent' request when the delete button is clicked", async () => {
+    const wrapper = mount(TodoItemVue, {
+      props: {
+        _id: "asdf",
+        todoName: "roflcopter",
+        isComplete: true,
+      },
+    });
+    const deleteButton = wrapper.find(".delete-button");
+    deleteButton.trigger("click");
+    await flushPromises();
+    expect(wrapper.emitted("deleteEvent")).toBeTruthy();
+  });
+
+  it("Should redirect to an edit page with an id when edit is clicked", async () => {
+    const push = vi.fn();
+    vi.mocked(useRouter, true).mockImplementation(() => ({ push } as any));
+
+    const wrapper = mount(TodoItemVue, {
+      props: {
+        _id: "asdf",
+        todoName: "roflcopter",
+        isComplete: true,
+      },
+    });
+
+    const editButton = wrapper.find(".edit-button");
+
+    await editButton.trigger("click");
+    expect(push).toHaveBeenCalledWith({ path: "edit", query: { id: "asdf" } });
+  });
+});

src/spec/util/validators.spec.ts

@@ -0,0 +1,31 @@
+import { describe, expect, it } from "vitest";
+import { containsVue, noSymbols } from "../../util/validators";
+
+const goodTest = "Vue is awesome"
+const badTest = "Bad news everyone!"
+const symbolCheck = "~"
+const vueCheck = "vuE"
+
+describe("No symbols validation", () => {
+  it("Should return false for text containing symbols", () =>{
+
+    expect(noSymbols.$validator(symbolCheck, null, null)).toBeFalsy()
+    expect(noSymbols.$validator(badTest, null, null)).toBeFalsy()
+  })
+
+  it("Should return true for symbol-less text", () => {
+    expect(noSymbols.$validator(goodTest, null, null)).toBeTruthy()
+  })
+})
+
+describe("Vue check validation", () => {
+  it("Should return false for text without 'vue'", () => {
+    expect(containsVue.$validator(badTest, null, null)).toBeFalsy()
+    expect(containsVue.$validator(symbolCheck, null, null)).toBeFalsy()
+  })
+
+  it("Should return true for text containing any variation of 'vue'", () =>{
+    expect(containsVue.$validator(goodTest, null, null)).toBeTruthy()
+    expect(containsVue.$validator(vueCheck, null, null)).toBeTruthy()
+  })
+})

src/util/Validators.ts → src/util/validators.ts

@@ -3,9 +3,7 @@ import { helpers } from "@vuelidate/validators";
 export const noSymbols = helpers.withMessage(
   "Can't contain symbols.",
   (val: string) => {
-    console.log(val);
     const res = /^[^\^~`!@#\$%^*_+\[\]{}\\:;?|><=]+$/.test(val);
-    console.log(res);
     return res;
   }
 );

tsconfig.json

@@ -21,5 +21,5 @@
     "noFallthroughCasesInSwitch": true
   },
   "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "typed-router.d.ts"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "references": [{ "path": "./tsconfig.node.json" }],
 }

vitest.config.ts

@@ -1,11 +1,22 @@
-import { defineConfig } from 'vitest/config'
+import { defineConfig } from "vitest/config";
+import vue from "@vitejs/plugin-vue";
 
 export default defineConfig({
+  plugins: [vue()],
   test: {
     coverage: {
-      provider: 'v8',
-      reporter: ['lcov', 'text', 'json', 'json-summary'],
+      provider: "v8",
+      reporter: ["lcov", "text", "json", "json-summary"],
+      // Excluding bootstrapping files.
+      exclude: [
+        "src/util/types.ts",
+        "*.d.ts",
+        "src/vite-env.d.ts",
+        "src/App.vue",
+        "src/main.ts",
+        "src/routes.ts",
+      ],
       reportOnFailure: true,
     },
   },
-})
+});