@wordpress/components 19.15.0 → 20.0.0

package/src/form-token-field/test/index.js

@@ -1,411 +0,0 @@
-/**
- * External dependencies
- */
-import TestUtils, { act } from 'react-dom/test-utils';
-import ReactDOM from 'react-dom';
-
-/**
- * Internal dependencies
- */
-import fixtures from './lib/fixtures';
-import TokenFieldWrapper from './lib/token-field-wrapper';
-
-/**
- * Module variables
- */
-const keyCodes = {
-	backspace: 8,
-	tab: 9,
-	enter: 13,
-	leftArrow: 37,
-	upArrow: 38,
-	rightArrow: 39,
-	downArrow: 40,
-	delete: 46,
-	comma: 188,
-};
-
-const charCodes = {
-	comma: 44,
-};
-
-describe( 'FormTokenField', () => {
-	let wrapper, wrapperElement, textInputElement, textInputComponent;
-
-	function setText( text ) {
-		TestUtils.Simulate.change( textInputElement(), {
-			target: {
-				value: text,
-			},
-		} );
-	}
-
-	function sendKeyDown( keyCode, shiftKey ) {
-		TestUtils.Simulate.keyDown( wrapperElement(), {
-			keyCode,
-			shiftKey: !! shiftKey,
-		} );
-	}
-
-	function sendKeyPress( charCode ) {
-		TestUtils.Simulate.keyPress( wrapperElement(), { charCode } );
-	}
-
-	function getTokensHTML() {
-		const textNodes = wrapperElement().querySelectorAll(
-			'.components-form-token-field__token-text span[aria-hidden]'
-		);
-		return Array.from( textNodes ).map( ( node ) => node.innerHTML );
-	}
-
-	function getSuggestionsText( selector ) {
-		const suggestionNodes = wrapperElement().querySelectorAll(
-			selector || '.components-form-token-field__suggestion'
-		);
-
-		return Array.from( suggestionNodes ).map( getSuggestionNodeText );
-	}
-
-	function getSuggestionNodeText( node ) {
-		if ( ! node.querySelector( 'span' ) ) {
-			return node.outerHTML;
-		}
-
-		// This suggestion is part of a partial match; return up to three
-		// sections of the suggestion (before match, match, and after
-		// match).
-		const div = document.createElement( 'div' );
-		div.innerHTML = node.querySelector( 'span' ).outerHTML;
-		return Array.from( div.firstChild.childNodes )
-			.filter(
-				( childNode ) => childNode.nodeType !== childNode.COMMENT_NODE
-			)
-			.map( ( childNode ) => childNode.textContent );
-	}
-
-	function getSelectedSuggestion() {
-		const selectedSuggestions = getSuggestionsText(
-			'.components-form-token-field__suggestion.is-selected'
-		);
-
-		return selectedSuggestions[ 0 ] || null;
-	}
-
-	function setUp( props ) {
-		wrapper = TestUtils.renderIntoDocument(
-			<TokenFieldWrapper { ...props } />
-		);
-		/* eslint-disable react/no-find-dom-node */
-		wrapperElement = () => ReactDOM.findDOMNode( wrapper );
-		textInputElement = () =>
-			TestUtils.findRenderedDOMComponentWithClass(
-				wrapper,
-				'components-form-token-field__input'
-			);
-
-		textInputComponent = () =>
-			TestUtils.findRenderedDOMComponentWithTag( wrapper, 'input' );
-		/* eslint-enable react/no-find-dom-node */
-		TestUtils.Simulate.focus( textInputElement() );
-	}
-
-	describe( 'displaying tokens', () => {
-		it( 'should render default tokens', () => {
-			setUp();
-			wrapper.setState( {
-				isExpanded: true,
-			} );
-			expect( wrapper.state.tokens ).toEqual( [ 'foo', 'bar' ] );
-		} );
-
-		it( 'should display tokens with escaped special characters properly', () => {
-			setUp();
-			wrapper.setState( {
-				tokens: fixtures.specialTokens.textEscaped,
-				isExpanded: true,
-			} );
-			expect( getTokensHTML() ).toEqual(
-				fixtures.specialTokens.htmlEscaped
-			);
-		} );
-
-		it( 'should display tokens with special characters properly', () => {
-			setUp();
-			// This test is not as realistic as the previous one: if a WP site
-			// contains tag names with special characters, the API will always
-			// return the tag names already escaped.  However, this is still
-			// worth testing, so we can be sure that token values with
-			// dangerous characters in them don't have these characters carried
-			// through unescaped to the HTML.
-			wrapper.setState( {
-				tokens: fixtures.specialTokens.textUnescaped,
-				isExpanded: true,
-			} );
-			expect( getTokensHTML() ).toEqual(
-				fixtures.specialTokens.htmlUnescaped
-			);
-		} );
-	} );
-
-	describe( 'suggestions', () => {
-		it( 'should not render suggestions unless we type at least two characters', () => {
-			setUp();
-			wrapper.setState( {
-				isExpanded: true,
-			} );
-			expect( getSuggestionsText() ).toEqual( [] );
-			act( () => {
-				setText( 'th' );
-			} );
-			expect( getSuggestionsText() ).toEqual(
-				fixtures.matchingSuggestions.th
-			);
-		} );
-
-		it( 'should show suggestions when when input is empty if expandOnFocus is set to true', () => {
-			setUp( { __experimentalExpandOnFocus: true } );
-			wrapper.setState( {
-				isExpanded: true,
-			} );
-			expect( getSuggestionsText() ).not.toEqual( [] );
-		} );
-
-		it( 'should remove already added tags from suggestions', () => {
-			setUp();
-			wrapper.setState( {
-				tokens: Object.freeze( [ 'of', 'and' ] ),
-			} );
-			expect( getSuggestionsText() ).not.toEqual( getTokensHTML() );
-		} );
-
-		it( 'suggestions that begin with match are boosted', () => {
-			setUp();
-			wrapper.setState( {
-				isExpanded: true,
-			} );
-			act( () => {
-				setText( 'so' );
-			} );
-			expect( getSuggestionsText() ).toEqual(
-				fixtures.matchingSuggestions.so
-			);
-		} );
-
-		it( 'should match against the unescaped values of suggestions with special characters', () => {
-			setUp();
-
-			act( () => {
-				wrapper.setState( {
-					tokenSuggestions: fixtures.specialSuggestions.textUnescaped,
-					isExpanded: true,
-				} );
-			} );
-
-			act( () => {
-				setText( '& S' );
-			} );
-
-			expect( getSuggestionsText() ).toEqual(
-				fixtures.specialSuggestions.matchAmpersandUnescaped
-			);
-		} );
-
-		it( 'should match against the unescaped values of suggestions with special characters (including spaces)', () => {
-			setUp();
-			act( () => {
-				wrapper.setState( {
-					tokenSuggestions: fixtures.specialSuggestions.textUnescaped,
-					isExpanded: true,
-				} );
-			} );
-			act( () => {
-				setText( 's &' );
-			} );
-			expect( getSuggestionsText() ).toEqual(
-				fixtures.specialSuggestions.matchAmpersandSequence
-			);
-		} );
-
-		it( 'should not match against the escaped values of suggestions with special characters', () => {
-			setUp();
-			act( () => {
-				setText( 'amp' );
-			} );
-			act( () => {
-				wrapper.setState( {
-					tokenSuggestions: fixtures.specialSuggestions.textUnescaped,
-					isExpanded: true,
-				} );
-			} );
-			expect( getSuggestionsText() ).toEqual(
-				fixtures.specialSuggestions.matchAmpersandEscaped
-			);
-		} );
-
-		it( 'should match suggestions even with trailing spaces', () => {
-			setUp();
-			wrapper.setState( {
-				isExpanded: true,
-			} );
-			act( () => {
-				setText( '  at  ' );
-			} );
-			expect( getSuggestionsText() ).toEqual(
-				fixtures.matchingSuggestions.at
-			);
-		} );
-
-		it( 'should manage the selected suggestion based on both keyboard and mouse events', () => {
-			setUp();
-			wrapper.setState( {
-				isExpanded: true,
-			} );
-			act( () => {
-				setText( 'th' );
-			} );
-			expect( getSuggestionsText() ).toEqual(
-				fixtures.matchingSuggestions.th
-			);
-			expect( getSelectedSuggestion() ).toBe( null );
-			sendKeyDown( keyCodes.downArrow ); // 'the'.
-			expect( getSelectedSuggestion() ).toEqual( [ 'th', 'e' ] );
-			sendKeyDown( keyCodes.downArrow ); // 'that'.
-			expect( getSelectedSuggestion() ).toEqual( [ 'th', 'at' ] );
-
-			const hoverSuggestion = wrapperElement().querySelectorAll(
-				'.components-form-token-field__suggestion'
-			)[ 3 ]; // 'with'.
-			expect( getSuggestionNodeText( hoverSuggestion ) ).toEqual( [
-				'wi',
-				'th',
-			] );
-
-			// Before sending a hover event, we need to wait for
-			// SuggestionList#_scrollingIntoView to become false.
-			act( () => {
-				jest.advanceTimersByTime( 100 );
-			} );
-
-			TestUtils.Simulate.mouseEnter( hoverSuggestion );
-			expect( getSelectedSuggestion() ).toEqual( [ 'wi', 'th' ] );
-			sendKeyDown( keyCodes.upArrow );
-			expect( getSelectedSuggestion() ).toEqual( [ 'th', 'is' ] );
-			sendKeyDown( keyCodes.upArrow );
-			expect( getSelectedSuggestion() ).toEqual( [ 'th', 'at' ] );
-			TestUtils.Simulate.click( hoverSuggestion );
-			expect( getSelectedSuggestion() ).toBe( null );
-			expect( getTokensHTML() ).toEqual( [ 'foo', 'bar', 'with' ] );
-		} );
-
-		it( 'should re-render when suggestions prop has changed', () => {
-			setUp();
-			act( () => {
-				wrapper.setState( {
-					tokenSuggestions: [],
-					isExpanded: true,
-				} );
-			} );
-			expect( getSuggestionsText() ).toEqual( [] );
-			act( () => {
-				setText( 'so' );
-			} );
-			expect( getSuggestionsText() ).toEqual( [] );
-			act( () => {
-				wrapper.setState( {
-					tokenSuggestions: fixtures.specialSuggestions.default,
-				} );
-			} );
-			expect( getSuggestionsText() ).toEqual(
-				fixtures.matchingSuggestions.so
-			);
-			act( () => {
-				wrapper.setState( {
-					tokenSuggestions: [],
-				} );
-			} );
-			expect( getSuggestionsText() ).toEqual( [] );
-		} );
-	} );
-
-	describe( 'adding tokens', () => {
-		it( 'should not allow adding blank tokens with Tab', () => {
-			setUp();
-			sendKeyDown( keyCodes.tab );
-			expect( wrapper.state.tokens ).toEqual( [ 'foo', 'bar' ] );
-		} );
-
-		it( 'should not allow adding whitespace tokens with Tab', () => {
-			setUp();
-			act( () => {
-				setText( '   ' );
-			} );
-			sendKeyDown( keyCodes.tab );
-			expect( wrapper.state.tokens ).toEqual( [ 'foo', 'bar' ] );
-		} );
-
-		it( 'should add a token when Enter pressed', () => {
-			setUp();
-			act( () => {
-				setText( 'baz' );
-			} );
-			sendKeyDown( keyCodes.enter );
-			expect( wrapper.state.tokens ).toEqual( [ 'foo', 'bar', 'baz' ] );
-			const textNode = textInputComponent();
-			expect( textNode.value ).toBe( '' );
-		} );
-
-		it( 'should not allow adding blank tokens with Enter', () => {
-			setUp();
-			sendKeyDown( keyCodes.enter );
-			expect( wrapper.state.tokens ).toEqual( [ 'foo', 'bar' ] );
-		} );
-
-		it( 'should not allow adding whitespace tokens with Enter', () => {
-			setUp();
-			setText( '   ' );
-			sendKeyDown( keyCodes.enter );
-			expect( wrapper.state.tokens ).toEqual( [ 'foo', 'bar' ] );
-		} );
-
-		it( 'should not allow adding whitespace tokens with comma', () => {
-			setUp();
-			setText( '   ' );
-			sendKeyPress( charCodes.comma );
-			expect( wrapper.state.tokens ).toEqual( [ 'foo', 'bar' ] );
-		} );
-
-		it( 'should add a token when comma pressed', () => {
-			setUp();
-			setText( 'baz' );
-			sendKeyPress( charCodes.comma );
-			expect( wrapper.state.tokens ).toEqual( [ 'foo', 'bar', 'baz' ] );
-		} );
-
-		it( 'should trim token values when adding', () => {
-			setUp();
-			setText( '  baz  ' );
-			sendKeyDown( keyCodes.enter );
-			expect( wrapper.state.tokens ).toEqual( [ 'foo', 'bar', 'baz' ] );
-		} );
-
-		it( "should not add values that don't pass the validation", () => {
-			setUp( {
-				__experimentalValidateInput: ( newValue ) => newValue !== 'baz',
-			} );
-			setText( 'baz' );
-			sendKeyDown( keyCodes.enter );
-			expect( wrapper.state.tokens ).toEqual( [ 'foo', 'bar' ] );
-		} );
-	} );
-
-	describe( 'removing tokens', () => {
-		it( 'should remove tokens when X icon clicked', () => {
-			setUp();
-			const forClickNode = wrapperElement().querySelector(
-				'.components-form-token-field__remove-token'
-			).firstChild;
-			TestUtils.Simulate.click( forClickNode );
-			expect( wrapper.state.tokens ).toEqual( [ 'bar' ] );
-		} );
-	} );
-} );

