Merge pull request #3152 from RedisInsight/fe/feature/RI-5531_stream-entries

#RI-5531 - fix validation for adding stream entry

Author: rsergeenko

redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/add-stream-entity/AddStreamEntries.spec.tsx

@@ -1,13 +1,53 @@
 import React from 'react'
 import { mock } from 'ts-mockito'
-import { render, screen } from 'uiSrc/utils/test-utils'
+import { render, screen, act, fireEvent } from 'uiSrc/utils/test-utils'
 
+import { streamDataSelector } from 'uiSrc/slices/browser/stream'
 import AddStreamEntries, { Props } from './AddStreamEntries'
 
 const mockedProps = mock<Props>()
 
+jest.mock('uiSrc/slices/browser/stream', () => ({
+  ...jest.requireActual('uiSrc/slices/browser/stream'),
+  streamDataSelector: jest.fn().mockReturnValue({})
+}))
+
 describe('AddStreamEntries', () => {
   it('should render', () => {
     expect(render(<AddStreamEntries {...mockedProps} />)).toBeTruthy()
   })
+
+  it('should be valid by default', () => {
+    render(<AddStreamEntries {...mockedProps} />)
+
+    expect(screen.getByTestId('save-elements-btn')).not.toBeDisabled()
+  })
+
+  it('should properly validate/show error', async () => {
+    (streamDataSelector as jest.Mock).mockReturnValue({
+      lastGeneratedId: '100-0'
+    })
+    render(<AddStreamEntries {...mockedProps} />)
+
+    await act(() => {
+      fireEvent.change(screen.getByTestId('entryId'), { target: { value: '99-0' } })
+    })
+
+    expect(screen.getByTestId('stream-entry-error')).toHaveTextContent('Must be greater than the last ID')
+    expect(screen.getByTestId('save-elements-btn')).toBeDisabled()
+  })
+
+  it('should properly validate', async () => {
+    (streamDataSelector as jest.Mock).mockReturnValue({
+      lastGeneratedId: '100-0'
+    })
+    render(<AddStreamEntries {...mockedProps} />)
+
+    await act(() => {
+      fireEvent.change(screen.getByTestId('entryId'), { target: { value: '101-0' } })
+    })
+
+    expect(screen.queryByTestId('stream-entry-error')).not.toBeInTheDocument()
+    expect(screen.getByTestId('save-elements-btn')).not.toBeDisabled()
+  })
 })

redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/add-stream-entity/AddStreamEntries.tsx

@@ -22,7 +22,7 @@ export interface Props {
 
 const AddStreamEntries = (props: Props) => {
   const { closePanel } = props
-  const { lastEntry } = useSelector(streamDataSelector)
+  const { lastGeneratedId } = useSelector(streamDataSelector)
   const { name: keyName = '' } = useSelector(selectedKeyDataSelector) ?? { name: undefined }
   const { viewType } = useSelector(keysSelector)
   const { id: instanceId } = useSelector(connectedInstanceSelector)
@@ -49,7 +49,7 @@ const AddStreamEntries = (props: Props) => {
       return
     }
 
-    if (!lastEntry?.id) {
+    if (!lastGeneratedId) {
       setEntryIdError('')
       return
     }
@@ -59,7 +59,7 @@ const AddStreamEntries = (props: Props) => {
       return
     }
 
-    const [lastIdTimestamp, lastId] = lastEntry.id?.split('-')
+    const [lastIdTimestamp, lastId] = lastGeneratedId.split('-')
     const [idTimestamp, id] = entryID?.split('-')
 
     if (toNumber(idTimestamp) > toNumber(lastIdTimestamp)) {

redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/add-stream-entity/StreamEntryFields/StreamEntryFields.tsx

@@ -142,7 +142,7 @@ const StreamEntryFields = (props: Props) => {
           />
         </EuiFormRow>
         {!showEntryError && <span className={styles.timestampText}>Timestamp - Sequence Number or *</span>}
-        {showEntryError && <span className={styles.error}>{entryIdError}</span>}
+        {showEntryError && <span className={styles.error} data-testid="stream-entry-error">{entryIdError}</span>}
       </div>
 
       <div className={styles.fieldsWrapper}>