Skip to content

Tests: Add Jest unit tests for Block V3 React components #331

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
priethor merged 1 commit into from
Dec 31, 2025
Merged

Tests: Add Jest unit tests for Block V3 React components #331

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
410 changes: 410 additions & 0 deletions tests/js/blocks-v3/block-edit.test.js
View file
Open in desktop

Large diffs are not rendered by default.

508 changes: 508 additions & 0 deletions tests/js/blocks-v3/block-form.test.js
View file
Open in desktop

Large diffs are not rendered by default.

168 changes: 168 additions & 0 deletions tests/js/blocks-v3/block-placeholder.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,168 @@
/**
* Unit tests for BlockPlaceholder component
* Tests the placeholder UI shown when a block has no preview HTML
*/

import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';

import { BlockPlaceholder } from '../../../assets/src/js/pro/blocks-v3/components/block-placeholder';

// Mock the acf global object
global.acf = {
__: jest.fn( ( key ) => {
const translations = {
'Edit Block': 'Edit Block',
};
return translations[ key ] || key;
} ),
};

describe( 'BlockPlaceholder Component', () => {
beforeEach( () => {
jest.clearAllMocks();
} );

test( 'renders with block label', () => {
const mockSetModalOpen = jest.fn();

render(
<BlockPlaceholder
blockLabel="Test Block"
setBlockFormModalOpen={ mockSetModalOpen }
/>
);

expect( screen.getByTestId( 'placeholder' ) ).toBeInTheDocument();
expect( screen.getByTestId( 'placeholder-label' ) ).toHaveTextContent(
'Test Block'
);
} );

test( 'renders with instructions when provided', () => {
const mockSetModalOpen = jest.fn();

render(
<BlockPlaceholder
blockLabel="Test Block"
setBlockFormModalOpen={ mockSetModalOpen }
instructions="Please fill in the block fields"
/>
);

expect(
screen.getByTestId( 'placeholder-instructions' )
).toHaveTextContent( 'Please fill in the block fields' );
} );

test( 'does not render instructions when not provided', () => {
const mockSetModalOpen = jest.fn();

render(
<BlockPlaceholder
blockLabel="Test Block"
setBlockFormModalOpen={ mockSetModalOpen }
/>
);

expect(
screen.queryByTestId( 'placeholder-instructions' )
).not.toBeInTheDocument();
} );

test( 'renders Edit Block button', () => {
const mockSetModalOpen = jest.fn();

render(
<BlockPlaceholder
blockLabel="Test Block"
setBlockFormModalOpen={ mockSetModalOpen }
/>
);

const button = screen.getByRole( 'button' );
expect( button ).toHaveTextContent( 'Edit Block' );
} );

test( 'calls setBlockFormModalOpen with true when Edit Block button is clicked', () => {
const mockSetModalOpen = jest.fn();

render(
<BlockPlaceholder
blockLabel="Test Block"
setBlockFormModalOpen={ mockSetModalOpen }
/>
);

const button = screen.getByRole( 'button' );
fireEvent.click( button );

expect( mockSetModalOpen ).toHaveBeenCalledTimes( 1 );
expect( mockSetModalOpen ).toHaveBeenCalledWith( true );
} );

test( 'renders icon in placeholder', () => {
const mockSetModalOpen = jest.fn();

render(
<BlockPlaceholder
blockLabel="Test Block"
setBlockFormModalOpen={ mockSetModalOpen }
/>
);

expect( screen.getByTestId( 'icon' ) ).toBeInTheDocument();
} );

test( 'renders button with primary variant', () => {
const mockSetModalOpen = jest.fn();

render(
<BlockPlaceholder
blockLabel="Test Block"
setBlockFormModalOpen={ mockSetModalOpen }
/>
);

const button = screen.getByRole( 'button' );
expect( button ).toHaveAttribute( 'data-variant', 'primary' );
} );

test( 'uses acf.__ for translations', () => {
const mockSetModalOpen = jest.fn();

render(
<BlockPlaceholder
blockLabel="Test Block"
setBlockFormModalOpen={ mockSetModalOpen }
/>
);

expect( global.acf.__ ).toHaveBeenCalledWith( 'Edit Block' );
} );

test( 'renders with different block labels', () => {
const mockSetModalOpen = jest.fn();
const testCases = [
'Testimonial Block',
'Image Gallery',
'Contact Form',
'Hero Section',
];

testCases.forEach( ( label ) => {
const { unmount } = render(
<BlockPlaceholder
blockLabel={ label }
setBlockFormModalOpen={ mockSetModalOpen }
/>
);

expect(
screen.getByTestId( 'placeholder-label' )
).toHaveTextContent( label );
unmount();
} );
} );
} );
135 changes: 135 additions & 0 deletions tests/js/blocks-v3/block-preview.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,135 @@
/**
* Unit tests for BlockPreview component
* Tests the simple wrapper component that renders block preview HTML with block props
*/

