Merge pull request #19989 from strapi/fix/create-webhook-button

fix: create webhooks on an empty list page
This commit is contained in:
Christian 2024-04-03 11:21:35 +02:00 committed by GitHub
commit a36def2419
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 41 additions and 3 deletions

View File

@ -229,7 +229,7 @@ const ListPage = () => {
colCount={5}
rowCount={numberOfWebhooks + 1}
footer={
<TFooter onClick={canCreate ? goTo('create') : undefined} icon={<Plus />}>
<TFooter onClick={goTo('create')} icon={<Plus />}>
{formatMessage({
id: 'Settings.webhooks.list.button.add',
defaultMessage: 'Create new webhook',
@ -383,7 +383,8 @@ const ListPage = () => {
<Button
variant="secondary"
startIcon={<Plus />}
onClick={() => (canCreate ? goTo('create') : {})}
disabled={!canCreate}
onClick={canCreate ? goTo('create') : undefined}
>
{formatMessage({
id: 'Settings.webhooks.list.button.add',

View File

@ -3,8 +3,9 @@ import React from 'react';
import { useRBAC } from '@strapi/helper-plugin';
import { fireEvent, waitForElementToBeRemoved } from '@testing-library/react';
import { mockData } from '@tests/mockData';
import { render, waitFor, server } from '@tests/utils';
import { render, waitFor, server, screen } from '@tests/utils';
import { rest } from 'msw';
import { useLocation } from 'react-router-dom';
import { ListPage } from '../ListPage';
@ -17,6 +18,12 @@ jest.mock('@strapi/helper-plugin', () => ({
useFocusWhenNavigate: jest.fn(),
}));
const LocationDisplay = () => {
const location = useLocation();
return <span data-testId="location">{location.pathname}</span>;
};
describe('Webhooks | ListPage', () => {
beforeEach(() => {
jest.clearAllMocks();
@ -148,4 +155,34 @@ describe('Webhooks | ListPage', () => {
expect(enableSwitches[0]).toHaveAttribute('aria-checked', 'false');
});
});
it('should allow to create a new webhook on empty state screen by clicking on the button', async () => {
server.use(
rest.get('/admin/webhooks', (req, res, ctx) => {
return res(
ctx.json({
data: [],
})
);
})
);
const { getByRole, findByText, user } = render(<ListPage />, {
renderOptions: {
wrapper({ children }) {
return (
<>
{children}
<LocationDisplay />
</>
);
},
},
});
await findByText('No webhooks found');
expect(screen.getByTestId('location')).not.toHaveTextContent('/create');
await user.click(getByRole('button', { name: 'Create new webhook' }));
await waitFor(() => expect(screen.getByTestId('location')).toHaveTextContent('/create'));
});
});