package/src/form-token-field/test/lib/fixtures.js

@@ -1,89 +0,0 @@
-export default {
-	specialTokens: {
-		textEscaped: [ 'a   b', 'i <3 tags', '1&2&3&4' ],
-		htmlEscaped: [
-			'a   b',
-			'i <3 tags',
-			'1&2&3&4',
-		],
-		textUnescaped: [ 'a   b', 'i <3 tags', '1&2&3&4' ],
-		htmlUnescaped: [
-			'a&nbsp;&nbsp;&nbsp;b',
-			'i&nbsp;&lt;3&nbsp;tags',
-			'1&amp;2&amp;3&amp;4',
-		],
-	},
-	specialSuggestions: {
-		default: [
-			'the',
-			'of',
-			'and',
-			'to',
-			'a',
-			'in',
-			'for',
-			'is',
-			'on',
-			'that',
-			'by',
-			'this',
-			'with',
-			'i',
-			'you',
-			'it',
-			'not',
-			'or',
-			'be',
-			'are',
-			'from',
-			'at',
-			'as',
-			'your',
-			'all',
-			'have',
-			'new',
-			'more',
-			'an',
-			'was',
-			'we',
-			'associate',
-			'snake',
-			'pipes',
-			'sound',
-		],
-		textEscaped: [
-			'&lt;3',
-			'Stuff &amp; Things',
-			'Tags &amp; Stuff',
-			'Tags &amp; Stuff 2',
-		],
-		textUnescaped: [
-			'<3',
-			'Stuff & Things',
-			'Tags & Stuff',
-			'Tags & Stuff 2',
-		],
-		matchAmpersandUnescaped: [
-			[ 'Tags ', '& S', 'tuff' ],
-			[ 'Tags ', '& S', 'tuff 2' ],
-		],
-		matchAmpersandSequence: [
-			[ 'Tag', 's &', ' Stuff' ],
-			[ 'Tag', 's &', ' Stuff 2' ],
-		],
-		matchAmpersandEscaped: [],
-	},
-	matchingSuggestions: {
-		th: [
-			[ 'th', 'e' ],
-			[ 'th', 'at' ],
-			[ 'th', 'is' ],
-			[ 'wi', 'th' ],
-		],
-		so: [
-			[ 'so', 'und' ],
-			[ 'as', 'so', 'ciate' ],
-		],
-		at: [ [ 'at' ], [ 'th', 'at' ], [ 'associ', 'at', 'e' ] ],
-	},
-};

