[#18] Create Survey screen components and the unittest for this screen

src/screens/Survey/index.test.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import TestWrapper from 'tests/TestWrapper';
+
+import SurveyScreen, { surveyScreenTestIds } from '.';
+
+describe('SurveyScreen', () => {
+  const TestComponent = (): JSX.Element => {
+    return (
+      <TestWrapper>
+        <SurveyScreen />
+      </TestWrapper>
+    );
+  };
+
+  it('renders Survey screen and its components', () => {
+    render(<TestComponent />);
+    const backgroundImage = screen.getByTestId(surveyScreenTestIds.backgroundImage);
+    const backButton = screen.getByTestId(surveyScreenTestIds.backButton);
+    const coverImage = screen.getByTestId(surveyScreenTestIds.coverImage);
+    const title = screen.getByTestId(surveyScreenTestIds.title);
+    const description = screen.getByTestId(surveyScreenTestIds.description);
+    const startSurveyButton = screen.getByTestId(surveyScreenTestIds.startSurveyButton);
+
+    expect(backgroundImage).toBeVisible();
+    expect(backButton).toBeVisible();
+    expect(coverImage).toBeVisible();
+    expect(title).toBeVisible();
+    expect(description).toBeVisible();
+    expect(startSurveyButton).toBeVisible();
+    expect(startSurveyButton).toHaveTextContent('Start Survey');
+  });
+});

src/screens/Survey/index.tsx

@@ -1,10 +1,53 @@
 import React from 'react';
-import { useParams } from 'react-router-dom';
 
-const SurveyScreen = (): JSX.Element => {
-  const { id } = useParams();
+import { ReactComponent as ArrowBack } from 'assets/images/icons/arrow-back.svg';
+import BackgroundImage from 'components/BackgroundImage';
+import ElevatedButton from 'components/ElevatedButton';
+
+export const surveyScreenTestIds = {
+  backgroundImage: 'survey__background-image',
+  backButton: 'survey__back-button',
+  coverImage: 'survey__cover-image',
+  title: 'survey__title-text',
+  description: 'survey__description-text',
+  startSurveyButton: 'survey__start-survey-button',
+};
 
-  return <div>Dashboard detail {id}</div>;
+const SurveyScreen = (): JSX.Element => {
+  return (
+    <BackgroundImage
+      backgroundUrl="https://dhdbhh0jsld0o.cloudfront.net/m/1ea51560991bcb7d00d0_"
+      data-test-id={surveyScreenTestIds.backgroundImage}
+    >
+      <div className="flex flex-col">
+        <button className="mt-[37px] ml-[39px] p-1" data-test-id={surveyScreenTestIds.backButton}>
+          <ArrowBack />
+        </button>
+        <div className="w-1/2 self-center pt-36">
+          <img
+            src="https://dhdbhh0jsld0o.cloudfront.net/m/1ea51560991bcb7d00d0_l"
+            className="w-full h-[302px] rounded-[12px] object-cover"
+            alt="survey"
+            data-test-id={surveyScreenTestIds.coverImage}
+          />
+          <p className="text-white text-x-large font-extrabold pt-8" data-test-id={surveyScreenTestIds.title}>
+            Working from home Check-In
+          </p>
+          <p
+            className="text-white text-regular tracking-survey-tight opacity-60 pt-2"
+            data-test-id={surveyScreenTestIds.description}
+          >
+            We would like to know how you feel about our work from home (WFH) experience.
+          </p>
+          <div className="pt-8">
+            <ElevatedButton isFullWidth type="submit" data-test-id={surveyScreenTestIds.startSurveyButton}>
+              Start Survey
+            </ElevatedButton>
+          </div>
+        </div>
+      </div>
+    </BackgroundImage>
+  );
 };
 
 export default SurveyScreen;