Merge pull request #4108 from getkirby/feature/vitest-ci

Vitest optimizations and CI integration

.github/workflows/ci.yml

@@ -125,8 +125,18 @@ jobs:
 
       - name: Run JavaScript unit tests
         if: always() && steps.finishPrepare.outcome == 'success'
-        run: npm run test:unit
+        run: npm run test:unit:coverage
         working-directory: panel
+
+      # TODO: Disabled until Vitest coverage reporting is accurate and
+      #       Kirby's frontend tests are useful enough that we need this metric 
+      # - name: Upload coverage results to Codecov
+      #   uses: codecov/codecov-action@f32b3a3741e1053eb607407145bc9619351dc93b # pin@v2
+      #   with:
+      #     token: ${{ secrets.CODECOV_TOKEN }} # for better reliability if the GitHub API is down
+      #     fail_ci_if_error: true
+      #     files: ${{ github.workspace }}/panel/coverage/lcov.info
+      #     flags: frontend
 
   frontend-e2e:
     name: "Frontend: E2E tests"

panel/package.json

@@ -68,11 +68,5 @@
     "last 2 Opera versions",
     "last 2 OperaMobile versions",
     "last 2 UCAndroid versions"
-  ],
-  "c8": {
-    "skip-full": true,
-    "exclude": [
-      "vite.config.js"
-    ]
-  }
+  ]
 }

panel/src/components/Misc/Progress.test.js

@@ -1,7 +1,8 @@
+import { describe, expect, it } from "vitest";
 import { mount } from "@vue/test-utils";
 import Progress from "./Progress.vue";
 
