mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-01-03 23:07:26 +03:00
Code Issues Projects Releases Packages Wiki Activity

Simplified DeleteShortUrlModal so that it only requires writing 'delete'

Browse source
This commit is contained in:
Alejandro Celaya 2022-11-25 19:08:40 +01:00
parent b79dced185
commit 0bf859d485
2 changed files with 9 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/short-urls/helpers/DeleteShortUrlModal.tsx
View file

@ -15,6 +15,8 @@ interface DeleteShortUrlModalConnectProps extends ShortUrlModalProps {
resetDeleteShortUrl: () => void; resetDeleteShortUrl: () => void;
} }
const DELETION_PATTERN = 'delete';
export const DeleteShortUrlModal = ({ export const DeleteShortUrlModal = ({
shortUrl, shortUrl,
toggle, toggle,
@ -41,12 +43,12 @@ export const DeleteShortUrlModal = ({
<ModalBody> <ModalBody>
<p><b className="text-danger">Caution!</b> You are about to delete a short URL.</p> <p><b className="text-danger">Caution!</b> You are about to delete a short URL.</p>
<p>This action cannot be undone. Once you have deleted it, all the visits stats will be lost.</p> <p>This action cannot be undone. Once you have deleted it, all the visits stats will be lost.</p>
<p>Write <b>{shortUrl.shortCode}</b> to confirm deletion.</p> <p>Write <b>{DELETION_PATTERN}</b> to confirm deletion.</p>
<input <input
type="text" type="text"
className="form-control" className="form-control"
placeholder={`Insert the short code (${shortUrl.shortCode})`} placeholder={`Insert ${DELETION_PATTERN}`}
value={inputValue} value={inputValue}
onChange={(e) => setInputValue(e.target.value)} onChange={(e) => setInputValue(e.target.value)}
/> />
@ -62,7 +64,7 @@ export const DeleteShortUrlModal = ({
<button <button
type="submit" type="submit"
className="btn btn-danger" className="btn btn-danger"
disabled={inputValue !== shortUrl.shortCode || loading} disabled={inputValue !== DELETION_PATTERN || loading}
> >
{loading ? 'Deleting...' : 'Delete'} {loading ? 'Deleting...' : 'Delete'}
</button> </button>

10
test/short-urls/helpers/DeleteShortUrlModal.test.tsx
View file

@ -62,30 +62,28 @@ describe('<DeleteShortUrlModal />', () => {
}); });
it('enables submit button when proper short code is provided', async () => { it('enables submit button when proper short code is provided', async () => {
const shortCode = 'abc123';
const { user } = setUp({ const { user } = setUp({
loading: false, loading: false,
error: false, error: false,
shortCode, shortCode: 'abc123',
}); });
const getDeleteBtn = () => screen.getByRole('button', { name: 'Delete' }); const getDeleteBtn = () => screen.getByRole('button', { name: 'Delete' });
expect(getDeleteBtn()).toHaveAttribute('disabled'); expect(getDeleteBtn()).toHaveAttribute('disabled');
await user.type(screen.getByPlaceholderText(/^Insert the short code/), shortCode); await user.type(screen.getByPlaceholderText('Insert delete'), 'delete');
expect(getDeleteBtn()).not.toHaveAttribute('disabled'); expect(getDeleteBtn()).not.toHaveAttribute('disabled');
}); });
it('tries to delete short URL when form is submit', async () => { it('tries to delete short URL when form is submit', async () => {
const shortCode = 'abc123';
const { user } = setUp({ const { user } = setUp({
loading: false, loading: false,
error: false, error: false,
deleted: true, deleted: true,
shortCode, shortCode: 'abc123',
}); });
expect(deleteShortUrl).not.toHaveBeenCalled(); expect(deleteShortUrl).not.toHaveBeenCalled();
await user.type(screen.getByPlaceholderText(/^Insert the short code/), shortCode); await user.type(screen.getByPlaceholderText('Insert delete'), 'delete');
await user.click(screen.getByRole('button', { name: 'Delete' })); await user.click(screen.getByRole('button', { name: 'Delete' }));
expect(deleteShortUrl).toHaveBeenCalledTimes(1); expect(deleteShortUrl).toHaveBeenCalledTimes(1);
await waitFor(() => expect(shortUrlDeleted).toHaveBeenCalledTimes(1)); await waitFor(() => expect(shortUrlDeleted).toHaveBeenCalledTimes(1));