/* global HTMLDivElement */

import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';

import { BlockPreview } from '../../../assets/src/js/pro/blocks-v3/components/block-preview';

describe( 'BlockPreview Component', () => {
test( 'renders children inside a div with block props', () => {
const blockProps = {
className: 'acf-block-preview',
'data-testid': 'block-preview',
};

render(
<BlockPreview blockProps={ blockProps }>
<p>Preview content</p>
</BlockPreview>
);

const previewElement = screen.getByTestId( 'block-preview' );
expect( previewElement ).toBeInTheDocument();
expect( previewElement ).toHaveClass( 'acf-block-preview' );
expect( previewElement ).toContainHTML( '<p>Preview content</p>' );
} );

test( 'renders multiple children correctly', () => {
const blockProps = {
'data-testid': 'block-preview',
};

render(
<BlockPreview blockProps={ blockProps }>
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</BlockPreview>
);

const previewElement = screen.getByTestId( 'block-preview' );
expect( previewElement.querySelectorAll( 'p' ) ).toHaveLength( 2 );
expect( screen.getByText( 'Title' ) ).toBeInTheDocument();
} );

test( 'renders empty when no children provided', () => {
const blockProps = {
'data-testid': 'block-preview',
};

render( <BlockPreview blockProps={ blockProps } /> );

const previewElement = screen.getByTestId( 'block-preview' );
expect( previewElement ).toBeEmptyDOMElement();
} );

test( 'passes through all block props to the wrapper div', () => {
const blockProps = {
className: 'custom-class',
id: 'block-123',
'data-block': 'acf/test-block',
'data-testid': 'block-preview',
style: { backgroundColor: 'red' },
};

render(
<BlockPreview blockProps={ blockProps }>
<span>Content</span>
</BlockPreview>
);

const previewElement = screen.getByTestId( 'block-preview' );
expect( previewElement ).toHaveClass( 'custom-class' );
expect( previewElement ).toHaveAttribute( 'id', 'block-123' );
expect( previewElement ).toHaveAttribute(
'data-block',
'acf/test-block'
);
expect( previewElement ).toHaveStyle( { backgroundColor: 'red' } );
} );

test( 'renders text content correctly', () => {
const blockProps = {
'data-testid': 'block-preview',
};

render(
<BlockPreview blockProps={ blockProps }>
Plain text content
</BlockPreview>
);

expect( screen.getByText( 'Plain text content' ) ).toBeInTheDocument();
} );

test( 'renders nested components correctly', () => {
const blockProps = {
'data-testid': 'block-preview',
};

const NestedComponent = () => (
<div data-testid="nested">Nested content</div>
);

render(
<BlockPreview blockProps={ blockProps }>
<NestedComponent />
</BlockPreview>
);

expect( screen.getByTestId( 'nested' ) ).toBeInTheDocument();
expect( screen.getByText( 'Nested content' ) ).toBeInTheDocument();
} );

test( 'handles ref in block props', () => {
const ref = React.createRef();
const blockProps = {
ref,
'data-testid': 'block-preview',
};

render(
<BlockPreview blockProps={ blockProps }>
<span>Content</span>
</BlockPreview>
);

expect( ref.current ).toBeInstanceOf( HTMLDivElement );
} );
} );
Loading
Loading