From a85b707538e61050c7c3665caaa846324e0e169a Mon Sep 17 00:00:00 2001
From: Sukaato <sukaato.dev@proton.me>
Date: Sun, 25 Aug 2024 00:39:35 +0200
Subject: [PATCH] test(core): init test

init test for spec & e2e

fixes: #14
---
 packages/core/jest.setup.js        | 39 ++++++++++++
 packages/core/package.json         | 21 +++++--
 packages/core/playwright.config.ts | 95 ++++++++++++++++++++++++++++++
 packages/core/src/custom-type.d.ts |  2 +-
 packages/core/src/index.html       | 31 ----------
 packages/core/src/index.ts         |  8 +--
 packages/core/src/jest.d.ts        |  6 ++
 packages/core/stencil.config.ts    |  5 ++
 packages/core/tsconfig.json        |  2 +-
 9 files changed, 166 insertions(+), 43 deletions(-)
 create mode 100644 packages/core/jest.setup.js
 create mode 100644 packages/core/playwright.config.ts
 delete mode 100644 packages/core/src/index.html
 create mode 100644 packages/core/src/jest.d.ts

diff --git a/packages/core/jest.setup.js b/packages/core/jest.setup.js
new file mode 100644
index 0000000..44fff7a
--- /dev/null
+++ b/packages/core/jest.setup.js
@@ -0,0 +1,39 @@
+console.log("extends expect")
+
+expect.extend({
+  toHaveShadowRoot(received) {
+    if (!(received instanceof HTMLElement)) {
+      throw new Error('received should be an HTMLElement');
+    }
+
+    const pass = received.shadowRoot !== null;
+    const message = `expected ${received.tagName.toLowerCase()} to have shadowRoot`;
+
+    return {
+      pass,
+      message: () => message,
+    };
+  },
+});
+
+expect.extend({
+  toHaveShadowPart(received, part) {
+    if (typeof part !== 'string') {
+      throw new Error('expected toHaveShadowPart to be called with a string of the CSS shadow part name');
+    }
+
+    if (received.shadowRoot === null) {
+      throw new Error('expected toHaveShadowPart to be called on an element with a shadow root');
+    }
+
+    const shadowPart = received.shadowRoot.querySelector(`[part="${part}"]`);
+    const pass = shadowPart !== null;
+
+    const message = `expected ${received.tagName.toLowerCase()} to have shadow part "${part}"`;
+
+    return {
+      pass,
+      message: () => message,
+    };
+  },
+});
\ No newline at end of file
diff --git a/packages/core/package.json b/packages/core/package.json
index 85c392c..b51e122 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -43,23 +43,27 @@
     "access": "public"
   },
   "scripts": {
-    "clean": "rimraf -rf ./.stencil ./components ./css ./dist ./hydrate ./loader ./www",
+    "clean": "rimraf -rf ./.stencil ./components ./coverage ./css ./dist ./hydrate ./loader ./playwright-report ./www",
     "prebuild": "npm run clean",
     "build": "npm run build:css && npm run build:stencil",
     "build:stencil": "stencil build",
     "build:css": "npm run css:sass && npm run css:minify",
     "css:sass": "sass --embed-sources --style compressed src/css:./css",
     "css:minify": "cleancss -O2 -o ./css/poppy.bundle.css ./css/poppy.bundle.css",
-    "prestart": "npm run clean",
+    "prestart": "npm run clean && npm run build:css",
     "start": "stencil build --dev --watch --serve",
-    "test": "stencil test --spec --e2e",
-    "test.watch": "stencil test --spec --e2e --watchAll",
+    "test": "npm run test:spec && npm run test:e2e",
+    "test:spec": "stencil test --spec --max-workers=2",
+    "test:watch": "stencil test --spec --e2e --watchAll",
+    "test:e2e": "npx playwright test",
+    "test:e2e:update-snapshots": "npm run test.e2e -- --update-snapshots",
     "generate": "stencil generate",
     "audit-ci": "audit-ci --config ./audit-ci.json",
     "format": "biome format",
     "format:fix": "biome format --write",
     "lint": "biome lint",
-    "lint:fix": "biome lint --write"
+    "lint:fix": "biome lint --write",
+    "stencil": "stencil"
   },
   "dependencies": {
     "@stencil/core": "^4.20.0"
@@ -67,12 +71,17 @@
   "devDependencies": {
     "@biomejs/biome": "^1.8.3",
     "@cheese-grinder/stencil-component-config": "^0.3.0",
-    "@cheese-grinder/stencil-custom-readme": "^0.1.5",
+    "@cheese-grinder/stencil-custom-readme": "^0.1.7",
     "@cheese-grinder/stencil-sass-alias": "~0.2.4",
+    "@playwright/test": "^1.46.1",
+    "@stencil/playwright": "^0.2.0",
     "@stencil/sass": "^3.0.12",
     "@stencil/vue-output-target": "^0.8.9",
+    "@types/jest": "^29.5.12",
     "@types/node": "~22.2.0",
     "clean-css-cli": "^5.6.3",
+    "jest": "^29.7.0",
+    "jest-cli": "^29.7.0",
     "rimraf": "^6.0.1",
     "sass": "^1.77.8",
     "typescript": "^5.5.4"
diff --git a/packages/core/playwright.config.ts b/packages/core/playwright.config.ts
new file mode 100644
index 0000000..47078ec
--- /dev/null
+++ b/packages/core/playwright.config.ts
@@ -0,0 +1,95 @@
+import type { PlaywrightTestConfig, PlaywrightTestOptions, PlaywrightWorkerOptions, Project } from '@playwright/test';
+import { devices, expect } from '@playwright/test';
+import { matchers } from '@stencil/playwright';
+
+expect.extend(matchers);
+
+const projects: Project<PlaywrightTestOptions, PlaywrightWorkerOptions>[] = [
+  {
+    /**
+     * This is really just desktop Firefox
+     * but with a mobile viewport.
+     */
+    name: 'Mobile Firefox',
+    use: {
+      browserName: 'firefox',
+      /**
+       * This is the Pixel 5 configuration.
+       * We can't use devices['Pixel 5']
+       * because the "isMobile" option is
+       * not supported on Firefox.
+       */
+      viewport: {
+        width: 393,
+        height: 727
+      },
+    },
+  },
+  {
+    name: 'Mobile Chrome',
+    use: {
+      browserName: 'chromium',
+      ...devices['Pixel 5']
+    }
+  },
+  {
+    name: 'Mobile Safari',
+    use: {
+      browserName: 'webkit',
+      ...devices['iPhone 12']
+    }
+  }
+];
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+const config: PlaywrightTestConfig = {
+  testMatch: '*.e2e.ts',
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 5000,
+    toHaveScreenshot: {
+      threshold: 0.1
+    }
+  },
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  maxFailures: 0,
+  /* Test retries help catch flaky tests on CI */
+  retries: process.env.CI ? 2 : 0,
+  reportSlowTests: null,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: [
+    ['html'],
+    ['github']
+  ],
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+    actionTimeout: 0,
+    /**
+     * All failed tests should create
+     * a trace file for easier debugging.
+     *
+     * See https://playwright.dev/docs/trace-viewer
+     */
+    trace: 'retain-on-failure',
+    baseURL: 'http://localhost:3333',
+  },
+
+  /* Configure projects for major browsers */
+  projects,
+  webServer: {
+    command: 'serve -p 3333',
+    port: 3333,
+    reuseExistingServer: !process.env.CI
+  }
+};
+
+export default config;
\ No newline at end of file
diff --git a/packages/core/src/custom-type.d.ts b/packages/core/src/custom-type.d.ts
index 9619bf9..33c2a3e 100644
--- a/packages/core/src/custom-type.d.ts
+++ b/packages/core/src/custom-type.d.ts
@@ -29,4 +29,4 @@ export type * from './components/textarea/textarea.type';
 export type * from './components/toggle/toggle.type';
 export type * from './components/tooltip/tooltip.type';
 
