From f72251c125a74d48e3ce1fa68698b058adb3987b Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Tue, 3 May 2022 17:49:42 +0200
Subject: [PATCH] Migrated AppUpdateBanner test to react testing library

---
 src/common/AppUpdateBanner.tsx       |  2 +-
 test/common/AppUpdateBanner.test.tsx | 38 ++++++++++------------------
 2 files changed, 14 insertions(+), 26 deletions(-)

diff --git a/src/common/AppUpdateBanner.tsx b/src/common/AppUpdateBanner.tsx
index 4c55229c..300679c7 100644
--- a/src/common/AppUpdateBanner.tsx
+++ b/src/common/AppUpdateBanner.tsx
@@ -24,7 +24,7 @@ export const AppUpdateBanner: FC<AppUpdateBannerProps> = ({ isOpen, toggle, forc
       <h4 className="mb-4">This app has just been updated!</h4>
       <p className="mb-0">
         Restart it to enjoy the new features.
-        <Button disabled={isUpdating} className="ms-2" color="secondary" size="sm" onClick={update}>
+        <Button role="button" disabled={isUpdating} className="ms-2" color="secondary" size="sm" onClick={update}>
           {!isUpdating && <>Restart now <FontAwesomeIcon icon={reloadIcon} className="ms-1" /></>}
           {isUpdating && <>Restarting...</>}
         </Button>
diff --git a/test/common/AppUpdateBanner.test.tsx b/test/common/AppUpdateBanner.test.tsx
index 22ae150e..8144be33 100644
--- a/test/common/AppUpdateBanner.test.tsx
+++ b/test/common/AppUpdateBanner.test.tsx
@@ -1,43 +1,31 @@
-import { shallow, ShallowWrapper } from 'enzyme';
-import { Button } from 'reactstrap';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { AppUpdateBanner } from '../../src/common/AppUpdateBanner';
-import { SimpleCard } from '../../src/utils/SimpleCard';
 
 describe('<AppUpdateBanner />', () => {
   const toggle = jest.fn();
   const forceUpdate = jest.fn();
-  let wrapper: ShallowWrapper;
 
-  beforeEach(() => {
-    wrapper = shallow(<AppUpdateBanner isOpen toggle={toggle} forceUpdate={forceUpdate} />);
-  });
+  beforeEach(() => render(<AppUpdateBanner isOpen toggle={toggle} forceUpdate={forceUpdate} />));
 
   afterEach(jest.clearAllMocks);
-  afterEach(() => wrapper?.unmount());
 
-  it('renders an alert with expected props', () => {
-    expect(wrapper.prop('className')).toEqual('app-update-banner');
-    expect(wrapper.prop('isOpen')).toEqual(true);
-    expect(wrapper.prop('toggle')).toEqual(toggle);
-    expect(wrapper.prop('tag')).toEqual(SimpleCard);
-    expect(wrapper.prop('color')).toEqual('secondary');
+  it('renders initial state', () => {
+    expect(screen.getByRole('heading')).toHaveTextContent('This app has just been updated!');
+    expect(screen.queryByText('Restarting...')).not.toBeInTheDocument();
+    expect(screen.getByText('Restart now')).not.toHaveAttribute('disabled');
   });
 
-  it('invokes toggle when alert is toggled', () => {
-    (wrapper.prop('toggle') as Function)();
-
+  it('invokes toggle when alert is closed', () => {
+    expect(toggle).not.toHaveBeenCalled();
+    fireEvent.click(screen.getByLabelText('Close'));
     expect(toggle).toHaveBeenCalled();
   });
 
-  it('triggers the update when clicking the button', () => {
-    expect(wrapper.find(Button).html()).toContain('Restart now');
-    expect(wrapper.find(Button).prop('disabled')).toEqual(false);
+  it('triggers the update when clicking the button', async () => {
     expect(forceUpdate).not.toHaveBeenCalled();
-
-    wrapper.find(Button).simulate('click');
-
-    expect(wrapper.find(Button).html()).toContain('Restarting...');
-    expect(wrapper.find(Button).prop('disabled')).toEqual(true);
+    fireEvent.click(screen.getByText(/^Restart now/));
     expect(forceUpdate).toHaveBeenCalled();
+    expect(await screen.findByText('Restarting...')).toBeInTheDocument();
+    expect(screen.queryByText(/^Restart now/)).not.toBeInTheDocument();
   });
 });