|
| 1 | +import {JSDOM} from 'jsdom' |
| 2 | +import * as dtl from '../' |
| 3 | + |
| 4 | +test('works without a global dom', async () => { |
| 5 | + const container = new JSDOM(` |
| 6 | + <html> |
| 7 | + <body> |
| 8 | + <form id="login-form"> |
| 9 | + <label for="username">Username</label> |
| 10 | + <input id="username" /> |
| 11 | + <label for="password">Password</label> |
| 12 | + <input id="password" type="password" /> |
| 13 | + <button type="submit">Submit</button> |
| 14 | + <div id="data-container"></div> |
| 15 | + </form> |
| 16 | + </body> |
| 17 | + </html> |
| 18 | + `).window.document.body |
| 19 | + container.querySelector('#login-form').addEventListener('submit', e => { |
| 20 | + e.preventDefault() |
| 21 | + const {username, password} = e.target.elements |
| 22 | + setTimeout(() => { |
| 23 | + const dataContainer = container.querySelector('#data-container') |
| 24 | + const pre = container.ownerDocument.createElement('pre') |
| 25 | + pre.dataset.testid = 'submitted-data' |
| 26 | + pre.textContent = JSON.stringify({ |
| 27 | + username: username.value, |
| 28 | + password: password.value, |
| 29 | + }) |
| 30 | + dataContainer.appendChild(pre) |
| 31 | + }, 20) |
| 32 | + }) |
| 33 | + |
| 34 | + const fakeUser = {username: 'chucknorris', password: 'i need no password'} |
| 35 | + const usernameField = dtl.getByLabelText(container, /username/i) |
| 36 | + const passwordField = dtl.getByLabelText(container, /password/i) |
| 37 | + usernameField.value = fakeUser.username |
| 38 | + passwordField.value = fakeUser.password |
| 39 | + const submitButton = dtl.getByText(container, /submit/i) |
| 40 | + dtl.fireEvent.click(submitButton) |
| 41 | + const submittedDataPre = await dtl.findByTestId( |
| 42 | + container, |
| 43 | + 'submitted-data', |
| 44 | + {}, |
| 45 | + {container}, |
| 46 | + ) |
| 47 | + const data = JSON.parse(submittedDataPre.textContent) |
| 48 | + expect(data).toEqual(fakeUser) |
| 49 | +}) |
0 commit comments