Testing

If you used the CLI method to install Minze you can extend your environment with component tests quite quickly by using Playwright.

The following guide is based on a fresh Minze CLI installation.

  1. Install @playwright/test and cross-env.
$ npm install -D @playwright/test cross-env
  1. Add test scripts to package.json.
// package.json
{
  "scripts": {
    // ...
    "test": "npx playwright test",
    "test-debug": "cross-env PWDEBUG=1 npm test"
  }
}
  1. Add a playwright.config.js file to the root directory of your project.
// playwright.config.js
export default {
  use: {
    baseURL: 'http://localhost:5173/tests/'
  },
  webServer: {
    command: 'npm run dev',
    port: 5173,
    reuseExistingServer: true
  }
}
  1. Create a new tests/ directory with 3 new files:
    • index.html
    • vite.js
    • minze-button.spec.js

Your project should now look something like this:

minze-project/
├─ ...
├─ playwright.config.js
├─ package.json
└─ tests/
   ├─ index.html
   ├─ minze-button.spec.js
   └─ vite.js
  1. Add the following code to your newly created vite.js file to register all components:
import Minze from 'minze'
import * as Elements from '../src/module'

Minze.defineAll(Elements)
  1. Add the following code to your newly created index.html file:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./vite.js"></script>
  </body>
</html>
  1. Add the following code to your newly created minze-button.spec.js file:
import { test, expect } from '@playwright/test'

test('minze-button', async ({ page }) => {
  await page.goto('')
  await page.locator('#app').evaluate((node) => {
    node.innerHTML = `<minze-button></minze-button>`
  })

  await expect(page.locator('minze-button')).toHaveCount(1) // check if element exists
  // ...
})
  1. Run the test script.
$ npm test
# or
$ npm run test-debug

TIP

For more details about Playwright refer to the Playwright documentation.