From b899959673d443948277e1355908a99ca788e409 Mon Sep 17 00:00:00 2001
From: Camilo QS <vxcamiloxv@disroot.org>
Date: Mon, 13 Apr 2020 20:40:51 -0500
Subject: [PATCH 1/2] 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.
---
 src/toHaveStyleRule.js       | 17 ++++++++++-------
 test/toHaveStyleRule.spec.js | 15 ++++++++++++---
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/toHaveStyleRule.js b/src/toHaveStyleRule.js
index 0bb5526..d4d6a50 100644
--- a/src/toHaveStyleRule.js
+++ b/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 =>
diff --git a/test/toHaveStyleRule.spec.js b/test/toHaveStyleRule.spec.js
index 43237aa..6cb2c49 100644
--- a/test/toHaveStyleRule.spec.js
+++ b/test/toHaveStyleRule.spec.js
@@ -483,13 +483,22 @@ 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");
+  expect(shallow(<ParentComponent/>).find(Children)).toHaveStyleRule("background", "gray");
+  expect(mount(<ParentComponent/>).find(Children)).toHaveStyleRule("background", "gray");
 });
 
 it("empty children", () => {

From b647ef23dff3b46c3707df32c08d20fd61c9baad Mon Sep 17 00:00:00 2001
From: Camilo QS <vxcamiloxv@disroot.org>
Date: Mon, 13 Apr 2020 21:03:34 -0500
Subject: [PATCH 2/2] add additional test case

---
 test/toHaveStyleRule.spec.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/test/toHaveStyleRule.spec.js b/test/toHaveStyleRule.spec.js
index 6cb2c49..b22c195 100644
--- a/test/toHaveStyleRule.spec.js
+++ b/test/toHaveStyleRule.spec.js
@@ -497,6 +497,7 @@ it("nested with styling", () => {
   );
 
   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");
 });