package/src/form-token-field/test/lib/token-field-wrapper.tsx

@@ -1,71 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentProps } from 'react';
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import fixtures from './fixtures';
-import type { FormTokenFieldProps } from '../../types';
-import FormTokenField from '../../';
-
-const {
-	specialSuggestions: { default: suggestions },
-} = fixtures;
-
-function unescapeAndFormatSpaces( str: string ) {
-	const nbsp = String.fromCharCode( 160 );
-	const escaped = new DOMParser().parseFromString( str, 'text/html' );
-	return escaped.documentElement.textContent?.replace( / /g, nbsp ) ?? '';
-}
-
-class TokenFieldWrapper extends Component<
-	FormTokenFieldProps,
-	{
-		tokenSuggestions: ComponentProps<
-			typeof FormTokenField
-		>[ 'suggestions' ];
-		tokens: ComponentProps< typeof FormTokenField >[ 'value' ];
-		isExpanded: boolean;
-	}
-> {
-	constructor( props: FormTokenFieldProps ) {
-		super( props );
-		this.state = {
-			tokenSuggestions: suggestions,
-			tokens: Object.freeze( [ 'foo', 'bar' ] ) as string[],
-			isExpanded: false,
-		};
-		this.onTokensChange = this.onTokensChange.bind( this );
-	}
-
-	render() {
-		return (
-			<FormTokenField
-				suggestions={
-					this.state.isExpanded
-						? this.state.tokenSuggestions
-						: undefined
-				}
-				value={ this.state.tokens }
-				displayTransform={ unescapeAndFormatSpaces }
-				onChange={ this.onTokensChange }
-				{ ...this.props }
-			/>
-		);
-	}
-
-	onTokensChange(
-		value: ComponentProps< typeof FormTokenField >[ 'value' ]
-	) {
-		this.setState( { tokens: value } );
-	}
-}
-
-export default TokenFieldWrapper;

