From 86906464099b087f55233a4a254641887347273e Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 10 Jul 2018 12:29:42 -0300
Subject: [PATCH] Better css classnames in snapshots

---
 config/jest/cssTransform.js                   | 13 ++++-
 .../__snapshots__/Comment.spec.tsx.snap       |  4 +-
 .../__snapshots__/Username.spec.tsx.snap      |  2 +-
 .../test/__snapshots__/loadMore.spec.tsx.snap | 52 ++++++++---------
 .../__snapshots__/renderReplies.spec.tsx.snap | 36 ++++++------
 .../__snapshots__/renderStream.spec.tsx.snap  | 22 ++++----
 .../showAllReplies.spec.tsx.snap              | 56 +++++++++----------
 7 files changed, 97 insertions(+), 88 deletions(-)

diff --git a/config/jest/cssTransform.js b/config/jest/cssTransform.js
index 90b6bfa63..ca4c0c0ee 100644
--- a/config/jest/cssTransform.js
+++ b/config/jest/cssTransform.js
@@ -4,7 +4,7 @@
 // Copyright https://github.com/Connormiha/jest-css-modules-transform/graphs/contributors
 // This oututs `module.exports = cssObject` instead of `module.exports = { default: cssObject }`;
 
-const { sep: pathSep, resolve } = require("path");
+const { sep: pathSep, resolve, basename, extname } = require("path");
 const postcss = require("postcss");
 const postcssNested = postcss([require("postcss-nested")]);
 
@@ -88,7 +88,16 @@ module.exports = {
   process(src, path, config) {
     const filename = path.slice(path.lastIndexOf(pathSep) + 1);
     const textCSS = postcssNested.process(src).css;
-    const exprt = JSON.stringify(getCSSSelectors(textCSS, path));
+    const selectors = getCSSSelectors(textCSS, path);
+    const component = basename(path, extname(path));
+
+    Object.keys(selectors).forEach(k => {
+      selectors[k] = selectors[k]
+        .split(/\s+/)
+        .map(v => `${component}-${v}`)
+        .join(" ");
+    });
+    const exprt = JSON.stringify(selectors);
     return `module.exports = ${exprt}`;
   },
 };
diff --git a/src/core/client/stream/components/__snapshots__/Comment.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/Comment.spec.tsx.snap
index ce67dff86..48a1c0464 100644
--- a/src/core/client/stream/components/__snapshots__/Comment.spec.tsx.snap
+++ b/src/core/client/stream/components/__snapshots__/Comment.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`renders username and body 1`] = `
 <div
-  className="root"
+  className="Comment-root"
 >
   <Username>
     Marvin
@@ -15,7 +15,7 @@ exports[`renders username and body 1`] = `
 
 exports[`renders with gutterBottom 1`] = `
 <div
-  className="root gutterBottom"
+  className="Comment-root Comment-gutterBottom"
 >
   <Username>
     Marvin
diff --git a/src/core/client/stream/components/__snapshots__/Username.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/Username.spec.tsx.snap
index 2323b1c31..187895843 100644
--- a/src/core/client/stream/components/__snapshots__/Username.spec.tsx.snap
+++ b/src/core/client/stream/components/__snapshots__/Username.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`renders correctly 1`] = `
 <withPropsOnChange(Typography)
-  className="root"
+  className="Username-root"
   gutterBottom={true}
 >
   Marvin
diff --git a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
index b9595be1b..e349723c8 100644
--- a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
@@ -2,11 +2,11 @@
 
 exports[`loads more comments 1`] = `
 <div
-  className="root"
+  className="Center-root"
 >
   <div>
     <h1
-      className="root heading1 gutterBottom"
+      className="Typography-root Typography-heading1 Typography-gutterBottom"
     >
       Talk NEO
     </h1>
@@ -16,17 +16,17 @@ exports[`loads more comments 1`] = `
     >
       <div>
         <textarea
-          className="textarea"
+          className="PostCommentForm-textarea"
           name="body"
           onChange={[Function]}
           value=""
         />
       </div>
       <div
-        className="postButtonContainer"
+        className="PostCommentForm-postButtonContainer"
       >
         <button
