From 1c2628382ae39aa05fe36cb5cb5823aedfdb4ec7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?=
 <aar.garc.herv@gmail.com>
Date: Fri, 3 May 2019 02:10:57 +0200
Subject: [PATCH 1/9] Scroll to top code block on question change

---
 src/components/Code.jsx       |  5 +++--
 src/components/CodePreTag.jsx | 20 ++++++++++++++++++++
 2 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 src/components/CodePreTag.jsx

diff --git a/src/components/Code.jsx b/src/components/Code.jsx
index 558698c..eab911c 100644
--- a/src/components/Code.jsx
+++ b/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>
       )}
diff --git a/src/components/CodePreTag.jsx b/src/components/CodePreTag.jsx
new file mode 100644
index 0000000..bd70695
--- /dev/null
+++ b/src/components/CodePreTag.jsx
@@ -0,0 +1,20 @@
+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.scroll) {
+      syntaxHighlighterEl.current.scroll(0, 0);
+    }
+  }, [children]);
+
+  return <pre {...restProps} ref={syntaxHighlighterEl}>{children}</pre>;
+};
+
+CodePreTag.propTypes = {
+  children: PropTypes.node
+};
+
+export default CodePreTag;

From 9da2869808e3fe405d37b0386f431a7ce4aa0441 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?=
 <aar.garc.herv@gmail.com>
Date: Fri, 3 May 2019 02:21:43 +0200
Subject: [PATCH 2/9] Update snapshots

---
 .../pages/__snapshots__/Game.test.js.snap     | 50 +++++++++++++++----
 1 file changed, 40 insertions(+), 10 deletions(-)

diff --git a/__tests__/pages/__snapshots__/Game.test.js.snap b/__tests__/pages/__snapshots__/Game.test.js.snap
index bf29e24..e3d94af 100644
--- a/__tests__/pages/__snapshots__/Game.test.js.snap
+++ b/__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>
 `;

From 9125713bf76ec70f07470246adb013caa4e28601 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?=
 <aar.garc.herv@gmail.com>
Date: Tue, 7 May 2019 21:38:10 +0200
Subject: [PATCH 3/9] CodePreTag rendering test

---
 .vscode/settings.json                         |  3 +++
 __tests__/components/CodePreTag.test.jsx      | 23 +++++++++++++++++++
 .../__snapshots__/CodePreTag.test.jsx.snap    | 11 +++++++++
 3 files changed, 37 insertions(+)
 create mode 100644 .vscode/settings.json
 create mode 100644 __tests__/components/CodePreTag.test.jsx
 create mode 100644 __tests__/components/__snapshots__/CodePreTag.test.jsx.snap

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..7c2feb7
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "editor.formatOnSave": false
+}
diff --git a/__tests__/components/CodePreTag.test.jsx b/__tests__/components/CodePreTag.test.jsx
new file mode 100644
index 0000000..ddb1908
--- /dev/null
+++ b/__tests__/components/CodePreTag.test.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import CodePreTag from '../../src/components/CodePreTag';
+
+describe('<CodePreTag /> component', () => {
+  it('renders children properly', () => {
+    const tree = renderer
+      .create(
+        <CodePreTag>
+          <code>
+            {`function foo() {
+            return 'bar';
+          }`}
+          </code>
+        </CodePreTag>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});
diff --git a/__tests__/components/__snapshots__/CodePreTag.test.jsx.snap b/__tests__/components/__snapshots__/CodePreTag.test.jsx.snap
new file mode 100644
index 0000000..07ba81f
--- /dev/null
+++ b/__tests__/components/__snapshots__/CodePreTag.test.jsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<CodePreTag /> component renders children properly 1`] = `
+<pre>
+  <code>
+    function foo() {
+            return 'bar';
+          }
+  </code>
+</pre>
+`;

From 38422e3be73245b6f6dd6bc54e000e1456f6aded Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?=
 <aar.garc.herv@gmail.com>
Date: Tue, 7 May 2019 21:41:29 +0200
Subject: [PATCH 4/9] Update snapshot

