Fixed DeleteShortUrlModal being removed from the DOM before CSS transition finished

This commit is contained in:
Alejandro Celaya
2022-11-22 19:39:07 +01:00
parent bc2c945fee
commit d21758c410
6 changed files with 36 additions and 23 deletions

View File

@@ -1,4 +1,4 @@
import { screen } from '@testing-library/react';
import { screen, waitFor } from '@testing-library/react';
import { Mock } from 'ts-mockery';
import { DeleteShortUrlModal } from '../../../src/short-urls/helpers/DeleteShortUrlModal';
import { ShortUrl } from '../../../src/short-urls/data';
@@ -12,15 +12,17 @@ describe('<DeleteShortUrlModal />', () => {
shortCode: 'abc123',
longUrl: 'https://long-domain.com/foo/bar',
});
const deleteShortUrl = jest.fn();
const deleteShortUrl = jest.fn().mockResolvedValue(undefined);
const toggle = jest.fn();
const setUp = (shortUrlDeletion: Partial<ShortUrlDeletion>) => renderWithEvents(
<DeleteShortUrlModal
isOpen
shortUrl={shortUrl}
shortUrlDeletion={Mock.of<ShortUrlDeletion>(shortUrlDeletion)}
deleteShortUrl={deleteShortUrl}
toggle={() => {}}
resetDeleteShortUrl={() => {}}
shortUrlDeleted={jest.fn()}
toggle={toggle}
resetDeleteShortUrl={jest.fn()}
/>,
);
@@ -81,5 +83,6 @@ describe('<DeleteShortUrlModal />', () => {
await user.type(screen.getByPlaceholderText(/^Insert the short code/), shortCode);
await user.click(screen.getByRole('button', { name: 'Delete' }));
expect(deleteShortUrl).toHaveBeenCalledTimes(1);
await waitFor(() => expect(toggle).toHaveBeenCalledTimes(1));
});
});

View File

@@ -3,7 +3,7 @@ import {
listShortUrls as listShortUrlsCreator,
shortUrlsListReducerCreator,
} from '../../../src/short-urls/reducers/shortUrlsList';
import { deleteShortUrl as deleteShortUrlCreator } from '../../../src/short-urls/reducers/shortUrlDeletion';
import { shortUrlDeleted } from '../../../src/short-urls/reducers/shortUrlDeletion';
import { ShlinkPaginator, ShlinkShortUrlsResponse } from '../../../src/api/types';
import { createShortUrl as createShortUrlCreator } from '../../../src/short-urls/reducers/shortUrlCreation';
import { editShortUrl as editShortUrlCreator } from '../../../src/short-urls/reducers/shortUrlEdition';
@@ -18,8 +18,7 @@ describe('shortUrlsListReducer', () => {
const listShortUrls = listShortUrlsCreator(buildShlinkApiClient);
const editShortUrl = editShortUrlCreator(buildShlinkApiClient);
const createShortUrl = createShortUrlCreator(buildShlinkApiClient);
const deleteShortUrl = deleteShortUrlCreator(buildShlinkApiClient);
const { reducer } = shortUrlsListReducerCreator(listShortUrls, editShortUrl, createShortUrl, deleteShortUrl);
const { reducer } = shortUrlsListReducerCreator(listShortUrls, editShortUrl, createShortUrl);
afterEach(jest.clearAllMocks);
@@ -59,7 +58,7 @@ describe('shortUrlsListReducer', () => {
error: false,
};
expect(reducer(state, { type: deleteShortUrl.fulfilled.toString(), payload: { shortCode } })).toEqual({
expect(reducer(state, { type: shortUrlDeleted.toString(), payload: { shortCode } })).toEqual({
shortUrls: {
data: [{ shortCode, domain: 'example.com' }, { shortCode: 'foo' }],
pagination: { totalItems: 9 },