-          className="root root primary"
+          className="BaseButton-root Button-root Button-primary"
           disabled={false}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -38,15 +38,15 @@ exports[`loads more comments 1`] = `
     </form>
     <div>
       <div
-        className="root gutterBottom"
+        className="Comment-root Comment-gutterBottom"
       >
         <p
-          className="root body1 gutterBottom root"
+          className="Typography-root Typography-body1 Typography-gutterBottom Username-root"
         >
           Markus
         </p>
         <p
-          className="root body1"
+          className="Typography-root Typography-body1"
         >
           Joining Too
         </p>
@@ -54,15 +54,15 @@ exports[`loads more comments 1`] = `
     </div>
     <div>
       <div
-        className="root gutterBottom"
+        className="Comment-root Comment-gutterBottom"
       >
         <p
-          className="root body1 gutterBottom root"
+          className="Typography-root Typography-body1 Typography-gutterBottom Username-root"
         >
           Lukas
         </p>
         <p
-          className="root body1"
+          className="Typography-root Typography-body1"
         >
           What's up?
         </p>
@@ -70,15 +70,15 @@ exports[`loads more comments 1`] = `
     </div>
     <div>
       <div
-        className="root gutterBottom"
+        className="Comment-root Comment-gutterBottom"
       >
         <p
-          className="root body1 gutterBottom root"
+          className="Typography-root Typography-body1 Typography-gutterBottom Username-root"
         >
           Isabelle
         </p>
         <p
-          className="root body1"
+          className="Typography-root Typography-body1"
         >
           Hey!
         </p>
@@ -90,11 +90,11 @@ exports[`loads more comments 1`] = `
 
 exports[`renders comment stream 1`] = `
 <div
-  className="root"
+  className="Center-root"
 >
   <div>
     <h1
-      className="root heading1 gutterBottom"
+      className="Typography-root Typography-heading1 Typography-gutterBottom"
     >
       Talk NEO
     </h1>
@@ -104,17 +104,17 @@ exports[`renders comment stream 1`] = `
     >
       <div>
         <textarea
-          className="textarea"
+          className="PostCommentForm-textarea"
           name="body"
           onChange={[Function]}
           value=""
         />
       </div>
       <div
-        className="postButtonContainer"
+        className="PostCommentForm-postButtonContainer"
       >
         <button
-          className="root root primary"
+          className="BaseButton-root Button-root Button-primary"
           disabled={false}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -126,15 +126,15 @@ exports[`renders comment stream 1`] = `
     </form>
     <div>
       <div
-        className="root gutterBottom"
+        className="Comment-root Comment-gutterBottom"
       >
         <p
-          className="root body1 gutterBottom root"
+          className="Typography-root Typography-body1 Typography-gutterBottom Username-root"
         >
           Markus
         </p>
         <p
-          className="root body1"
+          className="Typography-root Typography-body1"
         >
           Joining Too
         </p>
@@ -142,22 +142,22 @@ exports[`renders comment stream 1`] = `
     </div>
     <div>
       <div
-        className="root gutterBottom"
+        className="Comment-root Comment-gutterBottom"
       >
         <p
-          className="root body1 gutterBottom root"
+          className="Typography-root Typography-body1 Typography-gutterBottom Username-root"
         >
           Lukas
         </p>
         <p
-          className="root body1"
+          className="Typography-root Typography-body1"
         >
           What's up?
         </p>
       </div>
     </div>
     <button
-      className="root root invert fullWidth secondary"
+      className="BaseButton-root Button-root Button-invert Button-fullWidth Button-secondary"
       id="talk-stream--load-more"
       onBlur={[Function]}
       onClick={[Function]}
diff --git a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
index 1dbd60833..e55ee7df1 100644
--- a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
@@ -2,11 +2,11 @@
 
 exports[`renders comment stream 1`] = `
 <div
-  className="root"
+  className="Center-root"
 >
   <div>
     <h1
-      className="root heading1 gutterBottom"
+      className="Typography-root Typography-heading1 Typography-gutterBottom"
     >
       Talk NEO
     </h1>
@@ -16,17 +16,17 @@ exports[`renders comment stream 1`] = `
     >
       <div>
         <textarea
