From c067cf9473fb87cebae9cb780604029cad94b947 Mon Sep 17 00:00:00 2001
From: Jamey Huffnagle <jamey.huffnagle@opentrons.com>
Date: Tue, 30 Jan 2024 12:07:54 -0500
Subject: [PATCH] fix(app): fix app download progress bar not always showing
 100% when downloaded (#14382)

---
 .../__tests__/UpdateAppModal.test.tsx         | 41 +++++++++++--------
 app/src/organisms/UpdateAppModal/index.tsx    |  2 +-
 2 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/app/src/organisms/UpdateAppModal/__tests__/UpdateAppModal.test.tsx b/app/src/organisms/UpdateAppModal/__tests__/UpdateAppModal.test.tsx
index 939755c8208..2e38c579982 100644
--- a/app/src/organisms/UpdateAppModal/__tests__/UpdateAppModal.test.tsx
+++ b/app/src/organisms/UpdateAppModal/__tests__/UpdateAppModal.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { when } from 'jest-when'
-import { fireEvent } from '@testing-library/react'
+import { screen, fireEvent } from '@testing-library/react'
 
 import { renderWithProviders } from '@opentrons/components'
 
@@ -71,21 +71,23 @@ describe('UpdateAppModal', () => {
   })
 
   it('renders update available title and release notes when update is available', () => {
-    const [{ getByText }] = render(props)
-    expect(getByText('Opentrons App Update Available')).toBeInTheDocument()
-    expect(getByText('this is a release')).toBeInTheDocument()
+    render(props)
+    expect(
+      screen.getByText('Opentrons App Update Available')
+    ).toBeInTheDocument()
+    expect(screen.getByText('this is a release')).toBeInTheDocument()
   })
   it('closes modal when "remind me later" button is clicked', () => {
     const closeModal = jest.fn()
-    const [{ getByText }] = render({ ...props, closeModal })
-    fireEvent.click(getByText('Remind me later'))
+    render({ ...props, closeModal })
+    fireEvent.click(screen.getByText('Remind me later'))
     expect(closeModal).toHaveBeenCalled()
   })
 
   it('renders a release notes link pointing to the Github releases page', () => {
-    const [{ getByText }] = render(props)
+    render(props)
 
-    const link = getByText('Release notes')
+    const link = screen.getByText('Release notes')
     expect(link).toHaveAttribute('href', RELEASE_NOTES_URL_BASE + '7.0.0')
   })
 
@@ -96,34 +98,37 @@ describe('UpdateAppModal', () => {
         name: 'Error',
       },
     } as ShellUpdateState)
-    const [{ getByText }] = render(props)
-    expect(getByText('Update Error')).toBeInTheDocument()
+    render(props)
+    expect(screen.getByText('Update Error')).toBeInTheDocument()
   })
   it('shows a download progress bar when downloading', () => {
     getShellUpdateState.mockReturnValue({
       downloading: true,
       downloadPercentage: 50,
     } as ShellUpdateState)
-    const [{ getByText, getByRole }] = render(props)
-    expect(getByText('Downloading update...')).toBeInTheDocument()
-    expect(getByRole('progressbar')).toBeInTheDocument()
+    render(props)
+    expect(screen.getByText('Downloading update...')).toBeInTheDocument()
+    expect(screen.getByRole('progressbar')).toBeInTheDocument()
   })
   it('renders download complete text when download is finished', () => {
     getShellUpdateState.mockReturnValue({
       downloading: false,
       downloaded: true,
     } as ShellUpdateState)
-    const [{ getByText, getByRole }] = render(props)
+    render(props)
     expect(
-      getByText('Download complete, restarting the app...')
+      screen.getByText('Download complete, restarting the app...')
     ).toBeInTheDocument()
-    expect(getByRole('progressbar')).toBeInTheDocument()
+    expect(screen.getByRole('progressbar')).toBeInTheDocument()
+    expect(getComputedStyle(screen.getByTestId('ProgressBar_Bar')).width).toBe(
+      '100%'
+    )
   })
   it('renders an error message when an error occurs', () => {
     getShellUpdateState.mockReturnValue({
       error: { name: 'Update Error' },
     } as ShellUpdateState)
-    const [{ getByTitle }] = render(props)
-    expect(getByTitle('Update Error')).toBeInTheDocument()
+    render(props)
+    expect(screen.getByTitle('Update Error')).toBeInTheDocument()
   })
 })
diff --git a/app/src/organisms/UpdateAppModal/index.tsx b/app/src/organisms/UpdateAppModal/index.tsx
index 55541173a84..867bd1be515 100644
--- a/app/src/organisms/UpdateAppModal/index.tsx
+++ b/app/src/organisms/UpdateAppModal/index.tsx
@@ -174,7 +174,7 @@ export function UpdateAppModal(props: UpdateAppModalProps): JSX.Element {
               {downloading ? t('download_update') : t('restarting_app')}
             </StyledText>
             <ProgressBar
-              percentComplete={downloadPercentage}
+              percentComplete={downloaded ? 100 : downloadPercentage}
               outerStyles={UPDATE_PROGRESS_BAR_STYLE}
             />
           </Flex>