Skip to content

Update Gutenberg packages after v14.7.3 release #7375

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

Closed
github-actions wants to merge 8 commits into from
Closed

Update Gutenberg packages after v14.7.3 release #7375

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
34bdccb
Update Gutenberg package dependencies
ampprojectbot Dec 15, 2022
0aceb2a
Bump React and ReactDOM to 18.2.0
thelovekesh Dec 15, 2022
73a73c1
Bump react-test-renderer to 18.2.0
thelovekesh Dec 16, 2022
ab8faa5
Add @testing-library/react
thelovekesh Dec 15, 2022
e164511
Refactor test cases to implement `@testing-library/react`
thelovekesh Dec 15, 2022
1051a99
Update package-lock.json
thelovekesh Dec 16, 2022
2407c01
Update jest snapshots
thelovekesh Dec 16, 2022
0fe8217
Update events to use helpers and code-quality improvements
thelovekesh Dec 16, 2022
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
48 changes: 10 additions & 38 deletions .../block-validation/components/amp-document-status/test/amp-document-status-notification.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
/**
* External dependencies
*/
import { act } from 'react-dom/test-utils';
import { render, fireEvent } from '@testing-library/react';

/**
* WordPress dependencies
*/
import { render, unmountComponentAtNode } from '@wordpress/element';
import { useDispatch, useSelect } from '@wordpress/data';

/**
Expand All @@ -28,8 +27,6 @@ jest.mock('../../../hooks/use-errors-fetching-state-changes', () => ({
}));

describe('AMPDocumentStatusNotification', () => {
let container;

const openGeneralSidebar = jest.fn();
const closePublishSidebar = jest.fn();

Expand Down Expand Up @@ -65,18 +62,6 @@ describe('AMPDocumentStatusNotification', () => {
}));
});

beforeEach(() => {
// jest.clearAllMocks();
container = document.createElement('div');
document.body.appendChild(container);
});

afterEach(() => {
unmountComponentAtNode(container);
container.remove();
container = null;
});

it('renders only a toggle if AMP is disabled', () => {
setupHooks(
{},
Expand All @@ -86,9 +71,7 @@ describe('AMPDocumentStatusNotification', () => {
}
);

act(() => {
render(<AMPDocumentStatusNotification />, container);
});
const { container } = render(<AMPDocumentStatusNotification />);

expect(container.children).toHaveLength(1);
expect(container.innerHTML).toContain('Enable AMP');
Expand All @@ -103,9 +86,7 @@ describe('AMPDocumentStatusNotification', () => {
}
);

act(() => {
render(<AMPDocumentStatusNotification />, container);
});
const { container } = render(<AMPDocumentStatusNotification />);

expect(container.innerHTML).toContain('Enable AMP');
expect(
Expand All @@ -119,9 +100,7 @@ describe('AMPDocumentStatusNotification', () => {
isPostDirty: true,
});

act(() => {
render(<AMPDocumentStatusNotification />, container);
});
let { container } = render(<AMPDocumentStatusNotification />);

expect(container.innerHTML).toContain('Enable AMP');
expect(container.innerHTML).toContain('Content has changed.');
Expand All @@ -133,14 +112,13 @@ describe('AMPDocumentStatusNotification', () => {
maybeIsPostDirty: true,
});

act(() => {
render(<AMPDocumentStatusNotification />, container);
});
({ container } = render(<AMPDocumentStatusNotification />));

expect(container.innerHTML).toContain('Content may have changed.');

// Simulate button click.
container.querySelector('button').click();
fireEvent.click(container.querySelector('button'));

expect(openGeneralSidebar).toHaveBeenCalledTimes(1);
expect(closePublishSidebar).toHaveBeenCalledTimes(1);
});
Expand All @@ -150,9 +128,7 @@ describe('AMPDocumentStatusNotification', () => {
keptMarkupValidationErrorCount: 3,
});

act(() => {
render(<AMPDocumentStatusNotification />, container);
});
const { container } = render(<AMPDocumentStatusNotification />);

expect(container.innerHTML).toContain('Enable AMP');
expect(container.innerHTML).toContain(
Expand All @@ -169,9 +145,7 @@ describe('AMPDocumentStatusNotification', () => {
unreviewedValidationErrorCount: 1,
});

act(() => {
render(<AMPDocumentStatusNotification />, container);
});
const { container } = render(<AMPDocumentStatusNotification />);

expect(container.innerHTML).toContain('Enable AMP');
expect(container.innerHTML).toContain(
Expand All @@ -186,9 +160,7 @@ describe('AMPDocumentStatusNotification', () => {
it('renders a correct message if there are no errors', () => {
setupHooks();

act(() => {
render(<AMPDocumentStatusNotification />, container);
});
const { container } = render(<AMPDocumentStatusNotification />);

expect(container.innerHTML).toContain('Enable AMP');
expect(container.innerHTML).toContain(
Expand Down
25 changes: 4 additions & 21 deletions assets/src/block-validation/components/amp-toggle/test/amp-toggle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,7 @@
/**
* External dependencies
*/
import { act } from 'react-dom/test-utils';

