-
- This is the home screen.
-
- Navigate to non-existing screen.
-
-
- Navigate to child screen.
-
-
- Navigate to screen with an invalid HTML value as a path.
-
-
-
-
- This is the child screen.
-
- Navigate to nested screen.
-
-
- Go back
-
-
-
- {
- setInputValue( e.target.value );
- } }
- value={ inputValue }
- />
-
-
-
- This is the nested screen.
-
- Go back
-
-
-
-
- This is the screen with an invalid HTML value as a path.
-
- Go back
-
-
-
- { /* A `NavigatorScreen` with `path={ PATHS.NOT_FOUND }` is purposefully not included. */ }
-
- );
-};
-
-const getNavigationScreenByText = ( text, { throwIfNotFound = true } = {} ) => {
- const fnName = throwIfNotFound ? 'getByText' : 'queryByText';
- return screen[ fnName ]( text );
-};
-const getHomeScreen = ( { throwIfNotFound } = {} ) =>
- getNavigationScreenByText( 'This is the home screen.', {
- throwIfNotFound,
- } );
-const getChildScreen = ( { throwIfNotFound } = {} ) =>
- getNavigationScreenByText( 'This is the child screen.', {
- throwIfNotFound,
- } );
-const getNestedScreen = ( { throwIfNotFound } = {} ) =>
- getNavigationScreenByText( 'This is the nested screen.', {
- throwIfNotFound,
- } );
-const getInvalidHTMLPathScreen = ( { throwIfNotFound } = {} ) =>
- getNavigationScreenByText(
- 'This is the screen with an invalid HTML value as a path.',
- {
- throwIfNotFound,
- }
- );
-
-const getNavigationButtonByText = ( text, { throwIfNotFound = true } = {} ) => {
- const fnName = throwIfNotFound ? 'getByRole' : 'queryByRole';
- return screen[ fnName ]( 'button', { name: text } );
-};
-const getToNonExistingScreenButton = ( { throwIfNotFound } = {} ) =>
- getNavigationButtonByText( 'Navigate to non-existing screen.', {
- throwIfNotFound,
- } );
-const getToChildScreenButton = ( { throwIfNotFound } = {} ) =>
- getNavigationButtonByText( 'Navigate to child screen.', {
- throwIfNotFound,
- } );
-const getToNestedScreenButton = ( { throwIfNotFound } = {} ) =>
- getNavigationButtonByText( 'Navigate to nested screen.', {
- throwIfNotFound,
- } );
-const getToInvalidHTMLPathScreenButton = ( { throwIfNotFound } = {} ) =>
- getNavigationButtonByText(
- 'Navigate to screen with an invalid HTML value as a path.',
- {
- throwIfNotFound,
- }
- );
-const getBackButton = ( { throwIfNotFound } = {} ) =>
- getNavigationButtonByText( 'Go back', {
- throwIfNotFound,
- } );
-
-describe( 'Navigator', () => {
- const originalGetClientRects = window.Element.prototype.getClientRects;
-
- // `getClientRects` needs to be mocked so that `isVisible` from the `@wordpress/dom`
- // `focusable` module can pass, in a JSDOM env where the DOM elements have no width/height.
- const mockedGetClientRects = jest.fn( () => [
- {
- x: 0,
- y: 0,
- width: 100,
- height: 100,
- },
- ] );
-
- beforeAll( () => {
- window.Element.prototype.getClientRects =
- jest.fn( mockedGetClientRects );
- } );
-
- afterAll( () => {
- window.Element.prototype.getClientRects = originalGetClientRects;
- } );
-
- it( 'should render', () => {
- render(