From 70f71af93373dfa2cc2c78ec50dc05f0fd961152 Mon Sep 17 00:00:00 2001
From: Sam El-Husseini <sam.elhusseini@gmail.com>
Date: Fri, 2 Oct 2020 09:48:01 -0700
Subject: [PATCH] Add test-blocks into the basic playground (#4333)

* Use local node_modules files instead of unkpkg for advanced playground, get test blocks in the basic playground from npm

* Also move theme-modern

* Update package-lock
---
 package-lock.json                          | 165 ++++++++++++++++++++-
 package.json                               |   3 +
 tests/playground.html                      |  23 ++-
 tests/playgrounds/advanced_playground.html |   8 +-
 4 files changed, 195 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 933e111da..b3d3aa533 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -193,6 +193,32 @@
         }
       }
     },
+    "@blockly/block-test": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@blockly/block-test/-/block-test-1.0.0.tgz",
+      "integrity": "sha512-dLsXRmMEaoXqL9/3jQAcNoNMzhMsogWRx+rRdVD+gMeCs6a47VrGi8KUhG0oRY7wHxdtsjlBagSzrYGzeNODQw==",
+      "dev": true
+    },
+    "@blockly/dev-tools": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@blockly/dev-tools/-/dev-tools-2.0.1.tgz",
+      "integrity": "sha512-5J5DWBO27jaDJBMXsFjenqz3KVkCcrjF/D2QgWFP98t2j+y/ri1/LptZWv3e+i0rtRDsKkre7SMD+h2ebl1EBw==",
+      "dev": true,
+      "requires": {
+        "chai": "^4.2.0",
+        "dat.gui": "^0.7.7",
+        "lodash.assign": "^4.2.0",
+        "lodash.merge": "^4.6.2",
+        "monaco-editor": "^0.20.0",
+        "sinon": "^9.0.2"
+      }
+    },
+    "@blockly/theme-modern": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@blockly/theme-modern/-/theme-modern-2.1.1.tgz",
+      "integrity": "sha512-7nCd6Y5iYLhe80KypzMc4Pk8LWn6CX1UH/UWjZBxRt304yO5wL7td8aFJpx7V4wi3qt1sk2Cew+U8p0EVPLwJg==",
+      "dev": true
+    },
     "@eslint/eslintrc": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.1.3.tgz",
@@ -305,6 +331,51 @@
       "integrity": "sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==",
       "dev": true
     },
+    "@sinonjs/commons": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.8.1.tgz",
+      "integrity": "sha512-892K+kWUUi3cl+LlqEWIDrhvLgdL79tECi8JZUyq6IviKy/DNhuzCRlbHUjxK89f4ypPMMaFnFuR9Ie6DoIMsw==",
+      "dev": true,
+      "requires": {
+        "type-detect": "4.0.8"
+      }
+    },
+    "@sinonjs/fake-timers": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-6.0.1.tgz",
+      "integrity": "sha512-MZPUxrmFubI36XS1DI3qmI0YdN1gks62JtFZvxR67ljjSNCeK6U08Zx4msEWOXuofgqUt6zPHSi1H9fbjR/NRA==",
+      "dev": true,
+      "requires": {
+        "@sinonjs/commons": "^1.7.0"
+      }
+    },
+    "@sinonjs/formatio": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@sinonjs/formatio/-/formatio-5.0.1.tgz",
+      "integrity": "sha512-KaiQ5pBf1MpS09MuA0kp6KBQt2JUOQycqVG1NZXvzeaXe5LGFqAKueIS0bw4w0P9r7KuBSVdUk5QjXsUdu2CxQ==",
+      "dev": true,
+      "requires": {
+        "@sinonjs/commons": "^1",
+        "@sinonjs/samsam": "^5.0.2"
+      }
+    },
+    "@sinonjs/samsam": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@sinonjs/samsam/-/samsam-5.1.0.tgz",
+      "integrity": "sha512-42nyaQOVunX5Pm6GRJobmzbS7iLI+fhERITnETXzzwDZh+TtDr/Au3yAvXVjFmZ4wEUaE4Y3NFZfKv0bV0cbtg==",
+      "dev": true,
+      "requires": {
+        "@sinonjs/commons": "^1.6.0",
+        "lodash.get": "^4.4.2",
+        "type-detect": "^4.0.8"
+      }
+    },
+    "@sinonjs/text-encoding": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/@sinonjs/text-encoding/-/text-encoding-0.7.1.tgz",
+      "integrity": "sha512-+iTbntw2IZPb/anVDbypzfQa+ay64MW0Zo8aJ8gZPWMMK6/OubMVb6lUPMagqjOPnmtauXnFCACVl3O7ogjeqQ==",
+      "dev": true
+    },
     "@szmarczak/http-timer": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz",
