@elementor/editor-site-navigation 0.22.8 → 0.23.0

package/src/components/top-bar/__tests__/recently-edited.test.tsx

@@ -1,380 +0,0 @@
-import * as React from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
-import {
-	__useHostDocument as useHostDocument,
-	__useActiveDocument as useActiveDocument,
-	__useNavigateToDocument as useNavigateToDocument,
-} from '@elementor/editor-documents';
-import RecentlyEdited from '../recently-edited';
-import { createMockDocument } from 'test-utils';
-import useRecentPosts from '../../../hooks/use-recent-posts';
-import { RecentPost } from '../../../types';
-
-jest.mock( '@elementor/editor-documents', () => ( {
-	__useActiveDocument: jest.fn(),
-	__useHostDocument: jest.fn(),
-	__useNavigateToDocument: jest.fn(),
-} ) );
-
-jest.mock( '../../../hooks/use-recent-posts', () => ( {
-	default: jest.fn( () => ( { isLoading: false, data: [] } ) ),
-	__esModule: true,
-} ) );
-
-jest.mock( '../../../hooks/use-user', () => ( {
-	default: jest.fn( () => ( {
-		isLoading: false,
-		data: {
-			capabilities: {
-				edit_posts: true,
-			},
-		},
-	} ) ),
-	__esModule: true,
-} ) );
-
-describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
-	it( 'should show the title of the active document without its status when the document is published', async () => {
-		// Arrange.
-		jest.mocked( useActiveDocument ).mockReturnValue(
-			createMockDocument( {
-				id: 1,
-				title: 'Active Document',
-			} )
-		);
-
-		// Act.
-		render( <RecentlyEdited /> );
-
-		// Assert.
-		expect( screen.getByText( 'Active Document' ) ).toBeInTheDocument();
-		expect( screen.queryByText( '(publish)' ) ).not.toBeInTheDocument();
-	} );
-
-	it( 'should show the title of the active document with its status when the document is not published', async () => {
-		// Arrange.
-		jest.mocked( useActiveDocument ).mockReturnValue(
-			createMockDocument( {
-				id: 1,
-				title: 'Active Document',
-				status: {
-					value: 'draft',
-					label: 'Draft',
-				},
-			} )
-		);
-
-		// Act.
-		render( <RecentlyEdited /> );
-
-		// Assert.
-		expect( screen.getByText( 'Active Document' ) ).toBeInTheDocument();
-		expect( screen.getByText( '(Draft)' ) ).toBeInTheDocument();
-	} );
-
-	it( 'should show the title of the host document when there is no active document', () => {
-		// Arrange.
-		jest.mocked( useActiveDocument ).mockReturnValue( null );
-
-		jest.mocked( useHostDocument ).mockReturnValue(
-			createMockDocument( {
-				id: 1,
-				title: 'Host Document',
-			} )
-		);
-
-		// Act.
-		render( <RecentlyEdited /> );
-
-		// Assert.
-		expect( screen.getByText( 'Host Document' ) ).toBeInTheDocument();
-	} );
-
-	it( 'should show the title of the host document when the active document is kit', () => {
-		// Arrange.
-		jest.mocked( useActiveDocument ).mockReturnValue(
-			createMockDocument( {
-				id: 1,
-				title: 'Active Document',
-				type: {
-					value: 'kit',
-					label: 'Kit',
-				},
-			} )
-		);
-
-		jest.mocked( useHostDocument ).mockReturnValue(
-			createMockDocument( {
-				id: 2,
-				title: 'Host Document',
-			} )
-		);
-
-		// Act.
-		render( <RecentlyEdited /> );
-
-		// Assert.
-		expect( screen.getByText( 'Host Document' ) ).toBeInTheDocument();
-	} );
-
-	it( 'should show nothing if there are no documents', () => {
-		// Arrange.
-		jest.mocked( useActiveDocument ).mockReturnValue( null );
-		jest.mocked( useHostDocument ).mockReturnValue( null );
-
-		// Act.
-		render( <RecentlyEdited /> );
-
-		// Assert.
-		expect( screen.queryByText( 'Host Document' ) ).not.toBeInTheDocument();
-		expect( screen.queryByText( 'Active Document' ) ).not.toBeInTheDocument();
-	} );
-
-	it( 'should show empty state', () => {
-		// Arrange.
-		jest.mocked( useActiveDocument ).mockReturnValue(
-			createMockDocument( {
-				id: 1,
-				title: 'Header',
-				type: {
-					value: 'header',
-					label: 'Header',
-				},
-			} )
-		);
-
-		const isLoading = false;
-		const recentPosts: RecentPost[] = [];
-
-		jest.mocked( useRecentPosts ).mockReturnValue( { isLoading, data: recentPosts } as ReturnType<
-			typeof useRecentPosts
-		> );
-
-		render( <RecentlyEdited /> );
-
-		// Act.
-		const buttons = screen.getAllByRole( 'button' );
-		fireEvent.click( buttons[ 0 ] ); // Opens the recently edited menu
-
-		// Assert.
-		const label = screen.getByText( 'There are no other pages or templates on this site yet', { exact: false } );
-		expect( label ).toBeInTheDocument();
-	} );
-
-	it( 'should open the recently edited menu on click', () => {
-		// Arrange.
-		jest.mocked( useActiveDocument ).mockReturnValue(
-			createMockDocument( {
-				id: 1,
-				title: 'Header',
-				type: {
-					value: 'header',
-					label: 'Header',
-				},
-			} )
-		);
-
-		const isLoading = false;
-		const recentPosts: RecentPost[] = [
-			{
-				id: 2,
-				title: 'Test post',
-				edit_url: 'some_url',
-				type: {
-					post_type: 'post',
-					doc_type: 'wp-post',
-					label: 'Post',
-				},
-				date_modified: 123,
-				user_can: {
-					edit: true,
-				},
-			},
-		];
-
-		jest.mocked( useRecentPosts ).mockReturnValue( { isLoading, data: recentPosts } as ReturnType<
-			typeof useRecentPosts
-		> );
-
-		render( <RecentlyEdited /> );
-
-		// Act.
-		const buttons = screen.getAllByRole( 'button' );
-		fireEvent.click( buttons[ 0 ] ); // Opens the recently edited menu
-
-		// Assert.
-		const menu = screen.getByRole( 'menu' );
-		expect( menu ).toBeInTheDocument();
-
-		const label = screen.getByText( 'Recent' );
-		expect( label ).toBeInTheDocument();
-
-		expect( screen.getByText( 'Test post' ) ).toBeInTheDocument();
-	} );
-
-	it( 'should render titles with HTML entities', () => {
-		// Arrange.
-		jest.mocked( useActiveDocument ).mockReturnValue(
-			createMockDocument( {
-				id: 1,
-				title: 'Header title with special char &#165;',
-				type: {
-					value: 'header',
-					label: 'Header',
-				},
-			} )
-		);
-
-		const isLoading = false;
-		const recentPosts: RecentPost[] = [
-			{
-				id: 1,
-				title: 'Header title with special char &#165;',
-				edit_url: 'some_url',
-				type: {
-					post_type: 'post',
-					doc_type: 'wp-post',
-					label: 'Post',
-				},
-				date_modified: 123,
-				user_can: {
-					edit: true,
-				},
-			},
-			{
-				id: 3,
-				title: 'Post title with <h1>HTML</h1>',
-				edit_url: 'some_url',
-				type: {
-					post_type: 'post',
-					doc_type: 'wp-post',
-					label: 'Post',
-				},
-				date_modified: 123,
-				user_can: {
-					edit: true,
-				},
-			},
-			{
-				id: 2,
-				title: 'Post title with &lt;HTML entities&gt;',
-				edit_url: 'some_url_2',
-				type: {
-					post_type: 'post',
-					doc_type: 'wp-post',
-					label: 'Post 2',
-				},
-				date_modified: 1234,
-				user_can: {
-					edit: true,
-				},
-			},
-		];
-
-		jest.mocked( useRecentPosts ).mockReturnValue( { isLoading, data: recentPosts } as ReturnType<
-			typeof useRecentPosts
-		> );
-
-		// Act.
-		render( <RecentlyEdited /> );
-
-		// Assert - the document title should be rendered with the HTML entity.
-		expect( screen.getByText( 'Header title with special char ¥' ) ).toBeInTheDocument();
-
-		// Open the posts list.
-		fireEvent.click( screen.getByRole( 'button' ) );
-
-		// Assert - the post title should be rendered with the HTML entity.
-		expect( screen.getByText( 'Post title with <h1>HTML</h1>' ) ).toBeInTheDocument();
-		expect( screen.getByText( 'Post title with <HTML entities>' ) ).toBeInTheDocument();
-	} );
-
-	it( 'should navigate to document on click', () => {
-		// Arrange.
-		jest.mocked( useActiveDocument ).mockReturnValue(
-			createMockDocument( {
-				id: 1,
-				title: 'Test',
-			} )
-		);
-
-		const navigateToDocument = jest.fn();
-
-		jest.mocked( useNavigateToDocument ).mockReturnValue( navigateToDocument );
-
-		jest.mocked( useRecentPosts ).mockReturnValue( {
-			isLoading: false,
-			data: [
-				{
-					id: 123,
-					title: 'Test post',
-					edit_url: 'some_url',
-					type: {
-						post_type: 'post',
-						doc_type: 'wp-post',
-						label: 'Post',
-					},
-					date_modified: 123,
-					user_can: {
-						edit: true,
-					},
-				},
-			],
-		} as ReturnType< typeof useRecentPosts > );
-
-		render( <RecentlyEdited /> );
-
-		// Open the posts list.
-		fireEvent.click( screen.getByRole( 'button' ) );
-
-		// Act.
-		fireEvent.click( screen.getByText( 'Test post' ) );
-
-		// Assert.
-		expect( navigateToDocument ).toHaveBeenCalledTimes( 1 );
-		expect( navigateToDocument ).toHaveBeenCalledWith( 123 );
-	} );
-
-	it( 'should be disabled when user cant edit post', () => {
-		// Arrange.
-		jest.mocked( useActiveDocument ).mockReturnValue(
-			createMockDocument( {
-				id: 1,
-				title: 'Test',
-			} )
-		);
-
-		const navigateToDocument = jest.fn();
-
-		jest.mocked( useNavigateToDocument ).mockReturnValue( navigateToDocument );
-
-		jest.mocked( useRecentPosts ).mockReturnValue( {
-			isLoading: false,
-			data: [
-				{
-					id: 123,
-					title: 'Test post',
-					edit_url: 'some_url',
-					type: {
-						post_type: 'post',
-						doc_type: 'wp-post',
-						label: 'Post',
-					},
-					date_modified: 123,
-					user_can: {
-						edit: false,
-					},
-				},
-			],
-		} as ReturnType< typeof useRecentPosts > );
-
-		render( <RecentlyEdited /> );
-
-		// Open the posts list.
-		fireEvent.click( screen.getByRole( 'button' ) );
-
-		// Assert.
-		const listItem = screen.getAllByRole( 'menuitem' )[ 0 ];
-		expect( listItem ).toHaveAttribute( 'aria-disabled', 'true' );
-	} );
-} );

