wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-08-16 11:29:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

Better css classnames in snapshots

Browse Source
This commit is contained in:
Chi Vinh Le
2018-07-10 12:29:42 -03:00
parent d89d4c25b7
commit 8690646409
7 changed files with 97 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/jest/cssTransform.js
+11 -2
View File
@@ -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}`;
},
};
src/core/client/stream/components/__snapshots__/Comment.spec.tsx.snap
+2 -2
View File
@@ -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
src/core/client/stream/components/__snapshots__/Username.spec.tsx.snap
+1 -1
View File
@@ -2,7 +2,7 @@
exports[`renders correctly 1`] = `
<withPropsOnChange(Typography)
className="root"
className="Username-root"
gutterBottom={true}
>
Marvin
src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
+26 -26
View File
@@ -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]}
src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
+18 -18
View File
@@ -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>
src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
+11 -11
View File
@@ -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>
src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
+28 -28
View File
@@ -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>