fix: prevent value empty string on slider right panel (#3635)

* fix: prevent value empty string on slider right panel * chore: add build joi into test electron linter
janhq · Sep 12, 2024 · 2599f31 · 2599f31
1 parent 5217437
commit 2599f31
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 9 deletions.
diff --git a/.github/workflows/jan-electron-linter-and-test.yml b/.github/workflows/jan-electron-linter-and-test.yml
@@ -37,7 +37,6 @@ on:
       - '!README.md'
 
 jobs:
-
   base_branch_cov:
     runs-on: ubuntu-latest
     continue-on-error: true
@@ -54,6 +53,7 @@ jobs:
         run: |
           yarn
           yarn build:core
+          yarn build:joi
 
       - name: Run test coverage
         run: yarn test:coverage
@@ -364,10 +364,10 @@ jobs:
         uses: barecheck/code-coverage-action@v1
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
-          lcov-file: "./coverage/lcov.info"
-          base-lcov-file: "./lcov.info"
+          lcov-file: './coverage/lcov.info'
+          base-lcov-file: './lcov.info'
           send-summary-comment: true
-          show-annotations: "warning"
+          show-annotations: 'warning'
 
   test-on-ubuntu-pr-target:
     runs-on: [self-hosted, Linux, ubuntu-desktop]

diff --git a/web/containers/SliderRightPanel/index.test.tsx b/web/containers/SliderRightPanel/index.test.tsx
@@ -67,26 +67,39 @@ describe('SliderRightPanel', () => {
   it('calls onValueChanged with max value when input exceeds max', () => {
     defaultProps.onValueChanged = jest.fn()
     const { getByRole } = render(<SliderRightPanel {...defaultProps} />)
-    const input = getByRole('textbox')
+    const input = getByRole('textbox') as HTMLInputElement
     fireEvent.change(input, { target: { value: '150' } })
     fireEvent.focusOut(input)
     expect(defaultProps.onValueChanged).toHaveBeenCalledWith(100)
+    expect(input.value).toEqual('100')
   })
 
   it('calls onValueChanged with min value when input is below min', () => {
     defaultProps.onValueChanged = jest.fn()
     const { getByRole } = render(<SliderRightPanel {...defaultProps} />)
-    const input = getByRole('textbox')
+    const input = getByRole('textbox') as HTMLInputElement
     fireEvent.change(input, { target: { value: '0' } })
     fireEvent.focusOut(input)
     expect(defaultProps.onValueChanged).toHaveBeenCalledWith(0)
+    expect(input.value).toEqual('0')
+  })
+
+  it('calls onValueChanged when input value is empty string', () => {
+    defaultProps.onValueChanged = jest.fn()
+    const { getByRole } = render(<SliderRightPanel {...defaultProps} />)
+    const input = getByRole('textbox') as HTMLInputElement
+    fireEvent.change(input, { target: { value: '' } })
+    fireEvent.focusOut(input)
+    expect(defaultProps.onValueChanged).toHaveBeenCalledWith(0)
+    expect(input.value).toEqual('0')
   })
 
   it('does not call onValueChanged when input is invalid', () => {
     defaultProps.onValueChanged = jest.fn()
     const { getByRole } = render(<SliderRightPanel {...defaultProps} />)
-    const input = getByRole('textbox')
+    const input = getByRole('textbox') as HTMLInputElement
     fireEvent.change(input, { target: { value: 'invalid' } })
     expect(defaultProps.onValueChanged).not.toHaveBeenCalledWith(0)
+    expect(input.value).toEqual('50')
   })
 })
diff --git a/web/containers/SliderRightPanel/index.tsx b/web/containers/SliderRightPanel/index.tsx
@@ -80,7 +80,10 @@ const SliderRightPanel = ({
                   onValueChanged?.(Number(max))
                   setVal(max.toString())
                   setShowTooltip({ max: true, min: false })
-                } else if (Number(e.target.value) < Number(min)) {
+                } else if (
+                  Number(e.target.value) < Number(min) ||
+                  !e.target.value.length
+                ) {
                   onValueChanged?.(Number(min))
                   setVal(min.toString())
                   setShowTooltip({ max: false, min: true })
@@ -92,7 +95,10 @@ const SliderRightPanel = ({
                 // Which is incorrect
                 if (Number(e.target.value) > Number(max)) {
                   setVal(max.toString())
-                } else if (Number(e.target.value) < Number(min)) {
+                } else if (
+                  Number(e.target.value) < Number(min) ||
+                  !e.target.value.length
+                ) {
                   setVal(min.toString())
                 } else if (Number.isNaN(Number(e.target.value))) return