-          className="textarea"
+          className="PostCommentForm-textarea"
           name="body"
           onChange={[Function]}
           value=""
         />
       </div>
       <div
-        className="postButtonContainer"
+        className="PostCommentForm-postButtonContainer"
       >
         <button
-          className="root root primary"
+          className="BaseButton-root Button-root Button-primary"
           disabled={false}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -38,15 +38,15 @@ exports[`renders comment stream 1`] = `
     </form>
     <div>
       <div
-        className="root gutterBottom"
+        className="Comment-root Comment-gutterBottom"
       >
         <p
-          className="root body1 gutterBottom root"
+          className="Typography-root Typography-body1 Typography-gutterBottom Username-root"
         >
           Markus
         </p>
         <p
-          className="root body1"
+          className="Typography-root Typography-body1"
         >
           Joining Too
         </p>
@@ -54,46 +54,46 @@ exports[`renders comment stream 1`] = `
     </div>
     <div>
       <div
-        className="root gutterBottom"
+        className="Comment-root Comment-gutterBottom"
       >
         <p
-          className="root body1 gutterBottom root"
+          className="Typography-root Typography-body1 Typography-gutterBottom Username-root"
         >
           Markus
         </p>
         <p
-          className="root body1"
+          className="Typography-root Typography-body1"
         >
           I like yoghurt
         </p>
       </div>
       <div
-        className="root level0"
+        className="Indent-root Indent-level0"
       >
         <div
-          className="root gutterBottom"
+          className="Comment-root Comment-gutterBottom"
         >
           <p
-            className="root body1 gutterBottom root"
+            className="Typography-root Typography-body1 Typography-gutterBottom Username-root"
           >
             Markus
           </p>
           <p
-            className="root body1"
+            className="Typography-root Typography-body1"
           >
             Joining Too
           </p>
         </div>
         <div
-          className="root gutterBottom"
+          className="Comment-root Comment-gutterBottom"
         >
           <p
-            className="root body1 gutterBottom root"
+            className="Typography-root Typography-body1 Typography-gutterBottom Username-root"
           >
             Lukas
           </p>
           <p
-            className="root body1"
+            className="Typography-root Typography-body1"
           >
             What's up?
           </p>
diff --git a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
index a7610a65c..bbfe65dd0 100644
--- a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
@@ -2,11 +2,11 @@
 
 exports[`renders comment stream 1`] = `
 <div
-  className="root"
+  className="Center-root"
 >
   <div>
     <h1
-      className="root heading1 gutterBottom"
+      className="Typography-root Typography-heading1 Typography-gutterBottom"
     >
       Talk NEO
     </h1>
@@ -16,17 +16,17 @@ exports[`renders comment stream 1`] = `
     >
       <div>
         <textarea
-          className="textarea"
+          className="PostCommentForm-textarea"
           name="body"
           onChange={[Function]}
           value=""
         />
       </div>
       <div
-        className="postButtonContainer"
+        className="PostCommentForm-postButtonContainer"
       >
         <button
-          className="root root primary"
+          className="BaseButton-root Button-root Button-primary"
           disabled={false}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -38,15 +38,15 @@ exports[`renders comment stream 1`] = `
     </form>
     <div>
       <div
-        className="root gutterBottom"
+        className="Comment-root Comment-gutterBottom"
       >
         <p
-          className="root body1 gutterBottom root"
+          className="Typography-root Typography-body1 Typography-gutterBottom Username-root"
         >
           Markus
         </p>
         <p
-          className="root body1"
+          className="Typography-root Typography-body1"
         >
           Joining Too
         </p>
@@ -54,15 +54,15 @@ exports[`renders comment stream 1`] = `
     </div>
     <div>
       <div
-        className="root gutterBottom"
+        className="Comment-root Comment-gutterBottom"
       >
         <p
-          className="root body1 gutterBottom root"
+          className="Typography-root Typography-body1 Typography-gutterBottom Username-root"
         >
           Lukas
         </p>
         <p
-          className="root body1"
+          className="Typography-root Typography-body1"
         >
           What's up?
         </p>
