From bd034c11b69bcf0d74684705f13cd39f65685a48 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sat, 5 Apr 2025 11:41:50 +0200
Subject: [PATCH] Fix App test

---
 src/app/App.tsx                |  1 +
 src/common/AppUpdateBanner.tsx |  2 +-
 test/app/App.test.tsx          | 18 +++++++++++-------
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index ebf5f964..718124db 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -66,6 +66,7 @@ const App: FCWithDeps<AppProps, AppDeps> = (
 
       <div className="tw:h-full tw:pt-(--header-height)">
         <div
+          data-testid="shlink-wrapper"
           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:flex tw:items-center tw:pt-4': isHome },
diff --git a/src/common/AppUpdateBanner.tsx b/src/common/AppUpdateBanner.tsx
index 8562271c..e1717a32 100644
--- a/src/common/AppUpdateBanner.tsx
+++ b/src/common/AppUpdateBanner.tsx
@@ -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">
         Restart it to enjoy the new features.
         <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...</>}
         </Button>
       </Card.Body>
diff --git a/test/app/App.test.tsx b/test/app/App.test.tsx
index 19d692e2..bb1a49cf 100644
--- a/test/app/App.test.tsx
+++ b/test/app/App.test.tsx
@@ -54,13 +54,17 @@ describe('<App />', () => {
   });
 
   it.each([
-    ['/foo', 'shlink-wrapper'],
-    ['/bar', 'shlink-wrapper'],
-    ['/', 'shlink-wrapper d-flex align-items-center pt-3'],
-  ])('renders expected classes on shlink-wrapper based on current pathname', async (pathname, expectedClasses) => {
-    const { container } = await setUp(pathname);
-    const shlinkWrapper = container.querySelector('.shlink-wrapper');
+    ['/foo', false],
+    ['/bar', false],
+    ['/', true],
+  ])('renders expected classes on shlink-wrapper based on current pathname', async (pathname, isFlex) => {
+    await setUp(pathname);
+    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');
+    }
   });
 });