fix(vitest): add more QLayout injections (fix #269) (#270)

packages/unit-vitest/src/helpers/layout-injections.ts

@@ -1,17 +1,29 @@
-/**
- * Injections for Components with a QPage root Element
- */
-export function qLayoutInjections() {
-  return {
-    // pageContainerKey
-    _q_pc_: true,
-    // layoutKey
-    _q_l_: {
-      header: { size: 0, offset: 0, space: false },
-      right: { size: 300, offset: 0, space: false },
-      footer: { size: 0, offset: 0, space: false },
-      left: { size: 300, offset: 0, space: false },
-      isContainer: false,
-    },
-  };
-}
+import { vi } from 'vitest';
+import { ref } from 'vue';
+
+/**
+ * Injections for Components with a QPage root Element
+ */
+export function qLayoutInjections() {
+  return {
+    // pageContainerKey
+    _q_pc_: true,
+    // layoutKey
+    _q_l_: {
+      header: { size: 0, offset: 0, space: false },
+      right: { size: 300, offset: 0, space: false },
+      footer: { size: 0, offset: 0, space: false },
+      left: { size: 300, offset: 0, space: false },
+      isContainer: ref(false),
+      view: ref('lHh Lpr lff'),
+      rows: ref({ top: 'lHh', middle: 'Lpr', bottom: 'lff' }),
+      height: ref(900),
+      instances: {},
+      update: vi.fn(),
+      animate: vi.fn(),
+      totalWidth: ref(1200),
+      scroll: ref({ position: 0, direction: 'up' }),
+      scrollbarWidth: ref(125),
+    },
+  };
+}

packages/unit-vitest/tsconfig.json

@@ -5,7 +5,8 @@
     "module": "esnext",
     // Needed to avoid errors with vitest @types/chai dep, since it uses `{ default as chai }` on a CommonJS module
     // See https://github.com/vitest-dev/vitest/issues/1076
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "skipLibCheck": true,
   },
   "include": ["src/helpers"]
 }

test-project-vite/test/vitest/__tests__/LayoutComponent.test.ts

@@ -0,0 +1,13 @@
+import { installQuasar } from '@quasar/quasar-app-extension-testing-unit-vitest';
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import LayoutComponent from './demo/LayoutComponent.vue';
+
+installQuasar();
+
+describe('layout example', () => {
+  it('should mount component properly', () => {
+    const wrapper = mount(LayoutComponent);
+    expect(wrapper.exists()).to.be.true;
+  });
+});

test-project-vite/test/vitest/__tests__/demo/LayoutComponent.vue

@@ -0,0 +1,12 @@
+<template>
+  <q-header>
+    <q-toolbar>
+      <q-toolbar-title>Header</q-toolbar-title>
+    </q-toolbar>
+  </q-header>
+  <q-footer>
+    <q-toolbar>
+      <q-toolbar-title>Footer</q-toolbar-title>
+    </q-toolbar>
+  </q-footer>
+</template>