@elementor/editor-site-navigation 0.18.0 → 0.18.2

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.18.2](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.18.1...@elementor/editor-site-navigation@0.18.2) (2023-08-16)
+
+**Note:** Version bump only for package @elementor/editor-site-navigation
+
+
+
+
+
+## [0.18.1](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.18.0...@elementor/editor-site-navigation@0.18.1) (2023-08-02)
+
+**Note:** Version bump only for package @elementor/editor-site-navigation
+
+
+
+
+
 # [0.18.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.17.1...@elementor/editor-site-navigation@0.18.0) (2023-08-02)
 
 

package/README.md

@@ -1,7 +1,6 @@
 # Editor Site Navigation
 
-> **Warning**
-> 
+> [!WARNING]
 > This package is under development and not ready for production use.
 
 ## Code examples

package/dist/index.js

@@ -128,6 +128,7 @@ function DocTypeChip({ postType, docType, label }) {
       size: "medium",
       variant: "standard",
       label,
+      "data-value": docType,
       color,
       icon: /* @__PURE__ */ React2.createElement(Icon, null),
       sx: { ml: 3 }

package/dist/index.mjs

@@ -110,6 +110,7 @@ function DocTypeChip({ postType, docType, label }) {
       size: "medium",
       variant: "standard",
       label,
+      "data-value": docType,
       color,
       icon: /* @__PURE__ */ React2.createElement(Icon, null),
       sx: { ml: 3 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@elementor/editor-site-navigation",
-	"version": "0.18.0",
+	"version": "0.18.2",
 	"private": false,
 	"author": "Elementor Team",
 	"homepage": "https://elementor.com/",
@@ -32,9 +32,9 @@
 		"dev": "tsup --config=../../tsup.dev.ts"
 	},
 	"dependencies": {
-		"@elementor/editor-app-bar": "^0.7.0",
+		"@elementor/editor-app-bar": "^0.7.1",
 		"@elementor/editor-documents": "^0.8.3",
-		"@elementor/editor-panels": "^0.2.0",
+		"@elementor/editor-panels": "^0.2.1",
 		"@elementor/env": "^0.2.0",
 		"@elementor/icons": "^0.7.0",
 		"@elementor/query": "^0.1.1",
@@ -49,5 +49,5 @@
 	"elementor": {
 		"type": "extension"
 	},
-	"gitHead": "2509694411a0750d4fb99c253ad21cb9d950686f"
+	"gitHead": "2b3966576de0a266d74564706aa011833fccda8f"
 }

package/src/components/panel/posts-list/__tests__/post-list-item.test.tsx

@@ -1,9 +1,20 @@
 import * as React from 'react';
-import { act, screen } from '@testing-library/react';
+import { act, fireEvent, screen, waitFor } from '@testing-library/react';
 import { Post } from '../../../../types';
 import PostListItem from '../post-list-item';
 import { useNavigateToDocument } from '@elementor/editor-documents';
 import { renderWithQuery } from 'test-utils';
+import { PostListContextProvider } from '../../../../contexts/post-list-context';
+
+const mockMutateAsync = jest.fn();
+jest.mock( '../../../../hooks/use-posts-actions', () => ( {
+	usePostActions: () => ( {
+		updatePost: {
+			mutateAsync: mockMutateAsync,
+			isLoading: false,
+		},
+	} ),
+} ) );
 
 jest.mock( '@elementor/editor-documents', () => ( {
 	useActiveDocument: jest.fn(),
@@ -122,4 +133,59 @@ describe( '@elementor/editor-site-navigation - PostListItem', () => {
 		expect( navigateToDocument ).toHaveBeenCalledTimes( 1 );
 		expect( navigateToDocument ).toHaveBeenCalledWith( id );
 	} );
+
+	it( 'should put the list item in edit mode, when "Rename" action is clicked', () => {
+		// Arrange.
+		const post: Post = {
+			id: 10,
+			title: {
+				rendered: 'Test Page',
+			},
+			status: 'publish',
+			type: 'page',
+			link: 'https://example.local/test-page',
+		};
+
+		renderWithQuery(
+			<PostListContextProvider type={ 'page' }>
+				<PostListItem post={ post } />
+			</PostListContextProvider>
+		);
+
+		// Act #1 - enter edit mode.
+		const buttons = screen.getAllByRole( 'button' );
+		fireEvent.click( buttons[ 1 ] ); // Button to open the actions' menu of the post.
+
+		const renameButton = screen.getByRole( 'button', { name: 'Rename' } );
+		fireEvent.click( renameButton );
+
+		// Assert.
+		waitFor( () => {
+			expect( renameButton ).not.toBeInTheDocument();
+		} ).then();
+
+		const input = screen.getByRole( 'textbox' );
+
+		expect( input ).toBeInTheDocument();
+		expect( input ).toHaveValue( 'Test Page' );
+
+		// Act #2 - rename and reset edit mode.
+		fireEvent.change( input, { target: { value: 'Renamed Title' } } );
+		fireEvent.blur( input );
+
+		// Assert.
+		waitFor( () => {
+			expect( input ).toHaveAttribute( 'aria-disabled', 'true' );
+		} ).then();
+
+		expect( mockMutateAsync ).toHaveBeenCalledTimes( 1 );
+
+		waitFor( () => {
+			expect( input ).not.toBeInTheDocument();
+		} ).then();
+
+		waitFor( () => {
+			expect( screen.getByText( 'Renamed Title' ) ).toBeInTheDocument();
+		} ).then();
+	} );
 } );

package/src/components/panel/posts-list/__tests__/posts-collapsible-list.test.tsx

@@ -1,7 +1,22 @@
 import * as React from 'react';
-import { screen } from '@testing-library/react';
+import { fireEvent, screen, waitFor } from '@testing-library/react';
 import PostsCollapsibleList from '../posts-collapsible-list';
 import { renderWithQuery } from 'test-utils';
+import { PostListContextProvider } from '../../../../contexts/post-list-context';
+
+const mockMutateAsync = jest.fn();
+jest.mock( '../../../../hooks/use-posts-actions', () => ( {
+	usePostActions: () => ( {
+		createPost: {
+			mutateAsync: mockMutateAsync,
+			isLoading: false,
+		},
+		duplicatePost: {
+			mutateAsync: mockMutateAsync,
+			isLoading: false,
+		},
+	} ),
+} ) );
 
 jest.mock( '../../../../hooks/use-posts', () => ( {
 	__esModule: true,
@@ -66,4 +81,69 @@ describe( '@elementor/editor-site-navigation - PostsCollapsibleList', () => {
 		expect( items[ 2 ] ).toHaveTextContent( 'About' );
 		expect( items[ 2 ] ).toHaveTextContent( '(draft)' );
 	} );
+
+	it( 'should create a new post after clicking "Add New" button', async () => {
+		// Arrange.
+		renderWithQuery(
+			<PostListContextProvider type={ 'page' }>
+				<PostsCollapsibleList isOpenByDefault={ true } />
+			</PostListContextProvider>
+		);
+
+		// Act.
+		const addNewButton = screen.getByRole( 'button', { name: 'Add New' } );
+		fireEvent.click( addNewButton );
+
+		const input = screen.getByRole( 'textbox' );
+
+		if ( ! input || ! ( input instanceof HTMLInputElement ) ) {
+			throw new Error( 'No input field found.' );
+		}
+
+		expect( input ).toHaveValue( 'New Page' );
+
+		fireEvent.change( input, { target: { value: 'New Page Title' } } );
+		fireEvent.blur( input );
+
+		// Assert.
+		waitFor( () => {
+			expect( input ).toHaveAttribute( 'aria-disabled', 'true' );
+		} ).then();
+
+		expect( mockMutateAsync ).toHaveBeenCalledTimes( 1 );
+
+		waitFor( () => {
+			expect( input ).not.toBeInTheDocument();
+		} ).then();
+
+		waitFor( () => {
+			expect( screen.getByText( 'New Page Title' ) ).toBeInTheDocument();
+		} ).then();
+	} );
+
+	it( 'should append a new list item in edit mode, when "Duplicate" action is clicked', () => {
+		// Arrange.
+		renderWithQuery(
+			<PostListContextProvider type={ 'page' }>
+				<PostsCollapsibleList isOpenByDefault={ true } />
+			</PostListContextProvider>
+		);
+
+		// Act.
+		const buttons = screen.getAllByRole( 'button' );
+		fireEvent.click( buttons[ 3 ] ); // Button to open the actions' menu of the first post.
+
+		const duplicateButton = screen.getByRole( 'button', { name: 'Duplicate' } );
+		fireEvent.click( duplicateButton );
+
+		// Assert.
+		waitFor( () => {
+			expect( duplicateButton ).not.toBeInTheDocument();
+		} ).then();
+
+		const input = screen.getByRole( 'textbox' );
+
+		expect( input ).toBeInTheDocument();
+		expect( input ).toHaveValue( 'Home copy' );
+	} );
 } );

package/src/components/top-bar/chip-doc-type.tsx

@@ -22,6 +22,7 @@ export default function DocTypeChip( { postType, docType, label }: Props ) {
 			size="medium"
 			variant="standard"
 			label={ label }
+			data-value={ docType }
 			color={ color }
 			icon={ <Icon /> }
 			sx={ { ml: 3 } }