├── .gitignore ├── test-setup.js ├── .flowconfig ├── package.json ├── test.js ├── index.js ├── README.md ├── LICENSE └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | -------------------------------------------------------------------------------- /test-setup.js: -------------------------------------------------------------------------------- 1 | const browserEnv = require('browser-env'); 2 | browserEnv(); 3 | require('raf/polyfill'); 4 | -------------------------------------------------------------------------------- /.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | 3 | [include] 4 | 5 | [libs] 6 | 7 | [lints] 8 | 9 | [options] 10 | 11 | [strict] 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tested-components", 3 | "version": "1.0.0", 4 | "description": "Browser integration testing utils for styled-components", 5 | "main": "index.js", 6 | "repository": "https://github.com/jamiebuilds/tested-components", 7 | "author": "Jamie Kyle ", 8 | "license": "MIT", 9 | "keywords": [ 10 | "integration", 11 | "browser", 12 | "unit", 13 | "testing", 14 | "styled-components", 15 | "css-in-js" 16 | ], 17 | "files": [ 18 | "index.js" 19 | ], 20 | "scripts": { 21 | "test": "ava test.js" 22 | }, 23 | "devDependencies": { 24 | "ava": "^0.25.0", 25 | "browser-env": "^3.2.5", 26 | "flow-bin": "^0.68.0", 27 | "raf": "^3.4.0", 28 | "react": "^16.2.0", 29 | "react-dom": "^16.2.0", 30 | "styled-components": "^3.2.3" 31 | }, 32 | "ava": { 33 | "require": [ 34 | "./test-setup.js" 35 | ] 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /test.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 'use strict'; 3 | const test = require('ava'); 4 | const { createElement: h} = require('react'); 5 | const { render } = require('react-dom'); 6 | const styled = require('styled-components').default; 7 | const { find, findAll } = require('./'); 8 | 9 | const Button = styled.button` 10 | background: blue; 11 | `; 12 | 13 | let root; 14 | 15 | test.beforeEach(() => { 16 | root = document.createElement('root'); 17 | (document.body /*: any */).appendChild(root); 18 | }); 19 | 20 | test.afterEach(() => { 21 | root.remove(); 22 | }); 23 | 24 | test('find()', t => { 25 | render( 26 | h('div', null, h(Button, null, 'hi there')), 27 | root 28 | ); 29 | 30 | let button = find(root, Button); 31 | t.is((button /*: any */).textContent, 'hi there'); 32 | }); 33 | 34 | test('findAll()', t => { 35 | render( 36 | h('div', null, 37 | h(Button, null, 'one'), 38 | h(Button, null, 'two') 39 | ), 40 | root 41 | ); 42 | 43 | let button = findAll(root, Button); 44 | t.is(button[0].textContent, 'one'); 45 | t.is(button[1].textContent, 'two'); 46 | }); 47 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | /*:: 3 | import type { ComponentType } from 'react'; 4 | */ 5 | 6 | function assertElement(element) { 7 | if (!(element instanceof HTMLElement)) { 8 | throw new Error('Must pass a DOM element to find/findAll(element, styledComponent)"'); 9 | } 10 | } 11 | 12 | function assertStyledComponent(styledComponent) { 13 | if (!(typeof styledComponent === 'function' && typeof styledComponent.styledComponentId === 'string')) { 14 | throw new Error('Must pass a styled component to find/findAll(element, styledComponent)"'); 15 | } 16 | } 17 | 18 | function find(element /*: Element */, styledComponent /*: Object */) { 19 | assertElement(element); 20 | assertStyledComponent(styledComponent); 21 | return element.querySelector('.' + styledComponent.styledComponentId); 22 | } 23 | 24 | function findAll(element /*: Element */, styledComponent /*: Object */) { 25 | assertElement(element); 26 | assertStyledComponent(styledComponent); 27 | return element.querySelectorAll('.' + styledComponent.styledComponentId); 28 | } 29 | 30 | exports.find = find; 31 | exports.findAll = findAll; 32 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # tested-components 2 | 3 | > Browser integration testing utils for styled-components 4 | 5 | ## Install 6 | 7 | ```sh 8 | yarn add --dev tested-components 9 | ``` 10 | 11 | ## Usage 12 | 13 | **ConfirmPage.js** 14 | 15 | ```js 16 | import React from 'react'; 17 | import styled from 'styled-components'; 18 | 19 | export const ConfirmForm = styled.form`...`; 20 | export const ConfirmButton = styled.button`...`; 21 | 22 | export default function ConfirmPage(props) { 23 | return ( 24 | 25 | Confirm. 26 | 27 | ); 28 | } 29 | ``` 30 | 31 | **ConfirmPage.test.js** 32 | 33 | ```js 34 | import React from 'react'; 35 | import { render } from 'react-dom'; 36 | import ConfirmPage, { ConfirmForm, ConfirmButton } from './ConfirmPage'; 37 | import { find, findAll } from 'tested-components'; 38 | 39 | let root = document.getElementById('root'); 40 | render(, root); 41 | 42 | let form = find(root, ConfirmForm); //
43 | let buttons = findAll(form, ConfirmButton); // [