chore: setup unit and component testing for tailwind-components module (

#4725)

chore: setup unit and component testing for tailwind-components module

- setup tools
- add unit example
- add component example
- add task to call via gradle

apps/tailwind-components/package.json

@@ -15,6 +15,7 @@
     "format": "prettier components pages tests layouts --write --config ../.prettierrc.js",
     "checkFormat": "prettier components pages tests --check --config ../.prettierrc.js",
     "test": "vitest",
+    "test-ci": "vitest run",
     "e2e": "playwright test",
     "a11y:test": "pa11y-ci",
     "a11y:serve": "http-server .reports/ -p 1234",
@@ -36,14 +37,14 @@
     "happy-dom": "15.10.2",
     "http-server": "^14.1.1",
     "if-env": "1.0.4",
+    "nuxt": "3.14.1592",
     "pa11y-ci": "^3.1.0",
     "pa11y-ci-reporter-html": "^7.0.0",
     "playwright-core": "1.50.0",
     "prettier": "2.8.8",
     "svgo": "2.8.0",
     "typescript": "5.6.2",
-    "nuxt": "3.14.1592",
-    "vitest": "1.6.1",
-    "vue-tsc": "^2.2.0"
+    "vitest": "3.0.5",
+    "vue-tsc": "2.2.0"
   }
 }

apps/tailwind-components/playwright.config.ts

@@ -2,7 +2,7 @@ import { defineConfig, devices } from '@playwright/test';
 import type { ConfigOptions } from '@nuxt/test-utils/playwright'
 
 export default defineConfig<ConfigOptions>({
-  testDir: './tests',
+  testDir: './tests/e2e',
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */

apps/tailwind-components/tests/components/buttonBar.spec.ts → apps/tailwind-components/tests/e2e/buttonBar.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect } from "@playwright/test";
-import playwrightConfig from "../../playwright.config";
+import playwrightConfig from "~/playwright.config";
 
 const route = playwrightConfig?.use?.baseURL?.startsWith("http://localhost")
   ? ""

apps/tailwind-components/tests/components/form/inputEmail.spec.ts → apps/tailwind-components/tests/e2e/components/form/inputEmail.spec.ts

@@ -1,5 +1,5 @@
 import { expect, test } from "@playwright/test";
-import playwrightConfig from "../../../playwright.config";
+import playwrightConfig from "~/playwright.config";
 const route = playwrightConfig?.use?.baseURL?.startsWith("http://localhost")
   ? ""
   : "/apps/tailwind-components/#/";

apps/tailwind-components/tests/components/form/inputHyperlink.spec.ts → apps/tailwind-components/tests/e2e/components/form/inputHyperlink.spec.ts

@@ -1,5 +1,5 @@
 import { expect, test } from "@playwright/test";
-import playwrightConfig from "../../../playwright.config";
+import playwrightConfig from "~/playwright.config";
 const route = playwrightConfig?.use?.baseURL?.startsWith("http://localhost")
   ? ""
   : "/apps/tailwind-components/#/";

apps/tailwind-components/tests/components/form/renderForm.spec.ts → apps/tailwind-components/tests/e2e/components/form/renderForm.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect } from "@playwright/test";
-import playwrightConfig from "../../../playwright.config";
+import playwrightConfig from "~/playwright.config";
 
 const route = playwrightConfig?.use?.baseURL?.startsWith("http://localhost")
   ? ""

apps/tailwind-components/tests/components/input/listbox.spec.ts → apps/tailwind-components/tests/e2e/components/input/listbox.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect } from "@playwright/test";
-import playwrightConfig from "../../../playwright.config";
+import playwrightConfig from "~/playwright.config";
 
 const route = playwrightConfig?.use?.baseURL?.startsWith("http://localhost")
   ? ""

apps/tailwind-components/tests/components/input/textarea.spec.ts → apps/tailwind-components/tests/e2e/components/input/textarea.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect } from "@playwright/test";
-import playwrightConfig from "../../../playwright.config";
+import playwrightConfig from "~/playwright.config";
 
 const route = playwrightConfig?.use?.baseURL?.startsWith("http://localhost")
   ? ""
