Fix App test

This commit is contained in:
Alejandro Celaya 2025-04-05 11:41:50 +02:00
parent 0ec867b185
commit bd034c11b6
3 changed files with 13 additions and 8 deletions

View File

@ -66,6 +66,7 @@ const App: FCWithDeps<AppProps, AppDeps> = (
<div className="tw:h-full tw:pt-(--header-height)"> <div className="tw:h-full tw:pt-(--header-height)">
<div <div
data-testid="shlink-wrapper"
className={clsx( className={clsx(
'tw:min-h-full tw:pb-[calc(var(--footer-height)+var(--footer-margin))] tw:-mb-[calc(var(--footer-height)+var(--footer-margin))]', 'tw:min-h-full tw:pb-[calc(var(--footer-height)+var(--footer-margin))] tw:-mb-[calc(var(--footer-height)+var(--footer-margin))]',
{ 'tw:flex tw:items-center tw:pt-4': isHome }, { 'tw:flex tw:items-center tw:pt-4': isHome },

View File

@ -38,7 +38,7 @@ export const AppUpdateBanner: FC<AppUpdateBannerProps> = ({ isOpen, onClose, for
<Card.Body className="tw:flex tw:gap-4 tw:items-center tw:justify-between tw:max-md:flex-col"> <Card.Body className="tw:flex tw:gap-4 tw:items-center tw:justify-between tw:max-md:flex-col">
Restart it to enjoy the new features. Restart it to enjoy the new features.
<Button disabled={isUpdating} variant="secondary" solid onClick={update}> <Button disabled={isUpdating} variant="secondary" solid onClick={update}>
{!isUpdating && <>Restart now <FontAwesomeIcon icon={reloadIcon} className="ms-1" /></>} {!isUpdating && <>Restart now <FontAwesomeIcon icon={reloadIcon} /></>}
{isUpdating && <>Restarting...</>} {isUpdating && <>Restarting...</>}
</Button> </Button>
</Card.Body> </Card.Body>

View File

@ -54,13 +54,17 @@ describe('<App />', () => {
}); });
it.each([ it.each([
['/foo', 'shlink-wrapper'], ['/foo', false],
['/bar', 'shlink-wrapper'], ['/bar', false],
['/', 'shlink-wrapper d-flex align-items-center pt-3'], ['/', true],
])('renders expected classes on shlink-wrapper based on current pathname', async (pathname, expectedClasses) => { ])('renders expected classes on shlink-wrapper based on current pathname', async (pathname, isFlex) => {
const { container } = await setUp(pathname); await setUp(pathname);
const shlinkWrapper = container.querySelector('.shlink-wrapper'); const shlinkWrapper = screen.getByTestId('shlink-wrapper');
expect(shlinkWrapper).toHaveAttribute('class', expectedClasses); if (isFlex) {
expect(shlinkWrapper).toHaveClass('tw:flex');
} else {
expect(shlinkWrapper).not.toHaveClass('tw:flex');
}
}); });
}); });