/**
* WordPress dependencies
*/
import { render, unmountComponentAtNode } from '@wordpress/element';
import { render, fireEvent } from '@testing-library/react';

/**
* Internal dependencies
Expand All @@ -19,8 +14,6 @@ jest.mock('../../../hooks/use-amp-document-toggle', () => ({
}));

describe('AMPToggle', () => {
let container;

const toggleAMP = jest.fn();

function setupHooks(overrides) {
Expand All @@ -33,25 +26,14 @@ describe('AMPToggle', () => {

beforeEach(() => {
jest.clearAllMocks();

container = document.createElement('div');
document.body.appendChild(container);
});

afterEach(() => {
unmountComponentAtNode(container);
container.remove();
container = null;
});

it('renders a toggle that reacts to changes', () => {
setupHooks({
isAMPEnabled: true,
});

act(() => {
render(<AMPToggle />, container);
});
const { container } = render(<AMPToggle />);

expect(
container.querySelector('input[type="checkbox"]')
Expand All @@ -60,7 +42,8 @@ describe('AMPToggle', () => {
true
);

container.querySelector('input[type="checkbox"]').click();
fireEvent.click(container.querySelector('input[type="checkbox"]'));

expect(toggleAMP).toHaveBeenCalledTimes(1);
});
});
40 changes: 10 additions & 30 deletions assets/src/block-validation/components/amp-validation-status/test/revalidate-notification.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
/**
* External dependencies
*/
import { act } from 'react-dom/test-utils';
import { render, fireEvent } from '@testing-library/react';

/**
* WordPress dependencies
*/
import { render, unmountComponentAtNode } from '@wordpress/element';
import { useDispatch, useSelect } from '@wordpress/data';

/**
Expand All @@ -24,8 +23,6 @@ jest.mock('../../../hooks/use-errors-fetching-state-changes', () => ({
}));

describe('AMPRevalidateNotification', () => {
let container;

const autosave = jest.fn();
const savePost = jest.fn();

Expand All @@ -45,27 +42,16 @@ describe('AMPRevalidateNotification', () => {
});

beforeEach(() => {
container = document.createElement('div');
document.body.appendChild(container);

useErrorsFetchingStateChanges.mockImplementation(() => ({
isFetchingErrors: false,
fetchingErrorsMessage: '',
}));
});

afterEach(() => {
unmountComponentAtNode(container);
container.remove();
container = null;
});

it('does not render revalidate message if post is not dirty', () => {
setupUseSelect();

act(() => {
render(<AMPRevalidateNotification />, container);
});
const { container } = render(<AMPRevalidateNotification />);

expect(container.children).toHaveLength(0);
});
Expand All @@ -76,9 +62,7 @@ describe('AMPRevalidateNotification', () => {
fetchingErrorsMessage: 'Loading',
}));

act(() => {
render(<AMPRevalidateNotification />, container);
});
const { container } = render(<AMPRevalidateNotification />);

expect(
container.querySelector('.amp-spinner-container')
Expand All @@ -91,9 +75,7 @@ describe('AMPRevalidateNotification', () => {
isPostDirty: true,
});

act(() => {
render(<AMPRevalidateNotification />, container);
});
const { container } = render(<AMPRevalidateNotification />);

expect(container.innerHTML).toMatchSnapshot();
expect(container.children).toHaveLength(1);
Expand All @@ -103,7 +85,8 @@ describe('AMPRevalidateNotification', () => {
'Re-validate'
);

container.querySelector('button').click();
fireEvent.click(container.querySelector('button'));

expect(autosave).toHaveBeenCalledWith({ isPreview: true });
});

Expand All @@ -113,17 +96,16 @@ describe('AMPRevalidateNotification', () => {
isPostDirty: true,
});

act(() => {
render(<AMPRevalidateNotification />, container);
});
const { container } = render(<AMPRevalidateNotification />);

expect(container.innerHTML).toMatchSnapshot();
expect(container.innerHTML).toContain('has changed');
expect(container.querySelector('button').textContent).toContain(
'Save draft'
);

container.querySelector('button').click();
fireEvent.click(container.querySelector('button'));

expect(savePost).toHaveBeenCalledWith({ isPreview: true });
});

Expand All @@ -134,9 +116,7 @@ describe('AMPRevalidateNotification', () => {
maybeIsPostDirty: true,
});

act(() => {
render(<AMPRevalidateNotification />, container);
});
const { container } = render(<AMPRevalidateNotification />);

expect(container.innerHTML).toMatchSnapshot();
expect(container.children).toHaveLength(1);
Expand Down
Loading