finish tests?

Author: Christopher J Baker

specials.js

@@ -1,9 +1,9 @@
 module.exports = {
   react: function(data) {
       data.html =
-          "<div id='root'></div>" +
-          "<script crossorigin src='//unpkg.com/react@16/umd/react.development.js'></script>" +
-          "<script crossorigin src='//unpkg.com/react-dom@16/umd/react-dom.development.js'></script>" +
+          '<div id="root"></div>\n' +
+          '<script crossorigin src="//unpkg.com/react@16/umd/react.development.js"></script>\n' +
+          '<script crossorigin src="//unpkg.com/react-dom@16/umd/react-dom.development.js"></script>\n' +
           (data.html || "")
   },
 };

test-demo.md

@@ -21,6 +21,21 @@ my-app {color: "green";}
 ```
 <div class='codepen'></div>
 
+### with React
+
+```html
+<my-app></my-app>
+
+<script type="module">
+import { Component } from "can";
+Component
+</script>
+<style>
+my-app {color: "green";}
+</style>
+```
+<div class='codepen' data-codepen='react'></div>
+
 ## Straight JS
 
 ```js
@@ -31,3 +46,14 @@ console.log( myCounter.count ) //-> 1
 
 <div class='demo_wrapper' data-demo-src='foo.html'></div>
 <div class='codepen'></div>
+
+### with React
+
+```js
+import {DefineMap} from "can";
+console.log( myCounter.count ) //-> 1
+```
+<div class='codepen' data-codepen='react></div>
+
+<div class='demo_wrapper' data-demo-src='foo.html'></div>
+<div class='codepen' data-codepen='react'></div>

test.js

@@ -51,22 +51,33 @@ describe("bit-docs-html-codepen-link", function() {
 		}).then(function() {
 			open("temp/index.html", function(browser, close) {
 				var doc = browser.window.document;
+
 				var createCallData = [];
 				browser.window.CREATE_CODE_PEN = function(data) {
 					createCallData.push(data);
 				};
+
 				var toolbars = doc.querySelectorAll('.toolbar');
 				toolbars.forEach(function(toolbar) {
 					var btn = toolbar.children[toolbar.children.length - 1].querySelector('button');
 					btn.click();
 				});
-				assert.deepEqual(createCallData, [{
+
+				assert.deepEqual(createCallData, [
+					{
 						html: '<my-app></my-app>',
 						js: 'import { Component } from "//unpkg.com/can@^5.0.0-pre.1/core.mjs";\nComponent',
 						js_module: true,
 						editors: '1011',
 						css: 'my-app {color: "green";}'
 					},
+					{
+						html: '<div id="root"></div>\n<script crossorigin src="//unpkg.com/react@16/umd/react.development.js"></script>\n<script crossorigin src="//unpkg.com/react-dom@16/umd/react-dom.development.js"></script>\n<my-app></my-app>',
+						js: 'import { Component } from "//unpkg.com/can@^5.0.0-pre.1/core.mjs";\nComponent',
+						js_module: true,
+						editors: '1011',
+						css: 'my-app {color: "green";}'
+					},
 					{
 						js: 'import {DefineMap} from "//unpkg.com/can@^5.0.0-pre.1/core.mjs";\nconsole.log( myCounter.count ) //-> 1',
 						js_module: true,
@@ -85,7 +96,20 @@ describe("bit-docs-html-codepen-link", function() {
 						html: '<h1>Hi There!</h1>',
 						js: 'var code = "code";',
 						js_module: true
-					}]);
+					},
+					{
+						html: '<div id="root"></div>\n<script crossorigin src="//unpkg.com/react@16/umd/react.development.js"></script>\n<script crossorigin src="//unpkg.com/react-dom@16/umd/react-dom.development.js"></script>\n',
+						js: 'import {DefineMap} from "//unpkg.com/can@^5.0.0-pre.1/core.mjs";\nconsole.log( myCounter.count ) //-> 1',
+						js_module: true,
+						editors: '0011'
+					},
+					{
+						html: '<div id="root"></div>\n<script crossorigin src="//unpkg.com/react@16/umd/react.development.js"></script>\n<script crossorigin src="//unpkg.com/react-dom@16/umd/react-dom.development.js"></script>\n',
+						js: 'import {DefineMap} from "//unpkg.com/can@^5.0.0-pre.1/core.mjs";\nconsole.log( myCounter.count ) //-> 1',
+						js_module: true,
+						editors: '0011'
+					}
+				]);
 
 				close();
 				done();