diff --git a/frontend/src/components/retro-formats/mood/MoodRetro.test.tsx b/frontend/src/components/retro-formats/mood/MoodRetro.test.tsx index 54e8bcb..484f3de 100644 --- a/frontend/src/components/retro-formats/mood/MoodRetro.test.tsx +++ b/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( { 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; + } }); }); diff --git a/frontend/src/components/retro-formats/mood/MoodRetro.tsx b/frontend/src/components/retro-formats/mood/MoodRetro.tsx index 7e13d4e..96b09b1 100644 --- a/frontend/src/components/retro-formats/mood/MoodRetro.tsx +++ b/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);