Remove unnecessary spans from sicpjs (#1824)

* Change scale of images

* Update test snapshots

* Fix prettier

* Remove unused import

Co-authored-by: Martin Henz <henz@comp.nus.edu.sg>

src/features/sicp/parser/ParseJson.tsx

@@ -1,4 +1,5 @@
 import { Blockquote, Code, H1, OL, Pre, UL } from '@blueprintjs/core';
+import React from 'react';
 import Constants from 'src/commons/utils/Constants';
 import SicpExercise from 'src/pages/sicp/subcomponents/SicpExercise';
 import SicpLatex from 'src/pages/sicp/subcomponents/SicpLatex';
@@ -40,14 +41,14 @@ export type JsonType = {
 
 const handleFootnote = (obj: JsonType, refs: React.MutableRefObject<{}>) => {
   return (
-    <div>
+    <>
       {obj['count'] === 1 && <hr />}
       <div className="sicp-footnote">
         <div ref={ref => (refs.current[obj['id']!] = ref)} />
         <a href={obj['href']}>{'[' + obj['count'] + '] '}</a>
         {parseArr(obj['child']!, refs)}
       </div>
-    </div>
+    </>
   );
 };
 
@@ -65,18 +66,18 @@ const handleEpigraph = (obj: JsonType, refs: React.MutableRefObject<{}>) => {
   const hasAttribution = author || title || date;
 
   const attribution = [];
-  attribution.push(<span key="attribution">-</span>);
+  attribution.push(<React.Fragment key="attribution">-</React.Fragment>);
 
   if (author) {
-    attribution.push(<span key="author">{author}</span>);
+    attribution.push(<React.Fragment key="author">{author}</React.Fragment>);
   }
 
   if (title) {
     attribution.push(<i key="title">{title}</i>);
   }
 
   if (date) {
-    attribution.push(<span key="date">{date}</span>);
+    attribution.push(<React.Fragment key="date">{date}</React.Fragment>);
   }
 
   const text = child && parseArr(child!, refs);
@@ -179,15 +180,15 @@ const handleReference = (obj: JsonType, refs: React.MutableRefObject<{}>) => {
 };
 
 const handleText = (text: string) => {
-  return <p>{text}</p>;
+  return <>{text}</>;
 };
 
 const handleLatex = (math: string) => {
   return <SicpLatex math={math} />;
 };
 
 export const processingFunctions = {
-  '#text': (obj: JsonType, _refs: React.MutableRefObject<{}>) => <p>{obj['body']}</p>,
+  '#text': (obj: JsonType, _refs: React.MutableRefObject<{}>) => handleText(obj['body']!),
 
   B: (obj: JsonType, refs: React.MutableRefObject<{}>) => <b>{parseArr(obj['child']!, refs)}</b>,
 
@@ -290,12 +291,14 @@ export const parseObj = (
 ) => {
   if (obj['tag']) {
     if (processingFunctions[obj['tag']]) {
-      return <span key={index}>{processingFunctions[obj['tag']](obj, refs)}</span>;
+      return (
+        <React.Fragment key={index}>{processingFunctions[obj['tag']](obj, refs)}</React.Fragment>
+      );
     } else {
       throw new ParseJsonError('Unrecognised Tag: ' + obj['tag']);
     }
   } else {
     // Handle case where tag does not exists. Should not happen if json file is created properly.
-    return <span key={index}>{parseArr(obj['child']!, refs)}</span>;
+    return <React.Fragment key={index}>{parseArr(obj['child']!, refs)}</React.Fragment>;
   }
 };

src/features/sicp/parser/__tests__/ParseJson.tsx

@@ -1,4 +1,4 @@
-import { mount, shallow } from 'enzyme';
+import { mount } from 'enzyme';
 import lzString from 'lz-string';
 import { CodeSnippetProps } from 'src/pages/sicp/subcomponents/CodeSnippet';
 
@@ -30,8 +30,8 @@ jest.mock('src/commons/utils/Constants', () => ({
   interactiveSicpDataUrl: 'https://source-academy.github.io/sicp/'
 }));
 
-jest.mock('src/pages/sicp/subcomponents/CodeSnippet', () => {
-  return (props: CodeSnippetProps) => <div {...props}>Code Snippet</div>;
+jest.mock('src/pages/sicp/subcomponents/CodeSnippet', () => (props: CodeSnippetProps) => {
+  return <div>Code Snippet</div>;
 });
 
 const mockData = {
@@ -55,7 +55,7 @@ const processTag = (tag: string, obj: JsonType) => {
 
 const testTagSuccessful = (obj: JsonType, tag: string, text: string = '') => {
   test(tag + ' ' + text + ' successful', () => {
-    const tree = shallow(processTag(tag, obj));
+    const tree = mount(processTag(tag, obj));
 
     expect(tree.debug()).toMatchSnapshot();
   });
@@ -326,7 +326,7 @@ describe('Parse reference', () => {
 describe('Parse object', () => {
   test('successful', () => {
     const obj = mockData['text'];
-    const tree = shallow(parseObj(obj, 0, mockRef));
+    const tree = mount(parseObj(obj, 0, mockRef));
     expect(tree.debug()).toMatchSnapshot();
   });