package/src/hooks/__tests__/use-create-page.test.ts

@@ -1,39 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import apiFetch from '@wordpress/api-fetch';
-import useCreatePage, { endpointPath } from '../use-create-page';
-
-// Mock apiFetch to return a promise that resolves to an empty array.
-jest.mock( '@wordpress/api-fetch' );
-
-describe( '@elementor/recently-edited/use-page', () => {
-	beforeEach( () => {
-		jest.mocked( apiFetch ).mockImplementation( () => Promise.resolve( [] ) );
-	} );
-
-	afterEach( () => {
-		jest.clearAllMocks();
-	} );
-
-	it( 'should run useCreatePage hook', async () => {
-		// Arrange.
-		const { result } = renderHook( useCreatePage );
-		const newPost = {
-			id: 1,
-			edit_url: 'editurl.com',
-		};
-		jest.mocked( apiFetch ).mockImplementation( () => Promise.resolve( newPost ) );
-
-		const { create } = result.current;
-
-		// Act.
-		create();
-
-		// Assert.
-		expect( apiFetch ).toHaveBeenCalledTimes( 1 );
-		expect( apiFetch ).toHaveBeenCalledWith( {
-			data: { post_type: 'page' },
-			method: 'POST',
-			path: endpointPath,
-		} );
-	} );
-} );

