Display question type components on mobile

src/features/surveys/components/QuestionBlocks/QuestionBlockWrapper/QuestionBlockWrapper.test.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import QuestionBlockWrapper from 'features/surveys/components/QuestionBlocks/QuestionBlockWrapper/QuestionBlockWrapper';
+import { QuestionType } from '@prisma/client';
+
+const originalInnerWidth = global.innerWidth;
+
+const setMobileView = () => {
+  global.innerWidth = 480;
+  global.dispatchEvent(new Event('resize'));
+};
+
+const setDesktopView = () => {
+  global.innerWidth = 1024; 
+  global.dispatchEvent(new Event('resize'));
+};
+
+describe('QuestionBlockWrapper', () => {
+  const mockProps = {
+    index: 0,
+    onQuestionRemove: jest.fn(),
+    updateQuestion: jest.fn(),
+    questionTitle: 'Test Question',
+    isSubmitted: false,
+    isRemovingPossible: true,
+    isDraggingPossible: true,
+    updateQuestionRequired: jest.fn(),
+    isRequired: false,
+    dragHandleProps: null,
+    expanded: false,
+    expandQuestion: jest.fn(),
+  };
+
+  afterEach(() => {
+    global.innerWidth = originalInnerWidth;
+    global.dispatchEvent(new Event('resize'));
+  });
+
+  it('renders EmojiIcon correctly in mobile view', () => {
+    setMobileView();
+    render(<QuestionBlockWrapper {...mockProps} type={QuestionType.EMOJI} />);
+    const emojiIcon = screen.getByTestId('emoji-icon');
+    expect(emojiIcon).toBeInTheDocument();
+  });
+
+
+  it('renders EmojiIcon correctly in desktop view', () => {
+    setDesktopView();
+    render(<QuestionBlockWrapper {...mockProps} type={QuestionType.EMOJI} />);
+    const emojiIcon = screen.getByTestId('emoji-icon');
+    expect(emojiIcon).toBeInTheDocument();
+  });
+
+  it('renders InputIcon correctly in mobile view', () => {
+    setMobileView();
+    render(<QuestionBlockWrapper {...mockProps} type={QuestionType.INPUT} />);
+    const inputIcon = screen.getByTestId('input-icon');
+    expect(inputIcon).toBeInTheDocument();
+  });
+
+  it('renders InputIcon correctly in desktop view', () => {
+    setDesktopView();
+    render(<QuestionBlockWrapper {...mockProps} type={QuestionType.INPUT} />);
+    const inputIcon = screen.getByTestId('input-icon');
+    expect(inputIcon).toBeInTheDocument();
+  });
+
+  it('displays components in a column on mobile view', () => {
+    setMobileView();
+    render(<QuestionBlockWrapper {...mockProps} type={QuestionType.EMOJI} />);
+    const wrapperDiv = screen.getByTestId('wrapper-div');
+    expect(wrapperDiv).toHaveClass('flex-col');
+    expect(wrapperDiv).not.toHaveClass('flex-row');
+  });
+
+  it('displays components in a row on desktop view', () => {
+    setDesktopView();
+    render(<QuestionBlockWrapper {...mockProps} type={QuestionType.EMOJI} />);
+    const wrapperDiv = screen.getByTestId('wrapper-div');
+
+    if (!wrapperDiv) {
+      throw new Error('Element with the specified selector was not found.');
+    }
+    expect(wrapperDiv.className).toContain('sm:flex-row');
+  });  
+
+  it('displays input component in a column on mobile view', () => {
+    setMobileView();
+    render(<QuestionBlockWrapper {...mockProps} type={QuestionType.INPUT} />);
+    const wrapperDiv = screen.getByTestId('wrapper-div');
+    expect(wrapperDiv).toHaveClass('flex-col');
+    expect(wrapperDiv).not.toHaveClass('flex-row');
+  });
+
+  it('displays input component in a row on desktop view', () => {
+    setDesktopView();
+    render(<QuestionBlockWrapper {...mockProps} type={QuestionType.INPUT} />);
+    const wrapperDiv = screen.getByTestId('wrapper-div');
+
+    if (!wrapperDiv) {
+      throw new Error('Element with the specified selector was not found.');
+    }
+    expect(wrapperDiv.className).toContain('sm:flex-row');
+  });  
+
+});

src/features/surveys/components/QuestionBlocks/QuestionBlockWrapper/QuestionBlockWrapper.tsx

@@ -78,25 +78,26 @@ export default function QuestionBlockWrapper({
     <div className="relative overflow-hidden rounded-md border bg-white/30 shadow-sm">
       <div className="flex flex-col items-start gap-1 px-3 pb-1 pt-3 sm:flex-row sm:gap-2">
         <div className="flex w-full items-start gap-2">
-          <button
-            onClick={onExpand}
-            className="cursor-pointer rounded-md border border-opacity-100 p-[13px]"
-          >
-            <ChevronDownIcon
-              className={clsx(
-                'w-[15px] transition-transform',
-                !expanded && '-rotate-90'
-              )}
-            />
-          </button>
+          <div className="flex flex-col items-center justify-center sm:flex-row" data-test-id='wrapper-div'>
+            <button
+              onClick={onExpand}
+              className="cursor-pointer rounded-md border border-opacity-100 p-[13px]"
+            >
+              <ChevronDownIcon
+                className={clsx(
+                  'w-[15px] transition-transform',
+                  !expanded && '-rotate-90'
+                )}
+              />
+            </button>
 
-          <div className="mx-1 hidden h-[42px] w-[30px] items-center justify-center px-[1px] text-gray-400 sm:flex">
-            {type === QuestionType.EMOJI && <EmojiIcon />}
-            {type === QuestionType.INPUT && <InputIcon />}
-            {type === QuestionType.CHOICE && <ChoiceIcon />}
-            {type === QuestionType.RATE && <RateIcon />}
+            <div className="mx-1 h-[42px] w-[30px] items-center justify-center px-[1px] text-gray-400 sm:flex">
+              {type === QuestionType.EMOJI && <EmojiIcon data-test-id="emoji-icon" />}
+              {type === QuestionType.INPUT && <InputIcon data-test-id="input-icon" />}
+              {type === QuestionType.CHOICE && <ChoiceIcon/>}
+              {type === QuestionType.RATE && <RateIcon/>}
+            </div>
           </div>
-
           <div className=" w-full grow">
             <Input
               placeholder={t('questionPlaceholder')}

src/shared/components/QuestionTypeIcons/EmojiIcon.tsx

@@ -1,6 +1,12 @@
 import { EmojiHappyIcon } from '@heroicons/react/outline';
 import React from 'react';
 
-export default function EmojiIcon() {
-  return <EmojiHappyIcon />;
+interface EmojiIconProps {
+  'data-test-id'?: string;
 }
+
+const EmojiIcon: React.FC<EmojiIconProps> = ({ 'data-test-id': testId }) => {
+  return <EmojiHappyIcon data-test-id={testId} />;
+};
+
+export default EmojiIcon;

src/shared/components/QuestionTypeIcons/InputIcon.tsx

@@ -1,6 +1,12 @@
 import { PencilIcon } from '@heroicons/react/outline';
 import React from 'react';
 
-export default function InputIcon() {
-  return <PencilIcon />;
+interface InputIconProps {
+  'data-test-id'?: string;
 }
+
+const InputIcon: React.FC<InputIconProps> = ({ 'data-test-id': testId }) => {
+  return <PencilIcon data-test-id={testId} />;
+};
+
+export default InputIcon;