@@ -1791,6 +1862,12 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "dat.gui": {
+      "version": "0.7.7",
+      "resolved": "https://registry.npmjs.org/dat.gui/-/dat.gui-0.7.7.tgz",
+      "integrity": "sha512-sRl/28gF/XRC5ywC9I4zriATTsQcpSsRG7seXCPnTkK8/EQMIbCu5NPMpICLGxX9ZEUvcXR3ArLYCtgreFoMDw==",
+      "dev": true
+    },
     "data-urls": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-1.1.0.tgz",
@@ -5074,6 +5151,12 @@
       "integrity": "sha1-h/zPrv/AtozRnVX2cilD+SnqNeo=",
       "dev": true
     },
+    "just-extend": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/just-extend/-/just-extend-4.1.1.tgz",
+      "integrity": "sha512-aWgeGFW67BP3e5181Ep1Fv2v8z//iBJfrvyTnq8wG86vEESwmonn1zPBJ0VfmT9CJq2FIT0VsETtrNFm2a+SHA==",
+      "dev": true
+    },
     "keyv": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.1.0.tgz",
@@ -5247,6 +5330,12 @@
       "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=",
       "dev": true
     },
+    "lodash.assign": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
+      "integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc=",
+      "dev": true
+    },
     "lodash.clonedeep": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
@@ -5271,6 +5360,12 @@
       "integrity": "sha1-8xwiIlqWMtK7+OSt2+8kCqdlph8=",
       "dev": true
     },
+    "lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=",
+      "dev": true
+    },
     "lodash.isobject": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/lodash.isobject/-/lodash.isobject-3.0.2.tgz",
@@ -6050,6 +6145,12 @@
         }
       }
     },
+    "monaco-editor": {
+      "version": "0.20.0",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.20.0.tgz",
+      "integrity": "sha512-hkvf4EtPJRMQlPC3UbMoRs0vTAFAYdzFQ+gpMb8A+9znae1c43q8Mab9iVsgTcg/4PNiLGGn3SlDIa8uvK1FIQ==",
+      "dev": true
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -6106,6 +6207,19 @@
       "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
       "dev": true
     },
+    "nise": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/nise/-/nise-4.0.4.tgz",
+      "integrity": "sha512-bTTRUNlemx6deJa+ZyoCUTRvH3liK5+N6VQZ4NIw90AgDXY6iPnsqplNFf6STcj+ePk0H/xqxnP75Lr0J0Fq3A==",
+      "dev": true,
+      "requires": {
+        "@sinonjs/commons": "^1.7.0",
+        "@sinonjs/fake-timers": "^6.0.0",
+        "@sinonjs/text-encoding": "^0.7.1",
+        "just-extend": "^4.0.2",
+        "path-to-regexp": "^1.7.0"
+      }
+    },
     "node-fetch": {
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
@@ -6520,6 +6634,23 @@
       "integrity": "sha1-v8zcjfWxLcUsi0PsONGNcsBLqW0=",
       "dev": true
     },
+    "path-to-regexp": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
+      "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+      "dev": true,
+      "requires": {
+        "isarray": "0.0.1"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
+          "dev": true
+        }
+      }
+    },
     "path-type": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
@@ -7362,6 +7493,38 @@
       "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==",
       "dev": true
     },
+    "sinon": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/sinon/-/sinon-9.0.3.tgz",
+      "integrity": "sha512-IKo9MIM111+smz9JGwLmw5U1075n1YXeAq8YeSFlndCLhAL5KGn6bLgu7b/4AYHTV/LcEMcRm2wU2YiL55/6Pg==",
+      "dev": true,
+      "requires": {
+        "@sinonjs/commons": "^1.7.2",
+        "@sinonjs/fake-timers": "^6.0.1",
+        "@sinonjs/formatio": "^5.0.1",
+        "@sinonjs/samsam": "^5.1.0",
+        "diff": "^4.0.2",
+        "nise": "^4.0.4",
+        "supports-color": "^7.1.0"
+      },
+      "dependencies": {
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "slice-ansi": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-2.1.0.tgz",
@@ -7912,7 +8075,7 @@
     },
     "through": {
       "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "resolved": "http://registry.npmjs.org/through/-/through-2.3.8.tgz",
       "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
       "dev": true
     },