package/src/hooks/__tests__/use-homepage-actions.test.ts

@@ -1,43 +0,0 @@
-import apiFetch from '@wordpress/api-fetch';
-import { renderHookWithQuery } from 'test-utils';
-import { useHomepageActions } from '../use-homepage-actions';
-import { settingsQueryKey } from '../use-homepage';
-
-jest.mock( '@wordpress/api-fetch' );
-
-describe( '@elementor/site-settings/use-homepage-actions', () => {
-	beforeEach( () => {
-		jest.mocked( apiFetch ).mockImplementation( () => Promise.resolve( {} ) );
-	} );
-
-	afterEach( () => {
-		jest.clearAllMocks();
-	} );
-
-	it( 'should run updateSettings from useHomepageActions hook', async () => {
-		// Arrange.
-		const { component, queryClient } = renderHookWithQuery( () => useHomepageActions() );
-		const { updateSettingsMutation } = component.result.current;
-
-		const queryKey = settingsQueryKey();
-		await queryClient.setQueryData( queryKey, {
-			show_on_front: '',
-			page_on_front: 0,
-		} );
-
-		// Act.
-		await updateSettingsMutation.mutateAsync( { show_on_front: 'page', page_on_front: 1 } );
-
-		expect( apiFetch ).toHaveBeenCalledTimes( 1 );
-		expect( apiFetch ).toHaveBeenCalledWith( {
-			path: '/wp/v2/settings',
-			method: 'POST',
-			data: {
-				show_on_front: 'page',
-				page_on_front: 1,
-			},
-		} );
-
-		expect( queryClient.getQueryState( queryKey )?.isInvalidated ).toBe( true );
-	} );
-} );

