diff --git a/tests/scriptlets/trusted-set-attr.test.js b/tests/scriptlets/trusted-set-attr.test.js index 5980de0e..078cab69 100644 --- a/tests/scriptlets/trusted-set-attr.test.js +++ b/tests/scriptlets/trusted-set-attr.test.js @@ -4,207 +4,134 @@ import { runScriptlet, clearGlobalProps } from '../helpers'; const { test, module } = QUnit; const name = 'trusted-set-attr'; -const afterEach = () => { - clearGlobalProps('hit', '__debug'); -}; +const TARGET_ELEM_ID = 'target'; +const MISMATCH_ELEM_ID = 'mismatch'; +const TARGET_ATTR_NAME = 'test-attr'; +const TARGET_ELEM_BAIT_ATTR = 'another-attr-value'; -module(name, { afterEach }); +let context; +let testCaseCount = 0; -const createHit = () => { - window.__debug = () => { - window.hit = 'FIRED'; - }; -}; - -const createElem = (className) => { +const createElement = (id) => { const elem = document.createElement('div'); - if (className) { - elem.classList.add(className); - } + elem.id = id; document.body.appendChild(elem); return elem; }; -function changeAttr(elem, attr) { - elem.setAttribute(attr, 'not-test-value'); -} - -test('selector + attr + eligible number', (assert) => { - createHit(); - const attr = 'test-attr'; - const value = '1234'; - const matchClassName = 'testClass'; - const mismatchClassName = 'none'; - - const matchElem = createElem(matchClassName); - const mismatchElem = createElem(mismatchClassName); - - const scriptletArgs = [`.${matchClassName}`, attr, value]; - runScriptlet(name, scriptletArgs); - - assert.ok(matchElem.getAttribute(attr), `Attr ${attr} added to selector-matched element`); - assert.ok(matchElem.getAttribute(attr) === value, `New attr value ${value} is correct`); - assert.notOk(mismatchElem.getAttribute(attr), `Attr ${attr} is not added to mismatch element`); +const createContext = () => { + // This prevents multiple observers from tinkering with other tests + testCaseCount += 1; - assert.strictEqual(window.hit, 'FIRED'); - clearGlobalProps('hit'); - - const done = assert.async(); + const targetUID = `${TARGET_ELEM_ID}-${testCaseCount}`; + const mismatchUID = `${MISMATCH_ELEM_ID}-${testCaseCount}`; - changeAttr(matchElem, attr); - setTimeout(() => { - assert.ok(matchElem.getAttribute(attr) === value, `New attr val ${value} is still correct`); - assert.strictEqual(window.hit, 'FIRED'); - // Clean up test elements - matchElem.remove(); - mismatchElem.remove(); - done(); - }, 30); -}); - -test('selector + attr + empty string', (assert) => { - createHit(); - const attr = 'test-attr'; - const value = ''; - const matchClassName = 'testClass'; - const mismatchClassName = 'none'; - - const matchElem = createElem(matchClassName); - const mismatchElem = createElem(mismatchClassName); + return { + targetSelector: `#${targetUID}`, + targetElem: createElement(targetUID), + mismatchElem: createElement(mismatchUID), + changeTargetAttribute(attributeName) { + return this.targetElem.setAttribute(attributeName, TARGET_ELEM_BAIT_ATTR); + }, + }; +}; - const scriptletArgs = [`.${matchClassName}`, attr, value]; - runScriptlet(name, scriptletArgs); +const clearContext = () => { + context.targetElem.remove(); + context.mismatchElem.remove(); + context = null; +}; - // Have to revert state here, as getAttribute returns value '' that evaluates to false - assert.ok(!matchElem.getAttribute(attr), `Attr ${attr} added to selector-matched element`); - assert.ok(matchElem.getAttribute(attr) === value, `New attr value ${value} is correct`); - assert.notOk(mismatchElem.getAttribute(attr), `Attr ${attr} is not added to mismatch element`); +const beforeEach = () => { + context = createContext(); + window.__debug = () => { + window.hit = 'FIRED'; + }; +}; - assert.strictEqual(window.hit, 'FIRED'); - matchElem.remove(); - mismatchElem.remove(); - clearGlobalProps('hit'); -}); +const afterEach = () => { + clearContext(); + clearGlobalProps('hit', '__debug'); +}; -test('selector + attr + empty string', (assert) => { - createHit(); - const attr = 'test-attr'; - const matchClassName = 'testClass'; - const mismatchClassName = 'none'; +module(name, { beforeEach, afterEach }); - const matchElem = createElem(matchClassName); - const mismatchElem = createElem(mismatchClassName); +test('setting arbitrary value', (assert) => { + const value = '{ playbackRate: 1.5 }'; + const { targetSelector, targetElem, mismatchElem } = context; + const scriptletArgs = [targetSelector, TARGET_ATTR_NAME, value]; - const scriptletArgs = [`.${matchClassName}`, attr]; runScriptlet(name, scriptletArgs); - // Have to revert state here, as getAttribute returns value '' that evaluates to false - assert.ok(!matchElem.getAttribute(attr), `Attr ${attr} added to selector-matched element`); - /* eslint-disable-next-line quotes */ - assert.ok(matchElem.getAttribute(attr) === '', `New attr value '' is correct`); - assert.notOk(mismatchElem.getAttribute(attr), `Attr ${attr} is not added to mismatch element`); + assert.strictEqual(targetElem.getAttribute(TARGET_ATTR_NAME), value, `New attr value ${value} is correct`); + assert.strictEqual( + mismatchElem.getAttribute(TARGET_ATTR_NAME), + null, + `Attr ${TARGET_ATTR_NAME} is not added to mismatch element`, + ); + assert.strictEqual(window.hit, 'FIRED', 'hit function has been called'); - assert.strictEqual(window.hit, 'FIRED'); - matchElem.remove(); - mismatchElem.remove(); clearGlobalProps('hit'); -}); - -test('selector + attr + true', (assert) => { - createHit(); - const attr = 'test-attr-true'; - const value = 'true'; - const matchClassName = 'testClassTrue'; - const mismatchClassName = 'none'; - const matchElem = createElem(matchClassName); - const mismatchElem = createElem(mismatchClassName); - - const scriptletArgs = [`.${matchClassName}`, attr, value]; - runScriptlet(name, scriptletArgs); - - assert.ok(matchElem.getAttribute(attr), `Attr ${attr} added to selector-matched element`); - assert.ok(matchElem.getAttribute(attr) === value, `New attr value ${value} is correct`); - assert.notOk(mismatchElem.getAttribute(attr), `Attr ${attr} is not added to mismatch element`); - - assert.strictEqual(window.hit, 'FIRED'); - clearGlobalProps('hit'); + context.changeTargetAttribute(TARGET_ATTR_NAME); const done = assert.async(); - - changeAttr(matchElem, attr); setTimeout(() => { - assert.ok(matchElem.getAttribute(attr) === value, `New attr val ${value} is still correct`); - assert.strictEqual(window.hit, 'FIRED'); - // Clean up test elements - matchElem.remove(); - mismatchElem.remove(); + assert.strictEqual(targetElem.getAttribute(TARGET_ATTR_NAME), value, `New attr val ${value} is still correct`); + assert.strictEqual(window.hit, 'FIRED', 'hit function has been called again'); done(); }, 30); }); -test('selector + attr + False', (assert) => { - createHit(); - const attr = 'test-attr-False'; - const value = 'False'; - const matchClassName = 'testClassFalse'; - const mismatchClassName = 'none'; - - const matchElem = createElem(matchClassName); - const mismatchElem = createElem(mismatchClassName); +test('setting empty string', (assert) => { + const value = ''; + const { targetSelector, targetElem, mismatchElem } = context; + const scriptletArgs = [targetSelector, TARGET_ATTR_NAME, value]; - const scriptletArgs = [`.${matchClassName}`, attr, value]; runScriptlet(name, scriptletArgs); - assert.ok(matchElem.getAttribute(attr), `Attr ${attr} added to selector-matched element`); - assert.ok(matchElem.getAttribute(attr) === value, `New attr value ${value} is correct`); - assert.notOk(mismatchElem.getAttribute(attr), `Attr ${attr} is not added to mismatch element`); + assert.strictEqual(targetElem.getAttribute(TARGET_ATTR_NAME), value, `New attr value ${value} is correct`); + assert.strictEqual( + mismatchElem.getAttribute(TARGET_ATTR_NAME), + null, + `Attr ${TARGET_ATTR_NAME} is not added to mismatch element`, + ); + assert.strictEqual(window.hit, 'FIRED', 'hit function has been called'); - assert.strictEqual(window.hit, 'FIRED'); clearGlobalProps('hit'); - const done = assert.async(); + context.changeTargetAttribute(TARGET_ATTR_NAME); - changeAttr(matchElem, attr); + const done = assert.async(); setTimeout(() => { - assert.ok(matchElem.getAttribute(attr) === value, `New attr val ${value} is still correct`); - assert.strictEqual(window.hit, 'FIRED'); - // Clean up test elements - matchElem.remove(); - mismatchElem.remove(); + assert.strictEqual(targetElem.getAttribute(TARGET_ATTR_NAME), value, `New attr val ${value} is still correct`); + assert.strictEqual(window.hit, 'FIRED', 'hit function has been called again'); done(); }, 30); }); -test('selector + attr + stringified object', (assert) => { - createHit(); - const attr = 'test-attr-False'; - const value = '{ playback: false }'; - const matchClassName = 'testClassFalse'; - const mismatchClassName = 'none'; +test('setting attribute without value', (assert) => { + const { targetSelector, targetElem, mismatchElem } = context; + const scriptletArgs = [targetSelector, TARGET_ATTR_NAME]; - const matchElem = createElem(matchClassName); - const mismatchElem = createElem(mismatchClassName); - - const scriptletArgs = [`.${matchClassName}`, attr, value]; runScriptlet(name, scriptletArgs); - assert.ok(matchElem.getAttribute(attr), `Attr ${attr} added to selector-matched element`); - assert.ok(matchElem.getAttribute(attr) === value, `New attr value ${value} is correct`); - assert.notOk(mismatchElem.getAttribute(attr), `Attr ${attr} is not added to mismatch element`); + assert.strictEqual(targetElem.getAttribute(TARGET_ATTR_NAME), '', 'New attr set without value'); + assert.strictEqual( + mismatchElem.getAttribute(TARGET_ATTR_NAME), + null, + `Attr ${TARGET_ATTR_NAME} is not added to mismatch element`, + ); + assert.strictEqual(window.hit, 'FIRED', 'hit function has been called'); - assert.strictEqual(window.hit, 'FIRED'); clearGlobalProps('hit'); - const done = assert.async(); + context.changeTargetAttribute(TARGET_ATTR_NAME); - changeAttr(matchElem, attr); + const done = assert.async(); setTimeout(() => { - assert.ok(matchElem.getAttribute(attr) === value, `New attr val ${value} is still correct`); - assert.strictEqual(window.hit, 'FIRED'); - // Clean up test elements - matchElem.remove(); - mismatchElem.remove(); + assert.strictEqual(targetElem.getAttribute(TARGET_ATTR_NAME), '', 'New attr state is still correct'); + assert.strictEqual(window.hit, 'FIRED', 'hit function has been called again'); done(); }, 30); });