const components = [ { name: 'One', source: 'one source' }, { name: 'Two', source: 'two source' } ]; const selectedComponent = components[0]; export default { skip: true, // doesn't reflect real-world bug, maybe a JSDOM quirk data: { components, selectedComponent }, html: `
ONE SOURCE\nTWO SOURCE
`, test ( assert, component, target, window ) { const event = new window.MouseEvent( 'input' ); const textarea = target.querySelector( 'textarea' ); textarea.value = 'one source changed'; textarea.dispatchEvent( event ); assert.equal( component.get().compiled, 'ONE SOURCE CHANGED\nTWO SOURCE' ); assert.htmlEqual( target.innerHTML, `
ONE SOURCE CHANGED\nTWO SOURCE
` ); // const select = target.querySelector( 'select' ); // console.log( `select.options[0].selected`, select.options[0].selected ) // console.log( `select.options[1].selected`, select.options[1].selected ) // console.log( `select.value`, select.value ) // console.log( `select.__value`, select.__value ) // select.options[1].selected = true; // console.log( `select.options[0].selected`, select.options[0].selected ) // console.log( `select.options[1].selected`, select.options[1].selected ) // console.log( `select.value`, select.value ) // console.log( `select.__value`, select.__value ) // select.dispatchEvent( new window.Event( 'change' ) ); component.set({ selectedComponent: components[1] }); assert.equal( textarea.value, 'two source' ); textarea.value = 'two source changed'; textarea.dispatchEvent( event ); assert.equal( component.get().compiled, 'ONE SOURCE CHANGED\nTWO SOURCE CHANGED' ); assert.htmlEqual( target.innerHTML, `
ONE SOURCE CHANGED\nTWO SOURCE CHANGED
` ); component.destroy(); } };