@wordpress/dom
Version:
DOM utilities module for WordPress.
162 lines (126 loc) • 4.51 kB
JavaScript
/**
* Internal dependencies
*/
import createElement from './utils/create-element';
import { find } from '../focusable';
describe( 'focusable', () => {
beforeEach( () => {
document.body.innerHTML = '';
} );
describe( 'find()', () => {
it( 'returns empty array if no children', () => {
const node = createElement( 'div' );
expect( find( node ) ).toEqual( [] );
} );
it( 'returns empty array if no focusable children', () => {
const node = createElement( 'div' );
node.appendChild( createElement( 'div' ) );
expect( find( node ) ).toEqual( [] );
} );
it( 'returns array of focusable children', () => {
const node = createElement( 'div' );
node.appendChild( createElement( 'input' ) );
const focusable = find( node );
expect( focusable ).toHaveLength( 1 );
expect( focusable[ 0 ].nodeName ).toBe( 'INPUT' );
} );
it( 'finds nested focusable child', () => {
const node = createElement( 'div' );
node.appendChild( createElement( 'div' ) );
node.firstChild.appendChild( createElement( 'input' ) );
const focusable = find( node );
expect( focusable ).toHaveLength( 1 );
expect( focusable[ 0 ].nodeName ).toBe( 'INPUT' );
} );
it( 'finds link with no href but tabindex', () => {
const node = createElement( 'div' );
const link = createElement( 'a' );
link.tabIndex = 0;
node.appendChild( link );
expect( find( node ) ).toEqual( [ link ] );
} );
it( 'finds valid area focusable', () => {
const map = createElement( 'map' );
map.name = 'testfocus';
const area = createElement( 'area' );
area.href = '';
map.appendChild( area );
const img = createElement( 'img' );
img.setAttribute( 'usemap', '#testfocus' );
document.body.appendChild( map );
document.body.appendChild( img );
const focusable = find( map );
expect( focusable ).toHaveLength( 1 );
expect( focusable[ 0 ].nodeName ).toBe( 'AREA' );
} );
it( 'ignores invalid area focusable', () => {
const map = createElement( 'map' );
map.name = 'testfocus';
const area = createElement( 'area' );
area.href = '';
map.appendChild( area );
const img = createElement( 'img' );
img.setAttribute( 'usemap', '#testfocus' );
img.style.display = 'none';
document.body.appendChild( map );
document.body.appendChild( img );
expect( find( map ) ).toEqual( [] );
} );
it( 'finds contenteditable', () => {
const node = createElement( 'div' );
const div = createElement( 'div' );
node.appendChild( div );
div.setAttribute( 'contenteditable', '' );
expect( find( node ) ).toEqual( [ div ] );
div.setAttribute( 'contenteditable', 'true' );
expect( find( node ) ).toEqual( [ div ] );
} );
it( 'ignores contenteditable=false', () => {
const node = createElement( 'div' );
const div = createElement( 'div' );
node.appendChild( div );
div.setAttribute( 'contenteditable', 'false' );
expect( find( node ) ).toEqual( [] );
} );
it( 'ignores invisible inputs', () => {
const node = createElement( 'div' );
const input = createElement( 'input' );
node.appendChild( input );
input.style.visibility = 'hidden';
expect( find( node ) ).toEqual( [] );
input.style.visibility = 'visible';
input.style.display = 'none';
expect( find( node ) ).toEqual( [] );
input.style.display = 'inline-block';
const focusable = find( node );
expect( focusable ).toHaveLength( 1 );
expect( focusable[ 0 ].nodeName ).toBe( 'INPUT' );
} );
it( 'ignores inputs in invisible ancestors', () => {
const node = createElement( 'div' );
const input = createElement( 'input' );
node.appendChild( input );
node.style.visibility = 'hidden';
expect( find( node ) ).toEqual( [] );
node.style.visibility = 'visible';
node.style.display = 'none';
expect( find( node ) ).toEqual( [] );
node.style.display = 'block';
const focusable = find( node );
expect( focusable ).toHaveLength( 1 );
expect( focusable[ 0 ].nodeName ).toBe( 'INPUT' );
} );
it( 'does not return context even if focusable', () => {
const node = createElement( 'div' );
node.tabIndex = 0;
expect( find( node ) ).toEqual( [] );
} );
it( 'limits found focusables to specific context', () => {
const node = createElement( 'div' );
node.appendChild( createElement( 'div' ) );
document.body.appendChild( node );
document.body.appendChild( createElement( 'input' ) );
expect( find( node ) ).toEqual( [] );
} );
} );
} );