{"action":"created","comment":{"url":"https://api.github.com/repos/skatejs/react-integration/pulls/comments/46917953","id":46917953,"diff_hunk":"@@ -0,0 +1,273 @@\n+import camelCase from 'camel-case';\n+import React from 'react';\n+import ReactDOM from 'react-dom';\n+import ReactTestUtils from 'react-addons-test-utils';\n+import reactify from '../src/index';\n+import skate from 'skatejs';\n+import helperElement from 'skatejs/test/lib/element';\n+\n+describe('react-integration;', function () {\n+    var fixture;\n+\n+    beforeEach(function () {\n+        fixture = document.createElement('div');\n+        document.body.appendChild(fixture);\n+    });\n+\n+    afterEach(function () {\n+        ReactDOM.unmountComponentAtNode(fixture);\n+        fixture.innerHTML = '';\n+        document.body.removeChild(fixture);\n+    });\n+\n+    var tagName;\n+\n+    function getWebComponent () {\n+        return document.querySelector(tagName);\n+    }\n+\n+    function makeReactComponent (webComponentConstructor) {\n+        var ReactComponent = reactify(webComponentConstructor, {\n+            React: React,\n+            ReactDOM: ReactDOM\n+        });\n+\n+        return ReactComponent;\n+    }\n+\n+    function renderApp(App) {\n+        App.displayName = 'App';\n+        return ReactDOM.render(<App />, fixture);\n+    }\n+\n+    describe('(React > React wrapped terminal web component);', function () {\n+        describe('that has an attribute;', function () {\n+            var ReactComponent;\n+\n+            beforeEach(function () {\n+                tagName = helperElement('x-terminal-text').safe;\n+                var webComponentConstructor = skate(tagName, {\n+                    render: function (elem) {\n+                        elem.innerHTML = '<em><input />' + elem.text + '</em>';\n+                    },\n+                    properties: {\n+                        text: {\n+                            attribute: true,\n+                            set: function (elem) {\n+                                skate.render(elem);\n+                            }\n+                        }\n+                    }\n+                });\n+\n+                ReactComponent = makeReactComponent(webComponentConstructor);\n+            });\n+\n+            it('the web component renders correctly', function () {\n+                renderApp(\n+                    React.createClass({\n+                        render: function () {\n+                            return <ReactComponent/>;\n+                        }\n+                    })\n+                );\n+\n+                expect(getWebComponent().firstChild.tagName).to.equal('EM');\n+            });\n+\n+            it('the react component renders props through the attribute', function () {\n+                const WEB_COMPONENT_TEXT = 'terminal component';\n+\n+                renderApp(\n+                    React.createClass({\n+                        render: function () {\n+                            return <ReactComponent text={WEB_COMPONENT_TEXT}/>;\n+                        }\n+                    })\n+                );\n+\n+                expect(getWebComponent().firstChild.textContent).to.equal(WEB_COMPONENT_TEXT);\n+            });\n+\n+            it('changing the state changes the web component attribute', function () {\n+                var renderedApp = renderApp(\n+                    React.createClass({\n+                        getInitialState: function () {\n+                            return {\n+                                text: 'initial text'\n+                            }\n+                        },\n+                        render: function () {\n+                            return <ReactComponent text={this.state.text}/>;\n+                        }\n+                    })\n+                );\n+\n+                expect(getWebComponent().firstChild.textContent).to.equal('initial text');\n+                renderedApp.setState({\n+                    text: 'updated text'\n+                });\n+                expect(getWebComponent().firstChild.textContent).to.equal('updated text');\n+            });\n+\n+            it('the react component\\'s display is the camel cased version of the tag name', function () {\n+                expect(camelCase(tagName)).to.equal(ReactComponent.displayName);\n+            });\n+        });\n+\n+        describe('that has a property but not an attribute;', function () {\n+            var ReactComponent;\n+\n+            beforeEach(function () {\n+                tagName = helperElement('x-terminal-hidden').safe;\n+                var webComponentConstructor = skate(tagName, {\n+                    render: function (elem) {\n+                        elem.innerHTML = '<div></div>';\n+                        if (elem.hidden) {\n+                            elem.firstChild.setAttribute('aria-hidden', '');\n+                        } else {\n+                            elem.firstChild.removeAttribute('aria-hidden');\n+                        }\n+                    },\n+                    properties: {\n+                        hidden: {\n+                            set: function (elem) {\n+                                skate.render(elem);\n+                            }\n+                        }\n+                    }\n+                });\n+\n+                ReactComponent = makeReactComponent(webComponentConstructor)\n+            });\n+\n+            it('the web component renders props through the property', function () {\n+                renderApp(\n+                    React.createClass({\n+                        render: function () {\n+                            return <ReactComponent hidden=\"true\"/>;\n+                        }\n+                    })\n+                );\n+\n+                expect(getWebComponent().firstChild.hasAttribute('aria-hidden')).to.be.true;\n+            });\n+        });\n+    });\n+\n+    describe('(React > React wrapped container web component', function () {\n+\n+        function isReactRoot (elem) {\n+            return elem.hasAttribute('data-reactid') && elem.getAttribute('data-reactid').split('.').length === 2;\n+        }\n+\n+        beforeEach(function () {\n+            tagName = helperElement('x-container').safe;\n+            var webComponentConstructor = skate(tagName, {\n+                render: function (elem) {\n+                    elem.innerHTML = '<div class=\"parent\"><div class=\"content\"></div></div>';\n+                },\n+                properties: {\n+                    content: {\n+                        get: function content (elem) {\n+                            return elem.querySelector('.content').firstChild;\n+                        },\n+\n+                        set: function content (elem, changeData) {\n+                            const container = elem.querySelector('.content');\n+                            const reactTree = changeData.newValue;\n+                            container.innerHTML = '';\n+                            if (reactTree) {\n+                                container.appendChild(reactTree);\n+                            }\n+                        }\n+                    }\n+                }\n+            });\n+\n+            ReactComponent = makeReactComponent(webComponentConstructor);\n+        });\n+\n+        it('> DOM element): content is redirected to the correct container', function () {\n+            renderApp(\n+                React.createClass({\n+                    render: function () {\n+                        return <ReactComponent>","path":"test/unit.js","position":195,"original_position":195,"commit_id":"f337b678c812368834dd2752308439645cae219e","original_commit_id":"f337b678c812368834dd2752308439645cae219e","user":{"login":"treshugart","id":136556,"avatar_url":"https://avatars.githubusercontent.com/u/136556?v=3","gravatar_id":"","url":"https://api.github.com/users/treshugart","html_url":"https://github.com/treshugart","followers_url":"https://api.github.com/users/treshugart/followers","following_url":"https://api.github.com/users/treshugart/following{/other_user}","gists_url":"https://api.github.com/users/treshugart/gists{/gist_id}","starred_url":"https://api.github.com/users/treshugart/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/treshugart/subscriptions","organizations_url":"https://api.github.com/users/treshugart/orgs","repos_url":"https://api.github.com/users/treshugart/repos","events_url":"https://api.github.com/users/treshugart/events{/privacy}","received_events_url":"https://api.github.com/users/treshugart/received_events","type":"User","site_admin":false},"body":"You can wrap your jsx expression in parenthesis if you want cleaner indentation:\r\n\r\n```js\r\nreturn (\r\n  <div>\r\n    content...\r\n  </div>\r\n);\r\n```","created_at":"2015-12-08T06:04:53Z","updated_at":"2015-12-08T06:04:53Z","html_url":"https://github.com/skatejs/react-integration/pull/3#discussion_r46917953","pull_request_url":"https://api.github.com/repos/skatejs/react-integration/pulls/3","_links":{"self":{"href":"https://api.github.com/repos/skatejs/react-integration/pulls/comments/46917953"},"html":{"href":"https://github.com/skatejs/react-integration/pull/3#discussion_r46917953"},"pull_request":{"href":"https://api.github.com/repos/skatejs/react-integration/pulls/3"}}},"pull_request":{"url":"https://api.github.com/repos/skatejs/react-integration/pulls/3","id":52796006,"html_url":"https://github.com/skatejs/react-integration/pull/3","diff_url":"https://github.com/skatejs/react-integration/pull/3.diff","patch_url":"https://github.com/skatejs/react-integration/pull/3.patch","issue_url":"https://api.github.com/repos/skatejs/react-integration/issues/3","number":3,"state":"open","locked":false,"title":"Add unit tests for react-integration","user":{"login":"jpnelson","id":1518604,"avatar_url":"https://avatars.githubusercontent.com/u/1518604?v=3","gravatar_id":"","url":"https://api.github.com/users/jpnelson","html_url":"https://github.com/jpnelson","followers_url":"https://api.github.com/users/jpnelson/followers","following_url":"https://api.github.com/users/jpnelson/following{/other_user}","gists_url":"https://api.github.com/users/jpnelson/gists{/gist_id}","starred_url":"https://api.github.com/users/jpnelson/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jpnelson/subscriptions","organizations_url":"https://api.github.com/users/jpnelson/orgs","repos_url":"https://api.github.com/users/jpnelson/repos","events_url":"https://api.github.com/users/jpnelson/events{/privacy}","received_events_url":"https://api.github.com/users/jpnelson/received_events","type":"User","site_admin":false},"body":"Requires https://github.com/skatejs/build/pull/28 for it to build","created_at":"2015-12-07T00:38:13Z","updated_at":"2015-12-08T06:04:53Z","closed_at":null,"merged_at":null,"merge_commit_sha":"a3c10f1a7dba2b1fc080e2485b044d2b9aa7e65e","assignee":{"login":"treshugart","id":136556,"avatar_url":"https://avatars.githubusercontent.com/u/136556?v=3","gravatar_id":"","url":"https://api.github.com/users/treshugart","html_url":"https://github.com/treshugart","followers_url":"https://api.github.com/users/treshugart/followers","following_url":"https://api.github.com/users/treshugart/following{/other_user}","gists_url":"https://api.github.com/users/treshugart/gists{/gist_id}","starred_url":"https://api.github.com/users/treshugart/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/treshugart/subscriptions","organizations_url":"https://api.github.com/users/treshugart/orgs","repos_url":"https://api.github.com/users/treshugart/repos","events_url":"https://api.github.com/users/treshugart/events{/privacy}","received_events_url":"https://api.github.com/users/treshugart/received_events","type":"User","site_admin":false},"milestone":null,"commits_url":"https://api.github.com/repos/skatejs/react-integration/pulls/3/commits","review_comments_url":"https://api.github.com/repos/skatejs/react-integration/pulls/3/comments","review_comment_url":"https://api.github.com/repos/skatejs/react-integration/pulls/comments{/number}","comments_url":"https://api.github.com/repos/skatejs/react-integration/issues/3/comments","statuses_url":"https://api.github.com/repos/skatejs/react-integration/statuses/f337b678c812368834dd2752308439645cae219e","head":{"label":"skatejs:GH-2","ref":"GH-2","sha":"f337b678c812368834dd2752308439645cae219e","user":{"login":"skatejs","id":7636121,"avatar_url":"https://avatars.githubusercontent.com/u/7636121?v=3","gravatar_id":"","url":"https://api.github.com/users/skatejs","html_url":"https://github.com/skatejs","followers_url":"https://api.github.com/users/skatejs/followers","following_url":"https://api.github.com/users/skatejs/following{/other_user}","gists_url":"https://api.github.com/users/skatejs/gists{/gist_id}","starred_url":"https://api.github.com/users/skatejs/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/skatejs/subscriptions","organizations_url":"https://api.github.com/users/skatejs/orgs","repos_url":"https://api.github.com/users/skatejs/repos","events_url":"https://api.github.com/users/skatejs/events{/privacy}","received_events_url":"https://api.github.com/users/skatejs/received_events","type":"Organization","site_admin":false},"repo":{"id":46830524,"name":"react-integration","full_name":"skatejs/react-integration","owner":{"login":"skatejs","id":7636121,"avatar_url":"https://avatars.githubusercontent.com/u/7636121?v=3","gravatar_id":"","url":"https://api.github.com/users/skatejs","html_url":"https://github.com/skatejs","followers_url":"https://api.github.com/users/skatejs/followers","following_url":"https://api.github.com/users/skatejs/following{/other_user}","gists_url":"https://api.github.com/users/skatejs/gists{/gist_id}","starred_url":"https://api.github.com/users/skatejs/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/skatejs/subscriptions","organizations_url":"https://api.github.com/users/skatejs/orgs","repos_url":"https://api.github.com/users/skatejs/repos","events_url":"https://api.github.com/users/skatejs/events{/privacy}","received_events_url":"https://api.github.com/users/skatejs/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/skatejs/react-integration","description":"Use custom elements in your React components without resorting to hacks.","fork":false,"url":"https://api.github.com/repos/skatejs/react-integration","forks_url":"https://api.github.com/repos/skatejs/react-integration/forks","keys_url":"https://api.github.com/repos/skatejs/react-integration/keys{/key_id}","collaborators_url":"https://api.github.com/repos/skatejs/react-integration/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/skatejs/react-integration/teams","hooks_url":"https://api.github.com/repos/skatejs/react-integration/hooks","issue_events_url":"https://api.github.com/repos/skatejs/react-integration/issues/events{/number}","events_url":"https://api.github.com/repos/skatejs/react-integration/events","assignees_url":"https://api.github.com/repos/skatejs/react-integration/assignees{/user}","branches_url":"https://api.github.com/repos/skatejs/react-integration/branches{/branch}","tags_url":"https://api.github.com/repos/skatejs/react-integration/tags","blobs_url":"https://api.github.com/repos/skatejs/react-integration/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/skatejs/react-integration/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/skatejs/react-integration/git/refs{/sha}","trees_url":"https://api.github.com/repos/skatejs/react-integration/git/trees{/sha}","statuses_url":"https://api.github.com/repos/skatejs/react-integration/statuses/{sha}","languages_url":"https://api.github.com/repos/skatejs/react-integration/languages","stargazers_url":"https://api.github.com/repos/skatejs/react-integration/stargazers","contributors_url":"https://api.github.com/repos/skatejs/react-integration/contributors","subscribers_url":"https://api.github.com/repos/skatejs/react-integration/subscribers","subscription_url":"https://api.github.com/repos/skatejs/react-integration/subscription","commits_url":"https://api.github.com/repos/skatejs/react-integration/commits{/sha}","git_commits_url":"https://api.github.com/repos/skatejs/react-integration/git/commits{/sha}","comments_url":"https://api.github.com/repos/skatejs/react-integration/comments{/number}","issue_comment_url":"https://api.github.com/repos/skatejs/react-integration/issues/comments{/number}","contents_url":"https://api.github.com/repos/skatejs/react-integration/contents/{+path}","compare_url":"https://api.github.com/repos/skatejs/react-integration/compare/{base}...{head}","merges_url":"https://api.github.com/repos/skatejs/react-integration/merges","archive_url":"https://api.github.com/repos/skatejs/react-integration/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/skatejs/react-integration/downloads","issues_url":"https://api.github.com/repos/skatejs/react-integration/issues{/number}","pulls_url":"https://api.github.com/repos/skatejs/react-integration/pulls{/number}","milestones_url":"https://api.github.com/repos/skatejs/react-integration/milestones{/number}","notifications_url":"https://api.github.com/repos/skatejs/react-integration/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/skatejs/react-integration/labels{/name}","releases_url":"https://api.github.com/repos/skatejs/react-integration/releases{/id}","created_at":"2015-11-25T01:51:59Z","updated_at":"2015-12-07T00:57:42Z","pushed_at":"2015-12-07T00:44:06Z","git_url":"git://github.com/skatejs/react-integration.git","ssh_url":"git@github.com:skatejs/react-integration.git","clone_url":"https://github.com/skatejs/react-integration.git","svn_url":"https://github.com/skatejs/react-integration","homepage":null,"size":11,"stargazers_count":3,"watchers_count":3,"language":"JavaScript","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":0,"mirror_url":null,"open_issues_count":3,"forks":0,"open_issues":3,"watchers":3,"default_branch":"master"}},"base":{"label":"skatejs:master","ref":"master","sha":"08708a8a2fe1a4272347d771abd24e1f4e1fe691","user":{"login":"skatejs","id":7636121,"avatar_url":"https://avatars.githubusercontent.com/u/7636121?v=3","gravatar_id":"","url":"https://api.github.com/users/skatejs","html_url":"https://github.com/skatejs","followers_url":"https://api.github.com/users/skatejs/followers","following_url":"https://api.github.com/users/skatejs/following{/other_user}","gists_url":"https://api.github.com/users/skatejs/gists{/gist_id}","starred_url":"https://api.github.com/users/skatejs/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/skatejs/subscriptions","organizations_url":"https://api.github.com/users/skatejs/orgs","repos_url":"https://api.github.com/users/skatejs/repos","events_url":"https://api.github.com/users/skatejs/events{/privacy}","received_events_url":"https://api.github.com/users/skatejs/received_events","type":"Organization","site_admin":false},"repo":{"id":46830524,"name":"react-integration","full_name":"skatejs/react-integration","owner":{"login":"skatejs","id":7636121,"avatar_url":"https://avatars.githubusercontent.com/u/7636121?v=3","gravatar_id":"","url":"https://api.github.com/users/skatejs","html_url":"https://github.com/skatejs","followers_url":"https://api.github.com/users/skatejs/followers","following_url":"https://api.github.com/users/skatejs/following{/other_user}","gists_url":"https://api.github.com/users/skatejs/gists{/gist_id}","starred_url":"https://api.github.com/users/skatejs/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/skatejs/subscriptions","organizations_url":"https://api.github.com/users/skatejs/orgs","repos_url":"https://api.github.com/users/skatejs/repos","events_url":"https://api.github.com/users/skatejs/events{/privacy}","received_events_url":"https://api.github.com/users/skatejs/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/skatejs/react-integration","description":"Use custom elements in your React components without resorting to hacks.","fork":false,"url":"https://api.github.com/repos/skatejs/react-integration","forks_url":"https://api.github.com/repos/skatejs/react-integration/forks","keys_url":"https://api.github.com/repos/skatejs/react-integration/keys{/key_id}","collaborators_url":"https://api.github.com/repos/skatejs/react-integration/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/skatejs/react-integration/teams","hooks_url":"https://api.github.com/repos/skatejs/react-integration/hooks","issue_events_url":"https://api.github.com/repos/skatejs/react-integration/issues/events{/number}","events_url":"https://api.github.com/repos/skatejs/react-integration/events","assignees_url":"https://api.github.com/repos/skatejs/react-integration/assignees{/user}","branches_url":"https://api.github.com/repos/skatejs/react-integration/branches{/branch}","tags_url":"https://api.github.com/repos/skatejs/react-integration/tags","blobs_url":"https://api.github.com/repos/skatejs/react-integration/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/skatejs/react-integration/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/skatejs/react-integration/git/refs{/sha}","trees_url":"https://api.github.com/repos/skatejs/react-integration/git/trees{/sha}","statuses_url":"https://api.github.com/repos/skatejs/react-integration/statuses/{sha}","languages_url":"https://api.github.com/repos/skatejs/react-integration/languages","stargazers_url":"https://api.github.com/repos/skatejs/react-integration/stargazers","contributors_url":"https://api.github.com/repos/skatejs/react-integration/contributors","subscribers_url":"https://api.github.com/repos/skatejs/react-integration/subscribers","subscription_url":"https://api.github.com/repos/skatejs/react-integration/subscription","commits_url":"https://api.github.com/repos/skatejs/react-integration/commits{/sha}","git_commits_url":"https://api.github.com/repos/skatejs/react-integration/git/commits{/sha}","comments_url":"https://api.github.com/repos/skatejs/react-integration/comments{/number}","issue_comment_url":"https://api.github.com/repos/skatejs/react-integration/issues/comments{/number}","contents_url":"https://api.github.com/repos/skatejs/react-integration/contents/{+path}","compare_url":"https://api.github.com/repos/skatejs/react-integration/compare/{base}...{head}","merges_url":"https://api.github.com/repos/skatejs/react-integration/merges","archive_url":"https://api.github.com/repos/skatejs/react-integration/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/skatejs/react-integration/downloads","issues_url":"https://api.github.com/repos/skatejs/react-integration/issues{/number}","pulls_url":"https://api.github.com/repos/skatejs/react-integration/pulls{/number}","milestones_url":"https://api.github.com/repos/skatejs/react-integration/milestones{/number}","notifications_url":"https://api.github.com/repos/skatejs/react-integration/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/skatejs/react-integration/labels{/name}","releases_url":"https://api.github.com/repos/skatejs/react-integration/releases{/id}","created_at":"2015-11-25T01:51:59Z","updated_at":"2015-12-07T00:57:42Z","pushed_at":"2015-12-07T00:44:06Z","git_url":"git://github.com/skatejs/react-integration.git","ssh_url":"git@github.com:skatejs/react-integration.git","clone_url":"https://github.com/skatejs/react-integration.git","svn_url":"https://github.com/skatejs/react-integration","homepage":null,"size":11,"stargazers_count":3,"watchers_count":3,"language":"JavaScript","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":0,"mirror_url":null,"open_issues_count":3,"forks":0,"open_issues":3,"watchers":3,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/skatejs/react-integration/pulls/3"},"html":{"href":"https://github.com/skatejs/react-integration/pull/3"},"issue":{"href":"https://api.github.com/repos/skatejs/react-integration/issues/3"},"comments":{"href":"https://api.github.com/repos/skatejs/react-integration/issues/3/comments"},"review_comments":{"href":"https://api.github.com/repos/skatejs/react-integration/pulls/3/comments"},"review_comment":{"href":"https://api.github.com/repos/skatejs/react-integration/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/skatejs/react-integration/pulls/3/commits"},"statuses":{"href":"https://api.github.com/repos/skatejs/react-integration/statuses/f337b678c812368834dd2752308439645cae219e"}}}}