done mvp, init jest

Author: rot0505

.eslintrc

@@ -27,6 +27,7 @@
     "@typescript-eslint/no-use-before-define": 0,
     "@typescript-eslint/no-explicit-any": 0,
     "import/no-extraneous-dependencies": 0,
+    "@typescript-eslint/no-shadow": 0,
     "indent": [
       "error",
       2,

jest.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  preset: "ts-jest",
+  testEnvironment: "jsdom",
+  moduleFileExtensions: ["js", "jsx", "ts", "tsx"],
+  roots: ["<rootDir>/src"],
+  moduleNameMapper: {
+    "^components/(.*)$": "<rootDir>/src/components/$1",
+    "^types/(.*)$": "<rootDir>/src/types/$1",
+    "^api/(.*)$": "<rootDir>/src/api/$1"
+  },
+  globals: {
+    "ts-jest": {
+      tsconfig: "./tsconfig.json"
+    }
+  }
+};

package-lock.json

@@ -4,10 +4,6 @@
   "private": true,
   "dependencies": {
     "@fluentui/react": "^8.101.2",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.5.2",
     "@types/node": "^16.18.3",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.9",
@@ -22,7 +18,8 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "jest",
+    "clear-test-cache": "jest --clearCache",
     "eject": "react-scripts eject",
     "lint": "eslint .",
     "prettier:check": "prettier --check \"src/**/*.{ts,tsx,json}\"",
@@ -47,6 +44,10 @@
     ]
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
     "@typescript-eslint/eslint-plugin": "^5.54.1",
     "@typescript-eslint/parser": "^5.54.1",
     "eslint": "^8.35.0",
@@ -55,6 +56,8 @@
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-react": "^7.32.2",
-    "prettier": "^2.8.4"
+    "jest": "^27.5.0",
+    "prettier": "^2.8.4",
+    "ts-jest": "^27.0.7"
   }
-}
+}

package.json

@@ -1,12 +1,13 @@
 import { render } from "@testing-library/react";
-import App from "./App";
+import { BrowserRouter } from "react-router-dom";
+import { Survey } from "./pages/Survey";
 