-describe("Progress.vue", () => {
+describe.concurrent("Progress.vue", () => {
   it("mounts component", async () => {
     const wrapper = mount(Progress);
     expect(wrapper.element.value).toBe(0);

panel/src/components/Misc/Text.test.js

@@ -1,7 +1,8 @@
+import { describe, expect, it } from "vitest";
 import { mount } from "@vue/test-utils";
 import Text from "./Text.vue";
 
-describe("Text.vue", () => {
+describe.concurrent("Text.vue", () => {
   it("has default slot", async () => {
     const wrapper = mount(Text, {
       slots: {

panel/src/components/Navigation/PrevNext.test.js

@@ -1,11 +1,12 @@
+import { describe, expect, it } from "vitest";
 import { mount } from "@vue/test-utils";
 import PrevNext from "./PrevNext.vue";
 
 const setup = {
   stubs: ["k-button-group"]
 };
 
-describe("PrevNext.vue", () => {
+describe.concurrent("PrevNext.vue", () => {
   it("has buttons", async () => {
     const wrapper = mount(PrevNext, {
       propsData: {

panel/src/components/Navigation/__snapshots__/PrevNext.test.js.snap

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1
 
-exports[`PrevNext.vue > has buttons 1`] = `
+exports[`PrevNext.vue > has CSS selector 1`] = `
 <k-button-group-stub
   buttons="[object Object],[object Object]"
   class="k-prev-next"

panel/src/fiber/dialog.test.js

@@ -2,6 +2,7 @@
  * @vitest-environment node
  */
 
+import { describe, expect, it } from "vitest";
 import dialog from "./dialog.js";
 
 const Vue = () => {

panel/src/fiber/dropdown.test.js

@@ -2,6 +2,7 @@
  * @vitest-environment node
  */
 
+import { describe, expect, it } from "vitest";
 import dropdown from "./dropdown.js";
 
 describe.concurrent("$dropdown()", () => {

panel/src/fiber/index.test.js

@@ -2,6 +2,7 @@
  * @vitest-environment jsdom
  */
 
+import { describe, expect, it } from "vitest";
 import Fiber from "./index.js";
 
 describe.concurrent("$fiber", () => {

panel/src/fiber/search.test.js

@@ -2,6 +2,7 @@
  * @vitest-environment node
  */
 
+import { describe, expect, it } from "vitest";
 import search from "./search.js";
 
 describe.concurrent("$search()", () => {

panel/src/helpers/color.test.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from "vitest";
 import color from "./color.js";
 
 describe.concurrent("$helper.css.color()", () => {

panel/src/helpers/embed.test.js

@@ -2,6 +2,7 @@
  * @vitest-environment node
  */
 
+import { describe, expect, it } from "vitest";
 import embed from "./embed.js";
 
 describe.concurrent("$helper.embed()", () => {

panel/src/helpers/object.clone.test.js

@@ -2,6 +2,7 @@
  * @vitest-environment node
  */
 
+import { describe, expect, it } from "vitest";
 import { clone } from "./object.js";
 
 describe.concurrent("$helper.object.clone()", () => {

panel/src/helpers/object.merge.test.js

@@ -2,6 +2,7 @@
  * @vitest-environment node
  */
 
+import { describe, expect, it } from "vitest";
 import { merge } from "./object.js";
 
 describe("$helper.object.merge", () => {

panel/src/helpers/ratio.test.js

@@ -2,6 +2,7 @@
  * @vitest-environment node
  */
 
+import { describe, expect, it } from "vitest";
 import ratio from "./ratio.js";
 
 describe.concurrent("$helper.ratio()", () => {

panel/src/helpers/sort.test.js

@@ -2,6 +2,7 @@
  * @vitest-environment node
  */
 
+import { describe, expect, it } from "vitest";
 import sort from "./sort.js";
 
 describe.concurrent("$helper.sort()", () => {

panel/src/helpers/string.camelToKebab.test.js

@@ -2,6 +2,7 @@
  * @vitest-environment node
  */
 
+import { describe, expect, it } from "vitest";
 import string from "./string.js";
 
 describe.concurrent("$helper.string.camelToKebab", () => {

panel/src/helpers/string.escapeHTML.test.js

@@ -2,6 +2,7 @@
  * @vitest-environment node
  */
 
+import { describe, expect, it } from "vitest";
 import string from "./string.js";
 
 describe.concurrent("$helper.string.escapeHTML", () => {

panel/src/helpers/string.hasEmoji.test.js

@@ -2,6 +2,7 @@
  * @vitest-environment node
  */
 
+import { describe, expect, it } from "vitest";
 import string from "./string.js";
 
 describe.concurrent("$helper.string.hasEmoji", () => {

panel/src/helpers/string.lcfirst.test.js

@@ -2,6 +2,7 @@
  * @vitest-environment node
  */
 
+import { describe, expect, it } from "vitest";
 import string from "./string.js";
 
 describe.concurrent("$helper.string.lcfirst", () => {

panel/src/helpers/string.pad.test.js

@@ -2,6 +2,7 @@
  * @vitest-environment node
  */
 
+import { describe, expect, it } from "vitest";
 import { pad } from "./string.js";
 
 describe.concurrent("$helper.string.pad()", () => {

panel/src/helpers/string.random.test.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from "vitest";
 import string from "./string.js";
 
 describe("$helper.string.random", () => {

panel/src/helpers/string.slug.test.js

@@ -2,6 +2,7 @@
  * @vitest-environment node
  */
 
+import { describe, expect, it } from "vitest";
 import { slug } from "./string.js";
 
 describe.concurrent("$helper.string.slug()", () => {

panel/src/helpers/string.stripHTML.test.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from "vitest";
 import string from "./string.js";
 
 describe("$helper.string.stripHTML", () => {

panel/src/helpers/string.template.test.js

@@ -2,6 +2,7 @@
  * @vitest-environment node
  */
 
+import { describe, expect, it } from "vitest";
 import string from "./string.js";
 
 describe.concurrent("$helper.string.template", () => {

panel/src/helpers/string.ucfirst.test.js

@@ -2,6 +2,7 @@
  * @vitest-environment node
  */
 
+import { describe, expect, it } from "vitest";
 import string from "./string.js";
 
 describe.concurrent("$helper.string.ucfirst", () => {

panel/src/helpers/string.ucwords.test.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from "vitest";
 import string from "./string.js";
 
 describe("$helper.string.ucwords", () => {

panel/src/helpers/string.uuid.test.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from "vitest";
 import string from "./string.js";
 
 describe("$helper.string.uuid", () => {

panel/src/libraries/dayjs-iso.test.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from "vitest";
 import dayjs from "./dayjs.js";
 
 describe("dayjs.iso()", () => {

panel/src/libraries/dayjs-merge.test.js

@@ -2,6 +2,7 @@
  * @vitest-environment node
  */
 
+import { describe, expect, it } from "vitest";
 import dayjs from "./dayjs.js";
 
 describe.concurrent("dayjs.merge()", () => {

panel/src/libraries/dayjs-pattern.test.js

@@ -2,6 +2,7 @@
  * @vitest-environment node
  */
 
+import { describe, expect, it } from "vitest";
 import dayjs from "./dayjs.js";
 
 describe.concurrent("dayjs.pattern.at()", () => {

panel/src/libraries/dayjs-round.test.js

@@ -2,6 +2,7 @@
  * @vitest-environment node
  */
 
+import { describe, expect, it } from "vitest";
 import dayjs from "./dayjs.js";
 
 describe.concurrent("dayjs.round()", () => {

panel/src/libraries/dayjs-units.test.js

@@ -2,6 +2,7 @@
  * @vitest-environment node
  */
 
+import { describe, expect, it } from "vitest";
 import dayjs from "./dayjs.js";
 
 const data = {

panel/src/libraries/dayjs-validate.test.js

@@ -2,6 +2,7 @@
  * @vitest-environment node
  */
 
+import { describe, expect, it } from "vitest";
 import dayjs from "./dayjs.js";
 
 describe.concurrent("dayjs.validate()", () => {

panel/vite.config.js

@@ -99,7 +99,14 @@ export default defineConfig(({ command }) => {
     test: {
       environment: "jsdom",
       include: ["**/*.test.js"],
-      global: true
+      coverage: {
+        all: true,
+        exclude: ["**/*.e2e.js", "**/*.test.js"],
+        extension: ["js", "vue"],
+        src: "src",
+        reporter: ["text", "lcov"]
+      },
+      setupFiles: ["vitest.setup.js"]
     }
   };
 });

panel/vitest.setup.js

@@ -0,0 +1,4 @@
+import Vue from "vue";
+
+Vue.config.productionTip = false;
+Vue.config.devtools = false;