diff options
| author | Akshay Nair <phenax5@gmail.com> | 2023-08-11 23:06:57 +0530 |
|---|---|---|
| committer | Akshay Nair <phenax5@gmail.com> | 2023-08-11 23:08:16 +0530 |
| commit | ca80dee29014298bd8a1a82bd0418cc073a76316 (patch) | |
| tree | 70607817c0b27738eeb91b954aa5656adc2a311e /tests | |
| parent | b4548ce257c301154a39f5296387c2a72c552e70 (diff) | |
| download | css-everything-ca80dee29014298bd8a1a82bd0418cc073a76316.tar.gz css-everything-ca80dee29014298bd8a1a82bd0418cc073a76316.zip | |
test: adds test for simple signup page example
Diffstat (limited to 'tests')
| -rw-r--r-- | tests/fixtures/signup/index.html | 47 | ||||
| -rw-r--r-- | tests/signup.spec.ts | 93 |
2 files changed, 140 insertions, 0 deletions
diff --git a/tests/fixtures/signup/index.html b/tests/fixtures/signup/index.html new file mode 100644 index 0000000..df69508 --- /dev/null +++ b/tests/fixtures/signup/index.html @@ -0,0 +1,47 @@ +<html lang="en"> + <head> + <title>Register page</title> + <meta charset="UTF-8" /> + <style> + body { + --cssx-children: button#show-form-btn form#signup-form; + } + + #show-form-btn::before { + content: 'Show form'; + } + #show-form-btn { + --cssx-on-click: add-class(signup-form, 'visible') + add-class(show-form-btn, 'active'); + } + + #signup-form { + display: none; + + --cssx-children: input#email input#password button#submit-btn; + + --cssx-on-submit: prevent-default() add-class(signup-form, 'submitting') + delay(0.2s) request('http://example.com/submit/api', POST) + remove-class(signup-form, 'submitting') + add-class(signup-form, 'submitted'); + } + #signup-form.visible { + display: block; + } + + #email { + --cssx-on-mount: set-attr('name', 'email') + set-attr('data-testid', 'email'); + } + #password { + --cssx-on-mount: set-attr('name', 'password') + set-attr('data-testid', 'password'); + } + #submit-btn { + --cssx-on-mount: set-attr('type', 'submit'); + --cssx-text: Submit; + } + </style> + </head> + <body></body> +</html> diff --git a/tests/signup.spec.ts b/tests/signup.spec.ts new file mode 100644 index 0000000..c2cec0b --- /dev/null +++ b/tests/signup.spec.ts @@ -0,0 +1,93 @@ +import { + fireEvent, + waitFor, + getByText, + getByTestId, +} from '@testing-library/dom' +import { readFile } from 'node:fs/promises' +import '@testing-library/jest-dom' + +import { render } from '../src/renderer' + +async function loadFixture(type: string) { + document.documentElement.innerHTML = await readFile( + `./tests/fixtures/${type}/index.html`, + 'utf8', + ) + await render({ root: document.body }) +} + +const delay = (delayMs: number) => new Promise(res => setTimeout(res, delayMs)) + +describe('signup example', () => { + beforeEach(async () => { + await loadFixture('signup') + window.fetch = jest.fn() as any + }) + + it('should show form when button is clicked', async () => { + const $showFormBtn = document.getElementById('show-form-btn')! + const $form = document.getElementById('signup-form')! + + expect($showFormBtn).toBeVisible() + expect($showFormBtn.nodeName).toBe('BUTTON') + expect($form).not.toBeVisible() + expect($form.nodeName).toBe('FORM') + + // Click and wait for button to get active class (handles delay) + fireEvent.click($showFormBtn) + await waitFor(() => + expect($showFormBtn.classList.contains('active')).toBe(true), + ) + + expect($form).toBeVisible() + }) + + describe('Form submit', () => { + beforeEach(async () => { + const $showFormBtn = document.getElementById('show-form-btn')! + fireEvent.click($showFormBtn) + await waitFor(() => + expect($showFormBtn.classList.contains('active')).toBe(true), + ) + const $form = document.getElementById('signup-form')! + expect($form).toBeVisible() + await delay(100) // Wait for mounting + }) + + it('should submit form correctly', async () => { + const $form = document.getElementById('signup-form')! + + // Set email and password field + const $email = getByTestId<HTMLInputElement>(document.body, 'email') + $email.value = 'no-reply@we-love-replies.com' + const $password = getByTestId<HTMLInputElement>(document.body, 'password') + $password.value = 'password' + + // Submit form + const $submitBtn = getByText(document.body, 'Submit') + fireEvent.click($submitBtn) + + // Should add submitting class to form + await waitFor(() => + expect($form.classList.contains('submitting')).toBe(true), + ) + + // Should add submitted class to form and remove submitting + await waitFor(() => + expect($form.classList.contains('submitted')).toBe(true), + ) + expect($form.classList.contains('submitting')).toBe(false) + + // Should have made a request to post form data + expect(window.fetch).toHaveBeenCalledTimes(1) + const [url, { method, body }] = (window.fetch as any).mock.calls[0] + expect(url).toBe('http://example.com/submit/api') + expect(method).toBe('POST') + expect(Object.fromEntries(body.entries())).toEqual({ + email: 'no-reply@we-love-replies.com', + password: 'password', + }) + }) + }) +}) |