Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
webf
react-webf
Commits
005331fb
Commit
005331fb
authored
May 06, 2020
by
Mickaël Bourgier
Browse files
🔥
Remove snapshot testing
parent
8f14c499
Changes
34
Expand all
Hide whitespace changes
Inline
Side-by-side
src/AppBar/AppBar.test.js
deleted
100644 → 0
View file @
8f14c499
import
React
from
'
react
'
;
import
renderer
from
'
react-test-renderer
'
;
import
{
SheetsRegistry
}
from
'
react-jss
'
;
import
wrapToTest
from
'
../utils/wrapToTest
'
;
import
AppBar
from
'
./AppBar
'
;
describe
(
'
<AppBar />
'
,
()
=>
{
let
componentToTest
;
let
sheets
;
beforeEach
(()
=>
{
componentToTest
=
null
;
sheets
=
null
;
});
afterEach
(()
=>
{
if
(
componentToTest
!==
null
)
{
const
options
=
sheets
===
null
?
{}
:
{
sheets
};
const
component
=
renderer
.
create
(
wrapToTest
(
options
)(
componentToTest
));
expect
(
component
.
toJSON
()).
toMatchSnapshot
();
if
(
sheets
!==
null
)
{
expect
(
sheets
.
toString
()).
toMatchSnapshot
();
}
}
});
test
(
'
Render without props
'
,
()
=>
{
componentToTest
=
<
AppBar
/>
;
sheets
=
new
SheetsRegistry
();
});
test
(
'
Render with children
'
,
()
=>
{
componentToTest
=
(
<
AppBar
>
Hello
<
strong
>
you
<
/strong
>
<
/AppBar
>
);
});
test
(
'
Should include className and other props
'
,
()
=>
{
componentToTest
=
(
<
AppBar
className
=
'
my-custom-class
'
myCustomProp
=
'
value
'
/>
);
});
test
(
'
Render with color
'
,
()
=>
{
componentToTest
=
<
AppBar
color
=
'
success
'
/>
;
});
test
(
'
Render as fixed
'
,
()
=>
{
componentToTest
=
<
AppBar
fixed
/>
;
});
});
src/AppBar/__snapshots__/AppBar.test.js.snap
deleted
100644 → 0
View file @
8f14c499
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<AppBar /> Render as fixed 1`] = `
<header
className="Paper-root-0-1-11 Paper-elevation4-0-1-16 AppBar-root-0-1-1 AppBar-primaryColor-0-1-3 AppBar-fixed-0-1-2"
/>
`;
exports[`<AppBar /> Render with children 1`] = `
<header
className="Paper-root-0-1-11 Paper-elevation4-0-1-16 AppBar-root-0-1-1 AppBar-primaryColor-0-1-3"
>
Hello
<strong>
you
</strong>
</header>
`;
exports[`<AppBar /> Render with color 1`] = `
<header
className="Paper-root-0-1-11 Paper-elevation4-0-1-16 AppBar-root-0-1-1 AppBar-successColor-0-1-5"
/>
`;
exports[`<AppBar /> Render without props 1`] = `
<header
className="Paper-root-0-1-11 Paper-elevation4-0-1-16 AppBar-root-0-1-1 AppBar-primaryColor-0-1-3"
/>
`;
exports[`<AppBar /> Render without props 2`] = `
".Paper-root-0-1-11 {
background-color: #ffffff;
}
.Paper-elevation0-0-1-12 {
box-shadow: none;
}
.Paper-elevation1-0-1-13 {
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2),0px 1px 1px 0px rgba(0, 0, 0, 0.14),0px 2px 1px -1px rgba(0, 0, 0, 0.12);
}
.Paper-elevation2-0-1-14 {
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2),0px 2px 2px 0px rgba(0, 0, 0, 0.14),0px 3px 1px -2px rgba(0, 0, 0, 0.12);
}
.Paper-elevation3-0-1-15 {
box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.2),0px 3px 4px 0px rgba(0, 0, 0, 0.14),0px 3px 3px -2px rgba(0, 0, 0, 0.12);
}
.Paper-elevation4-0-1-16 {
box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),0px 4px 5px 0px rgba(0, 0, 0, 0.14),0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}
.Paper-elevation5-0-1-17 {
box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12);
}
.Paper-elevation6-0-1-18 {
box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px 0px rgba(0, 0, 0, 0.14),0px 1px 18px 0px rgba(0, 0, 0, 0.12);
}
.Paper-elevation7-0-1-19 {
box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.2),0px 7px 10px 1px rgba(0, 0, 0, 0.14),0px 2px 16px 1px rgba(0, 0, 0, 0.12);
}
.Paper-elevation8-0-1-20 {
box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),0px 8px 10px 1px rgba(0, 0, 0, 0.14),0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.Paper-elevation9-0-1-21 {
box-shadow: 0px 5px 6px -3px rgba(0, 0, 0, 0.2),0px 9px 12px 1px rgba(0, 0, 0, 0.14),0px 3px 16px 2px rgba(0, 0, 0, 0.12);
}
.Paper-elevation10-0-1-22 {
box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.2),0px 10px 14px 1px rgba(0, 0, 0, 0.14),0px 4px 18px 3px rgba(0, 0, 0, 0.12);
}
.Paper-elevation11-0-1-23 {
box-shadow: 0px 6px 7px -4px rgba(0, 0, 0, 0.2),0px 11px 15px 1px rgba(0, 0, 0, 0.14),0px 4px 20px 3px rgba(0, 0, 0, 0.12);
}
.Paper-elevation12-0-1-24 {
box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2),0px 12px 17px 2px rgba(0, 0, 0, 0.14),0px 5px 22px 4px rgba(0, 0, 0, 0.12);
}
.Paper-elevation13-0-1-25 {
box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2),0px 13px 19px 2px rgba(0, 0, 0, 0.14),0px 5px 24px 4px rgba(0, 0, 0, 0.12);
}
.Paper-elevation14-0-1-26 {
box-shadow: 0px 7px 9px -4px rgba(0, 0, 0, 0.2),0px 14px 21px 2px rgba(0, 0, 0, 0.14),0px 5px 26px 4px rgba(0, 0, 0, 0.12);
}
.Paper-elevation15-0-1-27 {
box-shadow: 0px 8px 9px -5px rgba(0, 0, 0, 0.2),0px 15px 22px 2px rgba(0, 0, 0, 0.14),0px 6px 28px 5px rgba(0, 0, 0, 0.12);
}
.Paper-elevation16-0-1-28 {
box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2),0px 16px 24px 2px rgba(0, 0, 0, 0.14),0px 6px 30px 5px rgba(0, 0, 0, 0.12);
}
.Paper-elevation17-0-1-29 {
box-shadow: 0px 8px 11px -5px rgba(0, 0, 0, 0.2),0px 17px 26px 2px rgba(0, 0, 0, 0.14),0px 6px 32px 5px rgba(0, 0, 0, 0.12);
}
.Paper-elevation18-0-1-30 {
box-shadow: 0px 9px 11px -5px rgba(0, 0, 0, 0.2),0px 18px 28px 2px rgba(0, 0, 0, 0.14),0px 7px 34px 6px rgba(0, 0, 0, 0.12);
}
.Paper-elevation19-0-1-31 {
box-shadow: 0px 9px 12px -6px rgba(0, 0, 0, 0.2),0px 19px 29px 2px rgba(0, 0, 0, 0.14),0px 7px 36px 6px rgba(0, 0, 0, 0.12);
}
.Paper-elevation20-0-1-32 {
box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2),0px 20px 31px 3px rgba(0, 0, 0, 0.14),0px 8px 38px 7px rgba(0, 0, 0, 0.12);
}
.Paper-elevation21-0-1-33 {
box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2),0px 21px 33px 3px rgba(0, 0, 0, 0.14),0px 8px 40px 7px rgba(0, 0, 0, 0.12);
}
.Paper-elevation22-0-1-34 {
box-shadow: 0px 10px 14px -6px rgba(0, 0, 0, 0.2),0px 22px 35px 3px rgba(0, 0, 0, 0.14),0px 8px 42px 7px rgba(0, 0, 0, 0.12);
}
.Paper-elevation23-0-1-35 {
box-shadow: 0px 11px 14px -7px rgba(0, 0, 0, 0.2),0px 23px 36px 3px rgba(0, 0, 0, 0.14),0px 9px 44px 8px rgba(0, 0, 0, 0.12);
}
.Paper-elevation24-0-1-36 {
box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2),0px 24px 38px 3px rgba(0, 0, 0, 0.14),0px 9px 46px 8px rgba(0, 0, 0, 0.12);
}
.Paper-rounded-0-1-37 {
border-radius: 4px;
}
.AppBar-root-0-1-1 {
width: 100%;
display: flex;
z-index: 1000;
flex-direction: column;
}
.AppBar-fixed-0-1-2 {
position: fixed;
}
.AppBar-primaryColor-0-1-3 {
color: white;
background-color: #3796e2;
}
.AppBar-secondaryColor-0-1-4 {
color: white;
background-color: #ea4c88;
}
.AppBar-successColor-0-1-5 {
color: white;
background-color: #66bb6a;
}
.AppBar-infoColor-0-1-6 {
color: white;
background-color: #4dbbe2;
}
.AppBar-warningColor-0-1-7 {
color: rgba(0, 0, 0, 0.8);
background-color: #f6b74d;
}
.AppBar-dangerColor-0-1-8 {
color: white;
background-color: #ed5655;
}
.AppBar-lightColor-0-1-9 {
color: rgba(0, 0, 0, 0.8);
background-color: #f0f3f8;
}
.AppBar-darkColor-0-1-10 {
color: white;
background-color: #555555;
}"
`;
exports[`<AppBar /> Should include className and other props 1`] = `
<header
className="Paper-root-0-1-11 Paper-elevation4-0-1-16 AppBar-root-0-1-1 AppBar-primaryColor-0-1-3 my-custom-class"
myCustomProp="value"
/>
`;
src/Checkbox/Checkbox.test.js
deleted
100644 → 0
View file @
8f14c499
import
React
from
'
react
'
;
import
renderer
from
'
react-test-renderer
'
;
import
{
SheetsRegistry
}
from
'
react-jss
'
;
import
wrapToTest
from
'
../utils/wrapToTest
'
;
import
Checkbox
from
'
./Checkbox
'
;
describe
(
'
<Checkbox />
'
,
()
=>
{
let
componentToTest
;
let
sheets
;
let
theme
;
beforeEach
(()
=>
{
componentToTest
=
null
;
sheets
=
null
;
theme
=
null
;
});
afterEach
(()
=>
{
if
(
componentToTest
!==
null
)
{
const
options
=
{
...(
sheets
!==
null
?
{
sheets
}
:
{}),
...(
theme
!==
null
?
{
theme
}
:
{}),
};
const
component
=
renderer
.
create
(
wrapToTest
(
options
)(
componentToTest
));
expect
(
component
.
toJSON
()).
toMatchSnapshot
();
if
(
sheets
!==
null
)
{
expect
(
sheets
.
toString
()).
toMatchSnapshot
();
}
}
});
test
(
'
Render with prop `id` as `fez`
'
,
()
=>
{
componentToTest
=
<
Checkbox
id
=
{
'
fez
'
}
/>
;
sheets
=
new
SheetsRegistry
();
});
test
(
'
Render with prop `id` as `fez` and children
'
,
()
=>
{
componentToTest
=
<
Checkbox
id
=
{
'
fez
'
}
>
Clique
-
moi
!<
/Checkbox>
;
});
test
(
'
Render with prop `id` as `fez` and `checked` as `true`
'
,
()
=>
{
componentToTest
=
<
Checkbox
id
=
{
'
fez
'
}
checked
/>
;
});
test
(
'
Render with prop `id` as `fez` and `disabled` as `true`
'
,
()
=>
{
componentToTest
=
<
Checkbox
id
=
{
'
fez
'
}
disabled
/>
;
});
test
(
'
Should include className and other props
'
,
()
=>
{
componentToTest
=
(
<
Checkbox
id
=
{
'
fez
'
}
className
=
{
'
my-custom-class
'
}
otherProp
=
{
'
fez
'
}
/
>
);
});
});
src/Checkbox/__snapshots__/Checkbox.test.js.snap
deleted
100644 → 0
View file @
8f14c499
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<Checkbox /> Render with prop \`id\` as \`fez\` 1`] = `
<span
className="ToggleInput-root-0-1-1"
>
<input
autoComplete="off"
checked={false}
className="ToggleInput-hidden-0-1-3"
disabled={false}
id="fez"
onChange={[Function]}
type="checkbox"
/>
<span
className=""
onClick={[Function]}
>
<span
className="ToggleInput-span-0-1-4"
>
<svg
className="ToggleInput-icon-0-1-5 ToggleInput-icon-0-1-6"
fill="currentColor"
height="1em"
stroke="currentColor"
strokeWidth="0"
style={
Object {
"color": undefined,
}
}
viewBox="0 0 448 512"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-6 400H54c-3.3 0-6-2.7-6-6V86c0-3.3 2.7-6 6-6h340c3.3 0 6 2.7 6 6v340c0 3.3-2.7 6-6 6z"
/>
</svg>
</span>
</span>
</span>
`;
exports[`<Checkbox /> Render with prop \`id\` as \`fez\` 2`] = `
".ToggleInput-root-0-1-1 {
cursor: pointer;
display: flex;
opacity: 1;
align-items: center;
}
.ToggleInput-disabled-0-1-2 {
cursor: not-allowed;
opacity: 0.3;
}
.ToggleInput-hidden-0-1-3 {
display: none !important;
}
.ToggleInput-span-0-1-4 {
display: flex;
align-items: center;
justify-content: center;
}
.ToggleInput-icon-0-1-6 {
margin-right: 0;
}"
`;
exports[`<Checkbox /> Render with prop \`id\` as \`fez\` and \`checked\` as \`true\` 1`] = `
<span
className="ToggleInput-root-0-1-1"
>
<input
autoComplete="off"
checked={true}
className="ToggleInput-hidden-0-1-3"
disabled={false}
id="fez"
onChange={[Function]}
type="checkbox"
/>
<span
className=""
onClick={[Function]}
>
<span
className="ToggleInput-span-0-1-4"
>
<svg
className="ToggleInput-icon-0-1-5 ToggleInput-icon-0-1-6"
fill="currentColor"
height="1em"
stroke="currentColor"
strokeWidth="0"
style={
Object {
"color": undefined,
}
}
viewBox="0 0 448 512"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M400 480H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48v352c0 26.51-21.49 48-48 48zm-204.686-98.059l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.248-16.379-6.249-22.628 0L184 302.745l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.25 16.379 6.25 22.628.001z"
/>
</svg>
</span>
</span>
</span>
`;
exports[`<Checkbox /> Render with prop \`id\` as \`fez\` and \`disabled\` as \`true\` 1`] = `
<span
className="ToggleInput-root-0-1-1 ToggleInput-disabled-0-1-2"
>
<input
autoComplete="off"
checked={false}
className="ToggleInput-hidden-0-1-3"
disabled={true}
id="fez"
onChange={[Function]}
type="checkbox"
/>
<span
className=""
onClick={[Function]}
>
<span
className="ToggleInput-span-0-1-4"
>
<svg
className="ToggleInput-icon-0-1-5 ToggleInput-icon-0-1-6"
fill="currentColor"
height="1em"
stroke="currentColor"
strokeWidth="0"
style={
Object {
"color": undefined,
}
}
viewBox="0 0 448 512"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-6 400H54c-3.3 0-6-2.7-6-6V86c0-3.3 2.7-6 6-6h340c3.3 0 6 2.7 6 6v340c0 3.3-2.7 6-6 6z"
/>
</svg>
</span>
</span>
</span>
`;
exports[`<Checkbox /> Render with prop \`id\` as \`fez\` and children 1`] = `
<span
className="ToggleInput-root-0-1-1"
>
<input
autoComplete="off"
checked={false}
className="ToggleInput-hidden-0-1-3"
disabled={false}
id="fez"
onChange={[Function]}
type="checkbox"
/>
<span
className=""
onClick={[Function]}
>
<span
className="ToggleInput-span-0-1-4"
>
<svg
className="ToggleInput-icon-0-1-5 ToggleInput-icon-0-1-6"
fill="currentColor"
height="1em"
stroke="currentColor"
strokeWidth="0"
style={
Object {
"color": undefined,
}
}
viewBox="0 0 448 512"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-6 400H54c-3.3 0-6-2.7-6-6V86c0-3.3 2.7-6 6-6h340c3.3 0 6 2.7 6 6v340c0 3.3-2.7 6-6 6z"
/>
</svg>
Clique-moi !
</span>
</span>
</span>
`;
exports[`<Checkbox /> Should include className and other props 1`] = `
<span
className="ToggleInput-root-0-1-1"
>
<input
autoComplete="off"
checked={false}
className="ToggleInput-hidden-0-1-3"
disabled={false}
id="fez"
onChange={[Function]}
otherProp="fez"
type="checkbox"
/>
<span
className="my-custom-class"
onClick={[Function]}
>
<span
className="ToggleInput-span-0-1-4"
>
<svg
className="ToggleInput-icon-0-1-5 ToggleInput-icon-0-1-6"
fill="currentColor"
height="1em"
stroke="currentColor"
strokeWidth="0"
style={
Object {
"color": undefined,
}
}
viewBox="0 0 448 512"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-6 400H54c-3.3 0-6-2.7-6-6V86c0-3.3 2.7-6 6-6h340c3.3 0 6 2.7 6 6v340c0 3.3-2.7 6-6 6z"
/>
</svg>
</span>
</span>
</span>
`;
src/Col/Col.test.js
deleted
100644 → 0
View file @
8f14c499
import
React
from
'
react
'
;
import
renderer
from
'
react-test-renderer
'
;
import
{
SheetsRegistry
}
from
'
react-jss
'
;
import
{
createTheme
}
from
'
../styles
'
;
import
wrapToTest
from
'
../utils/wrapToTest
'
;
import
Col
from
'
./Col
'
;
describe
(
'
<Col />
'
,
()
=>
{
let
componentToTest
;
let
sheets
;
let
theme
;
beforeEach
(()
=>
{
componentToTest
=
null
;
sheets
=
null
;
theme
=
null
;
});
afterEach
(()
=>
{
if
(
componentToTest
!==
null
)
{
const
options
=
{
...(
sheets
!==
null
?
{
sheets
}
:
{}),
...(
theme
!==
null
?
{
theme
}
:
{}),
};
const
component
=
renderer
.
create
(
wrapToTest
(
options
)(
componentToTest
));
expect
(
component
.
toJSON
()).
toMatchSnapshot
();
if
(
sheets
!==
null
)
{
expect
(
sheets
.
toString
()).
toMatchSnapshot
();
}
}
});
test
(
'
Render without props
'
,
()
=>
{
componentToTest
=
<
Col
/>
;
sheets
=
new
SheetsRegistry
();
});
test
(
'
Could render a custom component
'
,
()
=>
{
componentToTest
=
<
Col
component
=
'
p
'
/>
;
});
test
(
'
Render with children
'
,
()
=>
{
componentToTest
=
(
<
Col
>
Hello
<
strong
>
you
<
/strong
>
<
/Col
>
);
});
test
(
'
Should include className and other props
'
,
()
=>
{
componentToTest
=
<
Col
className
=
'
my-custom-class
'
myCustomProp
=
'
value
'
/>
;
});
test
(
'
Render with `sm` prop as `6`, `md` as `4`, `lg` as `true` and `xl` as `auto`
'
,
()
=>
{
componentToTest
=
<
Col
sm
=
{
6
}
md
=
{
4
}
lg
xl
=
'
auto
'
/>
;
});
test
(
'
Render with `xs` prop as `3`, `md` as `true`, `offsetLg` as `2` and `offsetXl` as `0`
'
,
()
=>
{
componentToTest
=
<
Col
xs
=
{
3
}
md
offsetLg
=
{
2
}
offsetXl
=
{
0
}
/>
;
});
test
(
'
Render with `order` prop as `first`
'
,
()
=>
{
componentToTest
=
<
Col
order
=
'
first
'
/>
;
});
test
(
'
Render with `orderSm` prop as `6`
'
,
()
=>
{
componentToTest
=
<
Col
orderSm
=
{
6
}
/>
;
});
test
(
'
Render with `order` prop as `10`, `orderMd` as `2` and `orderLg` as `last`
'
,
()
=>
{
componentToTest
=
<
Col
order
=
{
10
}
orderMd
=
{
2
}
orderLg
=
'
last
'
/>
;
});
test
(
'
Render with `alignSelf` prop as `end`
'
,
()
=>
{
componentToTest
=
<
Col
alignSelf
=
'
end
'
/>
;
});
test
(
'
Render with `alignSelf` prop as `center`, `alignSelfMd` as `baseline` and `alignSelfLg` as `start`
'
,
()
=>
{
componentToTest
=
(
<
Col
alignSelf
=
'
center
'
alignSelfMd
=
'
baseline
'
alignSelfLg
=
'
start
'
/>
);
});
test
(
'
Render with custom gutters in containerContext
'
,
()
=>
{
componentToTest
=
<
Col
containerContext
=
{{
gutter
:
42
}}
/>
;
sheets
=
new
SheetsRegistry
();
});
test
(
'
Render with vertical gutters in containerContext
'
,
()
=>
{
componentToTest
=
<
Col
containerContext
=
{{
verticalGutters
:
true
}}
/>
;
<