diff --git a/.firebaserc b/.firebaserc
new file mode 100644
index 0000000..df497bd
--- /dev/null
+++ b/.firebaserc
@@ -0,0 +1,5 @@
+{
+ "projects": {
+ "default": "design-patterns-game-test"
+ }
+}
diff --git a/.travis.yml b/.travis.yml
index 4ffab78..4d11231 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,4 +1,11 @@
language: node_js
+node_js:
+ - 10.16.0
+
+addons:
+ apt:
+ packages:
+ - libgconf-2-4
branches:
only:
@@ -17,7 +24,7 @@ after_success:
- cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js
deploy:
- provider: surge
- project: ./build
- domain: http://designpatternsgame.com
+ provider: firebase
+ token:
+ secure: $FIREBASE_TOKEN
skip_cleanup: true
diff --git a/README.md b/README.md
index 4f76557..cc37bb0 100644
--- a/README.md
+++ b/README.md
@@ -2,9 +2,9 @@
[](https://travis-ci.org/zoltantothcom/Design-Patterns-JavaScript) [](https://coveralls.io/github/zoltantothcom/Design-Patterns-JavaScript?branch=master) [](https://www.codacy.com/app/zoltantothcom/Design-Patterns-JavaScript) [](https://greenkeeper.io/)
-Design Patterns - a quick game to test your familiarity with the 'Gang of Four' design patterns implemented in JavaScript.
+Design Patterns - a quick game to test your familiarity with the 'Gang of Four' design patterns implemented in JS.
-### :zap: [PLAY HERE](http://designpatternsgame.com/)
+### :zap: [PLAY HERE](https://designpatternsgame.com/)

diff --git a/__tests__/components/CodePreTag.test.jsx b/__tests__/components/CodePreTag.test.jsx
new file mode 100644
index 0000000..56bda91
--- /dev/null
+++ b/__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(' component', () => {
+ it('renders children properly', () => {
+ const tree = renderer
+ .create(
+
+ {shortCodeToRender}
+
+ )
+ .toJSON();
+
+ expect(tree).toMatchSnapshot();
+ });
+
+ it('scrolls to position 0,0 on children change', () => {
+ const container = mount(
+
+ {longCodeToRender}
+
+ );
+ 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);
+ });
+});
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(' 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
new file mode 100644
index 0000000..b06783f
--- /dev/null
+++ b/__tests__/components/__snapshots__/CodePreTag.test.jsx.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[` component renders children properly 1`] = `
+
+
+
+ function foo() {
+ return 'bar';
+ }
+
+
+
+`;
diff --git a/__tests__/components/__snapshots__/Header.test.js.snap b/__tests__/components/__snapshots__/Header.test.js.snap
index dcca459..f2d9352 100644
--- a/__tests__/components/__snapshots__/Header.test.js.snap
+++ b/__tests__/components/__snapshots__/Header.test.js.snap
@@ -7,9 +7,10 @@ exports[` component renders with DARK theme 1`] = `
border-radius: 50%;
cursor: pointer;
height: 2.5rem;
- margin: 0 0 0 1rem;
+ margin: 0.5rem 1.5rem 0 0;
outline: 0;
width: 2.5rem;
+ z-index: 10;
}
.c5 svg,
@@ -53,7 +54,7 @@ exports[` component renders with DARK theme 1`] = `
}
.c8 {
- font: 400 0.925rem 'Karla',sans-serif;
+ font: 400 0.875rem 'Karla',sans-serif;
color: #C8C8C8;
margin: 0.75rem 0 0;
}
@@ -89,6 +90,8 @@ exports[` component renders with DARK theme 1`] = `
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
+ margin: 1rem 0;
+ width: 100%;
}
.c3 {
@@ -125,6 +128,12 @@ exports[` component renders with DARK theme 1`] = `
color: #FFFFFF;
}
+@media (min-width:769px) {
+ .c5 {
+ margin: 0 0 0 1.5rem;
+ }
+}
+
@media (min-width:769px) {
.c0 {
-webkit-box-pack: justify;
@@ -134,6 +143,13 @@ exports[` component renders with DARK theme 1`] = `
}
}
+@media (min-width:541px) {
+ .c4 {
+ margin: 0;
+ width: auto;
+ }
+}
+
component renders with DARK theme 1`] = `
- implemented in JavaScript
+ “Gang of Four” patterns in JavaScript
@@ -240,9 +256,10 @@ exports[` component renders with LIGHT theme 1`] = `
border-radius: 50%;
cursor: pointer;
height: 2.5rem;
- margin: 0 0 0 1rem;
+ margin: 0.5rem 1.5rem 0 0;
outline: 0;
width: 2.5rem;
+ z-index: 10;
}
.c5 svg,
@@ -286,7 +303,7 @@ exports[` component renders with LIGHT theme 1`] = `
}
.c8 {
- font: 400 0.925rem 'Karla',sans-serif;
+ font: 400 0.875rem 'Karla',sans-serif;
color: #6F256F;
margin: 0.75rem 0 0;
}
@@ -322,6 +339,8 @@ exports[` component renders with LIGHT theme 1`] = `
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
+ margin: 1rem 0;
+ width: 100%;
}
.c3 {
@@ -358,6 +377,12 @@ exports[` component renders with LIGHT theme 1`] = `
color: #EDB8ED;
}
+@media (min-width:769px) {
+ .c5 {
+ margin: 0 0 0 1.5rem;
+ }
+}
+
@media (min-width:769px) {
.c0 {
-webkit-box-pack: justify;
@@ -367,6 +392,13 @@ exports[` component renders with LIGHT theme 1`] = `
}
}
+@media (min-width:541px) {
+ .c4 {
+ margin: 0;
+ width: auto;
+ }
+}
+
component renders with LIGHT theme 1`] = `
- implemented in JavaScript
+ “Gang of Four” patterns in JavaScript
diff --git a/__tests__/components/__snapshots__/PatternsList.test.js.snap b/__tests__/components/__snapshots__/PatternsList.test.js.snap
index b0dac56..88566c5 100644
--- a/__tests__/components/__snapshots__/PatternsList.test.js.snap
+++ b/__tests__/components/__snapshots__/PatternsList.test.js.snap
@@ -16,6 +16,11 @@ exports[`REFERENCE - Patterns List renders all the patterns 1`] = `
margin-top: 2.5rem;
}
+.c0 h3 {
+ border-bottom: 1px solid;
+ padding-bottom: 1rem;
+}
+
diff --git a/__tests__/components/__snapshots__/Title.test.js.snap b/__tests__/components/__snapshots__/Title.test.js.snap
index d5c6ad4..a0e1c4a 100644
--- a/__tests__/components/__snapshots__/Title.test.js.snap
+++ b/__tests__/components/__snapshots__/Title.test.js.snap
@@ -18,7 +18,7 @@ exports[`
component renders with a DARK theme 1`] = `
}
.c2 {
- font: 400 0.925rem 'Karla',sans-serif;
+ font: 400 0.875rem 'Karla',sans-serif;
color: #C8C8C8;
margin: 0.75rem 0 0;
}
@@ -34,7 +34,7 @@ exports[` component renders with a DARK theme 1`] = `
- implemented in JavaScript
+ “Gang of Four” patterns in JavaScript
`;
@@ -57,7 +57,7 @@ exports[` component renders with a LIGHT theme 1`] = `
}
.c2 {
- font: 400 0.925rem 'Karla',sans-serif;
+ font: 400 0.875rem 'Karla',sans-serif;
color: #6F256F;
margin: 0.75rem 0 0;
}
@@ -73,7 +73,7 @@ exports[` component renders with a LIGHT theme 1`] = `
- implemented in JavaScript
+ “Gang of Four” patterns in JavaScript
`;
diff --git a/__tests__/components/__snapshots__/Toggle.test.js.snap b/__tests__/components/__snapshots__/Toggle.test.js.snap
index 99df5e7..1741692 100644
--- a/__tests__/components/__snapshots__/Toggle.test.js.snap
+++ b/__tests__/components/__snapshots__/Toggle.test.js.snap
@@ -7,9 +7,10 @@ exports[` renders JS toggle in DARK more 1`] = `
border-radius: 50%;
cursor: pointer;
height: 2.5rem;
- margin: 0 0 0 1rem;
+ margin: 0.5rem 1.5rem 0 0;
outline: 0;
width: 2.5rem;
+ z-index: 10;
}
.c0 svg,
@@ -36,6 +37,12 @@ exports[` renders JS toggle in DARK more 1`] = `
fill: #F2E8F2;
}
+@media (min-width:769px) {
+ .c0 {
+ margin: 0 0 0 1.5rem;
+ }
+}
+
renders JS toggle in LIGHT more 1`] = `
border-radius: 50%;
cursor: pointer;
height: 2.5rem;
- margin: 0 0 0 1rem;
+ margin: 0.5rem 1.5rem 0 0;
outline: 0;
width: 2.5rem;
+ z-index: 10;
}
.c0 svg,
@@ -103,6 +111,12 @@ exports[`
renders JS toggle in LIGHT more 1`] = `
fill: #F2E8F2;
}
+@media (min-width:769px) {
+ .c0 {
+ margin: 0 0 0 1.5rem;
+ }
+}
+
renders the MODE toggle in DARK mode 1`] = `
border-radius: 50%;
cursor: pointer;
height: 2.5rem;
- margin: 0 0 0 1rem;
+ margin: 0.5rem 1.5rem 0 0;
outline: 0;
width: 2.5rem;
+ z-index: 10;
}
.c0 svg,
@@ -170,6 +185,12 @@ exports[`
renders the MODE toggle in DARK mode 1`] = `
fill: #F2E8F2;
}
+@media (min-width:769px) {
+ .c0 {
+ margin: 0 0 0 1.5rem;
+ }
+}
+
renders the MODE toggle in LIGHT mode 1`] = `
border-radius: 50%;
cursor: pointer;
height: 2.5rem;
- margin: 0 0 0 1rem;
+ margin: 0.5rem 1.5rem 0 0;
outline: 0;
width: 2.5rem;
+ z-index: 10;
}
.c0 svg,
@@ -231,6 +253,12 @@ exports[`
renders the MODE toggle in LIGHT mode 1`] = `
fill: #F2E8F2;
}
+@media (min-width:769px) {
+ .c0 {
+ margin: 0 0 0 1.5rem;
+ }
+}
+
component 1`] = `
}
>
component 1`] = `
}
}
>
-
component 1`] = `
}
}
>
-
- Code ES5 - Prototype
-
-
+
+
+ Code ES5 - Prototype
+
+
+
`;
@@ -592,6 +607,7 @@ exports[`Game page - GAME - LIGHT style renders a
component 1`] = `
}
>
component 1`] = `
}
}
>
-
component 1`] = `
}
}
>
-
- Code ES5 - Prototype
-
-
+
+
+ Code ES5 - Prototype
+
+
+
`;
diff --git a/__tests__/pages/__snapshots__/Patterns.test.js.snap b/__tests__/pages/__snapshots__/Patterns.test.js.snap
index eb28cce..2d00123 100644
--- a/__tests__/pages/__snapshots__/Patterns.test.js.snap
+++ b/__tests__/pages/__snapshots__/Patterns.test.js.snap
@@ -16,6 +16,11 @@ exports[`Patterns page renders the Patterns list 1`] = `
margin-top: 2.5rem;
}
+.c0 h3 {
+ border-bottom: 1px solid;
+ padding-bottom: 1rem;
+}
+
diff --git a/__tests__/styles/__snapshots__/global.test.js.snap b/__tests__/styles/__snapshots__/global.test.js.snap
index 8807dc5..d81ef10 100644
--- a/__tests__/styles/__snapshots__/global.test.js.snap
+++ b/__tests__/styles/__snapshots__/global.test.js.snap
@@ -4,7 +4,7 @@ exports[`Global style renders with a DARK theme 1`] = `
-