jsdom ๋ฐ jquery๋ฅผ ์ฌ์ฉํ์ฌ ์์์ ๊ฒ์ํ๋ ๋ฐฉ๋ฒ์ ํ์ ํ๋ ๋ฐ ๋ฌธ์ ๊ฐ ์์ต๋๋ค. ์ด๊ฒ ๊ฐ๋ฅํด?
๋ณ์ ํ์ = '
';์์ ๋ด์ฉ์ ์ ์๊ฒ ์ ํฉํ์ง ์์ต๋๋ค. ํด์ผ ํฉ๋๊น, ์๋๋ฉด ์ ๊ฐ ๋ญ๊ฐ ์๋ชปํ๊ณ ์์ต๋๊น?
์์ง๊น์ง๋ ๊ธฐ๋ณธ ๋์์ด ์์ต๋๋ค.
FormData-impl.js์์ ์์ ๋ฐ์ดํฐ ์๊ณ ๋ฆฌ์ฆ์ ๊ตฌํํ๊ธฐ ๋๋ฌธ์ ๊ตฌํํ๊ธฐ๊ฐ ํจ์ฌ ๋ ์ฌ์ธ ๊ฒ์ ๋๋ค. ๊ทธ๋ฌ๋ ์์ ์ ์ถ ํ ํ์์ ๋ฌผ๋ก ์ฌ์ ํ ์๋ํ์ง ์์ต๋๋ค.
์์์ ์ ์ถํ ํ ์๋ต ๋ณธ๋ฌธ์ ์ฝ๋ ๋ฐฉ๋ฒ์ ๋ฌด์์ ๋๊น? ์๋ฅผ ๋ค์ด resourceLoader๋ iframe์์ ์ ์ถ๋ ์์ ์ดํ์ ์๋ฌด ๊ฒ๋ ํธ๋ฆฌ๊ฑฐํ์ง ์์์ต๋๋ค.
์์ ์ ์ถ์ ํ์ฌ ๊ตฌํ๋์ด ์์ง ์์ผ๋ฏ๋ก ๋ถ๊ฐ๋ฅํฉ๋๋ค.
์ด๊ฒ์ผ๋ก ์ด๋ค ๋ณํ๊ฐ ์์ต๋๊น?
์์ ์ ์ถ์ด ๋ถ๋ถ์ ์ผ๋ก ๊ตฌํ๋ ๊ฒ ๊ฐ์ต๋๋ค. HTMLEvent๋ฅผ ์ ๋ฌํ์ง๋ง submit ๋ฉ์๋๋ ์ง์ํ์ง ์์ต๋๋ค.
์ต์ํ์ ์ฌ์์ฐ
๋ชจ์นด + ์ฐจ์ด ํ ์คํธ๋ก:
import {JSDOM} from 'jsdom'
import {assert} from 'chai'
import sinon from 'sinon'
describe('JSDOM Form', () => {
it('submit form with button', () => {
const dom = new JSDOM(`
<form id="my-form">
<button type="submit" id="submit-button">Submit Button</button>
</form>
`, {})
const listener = sinon.stub()
dom.window.document.getElementById('my-form').addEventListener('submit', listener)
dom.window.document.getElementById('submit-button').click()
assert.isTrue(listener.called)
})
})
๋ฌด์์ ๊ธฐ๋ํฉ๋๊น?
์ค๋ฅ ์์ด ์ํ์ ์ ์ถํฉ๋๋ค.
๋ฌด์จ ์ผ์ด์ผ?
ํ ์คํธ๋ ์ฑ๊ณตํ์ง๋ง ๋ค์ ์ค๋ฅ๋ฅผ ๋ฐํํฉ๋๋ค.
์ค๋ฅ: ๊ตฌํ๋์ง ์์: HTMLFormElement.prototype.submit
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
์์ ์ ์ถ์ด ๋ถ๋ถ์ ์ผ๋ก ๊ตฌํ๋ ๊ฒ ๊ฐ์ต๋๋ค. HTMLEvent๋ฅผ ์ ๋ฌํ์ง๋ง submit ๋ฉ์๋๋ ์ง์ํ์ง ์์ต๋๋ค.
์ต์ํ์ ์ฌ์์ฐ
๋ชจ์นด + ์ฐจ์ด ํ ์คํธ๋ก:
๋ฌด์์ ๊ธฐ๋ํฉ๋๊น?
์ค๋ฅ ์์ด ์ํ์ ์ ์ถํฉ๋๋ค.
๋ฌด์จ ์ผ์ด์ผ?
ํ ์คํธ๋ ์ฑ๊ณตํ์ง๋ง ๋ค์ ์ค๋ฅ๋ฅผ ๋ฐํํฉ๋๋ค.