test: proper test suite

Author: andreypopp

src/__tests__/fixtures/custom-base.css

@@ -0,0 +1,3 @@
+:local(.Label) {
+    color: red
+}

src/__tests__/fixtures/custom-base.js

@@ -0,0 +1,6 @@
+import React from "react";
+import styles from "css";
+export function Label(props) {
+  return React.createElement("span", { ...props, className: styles.Label
+  });
+}

src/__tests__/fixtures/custom-base.react.css

@@ -0,0 +1,4 @@
+Label {
+  base: span;
+  color: red;
+}

src/__tests__/fixtures/pseudo-nested.css

@@ -0,0 +1,9 @@
+:local(.Label) {
+    color: red
+}
+:local(.Label:hover) {
+    color: white
+}
+:local(.Label:hover:focus) {
+    color: black
+}

src/__tests__/fixtures/pseudo-nested.js

@@ -0,0 +1,6 @@
+import React from "react";
+import styles from "css";
+export function Label(props) {
+  return React.createElement("div", { ...props, className: styles.Label
+  });
+}

src/__tests__/fixtures/pseudo-nested.react.css

@@ -0,0 +1,9 @@
+Label {
+  color: red;
+  :hover {
+    color: white;
+    :focus {
+      color: black;
+    }
+  }
+}

src/__tests__/fixtures/pseudo.css

@@ -0,0 +1,6 @@
+:local(.Label) {
+    color: red
+}
+:local(.Label:hover) {
+    color: white
+}

src/__tests__/fixtures/pseudo.js

@@ -0,0 +1,6 @@
+import React from "react";
+import styles from "css";
+export function Label(props) {
+  return React.createElement("div", { ...props, className: styles.Label
+  });
+}

src/__tests__/fixtures/pseudo.react.css

@@ -0,0 +1,6 @@
+Label {
+  color: red;
+  :hover {
+    color: white;
+  }
+}

src/__tests__/fixtures/simple.css

@@ -0,0 +1,3 @@
+:local(.Label) {
+    color: red
+}

src/__tests__/fixtures/simple.js

@@ -0,0 +1,6 @@
+import React from "react";
+import styles from "css";
+export function Label(props) {
+  return React.createElement("div", { ...props, className: styles.Label
+  });
+}

src/__tests__/fixtures/simple.react.css

@@ -0,0 +1,3 @@
+Label {
+  color: red;
+}

src/__tests__/index-test.js

@@ -1,67 +1,37 @@
+/**
+ * @copyright 2016-present, React CSS Components team
+ * @flow
+ */
+
+import assert from 'assert';
+import fs from 'fs';
+import path from 'path';
 import {render} from '../';
 
-describe('react-css-components', function() {
-
-  it('renders react compoents', function() {
-    let {js, css} = render(`
-
-Label {
-  color: red;
-}
-    `, {requestCSS: 'react-css-components?css!styles.react.css'});
-    console.log('--- js');
-    console.log(js);
-    console.log('--- css');
-    console.log(css);
-  });
-
+const REACT_CSS_RE = /\.react\.css$/;
 
-  it('renders react components with pseudoclasses', function() {
-    let {js, css} = render(`
+describe('react-css-components', function() {
 
-Label {
-  color: red;
-  :hover {
-    color: white;
+  function readFixture(filename) {
+    filename = path.join(__dirname, 'fixtures', filename);
+    return fs.readFileSync(filename, 'utf8').trim();
   }
-}
-    `, {requestCSS: 'react-css-components?css!styles.react.css'});
-    console.log('--- js');
-    console.log(js);
-    console.log('--- css');
-    console.log(css);
-  });
 
-  it('renders react components with nested pseudoclasses', function() {
-    let {js, css} = render(`
+  fs.readdirSync(path.join(__dirname, 'fixtures')).forEach(filename => {
 
-Label {
-  color: red;
-  :hover {
-    color: white;
-    :focus {
-      color: black;
+    if (!REACT_CSS_RE.exec(filename)) {
+      return;
     }
-  }
-}
-    `, {requestCSS: 'react-css-components?css!styles.react.css'});
-    console.log('--- js');
-    console.log(js);
-    console.log('--- css');
-    console.log(css);
-  });
+    let jsExpect = filename.replace(REACT_CSS_RE, '.js');
+    let cssExpect = filename.replace(REACT_CSS_RE, '.css');
 
-  it('renders react components based on specified DOM component', function() {
-    let {js, css} = render(`
+    it('renders: ' + filename, function() {
+      let source = readFixture(filename);
+      let {js, css} = render(source, {requestCSS: 'css'});
+      assert.equal(js, readFixture(jsExpect));
+      assert.equal(css, readFixture(cssExpect));
+    });
 
-Label {
-  base: span;
-  color: red;
-}
-    `, {requestCSS: 'react-css-components?css!styles.react.css'});
-    console.log('--- js');
-    console.log(js);
-    console.log('--- css');
-    console.log(css);
   });
+
 });