@@ -13,6 +13,14 @@ test.beforeEach(async ({ page }) => {
 test("InputTextArea: invalid is properly indicated @tw-components @tw-forms @input-textarea", async ({
   page,
 }) => {
+  await expect(page.locator("#test-state-checkbox-group")).toContainText(
+    "invalid"
+  );
+  await page
+    .locator("label")
+    .filter({ hasText: "invalid" })
+    .locator("rect")
+    .click();
   await page.getByLabel("invalid").check();
   await expect(page.getByLabel("invalid")).toBeChecked();
   const InputTextAreaClass = await page
@@ -21,11 +29,23 @@ test("InputTextArea: invalid is properly indicated @tw-components @tw-forms @inp
   await expect(InputTextAreaClass).toContain("invalid");
 });
 
+test("InputTextArea: required state is properly indicated @tw-components @tw-forms @input-textarea", async ({
+  page,
+}) => {
+  await page.getByText("Required is true").click();
+  await expect(
+    page.getByLabel("Demo input for type=text Required")
+  ).toBeVisible();
+});
+
 test("InputTextArea: valid state properly styles component @tw-components @tw-forms @input-textarea", async ({
   page,
 }) => {
-  await page.getByLabel("valid", { exact: true }).check();
-  await page.getByLabel("valid", { exact: true }).isChecked();
+  await page
+    .locator("label")
+    .filter({ hasText: /^valid$/ })
+    .locator("rect")
+    .click();
   const InputTextAreaClass = await page
     .getByLabel("Demo input for type=text")
     .getAttribute("class");
@@ -35,9 +55,7 @@ test("InputTextArea: valid state properly styles component @tw-components @tw-fo
 test("InputTextArea: component is properly disabled @tw-components @tw-forms @input-textarea", async ({
   page,
 }) => {
-  await expect(page.getByLabel("disabled")).not.toBeChecked();
-  await page.getByLabel("disabled").check();
-  await expect(page.getByLabel("disabled")).toBeChecked();
+  await page.getByText("disabled").click();
   await expect(page.getByLabel("Demo input for type=text")).toBeDisabled();
 });
 

apps/tailwind-components/tests/components/input/tree.spec.ts → apps/tailwind-components/tests/e2e/components/input/tree.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect } from "@playwright/test";
-import playwrightConfig from "../../../playwright.config";
+import playwrightConfig from "~/playwright.config";
 
 const route = playwrightConfig?.use?.baseURL?.startsWith("http://localhost")
   ? ""

apps/tailwind-components/tests/vitest/components/Button.spec.ts

@@ -0,0 +1,16 @@
+import { mount } from "@vue/test-utils";
+import { expect, it } from "vitest";
+import Button from "~/components/Button.vue";
+import FloatingVue from "floating-vue";
+import "floating-vue/dist/style.css"; // Ensure styles are loaded
+
+const wrapper = mount(Button, {
+  global: {
+    plugins: [FloatingVue], // Register the plugin
+  },
+});
+
+it("should use the primary text class by default", async () => {
+  expect(wrapper.html()).toContain("text-button-primary");
+  expect(wrapper.html()).toContain("bg-button-primary");
+});

apps/tailwind-components/tests/vitest/utils/flattenObject.spec.ts

@@ -0,0 +1,6 @@
+import { expect, test } from "vitest";
+import { flattenObject } from "~/utils/flattenObject";
+
+test("flattens the object", () => {
+  expect(flattenObject({ a: 1, b: 2 })).toBe(" 1 2");
+});

apps/tailwind-components/vitest.config.ts

@@ -2,6 +2,7 @@ import { defineVitestConfig } from '@nuxt/test-utils/config'
 
 export default defineVitestConfig({
   test: {
-    environment: "happy-dom"
+    environment: "happy-dom",
+    include: ["tests/vitest/**/*.spec.ts"],
   }
 })