-test("Correctly calculate overall score", () => {
-  const { getByTestId } = render(<App />);
-  expect(getByTestId("happinessScore").textContent).toMatch(/47/);
-});
-
-test("Correctly group data and show table", () => {
-  const { getByTestId } = render(<App />);
-  expect(getByTestId("FreeTextTable").textContent).toMatch(/What data is NOT always reliable and correct\?\(6\)/);
+describe("Survey component", () => {
+  it("renders without crashing", () => {
+    render(
+      <BrowserRouter>
+        <Survey />
+      </BrowserRouter>
+    );
+  });
 });

src/App.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
-import Survey from "pages/Survey/Survey";
+import { Survey } from "pages/Survey";
 
 const App: React.FC = () => {
   return (

src/App.tsx

@@ -0,0 +1 @@
+export * from "./survey";

src/api/index.ts

@@ -0,0 +1,19 @@
+import surveyData from "../data/survey_results.json";
+import { Question, SurveyResult } from "types";
+
+export const getSurveyResult = (): SurveyResult => {
+  const response: SurveyResult = surveyData;
+  const questions: Question[] = response.questions.map((question: Question) => ({
+    question_text: question.question_text,
+    type: question.type,
+    responses: question.responses,
+  }));
+
+  const surveyResult: SurveyResult = {
+    survey_title: response.survey_title,
+    created_at: response.created_at,
+    questions: questions,
+  };
+
+  return surveyResult;
+};

src/api/survey.ts

@@ -1,31 +1,92 @@
-import { CheckboxVisibility, DetailsList, Stack } from "@fluentui/react";
-import { FunctionComponent } from "react";
+import React, { useState, useEffect, useMemo } from "react";
+import {
+  DetailsList,
+  CheckboxVisibility,
+  IColumn,
+  IGroup
+}
+  from "@fluentui/react";
+import { Question } from "types";
 
-const SurveyFreeText: FunctionComponent = () => {
-  const items = ["First item in list", "another one"];
+interface SurveyFreeTextProps {
+  textQuestions: Question[];
+}
+
+interface Answer {
+  key: string;
+  text: string;
+}
+
+const SurveyFreeText: React.FC<SurveyFreeTextProps> = ({ textQuestions }) => {
+  const [answers, setAnswers] = useState<Answer[]>([]);
+  const [groups, setGroups] = useState<IGroup[]>([]);
+
+  const columns: IColumn[] = useMemo(
+    () => [
+      {
+        key: "text_answer",
+        name: "Text answers",
+        fieldName: "answer",
+        minWidth: 100,
+        maxWidth: 300,
+        isResizable: true,
+        onRender: (answer: Answer) => <div data-is-focusable>{answer.text || ""}</div>,
+      },
+    ],
+    []
+  );
+
+  useEffect(() => {
+    const initAnswers = () => {
+      const answers: Answer[] = [];
+      const groups: IGroup[] = [];
+      let startIndex = 0;
+
+      textQuestions.forEach((question: Question, index: number) => {
+        const { question_text, responses } = question;
+        const group: IGroup = {
+          key: `${index}`,
+          name: question_text,
+          startIndex,
+          count: responses.length,
+          level: 0,
+          isCollapsed: true
+        };
+        startIndex += responses.length;
+
+        const textResponses: string[] = responses as string[];
+        const questionAnswers: Answer[] = textResponses.map((response: string, i: number) => ({
+          key: `${index}-${i}`,
+          text: response,
+        }));
+
+        groups.push(group);
+        answers.push(...questionAnswers);
+      });
+
+      setGroups(groups);
+      setAnswers(answers);
+    };
+
+    if (textQuestions?.length) {
+      initAnswers();
+    }
+  }, [textQuestions]);
 
-  const _onRenderColumn = (item?: any) => {
-    return <div data-is-focusable={true}>{item}</div>;
-  };
   return (
-    <Stack data-testid="FreeTextTable">
-      <DetailsList
-        checkboxVisibility={CheckboxVisibility.hidden}
-        items={items}
-        columns={[{ key: "Free text", name: "Free text", minWidth: 200 }]}
-        ariaLabelForSelectAllCheckbox="Toggle selection for all items"
-        ariaLabelForSelectionColumn="Toggle selection"
-        checkButtonAriaLabel="select row"
-        checkButtonGroupAriaLabel="select section"
-        groupProps={{
-          isAllGroupsCollapsed: true,
-          showEmptyGroups: true,
-        }}
-        onRenderItemColumn={_onRenderColumn}
-        compact={true}
-      />
-    </Stack>
+    <DetailsList
+      checkboxVisibility={CheckboxVisibility.hidden}
+      items={answers}
+      groups={groups}
+      columns={columns}
+      compact
+      groupProps={{ isAllGroupsCollapsed: true, showEmptyGroups: true }}
+      ariaLabelForSelectAllCheckbox="Toggle selection for all items"
+      ariaLabelForSelectionColumn="Toggle selection"
+      checkButtonAriaLabel="select row"
+      checkButtonGroupAriaLabel="select section"
+    />
   );
 };
 
-export default SurveyFreeText;
+export default SurveyFreeText;

src/components/SurveyFreeText/SurveyFreeText.tsx

@@ -1 +1 @@
-export { default as SurveyFreeText } from "./SurveyFreeText";
+export { default as SurveyFreeText } from "./SurveyFreeText";

src/components/SurveyFreeText/index.ts

@@ -11,3 +11,7 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+.ms-DetailsList {
+  overflow: hidden;
+}

src/index.css

@@ -3,7 +3,6 @@ import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
-import { initializeIcons } from "@fluentui/react/lib/Icons";
 
 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
 root.render(

src/index.tsx

@@ -0,0 +1,7 @@
+import { render } from "@testing-library/react";
+import Survey from "./Survey";
+
+test("Correctly calculate overall score", () => {
+  const { getByTestId } = render(<Survey />);
+  expect(getByTestId("happinessScore").textContent).toMatch(/61/);
+});

src/pages/Survey/Survey.test.tsx

@@ -1,26 +1,79 @@
+import { useEffect, useState } from "react";
 import { FontIcon, initializeIcons, Stack, Text } from "@fluentui/react";
-import { SurveyFreeText } from "components/SurveyFreeText/";
+import moment from "moment";
+import { SurveyFreeText } from "components/SurveyFreeText";
+import { getSurveyResult } from "api/index";
+import { Question, SurveyResult } from "types";
+
 initializeIcons();
 
-const Survey = () => {
-  const happinessScore = 73;
+const Survey: React.FC = () => {
+  const [survey, setSurvey] = useState<SurveyResult>({
+    survey_title: "",
+    created_at: "",
+    questions: [],
+  });
+
+  useEffect(() => {
+    const result = getSurveyResult();
+    setSurvey(result);
+  }, []);
+
+  const getCreatedAtFormatted = (): string => {
+    return moment(survey?.created_at).format("DD.MM.YYYY");
+  };
+
+  const getTextQuestions = (): Question[] => {
+    return survey?.questions.filter((question: Question) => question.type === "text");
+  };
+
+  const getScaleQuestions = (): Question[] => {
+    return survey?.questions.filter((question: Question) => question.type !== "text");
+  };
+
+  const getTotalPeople = (): number => {
+    const textQuestionsCount = getTextQuestions().reduce(
+      (total: number, question: Question) => (total += question.responses.length),
+      0
+    );
+    const scaleQuestionsCount = getScaleQuestions().reduce(
+      (total: number, question: Question) => (total += question.responses.length),
+      0
+    );
+    return textQuestionsCount + scaleQuestionsCount;
+  };
+
+  const getHappinessScore = (): number => {
+    let score = 0;
+    let count = 0;
+    getScaleQuestions().forEach((question: Question) => {
+      const responses: number[] = question.responses as number[];
+      const sum = responses.reduce((total: number, num: number) => (total += num), 0);
+      score += sum;
+      count += question.responses.length;
+    });
+    const happinessScore = (score / (count * 5)) * 100;
+    return Math.round(happinessScore);
+  };
 
   return (
     <Stack style={{ margin: 20 }}>
       <h1>
         <FontIcon iconName="ClipboardList" style={{ marginRight: "5px" }} />
-        Insert survey title here
+        {survey?.survey_title}
       </h1>
-
+      <Text variant="medium" style={{ fontWeight: "600" }}>
+        {`The survey was started on ${getCreatedAtFormatted()}. Overall, ${getTotalPeople()} people participated in the survey.`}
+      </Text>
       <h1 data-testid="happinessScore">
         <FontIcon iconName="ChatBot" style={{ marginRight: "5px" }} />
-        {happinessScore} / 100
+        {getHappinessScore()} / 100
       </h1>
       <Stack>
-        <SurveyFreeText />
+        <SurveyFreeText textQuestions={getTextQuestions()} />
       </Stack>
     </Stack>
   );
-}
+};
 
 export default Survey;

src/pages/Survey/Survey.tsx

@@ -0,0 +1 @@
+export { default as Survey } from "./Survey";

src/pages/Survey/index.ts

@@ -0,0 +1,15 @@
+/*
+ * There is an issue in survey_results.json in line 78: `numebr` => `number`.
+ * `type` can be `"text" | "number"` if the issue is fixed.
+ */
+export type Question = {
+  question_text: string;
+  type: string;
+  responses: number[] | string[];
+};
+
+export type SurveyResult = {
+  survey_title: string;
+  created_at: string;
+  questions: Question[];
+};

src/types/apiTypes.ts

@@ -0,0 +1 @@
+export * from "./apiTypes";

src/types/index.ts

@@ -24,6 +24,12 @@
       "components/*": [
         "components/*"
       ],
+      "types/*": [
+        "types/*.ts"
+      ],
+      "api/*": [
+        "api/*.ts"
+      ]
     }
   },
   "include": [