adding test for App.vue

Author: prakhyatox

src/App.vue

@@ -55,12 +55,13 @@ export default {
     ...mapState("uiController", ["UIGeneralStatus"]),
     ...mapState("introspection", ["readOnlyMode"]),
   },
-  /* istanbul ignore next */
+  /* v8 ignore start*/
   async updated() {
     // very important line of code which prevents layout shifting which is considered as one negative point for SEO
     await this.$nextTick();
     // this.loading = false;
   },
+  /* v8 ignore stop*/
 };
 </script>
 

tests/unit/App.spec.js

@@ -1,15 +1,21 @@
 import { beforeEach, describe, expect, it } from "vitest";
 import { shallowMount } from "@vue/test-utils";
 import { createStore } from "vuex";
-import App2 from "@/App.vue"; // Adjust path if necessary
+import App from "@/App.vue"; // Adjust path if necessary
 
 // Dummy components to act as stubs
 const HeaderComp = { template: '<div class="header-stub"></div>' };
 const FooterComp = { template: '<div class="footer-stub"></div>' };
 const Jumbotron = { template: '<div class="jumbotron-stub"></div>' };
-const NavigationDrawer = { template: '<div class="nav-drawer-stub"></div>' };
 const PublicMessages = { template: '<div class="messages-stub"></div>' };
 
+const NavigationDrawer = {
+  name: "v-navigation-drawer",
+  template: '<div class="v-navigation-drawer-stub"><slot /></div>',
+  props: ["modelValue", "location"],
+  emits: ["update:modelValue"],
+};
+
 describe("App.vue", () => {
   let store;
   let stateUI;
@@ -50,8 +56,8 @@ describe("App.vue", () => {
     };
   });
 
-  const createWrapper = (overrides = {}) => {
-    return shallowMount(App2, {
+  const createWrapper = () => {
+    return shallowMount(App, {
       global: {
         plugins: [store],
         mocks: {
@@ -61,21 +67,18 @@ describe("App.vue", () => {
           HeaderComp,
           FooterComp,
           Jumbotron,
-          NavigationDrawer,
           PublicMessages,
           "router-view": true,
           "v-app": { template: "<div><slot /></div>" },
-          "v-navigation-drawer": { template: "<div><slot /></div>" },
+          "v-navigation-drawer": NavigationDrawer,
           "v-alert": { template: '<div class="v-alert"><slot /></div>' },
         },
-        ...overrides,
       },
     });
   };
 
   it("renders the core layout components always", () => {
     const wrapper = createWrapper();
-
     expect(wrapper.findComponent(HeaderComp).exists()).toBe(true);
     expect(wrapper.findComponent(Jumbotron).exists()).toBe(true);
     expect(wrapper.findComponent(PublicMessages).exists()).toBe(true);
@@ -84,11 +87,8 @@ describe("App.vue", () => {
   });
 
   it("shows the read-only alert when readOnlyMode is true", () => {
-    // Update state for this specific test
     stateIntrospection.readOnlyMode = true;
-
     const wrapper = createWrapper();
-
     const alert = wrapper.find(".v-alert");
     expect(alert.exists()).toBe(true);
     expect(alert.text()).toContain(
@@ -98,29 +98,37 @@ describe("App.vue", () => {
 
   it("does NOT show the read-only alert when readOnlyMode is false", () => {
     stateIntrospection.readOnlyMode = false;
-
     const wrapper = createWrapper();
-
     const alert = wrapper.find(".v-alert");
     expect(alert.exists()).toBe(false);
   });
 
   it("renders navigation drawer only when screen is mdAndDown", () => {
-    // Mock mobile view
     vuetifyMock.display.mdAndDown = true;
-
     const wrapper = createWrapper();
-
-    // Check if the drawer component is rendered
     expect(wrapper.findComponent(NavigationDrawer).exists()).toBe(true);
   });
 
-  it("does NOT render navigation drawer when screen is larger than md", () => {
-    // Mock desktop view
-    vuetifyMock.display.mdAndDown = false;
+  it("updates drawerVisibilityState when the drawer emits an update event", async () => {
+    stateUI.UIGeneralStatus.drawerVisibilityState = true;
+    vuetifyMock.display.mdAndDown = true;
 
     const wrapper = createWrapper();
+    let drawer = wrapper.findComponent(NavigationDrawer);
+    await drawer.vm.$emit("update:modelValue", false);
+    expect(stateUI.UIGeneralStatus.drawerVisibilityState).toBe(false);
+  });
 
+  it("does NOT render navigation drawer when screen is larger than md", () => {
+    vuetifyMock.display.mdAndDown = false;
+    const wrapper = createWrapper();
     expect(wrapper.findComponent(NavigationDrawer).exists()).toBe(false);
   });
+
+  it("executes the updated hook when reactive data changes", async () => {
+    const wrapper = createWrapper();
+    await wrapper.setData({ title: "Trigger Update" });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.exists()).toBe(true);
+  });
 });