fix(app): fix app download progress bar not always showing 100% when …

…downloaded (#14382)

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()
   })
 })

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>