Fix wide/narrow screen size change, add unit test

Author: davidje13

frontend/src/components/retro-formats/mood/MoodRetro.test.tsx

@@ -1,12 +1,12 @@
-import { render } from 'flexible-testing-library-react';
+import { act, render, role } from 'flexible-testing-library-react';
 
 import { MoodRetro } from './MoodRetro';
 
 const nop = () => undefined;
 
 describe('MoodRetro', () => {
-  it('renders without error', () => {
-    render(
+  it('can switch between wide and narrow view', () => {
+    const { getAllBy } = render(
       <MoodRetro
         retroOptions={{}}
         retroItems={[]}
@@ -16,5 +16,26 @@ describe('MoodRetro', () => {
         dispatch={nop}
       />,
     );
+
+    expect(
+      getAllBy(role('textbox')).map((i) => i.getAttribute('placeholder')),
+    ).toEqual([
+      'I\u2019m glad that\u2026',
+      'I\u2019m wondering about\u2026',
+      'It wasn\u2019t so great that\u2026',
+      'Add an action item',
+    ]);
+
+    const originalWidth = window.innerWidth;
+    window.innerWidth = 200;
+    try {
+      act(() => window.dispatchEvent(new UIEvent('resize')));
+
+      expect(
+        getAllBy(role('textbox')).map((i) => i.getAttribute('placeholder')),
+      ).toEqual(['I\u2019m glad that\u2026']);
+    } finally {
+      window.innerWidth = originalWidth;
+    }
   });
 });

frontend/src/components/retro-formats/mood/MoodRetro.tsx

@@ -74,7 +74,9 @@ export const MoodRetro = ({
     !singleColumn || OPTIONS.enableMobileFacilitation.read(retroOptions);
 
   const useAction = useActionFactory(dispatch);
-  const useFacilitatorAction = canFacilitate ? useAction : () => undefined;
+  const useFacilitatorAction = useActionFactory(
+    canFacilitate ? dispatch : undefined,
+  );
 
   const handleAddItem = useAction(addRetroItem);
   const handleAddActionItem = useAction(addRetroActionItem);