Jsdom: ์–‘์‹์„ ๊ฒŒ์‹œํ•ฉ๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2011๋…„ 01์›” 06์ผ  ยท  6์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: jsdom/jsdom

jsdom ๋ฐ jquery๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์–‘์‹์„ ๊ฒŒ์‹œํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ํŒŒ์•…ํ•˜๋Š” ๋ฐ ๋ฌธ์ œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๊ฒŒ ๊ฐ€๋Šฅํ•ด?

๋ณ€์ˆ˜ ํ˜•์‹ = '

';
$(form).appendTo('๋ณธ๋ฌธ');
$('์–‘์‹').์ œ์ถœ();

์œ„์˜ ๋‚ด์šฉ์€ ์ €์—๊ฒŒ ์ ํ•ฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ํ•ด์•ผ ํ•ฉ๋‹ˆ๊นŒ, ์•„๋‹ˆ๋ฉด ์ œ๊ฐ€ ๋ญ”๊ฐ€ ์ž˜๋ชปํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๊นŒ?

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

์–‘์‹ ์ œ์ถœ์ด ๋ถ€๋ถ„์ ์œผ๋กœ ๊ตฌํ˜„๋œ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. 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

๋ชจ๋“  6 ๋Œ“๊ธ€

์•„์ง๊นŒ์ง€๋Š” ๊ธฐ๋ณธ ๋™์ž‘์ด ์—†์Šต๋‹ˆ๋‹ค.

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

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