-export { TriggerAction } from './utils/trigger';
+export type { TriggerAction } from './utils/trigger';
diff --git a/packages/core/src/index.html b/packages/core/src/index.html
deleted file mode 100644
index 5c391c7..0000000
--- a/packages/core/src/index.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!doctype html>
-<html dir="ltr" lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
-
-    <meta name="keywords" content="Poppy, DaisyUI, librairy, web-component, stencilJS" />
-
-    <link rel="canonical" href="http://localhost:3333" />
-
-    <title>PoppyUI Component Starter</title>
-    <meta name="description" content="Poppy component librairy based on DaisyUI" />
-
-    <meta name="og:locale" content="fr_FR" />
-    <meta name="og:title" content="Poppy Component Starter" />
-    <meta name="og:url" content="http://localhost:3333" />
-    <meta name="og:description" content="PoppyUI component librairy based on DaisyUI" />
-
-    <script type="module" src="/build/poppy.esm.js"></script>
-    <script nomodule src="/build/poppy.js"></script>
-    <link preload rel="stylesheet" href="/build/poppy.css" />
-  </head>
-  <body>
-    <div>
-      <pop-card>
-        <pop-card-body> body </pop-card-body>
-      </pop-card>
-    </div>
-  </body>
-</html>
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index c3f621e..91b4334 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -8,9 +8,9 @@
  * to consume components of this package as outlined in the `README.md`.
  */
 
-export * from './components';
-export { PoppyUserConfig } from './config';
-export * from './custom-type';
-export * from './interface';
+export type * from './components';
+export type { PoppyUserConfig } from './config';
+export type * from './custom-type';
+export type * from './interface';
 
 export { initialize } from './global/poppy';
diff --git a/packages/core/src/jest.d.ts b/packages/core/src/jest.d.ts
new file mode 100644
index 0000000..1d8e7b3
--- /dev/null
+++ b/packages/core/src/jest.d.ts
@@ -0,0 +1,6 @@
+declare namespace jest {
+  interface Matchers<R> {
+    toHaveShadowPart(part: string): R;
+    toHaveShadowRoot(): R;
+  }
+}
\ No newline at end of file
diff --git a/packages/core/stencil.config.ts b/packages/core/stencil.config.ts
index 047a1df..64052c3 100644
--- a/packages/core/stencil.config.ts
+++ b/packages/core/stencil.config.ts
@@ -83,6 +83,7 @@ export const config: Config = {
     {
       type: 'www',
       serviceWorker: null, // disable service workers
+      copy: [{ src: '**/*.html' }, { src: '**/*.css' }]
     },
     {
       type: 'dist',
@@ -135,6 +136,10 @@ export const config: Config = {
   ],
   testing: {
     browserHeadless: 'new',
+    moduleNameMapper: {
+      "#config": ["<rootDir>/src/config"],
+    },
+    setupFilesAfterEnv: ['./jest.setup.js']
   },
   extras: {
     /**
diff --git a/packages/core/tsconfig.json b/packages/core/tsconfig.json
index 7def5cf..6b8a13b 100644
--- a/packages/core/tsconfig.json
+++ b/packages/core/tsconfig.json
@@ -4,7 +4,7 @@
     "allowUnreachableCode": false,
     "declaration": false,
     "experimentalDecorators": true,
-    "lib": ["dom", "es2023"],
+    "lib": ["dom", "es2023", "ESNext.Disposable"],
     "moduleResolution": "node",
     "module": "esnext",
     "target": "es2021",