{"action":"closed","issue":{"url":"https://api.github.com/repos/Khan/aphrodite/issues/119","repository_url":"https://api.github.com/repos/Khan/aphrodite","labels_url":"https://api.github.com/repos/Khan/aphrodite/issues/119/labels{/name}","comments_url":"https://api.github.com/repos/Khan/aphrodite/issues/119/comments","events_url":"https://api.github.com/repos/Khan/aphrodite/issues/119/events","html_url":"https://github.com/Khan/aphrodite/issues/119","id":169141727,"number":119,"title":"Unit testing without a DOM","user":{"login":"danprince","id":1266011,"avatar_url":"https://avatars.githubusercontent.com/u/1266011?v=3","gravatar_id":"","url":"https://api.github.com/users/danprince","html_url":"https://github.com/danprince","followers_url":"https://api.github.com/users/danprince/followers","following_url":"https://api.github.com/users/danprince/following{/other_user}","gists_url":"https://api.github.com/users/danprince/gists{/gist_id}","starred_url":"https://api.github.com/users/danprince/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/danprince/subscriptions","organizations_url":"https://api.github.com/users/danprince/orgs","repos_url":"https://api.github.com/users/danprince/repos","events_url":"https://api.github.com/users/danprince/events{/privacy}","received_events_url":"https://api.github.com/users/danprince/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2016-08-03T14:13:53Z","updated_at":"2016-08-03T16:43:08Z","closed_at":"2016-08-03T16:43:08Z","body":"Trying Aphrodite out on a new project and authoring styled components has been great so far. Just started writing the next round of unit tests and I've come up against problems.\r\n\r\nJust to give you an idea of how these tests look:\r\n\r\n```js\r\nimport { shallow } from 'enzyme';\r\nimport { css } from 'aphrodite';\r\n\r\nlet wrapper = shallow(<MyComponent />);\r\nassert.ok(\r\n  wrapper.find('button').hasClass(css(MyComponent.styles.selected)),\r\n  'button should have selected styles applied'\r\n);\r\n```\r\n\r\nThe calls to `css()` ultimately call `injectStyleTag` which requires the `document` object to be present, which isn't an issue when running tests with a headless browser / jsdom, but it prevents anyone from running lightweight shallow render tests under plain old node.\r\n\r\nI've tried to bootstrap with [undom][1] and [react-faux-dom][2] but neither expose a `document` object in a way that works with Aphrodite -- undom doesn't support `querySelector` and react-faux-dom exposes the required methods over multiple objects.\r\n\r\nWould it be possible to just stay hands off the DOM if the `document` object doesn't exist in scope? It'd be handy to be able to get the class name back for testing, so how about adding another top level method that works like `injectAndGetClassName`, but doesn't perform the injection step and just returns the class name.\r\n\r\nIn theory, nothing would change at the client side, but the `css` function would need to be revamped to something like this.\r\n\r\n```js\r\nconst css = (...styleDefinitions) => {\r\n    const useImportant = true;   // Append !important to all style definitions\r\n    if(typeof document === 'object') {\r\n      return injectAndGetClassName(useImportant, styleDefinitions);\r\n    } else {\r\n      return getClassName(useImportant, styleDefinitions);\r\n    }\r\n};\r\n```\r\n\r\nHappy to put a PR together if this makes sense for you guys!\r\n\r\n[1]: https://github.com/developit/undom\r\n[2]: https://github.com/Olical/react-faux-dom"}}
{"actor":{"display_login":"jlfwong"}}