---
 __tests__/components/CodePreTag.test.jsx              | 11 ++++++-----
 .../components/__snapshots__/CodePreTag.test.jsx.snap |  8 +++++---
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/__tests__/components/CodePreTag.test.jsx b/__tests__/components/CodePreTag.test.jsx
index ddb1908..c1e5ad3 100644
--- a/__tests__/components/CodePreTag.test.jsx
+++ b/__tests__/components/CodePreTag.test.jsx
@@ -6,14 +6,15 @@ import CodePreTag from '../../src/components/CodePreTag';
 
 describe('<CodePreTag /> component', () => {
   it('renders children properly', () => {
+    const codeToRender = `
+      function foo() {
+        return 'bar';
+      }
+    `;
     const tree = renderer
       .create(
         <CodePreTag>
-          <code>
-            {`function foo() {
-            return 'bar';
-          }`}
-          </code>
+          <code>{codeToRender}</code>
         </CodePreTag>
       )
       .toJSON();
diff --git a/__tests__/components/__snapshots__/CodePreTag.test.jsx.snap b/__tests__/components/__snapshots__/CodePreTag.test.jsx.snap
index 07ba81f..9da1f3f 100644
--- a/__tests__/components/__snapshots__/CodePreTag.test.jsx.snap
+++ b/__tests__/components/__snapshots__/CodePreTag.test.jsx.snap
@@ -3,9 +3,11 @@
 exports[`<CodePreTag /> component renders children properly 1`] = `
 <pre>
   <code>
-    function foo() {
-            return 'bar';
-          }
+    
+      function foo() {
+        return 'bar';
+      }
+    
   </code>
 </pre>
 `;

From 4e6431e87d6e935eb42678b9c25e8c225d708abf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?=
 <aar.garc.herv@gmail.com>
Date: Tue, 7 May 2019 23:27:50 +0200
Subject: [PATCH 5/9] Set scroll position direcly

---
 src/components/CodePreTag.jsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/CodePreTag.jsx b/src/components/CodePreTag.jsx
index bd70695..ea2e582 100644
--- a/src/components/CodePreTag.jsx
+++ b/src/components/CodePreTag.jsx
@@ -5,8 +5,9 @@ const CodePreTag = ({ children, ...restProps }) => {
   const syntaxHighlighterEl = useRef(null);
 
   useEffect(() => {
-    if (syntaxHighlighterEl.current && syntaxHighlighterEl.current.scroll) {
-      syntaxHighlighterEl.current.scroll(0, 0);
+    if (syntaxHighlighterEl.current) {
+      syntaxHighlighterEl.current.scrollTop = 0;
+      syntaxHighlighterEl.current.scrollLeft = 0;
     }
   }, [children]);
 

From 94842cc698a9162c5c6624f7bcb755469cfe6b89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?=
 <aar.garc.herv@gmail.com>
Date: Tue, 7 May 2019 23:29:08 +0200
Subject: [PATCH 6/9] Test reset scroll position after children update in
 CodePreTag

---
 __tests__/components/CodePreTag.test.jsx      | 85 +++++++++++++++++--
 __tests__/components/ProgressBar.test.js      |  2 -
 .../__snapshots__/CodePreTag.test.jsx.snap    |  8 +-
 3 files changed, 83 insertions(+), 12 deletions(-)

diff --git a/__tests__/components/CodePreTag.test.jsx b/__tests__/components/CodePreTag.test.jsx
index c1e5ad3..2cc0634 100644
--- a/__tests__/components/CodePreTag.test.jsx
+++ b/__tests__/components/CodePreTag.test.jsx
@@ -1,24 +1,97 @@
 import React from 'react';
+import TestUtils from 'react-dom/test-utils';
 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 codeToRender = `
-      function foo() {
-        return 'bar';
-      }
-    `;
     const tree = renderer
       .create(
         <CodePreTag>
-          <code>{codeToRender}</code>
+          <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);
+
+    $container.scrollTop = 100;
+
+    // Test that the scroll position is updated correctly
+    expect($container.scrollTop).toBe(100);
+
+    container.setProps({ children: shortCodeToRender });
+
+    // Test that the scroll position is reset after changing its children
+    expect($container.scrollTop).toBe(0);
+  });
 });
diff --git a/__tests__/components/ProgressBar.test.js b/__tests__/components/ProgressBar.test.js
index ab624ca..75dd6b1 100644
--- a/__tests__/components/ProgressBar.test.js
+++ b/__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();
   });
 
diff --git a/__tests__/components/__snapshots__/CodePreTag.test.jsx.snap b/__tests__/components/__snapshots__/CodePreTag.test.jsx.snap
index 9da1f3f..b06783f 100644
--- a/__tests__/components/__snapshots__/CodePreTag.test.jsx.snap
+++ b/__tests__/components/__snapshots__/CodePreTag.test.jsx.snap
@@ -4,10 +4,10 @@ exports[`<CodePreTag /> component renders children properly 1`] = `
 <pre>
   <code>
     
-      function foo() {
-        return 'bar';
-      }
-    
+  function foo() {
+    return 'bar';
+  }
+
   </code>
 </pre>
 `;

From be4fb7a8c98ae125951fa43fd470c7ce62362b4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?=
 <aar.garc.herv@gmail.com>
Date: Tue, 7 May 2019 23:29:53 +0200
Subject: [PATCH 7/9] Sort test code properly

---
 __tests__/components/CodePreTag.test.jsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/__tests__/components/CodePreTag.test.jsx b/__tests__/components/CodePreTag.test.jsx
index 2cc0634..45eb022 100644
--- a/__tests__/components/CodePreTag.test.jsx
+++ b/__tests__/components/CodePreTag.test.jsx
@@ -84,14 +84,12 @@ describe('<CodePreTag /> component', () => {
     // Initially the scroll position must be at the top
     expect($container.scrollTop).toBe(0);
 
-    $container.scrollTop = 100;
-
     // Test that the scroll position is updated correctly
+    $container.scrollTop = 100;
     expect($container.scrollTop).toBe(100);
 
-    container.setProps({ children: shortCodeToRender });
-
     // Test that the scroll position is reset after changing its children
+    container.setProps({ children: shortCodeToRender });
     expect($container.scrollTop).toBe(0);
   });
 });

From 488cb2305eeb37a3b2f799172e7034f9f9ec7461 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?=
 <aar.garc.herv@gmail.com>
Date: Tue, 7 May 2019 23:33:45 +0200
Subject: [PATCH 8/9] Remove unused import

---
 __tests__/components/CodePreTag.test.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/__tests__/components/CodePreTag.test.jsx b/__tests__/components/CodePreTag.test.jsx
index 45eb022..56bda91 100644
--- a/__tests__/components/CodePreTag.test.jsx
+++ b/__tests__/components/CodePreTag.test.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import TestUtils from 'react-dom/test-utils';
 import renderer from 'react-test-renderer';
 import { mount } from 'enzyme';
 import 'jest-styled-components';

From 184d978ff064f1610b2b41975ae0050076d89e5d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?=
 <aar.garc.herv@gmail.com>
Date: Tue, 14 May 2019 18:03:45 +0200
Subject: [PATCH 9/9] Remove .vscode folder

---
 .vscode/settings.json | 3 ---
 1 file changed, 3 deletions(-)
 delete mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
deleted file mode 100644
index 7c2feb7..0000000
--- a/.vscode/settings.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "editor.formatOnSave": false
-}