package/src/menu-group/test/__snapshots__/index.js.snap

@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MenuGroup should match snapshot 1`] = `
-<div
-  className="components-menu-group"
->
-  <div
-    aria-hidden="true"
-    className="components-menu-group__label"
-    id="components-menu-group-label-1"
-  >
-    My group
-  </div>
-  <div
-    aria-labelledby="components-menu-group-label-1"
-    role="group"
-  >
-    <p>
-      My item
-    </p>
-  </div>
-</div>
-`;

package/src/placeholder/stories/index.js

@@ -1,44 +0,0 @@
-/**
- * External dependencies
- */
-import { boolean, text } from '@storybook/addon-knobs';
-
-/**
- * Internal dependencies
- */
-import Placeholder from '../';
-import TextControl from '../../text-control';
-
-export default {
-	title: 'Components/Placeholder',
-	component: Placeholder,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-export const _default = () => {
-	const icon = text( 'Icon', 'smiley' );
-	const instructions = text(
-		'Instructions',
-		'Here are instructions you should follow'
-	);
-	const label = text( 'Label', 'My Placeholder Label' );
-	const isColumnLayout = boolean( 'isColumnLayout', false );
-
-	return (
-		<Placeholder
-			icon={ icon }
-			instructions={ instructions }
-			label={ label }
-			isColumnLayout={ isColumnLayout }
-		>
-			<div>
-				<TextControl
-					label="Sample Field"
-					placeholder="Enter something here"
-				/>
-			</div>
-		</Placeholder>
-	);
-};