fix: app crash when elements params of Result component was wrong (#114)

Co-authored-by: Stephan Meijer <[email protected]>

Author: marcosvega91

package-lock.json

@@ -39,6 +39,7 @@
     "@babel/core": "^7.10.2",
     "@babel/preset-env": "^7.10.2",
     "@babel/preset-react": "^7.10.1",
+    "@testing-library/jest-dom": "^5.9.0",
     "@testing-library/react": "^10.2.0",
     "@testing-library/user-event": "^11.2.0",
     "babel-eslint": "^10.1.0",
@@ -49,6 +50,7 @@
     "husky": "^4.2.5",
     "jest": "^26.0.1",
     "jest-extended": "^0.11.5",
+    "jest-in-case": "^1.0.2",
     "lint-staged": "^10.2.9",
     "npm-run-all": "^4.1.5",
     "parcel": "^2.0.0-nightly.280",

package.json

@@ -11,7 +11,11 @@ function Result({ result, dispatch }) {
     );
   }
 
-  if (!result.expression) {
+  if (
+    !result.expression ||
+    !Array.isArray(result.elements) ||
+    result.elements.length === 0
+  ) {
     return (
       <div className="space-y-4 text-sm">
         <div className="min-h-8">
@@ -32,11 +36,10 @@ function Result({ result, dispatch }) {
       </div>
     );
   }
-
-  const { data, suggestion } = result.elements?.[0] || {};
+  const { data, suggestion } = result.elements[0];
 
   return (
-    <div className="flex flex-col overflow-hidden w-full h-full">
+    <div className="flex flex-col w-full h-full overflow-hidden">
       <div className="flex-none pb-4 border-b">
         <ResultSuggestion
           result={result}

src/components/Result.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import cases from 'jest-in-case';
+import Result from './Result';
+
+cases(
+  'should show "I don\'t know" if elements is not an array or if is empty',
+  (opts) => {
+    render(
+      <Result
+        result={{ error: '', expression: {}, elements: opts.elements }}
+      />,
+    );
+    expect(screen.getByText(/i don't know what to say/i)).toBeInTheDocument();
+  },
+  [
+    {
+      name: 'undefined',
+      elements: undefined,
+    },
+    {
+      name: 'null',
+      elements: null,
+    },
+    {
+      name: 'empty array',
+      elements: [],
+    },
+  ],
+);

src/components/Result.test.js

@@ -1,5 +1,6 @@
 import 'regenerator-runtime/runtime';
 import 'jest-extended';
+import '@testing-library/jest-dom';
 
 if (window.document) {
   window.document.createRange = () => ({