test: Decimal support Progress Table Cell Type h2oai#824

modhurimaroy · Dec 13, 2023 · 29b4010 · 29b4010
1 parent 7887ef6
commit 29b4010
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/ui/src/progress_table_cell_type.test.tsx b/ui/src/progress_table_cell_type.test.tsx
@@ -32,4 +32,17 @@ describe('ProgressTableCellType.tsx', () => {
  const { queryByTestId } = render(<XProgressTableCellType model={progressCellProps} progress={progress} />)
  expect(queryByTestId(name)).toBeInTheDocument()
  })
+
+ it('Renders decimal values with correct precision ', () => {
+ const {getByText} = render(<XProgressTableCellType model={progressCellProps} progress={progress} decimals={true}/>)
+ const expectedTextDecimalTrue = `${Math.round(progress * 10000) / 100}%`
+ expect(getByText(expectedTextDecimalTrue)).toBeInTheDocument()
+ })
+
+ it('Renders decimal values with correct precision ', () => {
+ const {getByText} = render(<XProgressTableCellType model={progressCellProps} progress={progress} decimals={false}/>)
+ const expectedTextDecimalFalse = `${Math.round(progress * 100)}%`
+ expect(getByText(expectedTextDecimalFalse)).toBeInTheDocument()
+ })
+
 })
diff --git a/ui/src/progress_table_cell_type.tsx b/ui/src/progress_table_cell_type.tsx
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import * as Fluent from '@fluentui/react'
-import { F, S } from './core'
+import { F, S, B } from './core'
 import React from 'react'
 import { stylesheet } from 'typestyle'
 import { ProgressArc } from './parts/progress_arc'
@@ -46,11 +46,17 @@ export interface ProgressTableCellType {
  name?: S
 }
 
-export const XProgressTableCellType = ({ model: m, progress }: { model: ProgressTableCellType, progress: F }) => (
+export const XProgressTableCellType = ({ model: m, progress, decimals }: { model: ProgressTableCellType, progress: F, decimals?: B }) => (
  <div data-test={m.name} className={css.container}>
  <ProgressArc thickness={2} color={cssVar(m.color || '$red')} value={progress} />
  <Fluent.Stack horizontalAlign='center' verticalAlign='center' className={clas(css.percentContainer, 'wave-s12')}>
- <div className={css.percent}>{`${Math.round(progress * 100)}%`}</div>
+ <div className={css.percent}>
+ {decimals ? (
+ `${Math.round(progress *10000)/ 100}%`
+ ) : (
+ `${Math.round(progress * 100)}%`
+ )}
+ </div>
  </Fluent.Stack>
  </div >
 )