Fix get styled className from children components (#313)

* Fix get styled className from children components

Fix issue introduced in #309, the .find is broken when try to
get/check styles in children components.

* add additional test case

Author: Camilo QS

src/toHaveStyleRule.js

@@ -5,12 +5,15 @@ const shouldDive = node =>
 
 const isTagWithClassName = node =>
   node.exists() && node.prop("className") && typeof node.type() === "string";
-  
+
+const isStyledClass = className =>
+  /^(\w+(-|_))?sc-/.test(className);
+
 const hasClassName = node =>
-  node.length > 0 
-  && typeof node.props === "function" 
-  && node.props("className") 
-  && node.props("className").className;
+  node.length > 0
+  && typeof node.props === "function"
+  && node.prop("className")
+  && isStyledClass(node.prop("className"))
 
 const getClassNames = received => {
   let className;
@@ -19,7 +22,7 @@ const getClassNames = received => {
     if (received.$$typeof === Symbol.for("react.test.json")) {
       className = received.props.className || received.props.class;
     } else if (hasClassName(received)) {
-      className = received.props("className").className;
+      className = received.prop("className");
     } else if (typeof received.exists === "function" && received.exists()) {
       const tree = shouldDive(received) ? received.dive() : received;
       const components = tree.findWhere(isTagWithClassName);
@@ -76,7 +79,7 @@ const getModifiedClassName = (className, staticClassName, modifier = "") => {
 };
 
 const hasClassNames = (classNames, selectors, options) => {
-  const staticClassNames = classNames.filter(x => /^(\w+(-|_))?sc-/.test(x));
+  const staticClassNames = classNames.filter(x => isStyledClass(x));
 
   return classNames.some(className =>
     staticClassNames.some(staticClassName =>

test/toHaveStyleRule.spec.js

@@ -483,13 +483,23 @@ it("nested with styling", () => {
   const Wrapper = styled.section`
     background: papayawhip;
   `;
-
+  const Children = styled.span`
+    background: gray;
+  `;
   const MyComponent = (props) => <Wrapper {...props} />;
   const MyStyledComponent = styled(MyComponent)`
     color: red;
   `;
-  
-  toHaveStyleRule(<MyStyledComponent/>, "color", "red");
+  const ParentComponent = (props) => (
+    <MyStyledComponent {...props}>
+      <Children className="test-class" />
+    </MyStyledComponent>
+  );
+
+  toHaveStyleRule(<MyStyledComponent />, "color", "red");
+  toHaveStyleRule(<MyStyledComponent className="test-class" />, "color", "red");
+  expect(shallow(<ParentComponent/>).find(Children)).toHaveStyleRule("background", "gray");
+  expect(mount(<ParentComponent/>).find(Children)).toHaveStyleRule("background", "gray");
 });
 
 it("empty children", () => {