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.

Install @playwright/test and cross-env.

Installing from npm:

npmyarnpnpm

bash

$ npm install -D @playwright/test cross-env

bash

$ yarn add @playwright/test cross-env

bash

$ pnpm add @playwright/test cross-env

Add test scripts to package.json.

json

// package.json
{
  "scripts": {
    // ...
    "test": "npx playwright test",
    "test-debug": "cross-env PWDEBUG=1 npm test"
  }
}

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
  }
}

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

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)

Add the following code to your newly created index.html file:

html

<!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>

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
  // ...
})

Run the test script.

npmyarnpnpm

bash

$ npm test
# or
$ npm run test-debug

bash

$ yarn test
# or
$ yarn run test-debug

bash

$ pnpm test
# or
$ pnpm run test-debug

TIP

For more details about Playwright refer to the Playwright documentation.

Testing #

Testing