Merge pull request #68 from aarongarciah/scroll-to-top

Scroll to top code block on question change

Author: zoltantothcom

__tests__/components/CodePreTag.test.jsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { mount } from 'enzyme';
+import 'jest-styled-components';
+
+import CodePreTag from '../../src/components/CodePreTag';
+
+const shortCodeToRender = `
+  function foo() {
+    return 'bar';
+  }
+`;
+
+const longCodeToRender = `
+  function EquipmentPattern(name) {
+    this.equipments = [];
+    this.name = name;
+  }
+
+  EquipmentPattern.prototype.add = function(equipment) {
+    this.equipments.push(equipment);
+  };
+
+  EquipmentPattern.prototype.getPrice = function() {
+    return this.equipments
+      .map(function(equipment) {
+        return equipment.getPrice();
+      })
+      .reduce(function(a, b) {
+        return a + b;
+      });
+  };
+
+  function Equipment() {}
+
+  Equipment.prototype.getPrice = function() {
+    return this.price;
+  };
+
+  // -- leafs
+  function FloppyDisk() {
+    this.name = 'Floppy Disk';
+    this.price = 70;
+  }
+  FloppyDisk.prototype = Object.create(Equipment.prototype);
+
+  function HardDrive() {
+    this.name = 'Hard Drive';
+    this.price = 250;
+  }
+  HardDrive.prototype = Object.create(Equipment.prototype);
+
+  function Memory() {
+    this.name = '8gb memomry';
+    this.price = 280;
+  }
+  Memory.prototype = Object.create(Equipment.prototype);
+
+  module.exports = [EquipmentPattern, FloppyDisk, HardDrive, Memory];
+`;
+
+describe('<CodePreTag /> component', () => {
+  it('renders children properly', () => {
+    const tree = renderer
+      .create(
+        <CodePreTag>
+          <code>{shortCodeToRender}</code>
+        </CodePreTag>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('scrolls to position 0,0 on children change', () => {
+    const container = mount(
+      <CodePreTag style={{ height: 200 }}>
+        <code>{longCodeToRender}</code>
+      </CodePreTag>
+    );
+    const $container = container.getDOMNode();
+
+    // Initially the scroll position must be at the top
+    expect($container.scrollTop).toBe(0);
+
+    // Test that the scroll position is updated correctly
+    $container.scrollTop = 100;
+    expect($container.scrollTop).toBe(100);
+
+    // Test that the scroll position is reset after changing its children
+    container.setProps({ children: shortCodeToRender });
+    expect($container.scrollTop).toBe(0);
+  });
+});

__tests__/components/ProgressBar.test.js

@@ -53,8 +53,6 @@ describe('<ProgressBar /> component', () => {
 
   it('has styled-component rendered classes', () => {
     const tree = renderer.create(result).toJSON();
-    // console.log(tree);
-
     expect(tree.children[0].props.className).toBeDefined();
   });
 

__tests__/components/__snapshots__/CodePreTag.test.jsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<CodePreTag /> component renders children properly 1`] = `
+<pre>
+  <code>
+    
+  function foo() {
+    return 'bar';
+  }
+
+  </code>
+</pre>
+`;

__tests__/pages/__snapshots__/Game.test.js.snap

@@ -164,6 +164,7 @@ exports[`Game page - GAME - DARK style renders a <Code /> component 1`] = `
   }
 >
   <SyntaxHighlighter
+    PreTag={[Function]}
     className="fixed"
     language="javascript"
     style={
@@ -313,7 +314,7 @@ exports[`Game page - GAME - DARK style renders a <Code /> component 1`] = `
       }
     }
   >
-    <pre
+    <CodePreTag
       className="fixed"
       style={
         Object {
@@ -326,10 +327,24 @@ exports[`Game page - GAME - DARK style renders a <Code /> component 1`] = `
         }
       }
     >
-      <code>
-        Code ES5 - Prototype
-      </code>
-    </pre>
+      <pre
+        className="fixed"
+        style={
+          Object {
+            "background": "#282828",
+            "border": "1px solid #555",
+            "color": "#ebdbb2",
+            "display": "block",
+            "overflowX": "auto",
+            "padding": "1em",
+          }
+        }
+      >
+        <code>
+          Code ES5 - Prototype
+        </code>
+      </pre>
+    </CodePreTag>
   </SyntaxHighlighter>
 </Code>
 `;
@@ -592,6 +607,7 @@ exports[`Game page - GAME - LIGHT style renders a <Code /> component 1`] = `
   }
 >
   <SyntaxHighlighter
+    PreTag={[Function]}
     className="fixed"
     language="javascript"
     style={
@@ -712,7 +728,7 @@ exports[`Game page - GAME - LIGHT style renders a <Code /> component 1`] = `
       }
     }
   >
-    <pre
+    <CodePreTag
       className="fixed"
       style={
         Object {
@@ -725,10 +741,24 @@ exports[`Game page - GAME - LIGHT style renders a <Code /> component 1`] = `
         }
       }
     >
-      <code>
-        Code ES5 - Prototype
-      </code>
-    </pre>
+      <pre
+        className="fixed"
+        style={
+          Object {
+            "background": "#fafafa",
+            "border": "1px solid #d8d8d8",
+            "color": "#383a42",
+            "display": "block",
+            "overflowX": "auto",
+            "padding": "1em",
+          }
+        }
+      >
+        <code>
+          Code ES5 - Prototype
+        </code>
+      </pre>
+    </CodePreTag>
   </SyntaxHighlighter>
 </Code>
 `;

src/components/Code.jsx

@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
 import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
 import js from 'react-syntax-highlighter/dist/languages/hljs/javascript';
 import { getJS, getCurrent } from '../selectors';
+import CodePreTag from './CodePreTag';
 
 SyntaxHighlighter.registerLanguage('javascript', js);
 
@@ -13,13 +14,13 @@ const Code = props => {
   return (
     <Fragment>
       {js === 'es5' && (
-        <SyntaxHighlighter language="javascript" style={style} className="fixed">
+        <SyntaxHighlighter language="javascript" style={style} className="fixed" PreTag={CodePreTag}>
           {current.codeES5}
         </SyntaxHighlighter>
       )}
 
       {js === 'es6' && (
-        <SyntaxHighlighter language="javascript" style={style} className="fixed">
+        <SyntaxHighlighter language="javascript" style={style} className="fixed" PreTag={CodePreTag}>
           {current.codeES6}
         </SyntaxHighlighter>
       )}

src/components/CodePreTag.jsx

@@ -0,0 +1,21 @@
+import React, { useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+const CodePreTag = ({ children, ...restProps }) => {
+  const syntaxHighlighterEl = useRef(null);
+
+  useEffect(() => {
+    if (syntaxHighlighterEl.current) {
+      syntaxHighlighterEl.current.scrollTop = 0;
+      syntaxHighlighterEl.current.scrollLeft = 0;
+    }
+  }, [children]);
+
+  return <pre {...restProps} ref={syntaxHighlighterEl}>{children}</pre>;
+};
+
+CodePreTag.propTypes = {
+  children: PropTypes.node
+};
+
+export default CodePreTag;