diff --git a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
index c744dd323..dcd2108c2 100644
--- a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
@@ -2,11 +2,11 @@
 
 exports[`renders comment stream 1`] = `
 <div
-  className="root"
+  className="Center-root"
 >
   <div>
     <h1
-      className="root heading1 gutterBottom"
+      className="Typography-root Typography-heading1 Typography-gutterBottom"
     >
       Talk NEO
     </h1>
@@ -16,17 +16,17 @@ exports[`renders comment stream 1`] = `
     >
       <div>
         <textarea
-          className="textarea"
+          className="PostCommentForm-textarea"
           name="body"
           onChange={[Function]}
           value=""
         />
       </div>
       <div
-        className="postButtonContainer"
+        className="PostCommentForm-postButtonContainer"
       >
         <button
-          className="root root primary"
+          className="BaseButton-root Button-root Button-primary"
           disabled={false}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -38,38 +38,38 @@ exports[`renders comment stream 1`] = `
     </form>
     <div>
       <div
-        className="root gutterBottom"
+        className="Comment-root Comment-gutterBottom"
       >
         <p
-          className="root body1 gutterBottom root"
+          className="Typography-root Typography-body1 Typography-gutterBottom Username-root"
         >
           Markus
         </p>
         <p
-          className="root body1"
+          className="Typography-root Typography-body1"
         >
           Joining Too
         </p>
       </div>
       <div
-        className="root level0"
+        className="Indent-root Indent-level0"
       >
         <div
-          className="root gutterBottom"
+          className="Comment-root Comment-gutterBottom"
         >
           <p
-            className="root body1 gutterBottom root"
+            className="Typography-root Typography-body1 Typography-gutterBottom Username-root"
           >
             Lukas
           </p>
           <p
-            className="root body1"
+            className="Typography-root Typography-body1"
           >
             What's up?
           </p>
         </div>
         <button
-          className="root root invert fullWidth secondary"
+          className="BaseButton-root Button-root Button-invert Button-fullWidth Button-secondary"
           id="talk-reply-list--show-all--comment-0"
           onBlur={[Function]}
           onClick={[Function]}
@@ -86,11 +86,11 @@ exports[`renders comment stream 1`] = `
 
 exports[`show all replies 1`] = `
 <div
-  className="root"
+  className="Center-root"
 >
   <div>
     <h1
-      className="root heading1 gutterBottom"
+      className="Typography-root Typography-heading1 Typography-gutterBottom"
     >
       Talk NEO
     </h1>
@@ -100,17 +100,17 @@ exports[`show all replies 1`] = `
     >
       <div>
         <textarea
-          className="textarea"
+          className="PostCommentForm-textarea"
           name="body"
           onChange={[Function]}
           value=""
         />
       </div>
       <div
-        className="postButtonContainer"
+        className="PostCommentForm-postButtonContainer"
       >
         <button
-          className="root root primary"
+          className="BaseButton-root Button-root Button-primary"
           disabled={false}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -122,46 +122,46 @@ exports[`show all replies 1`] = `
     </form>
     <div>
       <div
-        className="root gutterBottom"
+        className="Comment-root Comment-gutterBottom"
       >
         <p
-          className="root body1 gutterBottom root"
+          className="Typography-root Typography-body1 Typography-gutterBottom Username-root"
         >
           Markus
         </p>
         <p
-          className="root body1"
+          className="Typography-root Typography-body1"
         >
           Joining Too
         </p>
       </div>
       <div
-        className="root level0"
+        className="Indent-root Indent-level0"
       >
         <div
-          className="root gutterBottom"
+          className="Comment-root Comment-gutterBottom"
         >
           <p
-            className="root body1 gutterBottom root"
+            className="Typography-root Typography-body1 Typography-gutterBottom Username-root"
           >
             Lukas
           </p>
           <p
-            className="root body1"
+            className="Typography-root Typography-body1"
           >
             What's up?
           </p>
         </div>
         <div
-          className="root gutterBottom"
+          className="Comment-root Comment-gutterBottom"
         >
           <p
-            className="root body1 gutterBottom root"
+            className="Typography-root Typography-body1 Typography-gutterBottom Username-root"
           >
             Isabelle
           </p>
           <p
-            className="root body1"
+            className="Typography-root Typography-body1"
           >
             Hey!
           </p>