package/src/hooks/__tests__/use-homepage.test.ts

@@ -1,42 +0,0 @@
-import { waitFor } from '@testing-library/react';
-import apiFetch from '@wordpress/api-fetch';
-import { useHomepage } from '../use-homepage';
-import { renderHookWithQuery } from 'test-utils';
-
-jest.mock( '@wordpress/api-fetch' );
-
-describe( '@elementor/site-settings/use-homepage', () => {
-	beforeEach( () => {
-		jest.mocked( apiFetch ).mockImplementation( () => Promise.resolve( [] ) );
-	} );
-
-	afterEach( () => {
-		jest.clearAllMocks();
-	} );
-
-	it( 'useHomepage hook should return homepage settings', async () => {
-		// Arrange.
-		const settings = {
-			show_on_front: 'page',
-			page_on_front: 1,
-		};
-		jest.mocked( apiFetch ).mockImplementation( () => Promise.resolve( settings ) );
-
-		// Act.
-		const { component } = renderHookWithQuery( () => useHomepage() );
-
-		// Assert.
-		const expectedPath = '/elementor/v1/site-navigation/homepage';
-
-		expect( apiFetch ).toHaveBeenCalledWith( {
-			path: expectedPath,
-		} );
-		expect( apiFetch ).toHaveBeenCalledTimes( 1 );
-
-		await waitFor( () => {
-			return component.result.current.isSuccess;
-		} );
-
-		expect( component.result.current.data ).toBe( settings );
-	} );
-} );

package/src/hooks/__tests__/use-post-actions.test.ts

@@ -1,89 +0,0 @@
-import apiFetch from '@wordpress/api-fetch';
-import { renderHookWithQuery } from 'test-utils';
-import { usePostActions } from '../use-posts-actions';
-import { postsQueryKey } from '../use-posts';
-
-jest.mock( '@wordpress/api-fetch' );
-
-describe( '@elementor/site-settings/use-post-actions', () => {
-	beforeEach( () => {
-		jest.mocked( apiFetch ).mockImplementation( () => Promise.resolve( {} ) );
-	} );
-
-	afterEach( () => {
-		jest.clearAllMocks();
-	} );
-
-	it( 'should run createPost from usePostActions hook', async () => {
-		// Arrange.
-		const { component, queryClient } = renderHookWithQuery( () => usePostActions( 'page' ) );
-		const { createPost } = component.result.current;
-
-		const queryKey = postsQueryKey( 'page' );
-		await queryClient.setQueryData( queryKey, {
-			posts: [],
-		} );
-
-		// Act.
-		await createPost.mutateAsync( { title: 'Page', status: 'publish' } );
-
-		expect( apiFetch ).toHaveBeenCalledTimes( 1 );
-		expect( apiFetch ).toHaveBeenCalledWith( {
-			path: '/wp/v2/pages',
-			method: 'POST',
-			data: {
-				title: 'Page',
-				status: 'publish',
-			},
-		} );
-
-		expect( queryClient.getQueryState( queryKey )?.isInvalidated ).toBe( true );
-	} );
-
-	it( 'should run updatePost from usePostActions hook', async () => {
-		// Arrange.
-		const { component, queryClient } = renderHookWithQuery( () => usePostActions( 'page' ) );
-		const { updatePost } = component.result.current;
-
-		const queryKey = postsQueryKey( 'page' );
-		await queryClient.setQueryData( queryKey, {
-			posts: [],
-		} );
-
-		// Act.
-		await updatePost.mutateAsync( { id: 1, title: 'Page' } );
-
-		expect( apiFetch ).toHaveBeenCalledTimes( 1 );
-		expect( apiFetch ).toHaveBeenCalledWith( {
-			path: '/wp/v2/pages/1',
-			method: 'POST',
-			data: {
-				title: 'Page',
-			},
-		} );
-
-		expect( queryClient.getQueryState( queryKey )?.isInvalidated ).toBe( true );
-	} );
-
-	it( 'should run deletePost from usePostActions hook', async () => {
-		// Arrange.
-		const { component, queryClient } = renderHookWithQuery( () => usePostActions( 'page' ) );
-		const { deletePost } = component.result.current;
-
-		const queryKey = postsQueryKey( 'page' );
-		await queryClient.setQueryData( queryKey, {
-			posts: [],
-		} );
-
-		// Act.
-		await deletePost.mutateAsync( 1 );
-
-		expect( apiFetch ).toHaveBeenCalledTimes( 1 );
-		expect( apiFetch ).toHaveBeenCalledWith( {
-			path: '/wp/v2/pages/1',
-			method: 'DELETE',
-		} );
-
-		expect( queryClient.getQueryState( queryKey )?.isInvalidated ).toBe( true );
-	} );
-} );

