From 8b47c1184be3e2970af7744bfa91ead0a50fdedc Mon Sep 17 00:00:00 2001 From: Andre Wiggins Date: Tue, 14 May 2019 15:56:00 -0700 Subject: [PATCH] Add DOM validation to all focus tests --- test/_util/dom.js | 12 ++++++ test/browser/focus.test.js | 80 ++++++++++++++++++++++++++++---------- 2 files changed, 72 insertions(+), 20 deletions(-) diff --git a/test/_util/dom.js b/test/_util/dom.js index d6971f1992..51f992614a 100644 --- a/test/_util/dom.js +++ b/test/_util/dom.js @@ -32,3 +32,15 @@ export const li = contents => `
  • ${contents}
    • `; * A helper to generate innerHTML validation strings containing inputs */ export const input = () => ``; + +/** + * A helper to generate innerHTML validation strings containing inputs + * @param {string | number} contents The contents of the h1 + */ +export const h1 = contents => `

    ${contents}

    `; + +/** + * A helper to generate innerHTML validation strings containing inputs + * @param {string | number} contents The contents of the h2 + */ +export const h2 = contents => `

    ${contents}

    `; diff --git a/test/browser/focus.test.js b/test/browser/focus.test.js index 2966e34731..b3840d115f 100644 --- a/test/browser/focus.test.js +++ b/test/browser/focus.test.js @@ -1,7 +1,7 @@ import { setupRerender } from 'preact/test-utils'; import { createElement as h, render, Component, Fragment, hydrate } from '../../src/index'; import { setupScratch, teardown } from '../_util/helpers'; -import { div, span, input as inputStr } from '../_util/dom'; +import { div, span, input as inputStr, h1, h2 } from '../_util/dom'; /* eslint-disable react/jsx-boolean-value */ /** @jsx h */ @@ -59,6 +59,18 @@ describe('focus', () => { } + /** + * @param {Array} before + * @param {Array} after + */ + function getListHtml(before, after) { + return div([ + ...before.map(i => span(i)), + inputStr(), + ...after.map(i => span(i)) + ].join('')); + } + beforeEach(() => { scratch = setupScratch(); rerender = setupRerender(); @@ -77,6 +89,7 @@ describe('focus', () => { ), scratch); const input = focusInput(); + expect(scratch.innerHTML).to.equal(getListHtml([], ['fooo'])); render(( @@ -85,6 +98,7 @@ describe('focus', () => { ), scratch); validateFocus(input); + expect(scratch.innerHTML).to.equal(getListHtml(['fooo'], [])); }); it('should maintain focus when moving the input around', () => { @@ -102,18 +116,22 @@ describe('focus', () => { let input = focusInput(); render(, scratch); + expect(scratch.innerHTML).to.equal(getListHtml([], [2])); validateFocus(input, 'move from middle to beginning'); input = focusInput(); render(, scratch); + expect(scratch.innerHTML).to.equal(getListHtml([1], [2])); validateFocus(input, 'move from beginning to middle'); input = focusInput(); render(, scratch); + expect(scratch.innerHTML).to.equal(getListHtml([1], [])); validateFocus(input, 'move from middle to end'); input = focusInput(); render(, scratch); + expect(scratch.innerHTML).to.equal(getListHtml([1], [2])); validateFocus(input, 'move from end to middle'); }); @@ -125,6 +143,7 @@ describe('focus', () => { ), scratch); let input = focusInput(); + expect(scratch.innerHTML).to.equal(getListHtml([], [])); render(( @@ -132,9 +151,9 @@ describe('focus', () => { ), scratch); - validateFocus(input, 'insert sibling before'); - input = focusInput(); + expect(scratch.innerHTML).to.equal(getListHtml([1], [])); + validateFocus(input, 'insert sibling before'); render(( @@ -143,9 +162,9 @@ describe('focus', () => { 2 ), scratch); - validateFocus(input, 'insert sibling after'); - input = focusInput(); + expect(scratch.innerHTML).to.equal(getListHtml([1], [2])); + validateFocus(input, 'insert sibling after'); render(( @@ -155,9 +174,9 @@ describe('focus', () => { 3 ), scratch); - validateFocus(input, 'insert sibling after again'); - input = focusInput(); + expect(scratch.innerHTML).to.equal(getListHtml([1], [2, 3])); + validateFocus(input, 'insert sibling after again'); render(( @@ -168,9 +187,9 @@ describe('focus', () => { 3 ), scratch); - validateFocus(input, 'insert sibling before again'); - expect(scratch.innerHTML).to.equal('
    0123
    '); + expect(scratch.innerHTML).to.equal(getListHtml([0, 1], [2, 3])); + validateFocus(input, 'insert sibling before again'); }); it('should maintain focus when conditional elements around input', () => { @@ -185,6 +204,7 @@ describe('focus', () => { ), scratch); let input = focusInput(); + expect(scratch.innerHTML).to.equal(getListHtml([0, 1], [2, 3])); render(( @@ -195,9 +215,9 @@ describe('focus', () => { 3 ), scratch); - validateFocus(input, 'remove sibling before'); - input = focusInput(); + expect(scratch.innerHTML).to.equal(getListHtml([1], [2, 3])); + validateFocus(input, 'remove sibling before'); render(( @@ -208,9 +228,9 @@ describe('focus', () => { {false && 3} ), scratch); - validateFocus(input, 'remove sibling after'); - input = focusInput(); + expect(scratch.innerHTML).to.equal(getListHtml([1], [2])); + validateFocus(input, 'remove sibling after'); render(( @@ -221,9 +241,10 @@ describe('focus', () => { {false && 3} ), scratch); + + expect(scratch.innerHTML).to.equal(getListHtml([1], [])); validateFocus(input, 'remove sibling after 2'); - input = focusInput(); render(( {false && 0} @@ -233,6 +254,8 @@ describe('focus', () => { {false && 3} ), scratch); + + expect(scratch.innerHTML).to.equal(getListHtml([], [])); validateFocus(input, 'remove sibling before 2'); }); @@ -248,6 +271,7 @@ describe('focus', () => { ), scratch); let input = focusInput(); + expect(scratch.innerHTML).to.equal(getListHtml([0, 1], [2, 3])); render(( @@ -257,9 +281,9 @@ describe('focus', () => { 3 ), scratch); - validateFocus(input, 'remove sibling before'); - input = focusInput(); + expect(scratch.innerHTML).to.equal(getListHtml([1], [2, 3])); + validateFocus(input, 'remove sibling before'); render(( @@ -268,9 +292,9 @@ describe('focus', () => { 2 ), scratch); - validateFocus(input, 'remove sibling after'); - input = focusInput(); + expect(scratch.innerHTML).to.equal(getListHtml([1], [2])); + validateFocus(input, 'remove sibling after'); render(( @@ -278,15 +302,17 @@ describe('focus', () => { ), scratch); - validateFocus(input, 'remove sibling after 2'); - input = focusInput(); + expect(scratch.innerHTML).to.equal(getListHtml([1], [])); + validateFocus(input, 'remove sibling after 2'); render(( ), scratch); + + expect(scratch.innerHTML).to.equal(getListHtml([], [])); validateFocus(input, 'remove sibling before 2'); }); @@ -419,6 +445,13 @@ describe('focus', () => { expect(document.activeElement).to.equal(input, 'Before rerender'); rerender(); + expect(scratch.innerHTML).to.equal(div([ + h1('Heading'), + 'Hello World', + h2('yo'), + 'foobar', + inputStr() + ].join(''))); expect(document.activeElement).to.equal(input, 'After rerender'); }); @@ -474,6 +507,13 @@ describe('focus', () => { expect(document.activeElement).to.equal(input, 'Before rerender'); rerender(); + expect(scratch.innerHTML).to.equal(div([ + h1('Heading'), + 'Hello World', + h2('yo'), + 'foobar', + inputStr() + ].join(''))); expect(input.selectionStart).to.equal(2); expect(input.selectionEnd).to.equal(5); expect(document.activeElement).to.equal(input, 'After rerender');