test(core): init test

init test for spec & e2e

fixes: #14

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,
+    };
+  },
+});

packages/core/package.json

@@ -43,36 +43,45 @@
     "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"
   },
   "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"

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;

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';

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';

packages/core/src/jest.d.ts

@@ -0,0 +1,6 @@
+declare namespace jest {
+  interface Matchers<R> {
+    toHaveShadowPart(part: string): R;
+    toHaveShadowRoot(): R;
+  }
+}

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: {
     /**

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",