diff --git a/package.json b/package.json
index 14d07e005..c80d7a816 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,9 @@
   },
   "license": "Apache-2.0",
   "devDependencies": {
+    "@blockly/block-test": "^1.0.0",
+    "@blockly/dev-tools": "^2.0.1",
+    "@blockly/theme-modern": "^2.1.1",
     "babel-eslint": "^10.1.0",
     "chai": "^4.2.0",
     "concurrently": "^5.3.0",
diff --git a/tests/playground.html b/tests/playground.html
index 0a70a0f04..3445811dd 100644
--- a/tests/playground.html
+++ b/tests/playground.html
@@ -66,6 +66,7 @@
 <script src="../blocks/procedures.js"></script>
 <script src="themes/test_themes.js"></script>
 <script src="./playgrounds/screenshot.js"></script>
+<script src="../node_modules/@blockly/block-test/dist/index.js"></script>
 
 <script>
 // Custom requires for the playground.
@@ -126,6 +127,7 @@ function start() {
             scaleSpeed: 1.1
           }
       });
+  initToolbox(workspace);
   workspace.configureContextMenu = configureContextMenu;
   // Restore previously displayed text.
   if (sessionStorage) {
@@ -164,9 +166,18 @@ function getToolboxSuffix() {
 }
 
 function getToolboxElement() {
+  var toolboxSuffix = getToolboxSuffix();
+  if (toolboxSuffix == 'test-blocks') {
+    if (typeof window.toolboxTestBlocks !== 'undefined') {
+      return toolboxTestBlocks;
+    } else {
+      alert('You need to run \'npm install\' in order to use the test blocks.');
+      toolboxSuffix = 'categories';
+    }
+  }
   // The three possible values are: "simple", "categories",
   // "categories-typed-variables".
-  return document.getElementById('toolbox-' + getToolboxSuffix());
+  return document.getElementById('toolbox-' + toolboxSuffix);
 }
 
 function setToolboxDropdown() {
@@ -174,12 +185,21 @@ function setToolboxDropdown() {
       'toolbox-categories',
       'toolbox-categories-typed-variables',
       'toolbox-simple',
+      'toolbox-test-blocks'
   ];
   var toolboxSuffix = getToolboxSuffix();
   document.forms.options.elements.toolbox.selectedIndex =
       toolboxNames.indexOf('toolbox-' + toolboxSuffix);
 }
 
+function initToolbox(workspace) {
+  var toolboxSuffix = getToolboxSuffix();
+  if (toolboxSuffix == 'test-blocks' &&
+      typeof window.toolboxTestBlocksInit !== 'undefined') {
+    toolboxTestBlocksInit(workspace);
+  }
+}
+
 function toXml() {
   var output = document.getElementById('importExport');
   var xml = Blockly.Xml.workspaceToDom(workspace);
@@ -395,6 +415,7 @@ var spaghettiXml = [
       <option value="categories">Categories (untyped variables)</option>
       <option value="categories-typed-variables">Categories (typed variables)</option>
       <option value="simple">Simple</option>
+      <option value="test-blocks">Test Blocks</option>
     </select>
   </form>
   <p>
diff --git a/tests/playgrounds/advanced_playground.html b/tests/playgrounds/advanced_playground.html
index c97158ba4..b142a6a00 100644
--- a/tests/playgrounds/advanced_playground.html
+++ b/tests/playgrounds/advanced_playground.html
@@ -66,8 +66,8 @@
 <script src="../../blocks/procedures.js"></script>
 <script src="../themes/test_themes.js"></script>
 <script src="./screenshot.js"></script>
-<script src="https://unpkg.com/@blockly/dev-tools@2.0.0/dist/index.js"></script>
-<script src="https://unpkg.com/@blockly/theme-modern/dist/index.js"></script>
+<script src="../../node_modules/@blockly/dev-tools/dist/index.js"></script>
+<script src="../../node_modules/@blockly/theme-modern/dist/index.js"></script>
 
 <script>
 // Custom requires for the playground.
@@ -113,6 +113,10 @@ function configurePlayground(playground) {
 }
 
 function initPlayground() {
+  if (typeof window.createPlayground === 'undefined') {
+    alert('You need to run \'npm install\' in order to use this playground.');
+    return;
+  }
   var defaultOptions = {
         comments: true,
         collapse: true,