diff --git a/Taskfile.yml b/Taskfile.yml index e8c96c2..2d59e19 100644 --- a/Taskfile.yml +++ b/Taskfile.yml @@ -11,6 +11,7 @@ tasks: dev:vue: npm run dev --workspace=packages/vue code:test: npm run test --workspaces + code:test-alpine: npm run test --workspace=packages/alpine code:coverage: npm run test:coverage --workspaces code:lint: npm run lint --workspaces code:format: npm run lint:fix --workspaces diff --git a/packages/alpine/package.json b/packages/alpine/package.json index a582c2a..1df4707 100644 --- a/packages/alpine/package.json +++ b/packages/alpine/package.json @@ -31,7 +31,7 @@ "scripts": { "dev": "vite", "build": "tsc && vite build", - "test": "echo 'No tests, skip'", + "test": "vitest run", "test:coverage": "vitest run --coverage", "lint": "ts-standard src", "lint:fix": "ts-standard --fix src", diff --git a/packages/alpine/test/alpine.test.ts b/packages/alpine/test/alpine.test.ts new file mode 100644 index 0000000..042256d --- /dev/null +++ b/packages/alpine/test/alpine.test.ts @@ -0,0 +1,149 @@ +import { describe, expect, test } from 'vitest' +import userEvent from '@testing-library/user-event' +import Alpine from 'alpinejs' +import { nextTick } from 'alpinejs/src/nextTick' + +import { xMaska } from '../src' + +Alpine.plugin(xMaska) +Alpine.start() + +let input: HTMLInputElement +const user = userEvent.setup() + +const prepareInput = async (markup: string) => { + document.body.innerHTML = markup + + await nextTick() + + return document.querySelector('input') +} + +describe('init', () => { + test('with data attr', async () => { + input = await prepareInput(``) + + expect(input).toHaveValue('1-2') + }) + + test('with wrapper', async () => { + input = await prepareInput( + `
` + ) + + expect(input).toHaveValue('1-2') + }) + + test('with expression', async () => { + input = await prepareInput( + `` + ) + + expect(input).toHaveValue('1-') + + await user.type(input, '23') + + expect(input).toHaveValue('1-2') + }) + + test('bind x-model', async () => { + input = await prepareInput( + `
+ + + +
` + ) + const span = document.querySelector('span') + const checkbox = ( + document.querySelector('input[type="checkbox"]') + ) + + expect(input).toHaveValue('1-') + expect(span).toHaveTextContent('1-') + + await user.type(input, '23') + + expect(input).toHaveValue('1-2') + expect(span).toHaveTextContent('1-2') + + await user.click(checkbox) + await user.clear(input) + await user.type(input, '1') + + expect(input).toHaveValue('1') + expect(span).toHaveTextContent('1') + + await user.click(checkbox) + + expect(input).toHaveValue('1-') + expect(span).toHaveTextContent('1-') + }) +}) + +describe('bindings', () => { + test('bind masked', async () => { + input = await prepareInput( + `
+ + +
` + ) + const span = document.querySelector('span') + + await user.type(input, '123') + + expect(input).toHaveValue('1-2') + expect(span).toHaveTextContent('1-2') + }) + + test('bind unmasked', async () => { + input = await prepareInput( + `
+ + +
` + ) + const span = document.querySelector('span') + + await user.type(input, '123') + + expect(input).toHaveValue('1-2') + expect(span).toHaveTextContent('12') + }) + + test('bind completed', async () => { + input = await prepareInput( + `
+ + +
` + ) + const span = document.querySelector('span') + + await user.type(input, '1') + + expect(input).toHaveValue('1') + expect(span).not.toBeVisible() + + await user.type(input, '2') + + expect(input).toHaveValue('1-2') + expect(span).toBeVisible() + }) + + test('bind masked with onMask', async () => { + input = await prepareInput( + `
+ + +
` + ) + const span = document.querySelector('span') + + await user.type(input, '123') + + expect(input).toHaveValue('1-2') + expect(span).toHaveTextContent('1-2') + }) +}) diff --git a/packages/alpine/test/setup.ts b/packages/alpine/test/setup.ts new file mode 100644 index 0000000..a9d0dd3 --- /dev/null +++ b/packages/alpine/test/setup.ts @@ -0,0 +1 @@ +import '@testing-library/jest-dom/vitest'