package/src/hooks/__tests__/use-posts.test.ts

@@ -1,93 +0,0 @@
-import { waitFor } from '@testing-library/react';
-import apiFetch from '@wordpress/api-fetch';
-import { renderHookWithQuery } from 'test-utils';
-import { usePosts } from '../use-posts';
-import { POST_PER_PAGE } from '../../api/post';
-
-const MOCK_POST_PER_PAGE = 2;
-
-jest.mock( '@wordpress/api-fetch', () => ( {
-	default: jest.fn( ( param ) => {
-		const pages = [
-			{ id: 1, type: 'page', title: { rendered: 'Home' }, status: 'draft', link: 'www.test.demo' },
-			{ id: 2, type: 'page', title: { rendered: 'About' }, status: 'publish', link: 'www.test.demo' },
-			{
-				id: 3,
-				type: 'page',
-				title: { rendered: 'Services' },
-				status: 'publish',
-				link: 'www.test.demo',
-				isHome: true,
-			},
-		];
-
-		const url = new URL( 'http:/example.com' + param.path );
-
-		const page = Number( url.searchParams.get( 'page' ) );
-
-		const startIndex = ( page - 1 ) * MOCK_POST_PER_PAGE;
-		const endIndex = startIndex + MOCK_POST_PER_PAGE;
-		const paginatedPages = pages.slice( startIndex, endIndex );
-
-		return {
-			json: () => Promise.resolve( paginatedPages ),
-			headers: {
-				get: ( header: string ) => {
-					switch ( header ) {
-						case 'x-wp-totalpages':
-							return Math.ceil( pages.length / MOCK_POST_PER_PAGE );
-						case 'x-wp-total':
-							return pages.length;
-						default:
-							return null;
-					}
-				},
-			},
-		};
-	} ),
-	__esModule: true,
-} ) );
-
-describe( '@elementor/site-settings/use-posts', () => {
-	afterEach( () => {
-		jest.clearAllMocks();
-	} );
-
-	it( 'usePosts hook should return posts list by type', async () => {
-		//Arrange
-		const pages = [
-			{ id: 1, type: 'page', title: { rendered: 'Home' }, status: 'draft', link: 'www.test.demo' },
-			{ id: 2, type: 'page', title: { rendered: 'About' }, status: 'publish', link: 'www.test.demo' },
-			{
-				id: 3,
-				type: 'page',
-				title: { rendered: 'Services' },
-				status: 'publish',
-				link: 'www.test.demo',
-				isHome: true,
-			},
-		];
-
-		// Act.
-		const { component } = renderHookWithQuery( () => usePosts( 'page' ) );
-
-		// Assert.
-		const expectedPath = `/wp/v2/pages?status=any&order=asc&page=1&per_page=${ POST_PER_PAGE }&_fields=${ encodeURIComponent(
-			'id,type,title,link,status,user_can'
-		) }`;
-
-		expect( apiFetch ).toHaveBeenCalledWith( {
-			parse: false,
-			path: expectedPath,
-		} );
-		expect( apiFetch ).toHaveBeenCalledTimes( 1 );
-
-		await waitFor( () => {
-			expect( component.result.current.isLoading ).toBeFalsy();
-		} );
-
-		expect( component.result.current.data.posts ).toContainEqual( pages[ 0 ] );
-		expect( component.result.current.data.posts ).toContainEqual( pages[ 1 ] );
-		expect( component.result.current.data.posts ).not.toContainEqual( pages[ 2 ] );
-	} );
-} );