fix: add new poll option only when all of the current options are filled (#1532)

Currently the options are added when the last option has some text. But
when the new option added is reordered, there is no way to add a new
option. To improve this, the new behaviour is to add new option when all
of the option fields are filled.

Author: khushal87

src/messageComposer/middleware/pollComposer/state.ts

@@ -116,24 +116,26 @@ export const pollCompositionStateProcessors: Partial<
     const { index, text } = value;
     const prevOptions = data.options || [];
 
-    const shouldAddEmptyOption =
-      prevOptions.length < MAX_POLL_OPTIONS &&
-      (!prevOptions || (prevOptions.slice(index + 1).length === 0 && !!text));
-
     const shouldRemoveOption =
       prevOptions && prevOptions.slice(index + 1).length > 0 && !text;
 
     const optionListHead = prevOptions.slice(0, index);
-    const optionListTail = shouldAddEmptyOption
-      ? [{ id: generateUUIDv4(), text: '' }]
-      : prevOptions.slice(index + 1);
+    const optionListTail = prevOptions.slice(index + 1);
 
     const newOptions = [
       ...optionListHead,
       ...(shouldRemoveOption ? [] : [{ ...prevOptions[index], text }]),
       ...optionListTail,
     ];
 
+    const shouldAddNewOption =
+      prevOptions.length < MAX_POLL_OPTIONS &&
+      !newOptions.some((option) => !option.text.trim());
+
+    if (shouldAddNewOption) {
+      newOptions.push({ id: generateUUIDv4(), text: '' });
+    }
+
     return { options: newOptions };
   },
 };

test/unit/MessageComposer/middleware/pollComposer/state.test.ts

@@ -182,12 +182,14 @@ describe('PollComposerStateMiddleware', () => {
       expect(result.status).toBeUndefined;
     });
 
-    it('should add a new empty option when the last option is filled', async () => {
+    it('should add a new empty option when the all the options are filled', async () => {
       const stateMiddleware = setup();
       const result = await stateMiddleware.handlers.handleFieldChange(
         setupHandlerParams({
           nextState: { ...getInitialState() },
-          previousState: { ...getInitialState() },
+          previousState: {
+            ...getInitialState(),
+          },
           targetFields: {
             options: {
               index: 0,
@@ -199,7 +201,54 @@ describe('PollComposerStateMiddleware', () => {
 
       expect(result.state.nextState.data.options.length).toBe(2);
       expect(result.state.nextState.data.options[0].text).toBe('Option 1');
-      expect(result.state.nextState.data.options[1].text).toBe('');
+      expect(result.state.nextState.data.options[1].text).toEqual('');
+
+      expect(result.status).toBeUndefined;
+    });
+
+    it('should reorder options and add a new empty option when all the options are filled', async () => {
+      const stateMiddleware = setup();
+
+      const reOrderedOptions = [
+        {
+          id: 'option-2',
+          text: '',
+        },
+        {
+          id: 'option-1',
+          text: 'Option 1',
+        },
+      ];
+
+      const result = await stateMiddleware.handlers.handleFieldChange(
+        setupHandlerParams({
+          nextState: {
+            ...getInitialState(),
+            data: {
+              ...getInitialState().data,
+              options: reOrderedOptions,
+            },
+          },
+          previousState: {
+            ...getInitialState(),
+            data: {
+              ...getInitialState().data,
+              options: reOrderedOptions,
+            },
+          },
+          targetFields: {
+            options: {
+              index: 0,
+              text: 'Option 2',
+            },
+          },
+        }),
+      );
+
+      expect(result.state.nextState.data.options.length).toBe(3);
+      expect(result.state.nextState.data.options[0].text).toBe('Option 2');
+      expect(result.state.nextState.data.options[1].text).toBe('Option 1');
+      expect(result.state.nextState.data.options[2].text).toEqual('');
       expect(result.status).toBeUndefined;
     });