test(cp-frontend): add more tests

This commit is contained in:
Sara Vieira 2017-09-07 10:25:54 +01:00 committed by Sérgio Ramos
parent d1bc04c528
commit 9df5afc607
50 changed files with 42655 additions and 746 deletions

View File

@ -17,4 +17,4 @@ export const EEditor = ({ input, defaultValue, readOnly }) => (
value={input.value || defaultValue} value={input.value || defaultValue}
readOnly={readOnly} readOnly={readOnly}
/> />
); );

View File

@ -80,4 +80,4 @@ export const Environment = ({
); );
}; };
export default Environment; export default Environment;

View File

@ -3,6 +3,7 @@ import { FormMeta, Button, Label } from 'joyent-ui-toolkit';
import { Row } from 'react-styled-flexboxgrid'; import { Row } from 'react-styled-flexboxgrid';
import remcalc from 'remcalc'; import remcalc from 'remcalc';
import { Field } from 'redux-form'; import { Field } from 'redux-form';
import { MEditor } from './editors';
const ButtonsRow = Row.extend`margin: ${remcalc(29)} 0 ${remcalc(60)} 0;`; const ButtonsRow = Row.extend`margin: ${remcalc(29)} 0 ${remcalc(60)} 0;`;
@ -33,4 +34,4 @@ export const Manifest = ({
</form> </form>
); );
export default Manifest; export default Manifest;

View File

@ -179,7 +179,7 @@ const ServiceListItem = ({
} }
const graphs = const graphs =
!children.length && Object.keys(service.metrics).length !children.length && service.metrics && Object.keys(service.metrics).length
? Object.keys(service.metrics).map(key => ( ? Object.keys(service.metrics).map(key => (
<GraphContainer xs={4}> <GraphContainer xs={4}>
<GraphLeftShaddow /> <GraphLeftShaddow />
@ -229,4 +229,4 @@ ServiceListItem.propTypes = {
service: PropTypes.object.isRequired // Define better service: PropTypes.object.isRequired // Define better
}; };
export default ServiceListItem; export default ServiceListItem;

View File

@ -157,4 +157,4 @@ export const withServiceMetricsGql = ({
}; };
} }
}); });
}; };

View File

@ -66,4 +66,4 @@ export default paths => {
} }
}; };
}; };
}; };

View File

@ -84,4 +84,4 @@ export default compose(
} }
}), }),
withNotFound([GqlPaths.DEPLOYMENT_GROUP, GqlPaths.SERVICES]) withNotFound([GqlPaths.DEPLOYMENT_GROUP, GqlPaths.SERVICES])
)(ServiceMetrics); )(ServiceMetrics);

View File

@ -185,4 +185,4 @@ const ServicesTopologyWithData = compose(
withNotFound([GqlPaths.DEPLOYMENT_GROUP]) withNotFound([GqlPaths.DEPLOYMENT_GROUP])
)(ServicesTopology); )(ServicesTopology);
export default ServicesTopologyWithData; export default ServicesTopologyWithData;

View File

@ -177,7 +177,7 @@ const processServicesForTopology = services => {
// metricsData should prob be an array rather than an object // metricsData should prob be an array rather than an object
const processInstancesMetrics = instances => const processInstancesMetrics = instances =>
forceArray(instances).reduce((metrics, instance) => { forceArray(instances).reduce((metrics, instance) => {
instance.metrics.forEach(instanceMetrics => { instance.metrics && instance.metrics.forEach(instanceMetrics => {
metrics[instanceMetrics.name] = forceArray( metrics[instanceMetrics.name] = forceArray(
metrics[instanceMetrics.name] metrics[instanceMetrics.name]
).concat([instanceMetrics]); ).concat([instanceMetrics]);
@ -198,4 +198,4 @@ export {
processServices, processServices,
processServicesForTopology, processServicesForTopology,
processInstancesMetrics processInstancesMetrics
}; };

View File

@ -52,17 +52,17 @@ exports[`renders <DeploymentGroupDelete /> without throwing 1`] = `
} }
.c4::-moz-focus-inner, .c4::-moz-focus-inner,
.c4[type="button"]::-moz-focus-inner, .c4[type='button']::-moz-focus-inner,
.c4[type="reset"]::-moz-focus-inner, .c4[type='reset']::-moz-focus-inner,
.c4[type="submit"]::-moz-focus-inner { .c4[type='submit']::-moz-focus-inner {
border-style: none; border-style: none;
padding: 0; padding: 0;
} }
.c4:-moz-focusring, .c4:-moz-focusring,
.c4[type="button"]:-moz-focusring, .c4[type='button']:-moz-focusring,
.c4[type="reset"]:-moz-focusring, .c4[type='reset']:-moz-focusring,
.c4[type="submit"]:-moz-focusring { .c4[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText; outline: 0.0625rem dotted ButtonText;
} }
@ -161,17 +161,17 @@ exports[`renders <DeploymentGroupDelete /> without throwing 1`] = `
} }
.c5::-moz-focus-inner, .c5::-moz-focus-inner,
.c5[type="button"]::-moz-focus-inner, .c5[type='button']::-moz-focus-inner,
.c5[type="reset"]::-moz-focus-inner, .c5[type='reset']::-moz-focus-inner,
.c5[type="submit"]::-moz-focus-inner { .c5[type='submit']::-moz-focus-inner {
border-style: none; border-style: none;
padding: 0; padding: 0;
} }
.c5:-moz-focusring, .c5:-moz-focusring,
.c5[type="button"]:-moz-focusring, .c5[type='button']:-moz-focusring,
.c5[type="reset"]:-moz-focusring, .c5[type='reset']:-moz-focusring,
.c5[type="submit"]:-moz-focusring { .c5[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText; outline: 0.0625rem dotted ButtonText;
} }
@ -230,7 +230,19 @@ exports[`renders <DeploymentGroupDelete /> without throwing 1`] = `
} }
<div> <div>
<h2 .c1 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 500;
font-size: 1.5rem;
}
.c0 {
line-height: 1.25;
color: ;
margin: 0 0 0.75rem 0;
}
<h2
className="c0 c1" className="c0 c1"
> >
Deleting a deployment group: Deleting a deployment group:
@ -238,19 +250,235 @@ exports[`renders <DeploymentGroupDelete /> without throwing 1`] = `
Wordpress Blog Example Wordpress Blog Example
</h2> </h2>
<p .c1 {
className="c2 c3" font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
line-height: 1.5rem;
font-size: 0.9375rem;
}
.c0 {
color: ;
margin: 0.75rem 0 1.875rem 0;
}
<p
className="c0 c1"
> >
Deleting a deployment group will also remove all of the services and instances associated with that deployment group. Are you sure you want to continue? Deleting a deployment group will also remove all of the services and instances associated with that deployment group. Are you sure you want to continue?
</p> </p>
<button .c0 {
className="c4" font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
margin: 0;
overflow: visible;
text-transform: none;
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
min-width: 7.5rem;
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0;
padding: 0.9375rem 1.125rem;
position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
color: ;
background-image: none;
background-color: ;
border-radius: 0.25rem;
border: solid 0.0625rem;
color: ;
background-color: ;
border-color: ;
}
.c0::-moz-focus-inner,
.c0[type='button']::-moz-focus-inner,
.c0[type='reset']::-moz-focus-inner,
.c0[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c0:-moz-focusring,
.c0[type='button']:-moz-focusring,
.c0[type='reset']:-moz-focusring,
.c0[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c0:focus {
outline: 0;
text-decoration: none;
background-color: ;
border-color: ;
}
.c0:hover {
background-color: ;
border: solid 0.0625rem;
}
.c0:active,
.c0:active:hover,
.c0:active:focus {
background-image: none;
outline: 0;
background-color: ;
border-color: ;
}
.c0[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c0:focus {
background-color: ;
border-color: ;
}
.c0:hover {
background-color: ;
border-color: ;
}
.c0:active,
.c0:active:hover,
.c0:active:focus {
background-color: ;
border-color: ;
}
.c0 + button {
margin-left: 1.25rem;
}
<button
className="c0"
onClick={[Function]} onClick={[Function]}
> >
Cancel Cancel
</button> </button>
<button .c0 {
className="c5" font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
margin: 0;
overflow: visible;
text-transform: none;
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
min-width: 7.5rem;
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0;
padding: 0.9375rem 1.125rem;
position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
color: ;
background-image: none;
background-color: ;
border-radius: 0.25rem;
border: solid 0.0625rem;
}
.c0::-moz-focus-inner,
.c0[type='button']::-moz-focus-inner,
.c0[type='reset']::-moz-focus-inner,
.c0[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c0:-moz-focusring,
.c0[type='button']:-moz-focusring,
.c0[type='reset']:-moz-focusring,
.c0[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c0:focus {
outline: 0;
text-decoration: none;
background-color: ;
border-color: ;
}
.c0:hover {
background-color: ;
border: solid 0.0625rem;
}
.c0:active,
.c0:active:hover,
.c0:active:focus {
background-image: none;
outline: 0;
background-color: ;
border-color: ;
}
.c0[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c0 + button {
margin-left: 1.25rem;
}
<button
className="c0"
onClick={[Function]} onClick={[Function]}
> >
Delete deployment group Delete deployment group

View File

@ -49,11 +49,44 @@ exports[`renders <EmtpyInstances /> without throwing 1`] = `
<div <div
className="c0" className="c0"
> >
<div .c0 {
className="c1" box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c1 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
line-height: 1.5rem;
font-size: 0.9375rem;
}
@media only screen and (min-width:0em) {
.c0 {
-webkit-flex-basis: 100%;
-ms-flex-basis: 100%;
flex-basis: 100%;
max-width: 100%;
display: block;
}
}
<div
className="c0"
> >
<p .c0 {
className="c2" font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
line-height: 1.5rem;
font-size: 0.9375rem;
}
<p
className="c0"
> >
You don't have any instances You don't have any instances
</p> </p>

View File

@ -1,16 +1,19 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders <InstanceCard /> without throwing 1`] = ` exports[`renders <InstanceCard /> without throwing 1`] = `
.c10 { .c12 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400; font-weight: 400;
font-size: 0.9375rem; font-size: 0.9375rem;
font-style: normal; font-style: normal;
font-stretch: normal; font-stretch: normal;
font-weight: bold;
display: block;
color: ; color: ;
} }
.c8 { .c9 {
-webkit-fill: ;
fill: ; fill: ;
} }
@ -80,6 +83,8 @@ exports[`renders <InstanceCard /> without throwing 1`] = `
-webkit-justify-content: flex-start; -webkit-justify-content: flex-start;
-ms-flex-pack: start; -ms-flex-pack: start;
justify-content: flex-start; justify-content: flex-start;
height: 100%;
position: relative;
} }
.c1 { .c1 {
@ -146,26 +151,50 @@ exports[`renders <InstanceCard /> without throwing 1`] = `
flex-direction: row; flex-direction: row;
} }
.c9 { .c10 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400; font-weight: 400;
font-size: 0.9375rem; font-size: 0.9375rem;
font-style: normal; font-style: normal;
font-stretch: normal; font-stretch: normal;
font-weight: bold;
display: block;
color: ; color: ;
display: inline-block; display: inline-block;
margin-left: 1.5rem; margin-left: 1.5rem;
} }
.c9::first-letter { .c10::first-letter {
text-transform: capitalize; text-transform: capitalize;
} }
.c7 { .c8 {
position: absolute; position: absolute;
} }
.c11 { .c7 {
height: 100%;
float: right;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
}
.c13 {
margin-right: 0.375rem; margin-right: 0.375rem;
width: 0.375rem; width: 0.375rem;
height: 0.375rem; height: 0.375rem;
@ -187,92 +216,825 @@ exports[`renders <InstanceCard /> without throwing 1`] = `
border-bottom-width: 0; border-bottom-width: 0;
} }
.c11 {
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
}
<div <div
className="c0 c1" className="c0 c1"
name="card" name="card"
> >
<div .c10 {
className="c2" font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
}
.c7 {
-webkit-fill: ;
fill: ;
}
.c1 {
font-size: 0.9375rem;
line-height: 1.5;
color: ;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 600;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-flex-grow: 2;
-ms-flex-grow: 2;
flex-grow: 2;
-webkit-flex-basis: 5.625rem;
-ms-flex-basis: 5.625rem;
flex-basis: 5.625rem;
width: 100%;
padding: 0.75rem 1.125rem 0 1.125rem;
-webkit-flex-grow: 6;
-ms-flex-grow: 6;
flex-grow: 6;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
width: auto;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
padding: 0 1.125rem;
}
.c2 {
display: inline-block;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.c3 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
-webkit-flex-grow: 1;
-ms-flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 5.625rem;
-ms-flex-basis: 5.625rem;
flex-basis: 5.625rem;
}
.c4 {
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
height: 100%;
position: relative;
}
.c0 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -0.5rem;
margin-left: -0.5rem;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
margin: 0;
height: auto;
padding-top: 0;
min-width: auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
.c8 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
display: inline-block;
margin-left: 1.5rem;
}
.c8::first-letter {
text-transform: capitalize;
}
.c6 {
position: absolute;
}
.c5 {
height: 100%;
float: right;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
}
.c11 {
margin-right: 0.375rem;
width: 0.375rem;
height: 0.375rem;
border-radius: 0.1875rem;
display: inline-block;
background-color: ;
}
.c9 {
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
}
<div
className="c0"
name="card-view" name="card-view"
> >
<div .c0 {
className="c3" font-size: 0.9375rem;
line-height: 1.5;
color: ;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 600;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-flex-grow: 2;
-ms-flex-grow: 2;
flex-grow: 2;
-webkit-flex-basis: 5.625rem;
-ms-flex-basis: 5.625rem;
flex-basis: 5.625rem;
width: 100%;
padding: 0.75rem 1.125rem 0 1.125rem;
-webkit-flex-grow: 6;
-ms-flex-grow: 6;
flex-grow: 6;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
width: auto;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
padding: 0 1.125rem;
}
.c1 {
display: inline-block;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
<div
className="c0"
name="container" name="container"
> >
<span .c0 {
className="c4" display: inline-block;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
<span
className="c0"
> >
wordpress_01 wordpress_01
</span> </span>
</div> </div>
<div .c5 {
className="c5 c3" -webkit-fill: ;
fill: ;
}
.c1 {
font-size: 0.9375rem;
line-height: 1.5;
color: ;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 600;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-flex-grow: 2;
-ms-flex-grow: 2;
flex-grow: 2;
-webkit-flex-basis: 5.625rem;
-ms-flex-basis: 5.625rem;
flex-basis: 5.625rem;
width: 100%;
padding: 0.75rem 1.125rem 0 1.125rem;
-webkit-flex-grow: 6;
-ms-flex-grow: 6;
flex-grow: 6;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
width: auto;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
padding: 0 1.125rem;
}
.c0 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
-webkit-flex-grow: 1;
-ms-flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 5.625rem;
-ms-flex-basis: 5.625rem;
flex-basis: 5.625rem;
}
.c2 {
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
height: 100%;
position: relative;
}
.c6 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
display: inline-block;
margin-left: 1.5rem;
}
.c6::first-letter {
text-transform: capitalize;
}
.c4 {
position: absolute;
}
.c3 {
height: 100%;
float: right;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
}
<div
className="c0 c1"
name="container" name="container"
> >
<div .c3 {
className="c6" -webkit-fill: ;
fill: ;
}
.c0 {
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
height: 100%;
position: relative;
}
.c4 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
display: inline-block;
margin-left: 1.5rem;
}
.c4::first-letter {
text-transform: capitalize;
}
.c2 {
position: absolute;
}
.c1 {
height: 100%;
float: right;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
}
<div
className="c0"
> >
<div .c2 {
-webkit-fill: ;
fill: ;
}
.c3 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
display: inline-block;
margin-left: 1.5rem;
}
.c3::first-letter {
text-transform: capitalize;
}
.c1 {
position: absolute;
}
.c0 {
height: 100%;
float: right;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
}
<div
className="c0"
onMouseOut={[Function]} onMouseOut={[Function]}
onMouseOver={[Function]} onMouseOver={[Function]}
> >
<div> .c1 {
<div -webkit-fill: ;
className="c7" fill: ;
color="dark" }
.c0 {
position: absolute;
}
<div
className="c0"
color="dark"
>
.c0 {
-webkit-fill: ;
fill: ;
}
<svg
className="c0"
healthy="HEALTHY"
height="18"
viewBox="0 0 18 18"
width="18"
xmlns="http://www.w3.org/2000/svg"
> >
<svg <title>
className="c8" icon: state
healthy="HEALTHY" </title>
height="18" <g
viewBox="0 0 18 18" fillRule="evenodd"
width="18"
xmlns="http://www.w3.org/2000/svg"
> >
<title> <circle
icon: state cx="9"
</title> cy="9"
<g r="9"
fillRule="evenodd" />
> <path
<circle d="M9.477 6.603l-.522.443-.444-.443a2.056 2.056 0 1 0-2.908 2.909l3.352 3.352 3.412-3.352c.803-.804.863-2.106.06-2.91a2.105 2.105 0 0 0-2.95 0z"
cx="9" fill="#FFF"
cy="9" />
r="9" </g>
/> </svg>
<path
d="M9.477 6.603l-.522.443-.444-.443a2.056 2.056 0 1 0-2.908 2.909l3.352 3.352 3.412-3.352c.803-.804.863-2.106.06-2.91a2.105 2.105 0 0 0-2.95 0z"
fill="#FFF"
/>
</g>
</svg>
</div>
<label
className="c9"
color="dark"
>
healthy
</label>
</div> </div>
.c0 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
display: inline-block;
margin-left: 1.5rem;
}
.c0::first-letter {
text-transform: capitalize;
}
<label
className="c0"
color="dark"
>
healthy
</label>
</div> </div>
</div> </div>
</div> </div>
<div .c4 {
className="c5 c3" font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
}
.c1 {
font-size: 0.9375rem;
line-height: 1.5;
color: ;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 600;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-flex-grow: 2;
-ms-flex-grow: 2;
flex-grow: 2;
-webkit-flex-basis: 5.625rem;
-ms-flex-basis: 5.625rem;
flex-basis: 5.625rem;
width: 100%;
padding: 0.75rem 1.125rem 0 1.125rem;
-webkit-flex-grow: 6;
-ms-flex-grow: 6;
flex-grow: 6;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
width: auto;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
padding: 0 1.125rem;
}
.c0 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
-webkit-flex-grow: 1;
-ms-flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 5.625rem;
-ms-flex-basis: 5.625rem;
flex-basis: 5.625rem;
}
.c2 {
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
height: 100%;
position: relative;
}
.c5 {
margin-right: 0.375rem;
width: 0.375rem;
height: 0.375rem;
border-radius: 0.1875rem;
display: inline-block;
background-color: ;
}
.c3 {
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
}
<div
className="c0 c1"
name="container" name="container"
> >
<div .c2 {
className="c6" font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
}
.c0 {
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
height: 100%;
position: relative;
}
.c3 {
margin-right: 0.375rem;
width: 0.375rem;
height: 0.375rem;
border-radius: 0.1875rem;
display: inline-block;
background-color: ;
}
.c1 {
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
}
<div
className="c0"
> >
<div .c1 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
}
.c2 {
margin-right: 0.375rem;
width: 0.375rem;
height: 0.375rem;
border-radius: 0.1875rem;
display: inline-block;
background-color: ;
}
.c0 {
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
}
<div
className="c0"
onMouseOut={[Function]} onMouseOut={[Function]}
onMouseOver={[Function]} onMouseOver={[Function]}
> >
<label .c0 {
className="c10" font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
}
.c1 {
margin-right: 0.375rem;
width: 0.375rem;
height: 0.375rem;
border-radius: 0.1875rem;
display: inline-block;
background-color: ;
}
<label
className="c0"
> >
<span .c0 {
className="c11" margin-right: 0.375rem;
width: 0.375rem;
height: 0.375rem;
border-radius: 0.1875rem;
display: inline-block;
background-color: ;
}
<span
className="c0"
/> />
Running Running
</label> </label>

View File

@ -0,0 +1,729 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders <EEditor /> without throwing 1`] = `
.c1 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
}
.c2 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.c3 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.c0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
}
.c4 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
line-height: 1.5rem;
font-size: 0.9375rem;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
text-align: center;
margin-bottom: 0;
}
<div
className="c0"
>
.c0 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
}
.c1 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.c2 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
<svg
height="10"
width="28"
>
.c0 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
}
<rect
className="c0"
height="6"
width="6"
x="2"
y="2"
/>
.c0 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
<rect
className="c0"
height="6"
width="6"
x="11"
y="2"
/>
.c0 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
<rect
className="c0"
height="6"
width="6"
x="20"
y="2"
/>
</svg>
.c0 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
line-height: 1.5rem;
font-size: 0.9375rem;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
text-align: center;
margin-bottom: 0;
}
<p
className="c0"
>
Loading...
</p>
</div>
`;
exports[`renders <EEditor /> without throwing 2`] = `
.c1 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
}
.c2 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.c3 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.c0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
}
.c4 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
line-height: 1.5rem;
font-size: 0.9375rem;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
text-align: center;
margin-bottom: 0;
}
<div
className="c0"
>
.c0 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
}
.c1 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.c2 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
<svg
height="10"
width="28"
>
.c0 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
}
<rect
className="c0"
height="6"
width="6"
x="2"
y="2"
/>
.c0 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
<rect
className="c0"
height="6"
width="6"
x="11"
y="2"
/>
.c0 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
<rect
className="c0"
height="6"
width="6"
x="20"
y="2"
/>
</svg>
.c0 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
line-height: 1.5rem;
font-size: 0.9375rem;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
text-align: center;
margin-bottom: 0;
}
<p
className="c0"
>
Loading...
</p>
</div>
`;
exports[`renders <MEditor /> without throwing 1`] = `
.c1 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
}
.c2 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.c3 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.c0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
}
.c4 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
line-height: 1.5rem;
font-size: 0.9375rem;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
text-align: center;
margin-bottom: 0;
}
<div
className="c0"
>
.c0 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
}
.c1 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.c2 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
<svg
height="10"
width="28"
>
.c0 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
}
<rect
className="c0"
height="6"
width="6"
x="2"
y="2"
/>
.c0 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
<rect
className="c0"
height="6"
width="6"
x="11"
y="2"
/>
.c0 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
<rect
className="c0"
height="6"
width="6"
x="20"
y="2"
/>
</svg>
.c0 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
line-height: 1.5rem;
font-size: 0.9375rem;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
text-align: center;
margin-bottom: 0;
}
<p
className="c0"
>
Loading...
</p>
</div>
`;
exports[`renders <MEditor /> without throwing 2`] = `
.c1 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
}
.c2 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.c3 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.c0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
}
.c4 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
line-height: 1.5rem;
font-size: 0.9375rem;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
text-align: center;
margin-bottom: 0;
}
<div
className="c0"
>
.c0 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
}
.c1 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.c2 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
<svg
height="10"
width="28"
>
.c0 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
}
<rect
className="c0"
height="6"
width="6"
x="2"
y="2"
/>
.c0 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
<rect
className="c0"
height="6"
width="6"
x="11"
y="2"
/>
.c0 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
<rect
className="c0"
height="6"
width="6"
x="20"
y="2"
/>
</svg>
.c0 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
line-height: 1.5rem;
font-size: 0.9375rem;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
text-align: center;
margin-bottom: 0;
}
<p
className="c0"
>
Loading...
</p>
</div>
`;

View File

@ -0,0 +1,835 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders <Files /> without throwing 1`] = `
.c7 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
}
.c8 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.c9 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.c2 {
padding: 0.35em 0.75em 0.625em;
display: inline-block;
margin: 0;
padding: 0;
border: none;
overflow: hidden;
width: 100%;
height: auto;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
-webkit-padding-before: 0;
-webkit-padding-start: 0;
-webkit-padding-end: 0;
-webkit-padding-after: 0;
}
.c5 {
box-sizing: border-box;
width: 100%;
height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem;
border-radius: 0.25rem;
background-color: ;
border: 0.0625rem solid;
font-size: 0.9375rem;
line-height: normal !important;
font-weight: 400;
font-style: normal;
font-stretch: normal;
color: ;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
}
.c5:focus {
border-color: ;
outline: 0;
}
.c1 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -0.5rem;
margin-left: -0.5rem;
position: relative;
height: auto;
min-height: 7.875rem;
margin-bottom: 0.625rem;
border: 0.0625rem solid;
background-color: ;
box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
margin-right: 0rem;
margin-left: 0rem;
}
.c6 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
}
.c10 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
line-height: 1.5rem;
font-size: 0.9375rem;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
text-align: center;
margin-bottom: 0;
}
.c3 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: space-between;
-webkit-justify-content: space-between;
-ms-flex-pack: space-between;
justify-content: space-between;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.c4 {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
margin: 0 0 0.8125rem 0;
}
.c0 {
padding: 1.5rem 1.1875rem;
}
<div>
.c7 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
}
.c8 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.c9 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.c2 {
padding: 0.35em 0.75em 0.625em;
display: inline-block;
margin: 0;
padding: 0;
border: none;
overflow: hidden;
width: 100%;
height: auto;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
-webkit-padding-before: 0;
-webkit-padding-start: 0;
-webkit-padding-end: 0;
-webkit-padding-after: 0;
}
.c5 {
box-sizing: border-box;
width: 100%;
height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem;
border-radius: 0.25rem;
background-color: ;
border: 0.0625rem solid;
font-size: 0.9375rem;
line-height: normal !important;
font-weight: 400;
font-style: normal;
font-stretch: normal;
color: ;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
}
.c5:focus {
border-color: ;
outline: 0;
}
.c1 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -0.5rem;
margin-left: -0.5rem;
position: relative;
height: auto;
min-height: 7.875rem;
margin-bottom: 0.625rem;
border: 0.0625rem solid;
background-color: ;
box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
margin-right: 0rem;
margin-left: 0rem;
}
.c6 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
}
.c10 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
line-height: 1.5rem;
font-size: 0.9375rem;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
text-align: center;
margin-bottom: 0;
}
.c3 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: space-between;
-webkit-justify-content: space-between;
-ms-flex-pack: space-between;
justify-content: space-between;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.c4 {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
margin: 0 0 0.8125rem 0;
}
.c0 {
padding: 1.5rem 1.1875rem;
}
<div
className="c0 c1"
name="card"
>
.c0 {
padding: 0.35em 0.75em 0.625em;
display: inline-block;
margin: 0;
padding: 0;
border: none;
overflow: hidden;
width: 100%;
height: auto;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
-webkit-padding-before: 0;
-webkit-padding-start: 0;
-webkit-padding-end: 0;
-webkit-padding-after: 0;
}
.c3 {
box-sizing: border-box;
width: 100%;
height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem;
border-radius: 0.25rem;
background-color: ;
border: 0.0625rem solid;
font-size: 0.9375rem;
line-height: normal !important;
font-weight: 400;
font-style: normal;
font-stretch: normal;
color: ;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
}
.c3:focus {
border-color: ;
outline: 0;
}
.c1 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: space-between;
-webkit-justify-content: space-between;
-ms-flex-pack: space-between;
justify-content: space-between;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.c2 {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
margin: 0 0 0.8125rem 0;
}
<fieldset
className="c0"
style={undefined}
>
.c2 {
box-sizing: border-box;
width: 100%;
height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem;
border-radius: 0.25rem;
background-color: ;
border: 0.0625rem solid;
font-size: 0.9375rem;
line-height: normal !important;
font-weight: 400;
font-style: normal;
font-stretch: normal;
color: ;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
}
.c2:focus {
border-color: ;
outline: 0;
}
.c0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: space-between;
-webkit-justify-content: space-between;
-ms-flex-pack: space-between;
justify-content: space-between;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.c1 {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
margin: 0 0 0.8125rem 0;
}
<div>
.c2 {
box-sizing: border-box;
width: 100%;
height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem;
border-radius: 0.25rem;
background-color: ;
border: 0.0625rem solid;
font-size: 0.9375rem;
line-height: normal !important;
font-weight: 400;
font-style: normal;
font-stretch: normal;
color: ;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
}
.c2:focus {
border-color: ;
outline: 0;
}
.c0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: space-between;
-webkit-justify-content: space-between;
-ms-flex-pack: space-between;
justify-content: space-between;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.c1 {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
margin: 0 0 0.8125rem 0;
}
<span
className="c0"
>
.c1 {
box-sizing: border-box;
width: 100%;
height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem;
border-radius: 0.25rem;
background-color: ;
border: 0.0625rem solid;
font-size: 0.9375rem;
line-height: normal !important;
font-weight: 400;
font-style: normal;
font-stretch: normal;
color: ;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
}
.c1:focus {
border-color: ;
outline: 0;
}
.c0 {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
margin: 0 0 0.8125rem 0;
}
<input
className="c0 c1"
id="ceBOoS"
placeholder="Filename including extension…"
type="text"
value={undefined}
/>
</span>
</div>
</fieldset>
.c1 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
}
.c2 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.c3 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.c0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
}
.c4 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
line-height: 1.5rem;
font-size: 0.9375rem;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
text-align: center;
margin-bottom: 0;
}
<div
className="c0"
>
.c0 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
}
.c1 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.c2 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
<svg
height="10"
width="28"
>
.c0 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
}
<rect
className="c0"
height="6"
width="6"
x="2"
y="2"
/>
.c0 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
<rect
className="c0"
height="6"
width="6"
x="11"
y="2"
/>
.c0 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
<rect
className="c0"
height="6"
width="6"
x="20"
y="2"
/>
</svg>
.c0 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
line-height: 1.5rem;
font-size: 0.9375rem;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
text-align: center;
margin-bottom: 0;
}
<p
className="c0"
>
Loading...
</p>
</div>
</div>
</div>
`;

View File

@ -0,0 +1,334 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders <Manifest /> without throwing 1`] = `
<ApolloProvider
client={
ApolloClient {
"addTypename": true,
"dataId": [Function],
"dataIdFromObject": [Function],
"disableNetworkFetches": false,
"fieldWithArgs": [Function],
"fragmentMatcher": HeuristicFragmentMatcher {},
"initialState": Object {},
"middleware": [Function],
"mutate": [Function],
"networkInterface": HTTPFetchNetworkInterface {
"_afterwares": Array [],
"_middlewares": Array [],
"_opts": Object {},
"_uri": "https://localhost:443/api/graphql",
},
"query": [Function],
"queryDeduplication": true,
"queryManager": QueryManager {
"addTypename": true,
"deduplicator": Deduplicator {
"inFlightRequestPromises": Object {},
"networkInterface": HTTPFetchNetworkInterface {
"_afterwares": Array [],
"_middlewares": Array [],
"_opts": Object {},
"_uri": "https://localhost:443/api/graphql",
},
},
"disableBroadcasting": false,
"fetchQueryPromises": Object {},
"fragmentMatcher": HeuristicFragmentMatcher {},
"idCounter": 1,
"lastRequestId": Object {},
"mutationStore": MutationStore {
"store": Object {},
},
"networkInterface": HTTPFetchNetworkInterface {
"_afterwares": Array [],
"_middlewares": Array [],
"_opts": Object {},
"_uri": "https://localhost:443/api/graphql",
},
"observableQueries": Object {},
"pollingTimers": Object {},
"queryDeduplication": true,
"queryDocuments": Object {},
"queryIdsByName": Object {},
"queryListeners": Object {},
"queryStore": QueryStore {
"store": Object {},
},
"reducerConfig": Object {
"addTypename": true,
"customResolvers": undefined,
"dataIdFromObject": [Function],
"fragmentMatcher": [Function],
},
"reduxRootSelector": [Function],
"scheduler": QueryScheduler {
"inFlightQueries": Object {},
"intervalQueries": Object {},
"pollingTimers": Object {},
"queryManager": [Circular],
"registeredQueries": Object {},
},
"ssrMode": false,
"store": Object {
"dispatch": [Function],
"getState": [Function],
},
},
"reducerConfig": Object {
"addTypename": true,
"customResolvers": undefined,
"dataIdFromObject": [Function],
"fragmentMatcher": [Function],
},
"resetStore": [Function],
"setStore": [Function],
"ssrMode": false,
"store": Object {
"dispatch": [Function],
"getState": [Function],
},
"version": "1.9.2",
"watchQuery": [Function],
}
}
store={
Object {
"dispatch": [Function],
"getState": [Function],
"replaceReducer": [Function],
"subscribe": [Function],
Symbol(observable): [Function],
}
}
>
<ReduxForm
defaultValue="test"
dirty={true}
handleSubmit={[Function]}
loading={true}
onCancel={[Function]}
/>
</ApolloProvider>
`;
exports[`renders <Manifest /> without throwing 2`] = `
<ApolloProvider
client={
ApolloClient {
"addTypename": true,
"dataId": [Function],
"dataIdFromObject": [Function],
"disableNetworkFetches": false,
"fieldWithArgs": [Function],
"fragmentMatcher": HeuristicFragmentMatcher {},
"initialState": Object {},
"middleware": [Function],
"mutate": [Function],
"networkInterface": HTTPFetchNetworkInterface {
"_afterwares": Array [],
"_middlewares": Array [],
"_opts": Object {},
"_uri": "https://localhost:443/api/graphql",
},
"query": [Function],
"queryDeduplication": true,
"queryManager": QueryManager {
"addTypename": true,
"deduplicator": Deduplicator {
"inFlightRequestPromises": Object {},
"networkInterface": HTTPFetchNetworkInterface {
"_afterwares": Array [],
"_middlewares": Array [],
"_opts": Object {},
"_uri": "https://localhost:443/api/graphql",
},
},
"disableBroadcasting": false,
"fetchQueryPromises": Object {},
"fragmentMatcher": HeuristicFragmentMatcher {},
"idCounter": 1,
"lastRequestId": Object {},
"mutationStore": MutationStore {
"store": Object {},
},
"networkInterface": HTTPFetchNetworkInterface {
"_afterwares": Array [],
"_middlewares": Array [],
"_opts": Object {},
"_uri": "https://localhost:443/api/graphql",
},
"observableQueries": Object {},
"pollingTimers": Object {},
"queryDeduplication": true,
"queryDocuments": Object {},
"queryIdsByName": Object {},
"queryListeners": Object {},
"queryStore": QueryStore {
"store": Object {},
},
"reducerConfig": Object {
"addTypename": true,
"customResolvers": undefined,
"dataIdFromObject": [Function],
"fragmentMatcher": [Function],
},
"reduxRootSelector": [Function],
"scheduler": QueryScheduler {
"inFlightQueries": Object {},
"intervalQueries": Object {},
"pollingTimers": Object {},
"queryManager": [Circular],
"registeredQueries": Object {},
},
"ssrMode": false,
"store": Object {
"dispatch": [Function],
"getState": [Function],
},
},
"reducerConfig": Object {
"addTypename": true,
"customResolvers": undefined,
"dataIdFromObject": [Function],
"fragmentMatcher": [Function],
},
"resetStore": [Function],
"setStore": [Function],
"ssrMode": false,
"store": Object {
"dispatch": [Function],
"getState": [Function],
},
"version": "1.9.2",
"watchQuery": [Function],
}
}
store={
Object {
"dispatch": [Function],
"getState": [Function],
"replaceReducer": [Function],
"subscribe": [Function],
Symbol(observable): [Function],
}
}
>
<ReduxForm
defaultValue="test"
handleSubmit={[Function]}
loading={true}
onCancel={[Function]}
/>
</ApolloProvider>
`;
exports[`renders <Manifest /> without throwing 3`] = `
<ApolloProvider
client={
ApolloClient {
"addTypename": true,
"dataId": [Function],
"dataIdFromObject": [Function],
"disableNetworkFetches": false,
"fieldWithArgs": [Function],
"fragmentMatcher": HeuristicFragmentMatcher {},
"initialState": Object {},
"middleware": [Function],
"mutate": [Function],
"networkInterface": HTTPFetchNetworkInterface {
"_afterwares": Array [],
"_middlewares": Array [],
"_opts": Object {},
"_uri": "https://localhost:443/api/graphql",
},
"query": [Function],
"queryDeduplication": true,
"queryManager": QueryManager {
"addTypename": true,
"deduplicator": Deduplicator {
"inFlightRequestPromises": Object {},
"networkInterface": HTTPFetchNetworkInterface {
"_afterwares": Array [],
"_middlewares": Array [],
"_opts": Object {},
"_uri": "https://localhost:443/api/graphql",
},
},
"disableBroadcasting": false,
"fetchQueryPromises": Object {},
"fragmentMatcher": HeuristicFragmentMatcher {},
"idCounter": 1,
"lastRequestId": Object {},
"mutationStore": MutationStore {
"store": Object {},
},
"networkInterface": HTTPFetchNetworkInterface {
"_afterwares": Array [],
"_middlewares": Array [],
"_opts": Object {},
"_uri": "https://localhost:443/api/graphql",
},
"observableQueries": Object {},
"pollingTimers": Object {},
"queryDeduplication": true,
"queryDocuments": Object {},
"queryIdsByName": Object {},
"queryListeners": Object {},
"queryStore": QueryStore {
"store": Object {},
},
"reducerConfig": Object {
"addTypename": true,
"customResolvers": undefined,
"dataIdFromObject": [Function],
"fragmentMatcher": [Function],
},
"reduxRootSelector": [Function],
"scheduler": QueryScheduler {
"inFlightQueries": Object {},
"intervalQueries": Object {},
"pollingTimers": Object {},
"queryManager": [Circular],
"registeredQueries": Object {},
},
"ssrMode": false,
"store": Object {
"dispatch": [Function],
"getState": [Function],
},
},
"reducerConfig": Object {
"addTypename": true,
"customResolvers": undefined,
"dataIdFromObject": [Function],
"fragmentMatcher": [Function],
},
"resetStore": [Function],
"setStore": [Function],
"ssrMode": false,
"store": Object {
"dispatch": [Function],
"getState": [Function],
},
"version": "1.9.2",
"watchQuery": [Function],
}
}
store={
Object {
"dispatch": [Function],
"getState": [Function],
"replaceReducer": [Function],
"subscribe": [Function],
Symbol(observable): [Function],
}
}
>
<ReduxForm
defaultValue="test"
handleSubmit={[Function]}
onCancel={[Function]}
/>
</ApolloProvider>
`;

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,54 @@
/**
* @jest-environment jsdom
*/
import React from 'react';
import renderer from 'react-test-renderer';
import 'jest-styled-components';
import { Store } from '../../mocks';
import { MEditor, EEditor } from '@components/manifest/editors';
it('renders <MEditor /> without throwing', () => {
const tree = renderer
.create(
<Store>
<MEditor input="" defaultValue="" readOnly />
</Store>
)
.toJSON();
expect(tree).toMatchSnapshot();
});
it('renders <MEditor /> without throwing', () => {
const tree = renderer
.create(
<Store>
<MEditor input="" defaultValue="" />
</Store>
)
.toJSON();
expect(tree).toMatchSnapshot();
});
it('renders <EEditor /> without throwing', () => {
const tree = renderer
.create(
<Store>
<EEditor input="" defaultValue="" readOnly />
</Store>
)
.toJSON();
expect(tree).toMatchSnapshot();
});
it('renders <EEditor /> without throwing', () => {
const tree = renderer
.create(
<Store>
<EEditor input="" defaultValue="" />
</Store>
)
.toJSON();
expect(tree).toMatchSnapshot();
});

View File

@ -0,0 +1,52 @@
/**
* @jest-environment jsdom
*/
import React from 'react';
import renderer from 'react-test-renderer';
import 'jest-styled-components';
import { Store, files } from '../../mocks';
import { reduxForm } from 'redux-form';
import { Environment } from '@components/manifest';
const TestEnvironmentForm = reduxForm({ form: 'testNameForm' })(Environment);
it('renders <TestEnvironmentForm /> without throwing', () => {
const tree = renderer
.create(
<Store>
<TestEnvironmentForm
handleSubmit={() => {}}
onCancel={() => {}}
onAddFile={() => {}}
onRemoveFile={() => {}}
dirty
defaultValue=""
files={files}
loading
/>
</Store>
)
.toJSON();
expect(tree).toMatchSnapshot();
});
it('renders <TestEnvironmentForm /> without throwing', () => {
const tree = renderer
.create(
<Store>
<TestEnvironmentForm
handleSubmit={() => {}}
onCancel={() => {}}
onAddFile={() => {}}
onRemoveFile={() => {}}
dirty
files={[]}
readOnly
loading
/>
</Store>
)
.toJSON();
expect(tree).toMatchSnapshot();
});

View File

@ -0,0 +1,29 @@
/**
* @jest-environment jsdom
*/
import React from 'react';
import renderer from 'react-test-renderer';
import 'jest-styled-components';
import { Store, files } from '../../mocks';
import { Files } from '@components/manifest';
it('renders <Files /> without throwing', () => {
const tree = renderer
.create(
<Store>
<Files
files={files}
id="test"
name="test"
value="test"
onRemoveFile={() => {}}
readOnly
/>
</Store>
)
.toJSON();
expect(tree).toMatchSnapshot();
});

View File

@ -0,0 +1,61 @@
/**
* @jest-environment jsdom
*/
import React from 'react';
import ShallowRenderer from 'react-test-renderer/shallow';
import 'jest-styled-components';
import { Store } from '../../mocks';
import { reduxForm } from 'redux-form';
import { Manifest } from '@components/manifest';
const ManifestTestForm = reduxForm({ form: 'ManifestTestForm' })(Manifest);
it('renders <Manifest /> without throwing', () => {
const renderer = new ShallowRenderer();
renderer.render(
<Store>
<ManifestTestForm
defaultValue="test"
handleSubmit={() => {}}
onCancel={() => {}}
dirty
loading
/>
</Store>
);
const tree = renderer.getRenderOutput();
expect(tree).toMatchSnapshot();
});
it('renders <Manifest /> without throwing', () => {
const renderer = new ShallowRenderer();
renderer.render(
<Store>
<ManifestTestForm
defaultValue="test"
handleSubmit={() => {}}
onCancel={() => {}}
loading
/>
</Store>
)
const tree = renderer.getRenderOutput();
expect(tree).toMatchSnapshot();
});
it('renders <Manifest /> without throwing', () => {
const renderer = new ShallowRenderer();
renderer.render(
<Store>
<ManifestTestForm
defaultValue="test"
handleSubmit={() => {}}
onCancel={() => {}}
/>
</Store>
)
const tree = renderer.getRenderOutput();
expect(tree).toMatchSnapshot();
});

View File

@ -0,0 +1,35 @@
/**
* @jest-environment jsdom
*/
import React from 'react';
import renderer from 'react-test-renderer';
import 'jest-styled-components';
import { Store } from '../../mocks';
import { reduxForm } from 'redux-form';
import { Name } from '@components/manifest';
const TestNameForm = reduxForm({ form: 'testNameForm' })(Name);
it('renders <Name /> without throwing', () => {
const tree = renderer
.create(
<Store>
<TestNameForm handleSubmit={() => {}} onCancel={() => {}} dirty />
</Store>
)
.toJSON();
expect(tree).toMatchSnapshot();
});
it('renders <Name /> without throwing', () => {
const tree = renderer
.create(
<Store>
<TestNameForm handleSubmit={() => {}} onCancel={() => {}} />
</Store>
)
.toJSON();
expect(tree).toMatchSnapshot();
});

View File

@ -0,0 +1,98 @@
/**
* @jest-environment jsdom
*/
import React from 'react';
import renderer from 'react-test-renderer';
import 'jest-styled-components';
import { Store } from '../../mocks';
import { Progress } from '@components/manifest';
it('renders <Progress /> without throwing', () => {
const tree = renderer
.create(
<Store>
<Progress stage="name" create />
</Store>
)
.toJSON();
expect(tree).toMatchSnapshot();
});
it('renders <Progress /> without throwing', () => {
const tree = renderer
.create(
<Store>
<Progress stage="name" edit />
</Store>
)
.toJSON();
expect(tree).toMatchSnapshot();
});
it('renders <Progress /> without throwing', () => {
const tree = renderer
.create(
<Store>
<Progress stage="manifest" create />
</Store>
)
.toJSON();
expect(tree).toMatchSnapshot();
});
it('renders <Progress /> without throwing', () => {
const tree = renderer
.create(
<Store>
<Progress stage="environment" create />
</Store>
)
.toJSON();
expect(tree).toMatchSnapshot();
});
it('renders <Progress /> without throwing', () => {
const tree = renderer
.create(
<Store>
<Progress stage="review" create />
</Store>
)
.toJSON();
expect(tree).toMatchSnapshot();
});
it('renders <Progress /> without throwing', () => {
const tree = renderer
.create(
<Store>
<Progress stage="manifest" edit />
</Store>
)
.toJSON();
expect(tree).toMatchSnapshot();
});
it('renders <Progress /> without throwing', () => {
const tree = renderer
.create(
<Store>
<Progress stage="environment" edit />
</Store>
)
.toJSON();
expect(tree).toMatchSnapshot();
});
it('renders <Progress /> without throwing', () => {
const tree = renderer
.create(
<Store>
<Progress stage="review" edit />
</Store>
)
.toJSON();
expect(tree).toMatchSnapshot();
});

View File

@ -0,0 +1,64 @@
/**
* @jest-environment jsdom
*/
import React from 'react';
import renderer from 'react-test-renderer';
import 'jest-styled-components';
import { Store, services } from '../../mocks';
import { Review } from '@components/manifest';
it('renders <Review /> without throwing', () => {
const tree = renderer
.create(
<Store>
<Review
handleSubmit={() => {}}
onEnvironmentToggle={() => {}}
onCancel={() => {}}
dirty
loading
environmentToggles={{ name: test }}
state={{ services }}
/>
</Store>
)
.toJSON();
expect(tree).toMatchSnapshot();
});
it('renders <Review /> without throwing', () => {
const tree = renderer
.create(
<Store>
<Review
handleSubmit={() => {}}
onEnvironmentToggle={() => {}}
onCancel={() => {}}
dirty
environmentToggles={{ name: test }}
state={{ services }}
/>
</Store>
)
.toJSON();
expect(tree).toMatchSnapshot();
});
it('renders <Review /> without throwing', () => {
const tree = renderer
.create(
<Store>
<Review
handleSubmit={() => {}}
onEnvironmentToggle={() => {}}
onCancel={() => {}}
environmentToggles={{ name: test }}
state={{ services }}
/>
</Store>
)
.toJSON();
expect(tree).toMatchSnapshot();
});

View File

@ -36,15 +36,50 @@ exports[`renders <Error /> without throwing 1`] = `
<div <div
className="c0" className="c0"
> >
<div .c0 {
className="c1" position: absolute;
top: 0;
left: 0;
width: 2.25rem;
height: 100%;
background-color: ;
}
<div
className="c0"
type="ERROR" type="ERROR"
/> />
<div .c2 {
className="c2" font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
line-height: 1.5rem;
font-size: 0.9375rem;
}
.c0 {
padding: 0.75rem 0 0.84375rem 0;
}
.c1 {
margin: 0.09375rem 3.375rem 0 3.375rem;
}
<div
className="c0"
> >
<p .c1 {
className="c3 c4" font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
line-height: 1.5rem;
font-size: 0.9375rem;
}
.c0 {
margin: 0.09375rem 3.375rem 0 3.375rem;
}
<p
className="c0 c1"
> >
Ooops, there's been an error Ooops, there's been an error
</p> </p>

View File

@ -2,6 +2,7 @@
exports[`renders <Loader /> without throwing 1`] = ` exports[`renders <Loader /> without throwing 1`] = `
.c1 { .c1 {
-webkit-fill: ;
fill: ; fill: ;
stroke: ; stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite; -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
@ -9,6 +10,7 @@ exports[`renders <Loader /> without throwing 1`] = `
} }
.c2 { .c2 {
-webkit-fill: ;
fill: ; fill: ;
stroke: ; stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite; -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
@ -18,6 +20,7 @@ exports[`renders <Loader /> without throwing 1`] = `
} }
.c3 { .c3 {
-webkit-fill: ;
fill: ; fill: ;
stroke: ; stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite; -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
@ -74,34 +77,105 @@ exports[`renders <Loader /> without throwing 1`] = `
<div <div
className="c0" className="c0"
> >
<svg .c0 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
}
.c1 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.c2 {
-webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
<svg
height="10" height="10"
width="28" width="28"
> >
<rect .c0 {
className="c1" -webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
}
<rect
className="c0"
height="6" height="6"
width="6" width="6"
x="2" x="2"
y="2" y="2"
/> />
<rect .c0 {
className="c2" -webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
<rect
className="c0"
height="6" height="6"
width="6" width="6"
x="11" x="11"
y="2" y="2"
/> />
<rect .c0 {
className="c3" -webkit-fill: ;
fill: ;
stroke: ;
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
<rect
className="c0"
height="6" height="6"
width="6" width="6"
x="20" x="20"
y="2" y="2"
/> />
</svg> </svg>
<p .c0 {
className="c4" font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
line-height: 1.5rem;
font-size: 0.9375rem;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
text-align: center;
margin-bottom: 0;
}
<p
className="c0"
> >
Loading... Loading...
</p> </p>

View File

@ -52,17 +52,17 @@ exports[`renders <ModalError /> without throwing 1`] = `
} }
.c5::-moz-focus-inner, .c5::-moz-focus-inner,
.c5[type="button"]::-moz-focus-inner, .c5[type='button']::-moz-focus-inner,
.c5[type="reset"]::-moz-focus-inner, .c5[type='reset']::-moz-focus-inner,
.c5[type="submit"]::-moz-focus-inner { .c5[type='submit']::-moz-focus-inner {
border-style: none; border-style: none;
padding: 0; padding: 0;
} }
.c5:-moz-focusring, .c5:-moz-focusring,
.c5[type="button"]:-moz-focusring, .c5[type='button']:-moz-focusring,
.c5[type="reset"]:-moz-focusring, .c5[type='reset']:-moz-focusring,
.c5[type="submit"]:-moz-focusring { .c5[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText; outline: 0.0625rem dotted ButtonText;
} }
@ -142,19 +142,160 @@ exports[`renders <ModalError /> without throwing 1`] = `
} }
<div> <div>
<h2 .c2 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 500;
font-size: 1.5rem;
}
.c1 {
line-height: 1.25;
color: ;
margin: 0 0 0.75rem 0;
}
.c0 {
color: ;
}
<h2
className="c0 c1 c2" className="c0 c1 c2"
/> />
<p .c1 {
className="c3 c4" font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
line-height: 1.5rem;
font-size: 0.9375rem;
}
.c0 {
color: ;
margin: 0.75rem 0 1.875rem 0;
}
<p
className="c0 c1"
> >
Modal error message Modal error message
</p> </p>
<button .c0 {
className="c5" font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
margin: 0;
overflow: visible;
text-transform: none;
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
min-width: 7.5rem;
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0;
padding: 0.9375rem 1.125rem;
position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
color: ;
background-image: none;
background-color: ;
border-radius: 0.25rem;
border: solid 0.0625rem;
color: ;
background-color: ;
border-color: ;
}
.c0::-moz-focus-inner,
.c0[type='button']::-moz-focus-inner,
.c0[type='reset']::-moz-focus-inner,
.c0[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c0:-moz-focusring,
.c0[type='button']:-moz-focusring,
.c0[type='reset']:-moz-focusring,
.c0[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c0:focus {
outline: 0;
text-decoration: none;
background-color: ;
border-color: ;
}
.c0:hover {
background-color: ;
border: solid 0.0625rem;
}
.c0:active,
.c0:active:hover,
.c0:active:focus {
background-image: none;
outline: 0;
background-color: ;
border-color: ;
}
.c0[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c0:focus {
background-color: ;
border-color: ;
}
.c0:hover {
background-color: ;
border-color: ;
}
.c0:active,
.c0:active:hover,
.c0:active:focus {
background-color: ;
border-color: ;
}
.c0 + button {
margin-left: 1.25rem;
}
<button
className="c0"
onClick={[Function]} onClick={[Function]}
> >
Close Close
</button> </button>
</div> </div>
`; `;

View File

@ -36,15 +36,50 @@ exports[`renders <Warning /> without throwing 1`] = `
<div <div
className="c0" className="c0"
> >
<div .c0 {
className="c1" position: absolute;
top: 0;
left: 0;
width: 2.25rem;
height: 100%;
background-color: ;
}
<div
className="c0"
type="WARNING" type="WARNING"
/> />
<div .c2 {
className="c2" font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
line-height: 1.5rem;
font-size: 0.9375rem;
}
.c0 {
padding: 0.75rem 0 0.84375rem 0;
}
.c1 {
margin: 0.09375rem 3.375rem 0 3.375rem;
}
<div
className="c0"
> >
<p .c1 {
className="c3 c4" font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
line-height: 1.5rem;
font-size: 0.9375rem;
}
.c0 {
margin: 0.09375rem 3.375rem 0 3.375rem;
}
<p
className="c0 c1"
> >
Warning message Warning message
</p> </p>

View File

@ -85,39 +85,275 @@ exports[`renders <Header /> without throwing 1`] = `
height: 1.5625rem; height: 1.5625rem;
} }
.c6 {
padding-left: 5px;
}
<div <div
className="c0" className="c0"
> >
<div .c1 {
className="c1" font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 500;
font-size: 1.5rem;
text-transform: uppercase;
color: ;
font-size: 1.8125rem;
margin: 0;
}
.c0 {
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
padding: 0.9375rem 0;
}
.c2 {
border-style: none;
width: 5.4375rem;
height: 1.5625rem;
}
<div
className="c0"
> >
<h2 .c0 {
className="c2" font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 500;
font-size: 1.5rem;
text-transform: uppercase;
color: ;
font-size: 1.8125rem;
margin: 0;
}
.c1 {
border-style: none;
width: 5.4375rem;
height: 1.5625rem;
}
<h2
className="c0"
> >
<a .c0 {
border-style: none;
width: 5.4375rem;
height: 1.5625rem;
}
<a
href="/" href="/"
onClick={[Function]} onClick={[Function]}
> >
<img .c0 {
className="c3" border-style: none;
width: 5.4375rem;
height: 1.5625rem;
}
<img
className="c0"
src="test-file-mock" src="test-file-mock"
/> />
</a> </a>
</h2> </h2>
</div> </div>
<div .c1 {
className="c4" font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
line-height: 1.5rem;
font-size: 0.9375rem;
font-weight: 600;
text-align: center;
color: ;
margin: 0;
}
.c0 {
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
padding: 0.9375rem 0;
width: 6.25rem;
max-width: 6.25rem;
}
.c2 {
padding-left: 5px;
}
<div
className="c0"
> >
<p .c0 {
className="c5" font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
/> font-weight: 400;
line-height: 1.5rem;
font-size: 0.9375rem;
font-weight: 600;
text-align: center;
color: ;
margin: 0;
}
.c1 {
padding-left: 5px;
}
<p
className="c0"
>
<svg
className=""
height="13"
viewBox="0 0 9 13"
width="9"
xmlns="http://www.w3.org/2000/svg"
>
<title>
icon: data center
</title>
<defs>
<linearGradient
id="a"
x1="49.967%"
x2="49.967%"
y1="100%"
y2="0%"
>
<stop
offset="0%"
stopColor="#E6E6E6"
/>
<stop
offset="100%"
stopColor="#FFF"
/>
</linearGradient>
</defs>
<path
d="M1174 34h9V21h-9v13zm2-2h5v-9h-5v9zm1-7h3.001v-1H1177v1zm0 2h3.001v-1H1177v1zm0 2h3.001v-1H1177v1z"
fill="url(#a)"
fillRule="evenodd"
transform="translate(-1174 -21)"
/>
</svg>
.c0 {
padding-left: 5px;
}
<span
className="c0"
/>
</p>
</div> </div>
<div .c1 {
className="c4" font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
line-height: 1.5rem;
font-size: 0.9375rem;
font-weight: 600;
text-align: center;
color: ;
margin: 0;
}
.c0 {
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
padding: 0.9375rem 0;
width: 6.25rem;
max-width: 6.25rem;
}
.c2 {
padding-left: 5px;
}
<div
className="c0"
> >
<p .c0 {
className="c5" font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
/> font-weight: 400;
line-height: 1.5rem;
font-size: 0.9375rem;
font-weight: 600;
text-align: center;
color: ;
margin: 0;
}
.c1 {
padding-left: 5px;
}
<p
className="c0"
>
<svg
className=""
height="12"
viewBox="0 0 12 12"
width="12"
xmlns="http://www.w3.org/2000/svg"
>
<title>
Shape
</title>
<defs>
<linearGradient
id="a"
x1="49.967%"
x2="49.967%"
y1="100%"
y2="0%"
>
<stop
offset="0%"
stopColor="#E6E6E6"
/>
<stop
offset="100%"
stopColor="#FFF"
/>
</linearGradient>
</defs>
<path
d="M12 12H0a5.958 5.958 0 0 1 1.485-3.552 1.368 1.368 0 0 1 1.726-.296 4.83 4.83 0 0 0 5.201-.248 1.384 1.384 0 0 1 1.75.152A5.968 5.968 0 0 1 12 12zM5.619 0a3.205 3.205 0 0 0-3.211 3.2c0 1.768 1.42 4 3.21 4s3.211-2.232 3.211-4C8.83 1.433 7.392 0 5.62 0z"
fill="url(#a)"
fillRule="nonzero"
/>
</svg>
.c0 {
padding-left: 5px;
}
<span
className="c0"
/>
</p>
</div> </div>
</div> </div>
`; `;

View File

@ -34,8 +34,14 @@ exports[`renders <Menu /> without throwing 1`] = `
<div <div
className="c0" className="c0"
> >
<ul .c0 {
className="c1" list-style-type: none;
padding: 0;
margin: 0;
}
<ul
className="c0"
/> />
</div> </div>
`; `;

View File

@ -131,21 +131,209 @@ exports[`renders <NotFound /> without throwing 1`] = `
<div <div
className="c0" className="c0"
> >
<div .c5 {
className="c1" display: inline-block;
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0;
padding: 0.9375rem 1.125rem;
position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
color: ;
background-image: none;
background-color: ;
border-radius: 0.25rem;
border: solid 0.0625rem;
}
.c5:focus {
outline: 0;
text-decoration: none;
background-color: ;
border-color: ;
}
.c5:hover {
background-color: ;
border: solid 0.0625rem;
}
.c5:active,
.c5:active:hover,
.c5:active:focus {
background-image: none;
outline: 0;
background-color: ;
border-color: ;
}
.c5[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c2 {
font-size: 2rem;
margin: 0.625rem 0;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 500;
font-size: 2.25rem;
font-style: normal;
font-stretch: normal;
margin: 0;
}
.c4 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
line-height: 1.5rem;
font-size: 0.9375rem;
}
.c0 {
margin-top: 3.75rem;
}
.c1 {
font-weight: normal;
font-size: 2rem;
}
.c3 {
margin-bottom: 1.875rem;
max-width: 30.625rem;
}
<div
className="c0"
> >
<h1 .c1 {
className="c2 c3" font-size: 2rem;
margin: 0.625rem 0;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 500;
font-size: 2.25rem;
font-style: normal;
font-stretch: normal;
margin: 0;
}
.c0 {
font-weight: normal;
font-size: 2rem;
}
<h1
className="c0 c1"
> >
I have no memory of this place I have no memory of this place
</h1> </h1>
<p .c1 {
className="c4 c5" font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
line-height: 1.5rem;
font-size: 0.9375rem;
}
.c0 {
margin-bottom: 1.875rem;
max-width: 30.625rem;
}
<p
className="c0 c1"
> >
HTTP 404: We cant find what you are looking for. Next time, always follow your nose. HTTP 404: We cant find what you are looking for. Next time, always follow your nose.
</p> </p>
<a .c0 {
className="c6" display: inline-block;
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0;
padding: 0.9375rem 1.125rem;
position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
color: ;
background-image: none;
background-color: ;
border-radius: 0.25rem;
border: solid 0.0625rem;
}
.c0:focus {
outline: 0;
text-decoration: none;
background-color: ;
border-color: ;
}
.c0:hover {
background-color: ;
border: solid 0.0625rem;
}
.c0:active,
.c0:active:hover,
.c0:active:focus {
background-image: none;
outline: 0;
background-color: ;
border-color: ;
}
.c0[disabled] {
cursor: not-allowed;
pointer-events: none;
}
<a
className="c0"
href="/deployment-groups" href="/deployment-groups"
onClick={[Function]} onClick={[Function]}
primary={true} primary={true}

View File

@ -52,17 +52,17 @@ exports[`renders <Delete /> without throwing 1`] = `
} }
.c4::-moz-focus-inner, .c4::-moz-focus-inner,
.c4[type="button"]::-moz-focus-inner, .c4[type='button']::-moz-focus-inner,
.c4[type="reset"]::-moz-focus-inner, .c4[type='reset']::-moz-focus-inner,
.c4[type="submit"]::-moz-focus-inner { .c4[type='submit']::-moz-focus-inner {
border-style: none; border-style: none;
padding: 0; padding: 0;
} }
.c4:-moz-focusring, .c4:-moz-focusring,
.c4[type="button"]:-moz-focusring, .c4[type='button']:-moz-focusring,
.c4[type="reset"]:-moz-focusring, .c4[type='reset']:-moz-focusring,
.c4[type="submit"]:-moz-focusring { .c4[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText; outline: 0.0625rem dotted ButtonText;
} }
@ -161,17 +161,17 @@ exports[`renders <Delete /> without throwing 1`] = `
} }
.c5::-moz-focus-inner, .c5::-moz-focus-inner,
.c5[type="button"]::-moz-focus-inner, .c5[type='button']::-moz-focus-inner,
.c5[type="reset"]::-moz-focus-inner, .c5[type='reset']::-moz-focus-inner,
.c5[type="submit"]::-moz-focus-inner { .c5[type='submit']::-moz-focus-inner {
border-style: none; border-style: none;
padding: 0; padding: 0;
} }
.c5:-moz-focusring, .c5:-moz-focusring,
.c5[type="button"]:-moz-focusring, .c5[type='button']:-moz-focusring,
.c5[type="reset"]:-moz-focusring, .c5[type='reset']:-moz-focusring,
.c5[type="submit"]:-moz-focusring { .c5[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText; outline: 0.0625rem dotted ButtonText;
} }
@ -230,7 +230,19 @@ exports[`renders <Delete /> without throwing 1`] = `
} }
<div> <div>
<h2 .c1 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 500;
font-size: 1.5rem;
}
.c0 {
line-height: 1.25;
color: ;
margin: 0 0 0.75rem 0;
}
<h2
className="c0 c1" className="c0 c1"
> >
Deleting a service: Deleting a service:
@ -238,19 +250,235 @@ exports[`renders <Delete /> without throwing 1`] = `
Nginx Nginx
</h2> </h2>
<p .c1 {
className="c2 c3" font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
line-height: 1.5rem;
font-size: 0.9375rem;
}
.c0 {
color: ;
margin: 0.75rem 0 1.875rem 0;
}
<p
className="c0 c1"
> >
Deleting a service can lead to irreversible loss of data and failures in your application. Are you sure you want to continue? Deleting a service can lead to irreversible loss of data and failures in your application. Are you sure you want to continue?
</p> </p>
<button .c0 {
className="c4" font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
margin: 0;
overflow: visible;
text-transform: none;
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
min-width: 7.5rem;
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0;
padding: 0.9375rem 1.125rem;
position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
color: ;
background-image: none;
background-color: ;
border-radius: 0.25rem;
border: solid 0.0625rem;
color: ;
background-color: ;
border-color: ;
}
.c0::-moz-focus-inner,
.c0[type='button']::-moz-focus-inner,
.c0[type='reset']::-moz-focus-inner,
.c0[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c0:-moz-focusring,
.c0[type='button']:-moz-focusring,
.c0[type='reset']:-moz-focusring,
.c0[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c0:focus {
outline: 0;
text-decoration: none;
background-color: ;
border-color: ;
}
.c0:hover {
background-color: ;
border: solid 0.0625rem;
}
.c0:active,
.c0:active:hover,
.c0:active:focus {
background-image: none;
outline: 0;
background-color: ;
border-color: ;
}
.c0[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c0:focus {
background-color: ;
border-color: ;
}
.c0:hover {
background-color: ;
border-color: ;
}
.c0:active,
.c0:active:hover,
.c0:active:focus {
background-color: ;
border-color: ;
}
.c0 + button {
margin-left: 1.25rem;
}
<button
className="c0"
onClick={[Function]} onClick={[Function]}
> >
Cancel Cancel
</button> </button>
<button .c0 {
className="c5" font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
margin: 0;
overflow: visible;
text-transform: none;
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
min-width: 7.5rem;
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0;
padding: 0.9375rem 1.125rem;
position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
color: ;
background-image: none;
background-color: ;
border-radius: 0.25rem;
border: solid 0.0625rem;
}
.c0::-moz-focus-inner,
.c0[type='button']::-moz-focus-inner,
.c0[type='reset']::-moz-focus-inner,
.c0[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c0:-moz-focusring,
.c0[type='button']:-moz-focusring,
.c0[type='reset']:-moz-focusring,
.c0[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c0:focus {
outline: 0;
text-decoration: none;
background-color: ;
border-color: ;
}
.c0:hover {
background-color: ;
border: solid 0.0625rem;
}
.c0:active,
.c0:active:hover,
.c0:active:focus {
background-image: none;
outline: 0;
background-color: ;
border-color: ;
}
.c0[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c0 + button {
margin-left: 1.25rem;
}
<button
className="c0"
onClick={[Function]} onClick={[Function]}
> >
Delete service Delete service

View File

@ -9,9 +9,6 @@ import 'jest-styled-components';
import ServiceListItem from '@components/services/list-item'; import ServiceListItem from '@components/services/list-item';
import { Router, service } from '../../mocks'; import { Router, service } from '../../mocks';
console.log(service);
it('renders <ServiceListItem /> without throwing', () => { it('renders <ServiceListItem /> without throwing', () => {
const tree = renderer const tree = renderer
.create( .create(
@ -28,4 +25,4 @@ it('renders child <ServiceListItem /> without throwing', () => {
.create(<ServiceListItem service={service} isChild />) .create(<ServiceListItem service={service} isChild />)
.toJSON(); .toJSON();
expect(tree).toMatchSnapshot(); expect(tree).toMatchSnapshot();
}); });

View File

@ -36,7 +36,7 @@ exports[`renders <InstancesTooltip /> without throwing 1`] = `
.c2:after, .c2:after,
.c2:before { .c2:before {
content: ""; content: '';
position: absolute; position: absolute;
bottom: 100%; bottom: 100%;
left: 50%; left: 50%;
@ -72,14 +72,139 @@ exports[`renders <InstancesTooltip /> without throwing 1`] = `
<div <div
className="c0" className="c0"
> >
<div .c3 {
className="c1" font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
line-height: 1.5rem;
font-size: 0.9375rem;
}
.c0 {
position: absolute;
top: auto;
left: auto;
bottom: ;
right: auto;
}
.c0:focus {
outline: none;
}
.c1 {
position: relative;
display: inline-block;
top: 0.3125rem;
left: -50%;
margin: 0;
padding: 0.75rem 0;
background-color: ;
border: 0.0625rem solid;
box-shadow: 0 0.125rem 0.375rem 0.0625rem rgba(0,0,0,0.1);
border-radius: 0.25rem;
z-index: 1000;
}
.c1:after,
.c1:before {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
height: 0;
width: 0;
border: solid transparent;
}
.c1:after {
border-bottom-color: ;
border-width: 0.1875rem;
margin-left: -0.1875rem;
}
.c1:before {
border-bottom-color: ;
border-width: 0.3125rem;
margin-left: -0.3125rem;
}
.c2 {
margin: 0 1.125rem;
color: ;
white-space: nowrap;
}
<div
className="c0"
> >
<div .c2 {
className="c2" font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
line-height: 1.5rem;
font-size: 0.9375rem;
}
.c0 {
position: relative;
display: inline-block;
top: 0.3125rem;
left: -50%;
margin: 0;
padding: 0.75rem 0;
background-color: ;
border: 0.0625rem solid;
box-shadow: 0 0.125rem 0.375rem 0.0625rem rgba(0,0,0,0.1);
border-radius: 0.25rem;
z-index: 1000;
}
.c0:after,
.c0:before {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
height: 0;
width: 0;
border: solid transparent;
}
.c0:after {
border-bottom-color: ;
border-width: 0.1875rem;
margin-left: -0.1875rem;
}
.c0:before {
border-bottom-color: ;
border-width: 0.3125rem;
margin-left: -0.3125rem;
}
.c1 {
margin: 0 1.125rem;
color: ;
white-space: nowrap;
}
<div
className="c0"
> >
<p .c1 {
className="c3 c4" font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
line-height: 1.5rem;
font-size: 0.9375rem;
}
.c0 {
margin: 0 1.125rem;
color: ;
white-space: nowrap;
}
<p
className="c0 c1"
> >
Your instance is operating as expected Your instance is operating as expected
</p> </p>

View File

@ -1,3 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders <DeploymentGroupEditOrCreate /> without throwing 1`] = `null`;

View File

@ -85,39 +85,275 @@ exports[`renders <Header /> without throwing 1`] = `
height: 1.5625rem; height: 1.5625rem;
} }
.c6 {
padding-left: 5px;
}
<div <div
className="c0" className="c0"
> >
<div .c1 {
className="c1" font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 500;
font-size: 1.5rem;
text-transform: uppercase;
color: ;
font-size: 1.8125rem;
margin: 0;
}
.c0 {
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
padding: 0.9375rem 0;
}
.c2 {
border-style: none;
width: 5.4375rem;
height: 1.5625rem;
}
<div
className="c0"
> >
<h2 .c0 {
className="c2" font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 500;
font-size: 1.5rem;
text-transform: uppercase;
color: ;
font-size: 1.8125rem;
margin: 0;
}
.c1 {
border-style: none;
width: 5.4375rem;
height: 1.5625rem;
}
<h2
className="c0"
> >
<a .c0 {
border-style: none;
width: 5.4375rem;
height: 1.5625rem;
}
<a
href="/" href="/"
onClick={[Function]} onClick={[Function]}
> >
<img .c0 {
className="c3" border-style: none;
width: 5.4375rem;
height: 1.5625rem;
}
<img
className="c0"
src="test-file-mock" src="test-file-mock"
/> />
</a> </a>
</h2> </h2>
</div> </div>
<div .c1 {
className="c4" font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
line-height: 1.5rem;
font-size: 0.9375rem;
font-weight: 600;
text-align: center;
color: ;
margin: 0;
}
.c0 {
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
padding: 0.9375rem 0;
width: 6.25rem;
max-width: 6.25rem;
}
.c2 {
padding-left: 5px;
}
<div
className="c0"
> >
<p .c0 {
className="c5" font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
/> font-weight: 400;
line-height: 1.5rem;
font-size: 0.9375rem;
font-weight: 600;
text-align: center;
color: ;
margin: 0;
}
.c1 {
padding-left: 5px;
}
<p
className="c0"
>
<svg
className=""
height="13"
viewBox="0 0 9 13"
width="9"
xmlns="http://www.w3.org/2000/svg"
>
<title>
icon: data center
</title>
<defs>
<linearGradient
id="a"
x1="49.967%"
x2="49.967%"
y1="100%"
y2="0%"
>
<stop
offset="0%"
stopColor="#E6E6E6"
/>
<stop
offset="100%"
stopColor="#FFF"
/>
</linearGradient>
</defs>
<path
d="M1174 34h9V21h-9v13zm2-2h5v-9h-5v9zm1-7h3.001v-1H1177v1zm0 2h3.001v-1H1177v1zm0 2h3.001v-1H1177v1z"
fill="url(#a)"
fillRule="evenodd"
transform="translate(-1174 -21)"
/>
</svg>
.c0 {
padding-left: 5px;
}
<span
className="c0"
/>
</p>
</div> </div>
<div .c1 {
className="c4" font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
line-height: 1.5rem;
font-size: 0.9375rem;
font-weight: 600;
text-align: center;
color: ;
margin: 0;
}
.c0 {
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
padding: 0.9375rem 0;
width: 6.25rem;
max-width: 6.25rem;
}
.c2 {
padding-left: 5px;
}
<div
className="c0"
> >
<p .c0 {
className="c5" font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
/> font-weight: 400;
line-height: 1.5rem;
font-size: 0.9375rem;
font-weight: 600;
text-align: center;
color: ;
margin: 0;
}
.c1 {
padding-left: 5px;
}
<p
className="c0"
>
<svg
className=""
height="12"
viewBox="0 0 12 12"
width="12"
xmlns="http://www.w3.org/2000/svg"
>
<title>
Shape
</title>
<defs>
<linearGradient
id="a"
x1="49.967%"
x2="49.967%"
y1="100%"
y2="0%"
>
<stop
offset="0%"
stopColor="#E6E6E6"
/>
<stop
offset="100%"
stopColor="#FFF"
/>
</linearGradient>
</defs>
<path
d="M12 12H0a5.958 5.958 0 0 1 1.485-3.552 1.368 1.368 0 0 1 1.726-.296 4.83 4.83 0 0 0 5.201-.248 1.384 1.384 0 0 1 1.75.152A5.968 5.968 0 0 1 12 12zM5.619 0a3.205 3.205 0 0 0-3.211 3.2c0 1.768 1.42 4 3.21 4s3.211-2.232 3.211-4C8.83 1.433 7.392 0 5.62 0z"
fill="url(#a)"
fillRule="nonzero"
/>
</svg>
.c0 {
padding-left: 5px;
}
<span
className="c0"
/>
</p>
</div> </div>
</div> </div>
`; `;

View File

@ -559,6 +559,8 @@ exports[`renders <ServiceScale /> without throwing 1`] = `
font-size: 0.9375rem; font-size: 0.9375rem;
font-style: normal; font-style: normal;
font-stretch: normal; font-stretch: normal;
font-weight: bold;
display: block;
color: ; color: ;
float: right; float: right;
} }
@ -600,12 +602,6 @@ exports[`renders <ServiceScale /> without throwing 1`] = `
vertical-align: middle; vertical-align: middle;
} }
@media only screen and (min-width:48.0625rem) {
.c10 {
text-align: right;
}
}
<div <div
className="c0" className="c0"
> >
@ -1157,6 +1153,8 @@ exports[`renders <ServiceScale /> without throwing 1`] = `
font-size: 0.9375rem; font-size: 0.9375rem;
font-style: normal; font-style: normal;
font-stretch: normal; font-stretch: normal;
font-weight: bold;
display: block;
color: ; color: ;
float: right; float: right;
} }
@ -1198,12 +1196,6 @@ exports[`renders <ServiceScale /> without throwing 1`] = `
vertical-align: middle; vertical-align: middle;
} }
@media only screen and (min-width:48.0625rem) {
.c9 {
text-align: right;
}
}
<div <div
className="c0" className="c0"
width={460} width={460}
@ -1765,6 +1757,8 @@ exports[`renders <ServiceScale /> without throwing 1`] = `
font-size: 0.9375rem; font-size: 0.9375rem;
font-style: normal; font-style: normal;
font-stretch: normal; font-stretch: normal;
font-weight: bold;
display: block;
color: ; color: ;
float: right; float: right;
} }
@ -1806,12 +1800,6 @@ exports[`renders <ServiceScale /> without throwing 1`] = `
vertical-align: middle; vertical-align: middle;
} }
@media only screen and (min-width:48.0625rem) {
.c5 {
text-align: right;
}
}
<form <form
onSubmit={[Function]} onSubmit={[Function]}
> >
@ -2002,6 +1990,8 @@ exports[`renders <ServiceScale /> without throwing 1`] = `
font-size: 0.9375rem; font-size: 0.9375rem;
font-style: normal; font-style: normal;
font-stretch: normal; font-stretch: normal;
font-weight: bold;
display: block;
color: ; color: ;
float: right; float: right;
} }
@ -2043,12 +2033,6 @@ exports[`renders <ServiceScale /> without throwing 1`] = `
vertical-align: middle; vertical-align: middle;
} }
@media only screen and (min-width:48.0625rem) {
.c1 {
text-align: right;
}
}
<fieldset <fieldset
className="c0" className="c0"
style={undefined} style={undefined}
@ -2187,6 +2171,8 @@ exports[`renders <ServiceScale /> without throwing 1`] = `
font-size: 0.9375rem; font-size: 0.9375rem;
font-style: normal; font-style: normal;
font-stretch: normal; font-stretch: normal;
font-weight: bold;
display: block;
color: ; color: ;
float: right; float: right;
} }
@ -2228,12 +2214,6 @@ exports[`renders <ServiceScale /> without throwing 1`] = `
vertical-align: middle; vertical-align: middle;
} }
@media only screen and (min-width:48.0625rem) {
.c0 {
text-align: right;
}
}
<div> <div>
.c0 { .c0 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
@ -2241,16 +2221,12 @@ exports[`renders <ServiceScale /> without throwing 1`] = `
font-size: 0.9375rem; font-size: 0.9375rem;
font-style: normal; font-style: normal;
font-stretch: normal; font-stretch: normal;
font-weight: bold;
display: block;
color: ; color: ;
float: right; float: right;
} }
@media only screen and (min-width:48.0625rem) {
.c0 {
text-align: right;
}
}
<label <label
className="c0" className="c0"
form="scale-service" form="scale-service"
@ -2458,7 +2434,7 @@ exports[`renders <ServiceScale /> without throwing 1`] = `
<input <input
className="c0 c1" className="c0 c1"
id="bCQKRx" id="YOGS"
name="replicas" name="replicas"
onBlur={[Function]} onBlur={[Function]}
onChange={[Function]} onChange={[Function]}

View File

@ -1085,7 +1085,7 @@ exports[`renders <ServicesMenu /> without throwing 1`] = `
<li <li
className="c0" className="c0"
id="bvFZym" id="ckYfBi"
> >
.c1 { .c1 {
font-family: sans-serif; font-family: sans-serif;
@ -1236,7 +1236,7 @@ exports[`renders <ServicesMenu /> without throwing 1`] = `
<input <input
checked={false} checked={false}
className="c0" className="c0"
id="cjPeBX" id="cjJOWd"
name="service-view" name="service-view"
onChange={[Function]} onChange={[Function]}
type="radio" type="radio"
@ -1262,7 +1262,7 @@ exports[`renders <ServicesMenu /> without throwing 1`] = `
<label <label
className="c0" className="c0"
htmlFor="cjPeBX" htmlFor="cjJOWd"
> >
List List
</label> </label>
@ -1372,7 +1372,7 @@ exports[`renders <ServicesMenu /> without throwing 1`] = `
<li <li
className="c0" className="c0"
id="bvFZym" id="ckYfBi"
> >
.c1 { .c1 {
font-family: sans-serif; font-family: sans-serif;
@ -1523,7 +1523,7 @@ exports[`renders <ServicesMenu /> without throwing 1`] = `
<input <input
checked={false} checked={false}
className="c0" className="c0"
id="coLjmH" id="bVLDyd"
name="service-view" name="service-view"
onChange={[Function]} onChange={[Function]}
type="radio" type="radio"
@ -1549,7 +1549,7 @@ exports[`renders <ServicesMenu /> without throwing 1`] = `
<label <label
className="c0" className="c0"
htmlFor="coLjmH" htmlFor="bVLDyd"
> >
Topology Topology
</label> </label>

View File

@ -9,30 +9,36 @@ exports[`renders <ServicesTopology /> without throwing 1`] = `
.c3 { .c3 {
stroke: ; stroke: ;
-webkit-fill: ;
fill: ; fill: ;
stroke-width: 1.5; stroke-width: 1.5;
rx: 4; rx: 4;
ry: 4; ry: 4;
stroke: ; stroke: ;
-webkit-fill: ;
fill: ; fill: ;
} }
.c4 { .c4 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400; font-weight: 400;
-webkit-fill: ;
fill: ; fill: ;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
-webkit-fill: ;
fill: ; fill: ;
cursor: pointer; cursor: pointer;
} }
.c9 { .c10 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400; font-weight: 400;
-webkit-fill: ;
fill: ; fill: ;
font-size: 12px; font-size: 12px;
opacity: 0.8; opacity: 0.8;
-webkit-fill: ;
fill: ; fill: ;
} }
@ -46,12 +52,21 @@ exports[`renders <ServicesTopology /> without throwing 1`] = `
} }
.c6 { .c6 {
-webkit-fill: ;
fill: ; fill: ;
-webkit-fill: ;
fill: ; fill: ;
} }
.c8 { .c8 {
-webkit-fill: ;
fill: ; fill: ;
}
.c9 {
-webkit-fill: ;
fill: ;
-webkit-fill: ;
fill: ; fill: ;
} }
@ -74,15 +89,340 @@ exports[`renders <ServicesTopology /> without throwing 1`] = `
} }
<div> <div>
<div .c5 {
stroke: ;
stroke-width: 1.5;
stroke: ;
}
.c3 {
stroke: ;
-webkit-fill: ;
fill: ;
stroke-width: 1.5;
rx: 4;
ry: 4;
stroke: ;
-webkit-fill: ;
fill: ;
}
.c4 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
-webkit-fill: ;
fill: ;
font-size: 16px;
font-weight: 600;
-webkit-fill: ;
fill: ;
cursor: pointer;
}
.c10 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
-webkit-fill: ;
fill: ;
font-size: 12px;
opacity: 0.8;
-webkit-fill: ;
fill: ;
}
.c7 {
opacity: 0;
cursor: pointer;
}
.c7:focus {
outline: none;
}
.c6 {
-webkit-fill: ;
fill: ;
-webkit-fill: ;
fill: ;
}
.c8 {
-webkit-fill: ;
fill: ;
}
.c9 {
-webkit-fill: ;
fill: ;
-webkit-fill: ;
fill: ;
}
.c2 {
width: 100%;
height: 1000px;
}
.c2:not(:root) {
overflow: hidden;
}
.c0 {
padding: 1.5rem;
background-color: ;
}
.c1 {
position: relative;
}
<div
className="c0" className="c0"
> >
<div .c4 {
className="c1" stroke: ;
stroke-width: 1.5;
stroke: ;
}
.c2 {
stroke: ;
-webkit-fill: ;
fill: ;
stroke-width: 1.5;
rx: 4;
ry: 4;
stroke: ;
-webkit-fill: ;
fill: ;
}
.c3 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
-webkit-fill: ;
fill: ;
font-size: 16px;
font-weight: 600;
-webkit-fill: ;
fill: ;
cursor: pointer;
}
.c9 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
-webkit-fill: ;
fill: ;
font-size: 12px;
opacity: 0.8;
-webkit-fill: ;
fill: ;
}
.c6 {
opacity: 0;
cursor: pointer;
}
.c6:focus {
outline: none;
}
.c5 {
-webkit-fill: ;
fill: ;
-webkit-fill: ;
fill: ;
}
.c7 {
-webkit-fill: ;
fill: ;
}
.c8 {
-webkit-fill: ;
fill: ;
-webkit-fill: ;
fill: ;
}
.c1 {
width: 100%;
height: 1000px;
}
.c1:not(:root) {
overflow: hidden;
}
.c0 {
position: relative;
}
<div
className="c0"
> >
<div> .c3 {
<svg stroke: ;
className="c2" stroke-width: 1.5;
stroke: ;
}
.c1 {
stroke: ;
-webkit-fill: ;
fill: ;
stroke-width: 1.5;
rx: 4;
ry: 4;
stroke: ;
-webkit-fill: ;
fill: ;
}
.c2 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
-webkit-fill: ;
fill: ;
font-size: 16px;
font-weight: 600;
-webkit-fill: ;
fill: ;
cursor: pointer;
}
.c8 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
-webkit-fill: ;
fill: ;
font-size: 12px;
opacity: 0.8;
-webkit-fill: ;
fill: ;
}
.c5 {
opacity: 0;
cursor: pointer;
}
.c5:focus {
outline: none;
}
.c4 {
-webkit-fill: ;
fill: ;
-webkit-fill: ;
fill: ;
}
.c6 {
-webkit-fill: ;
fill: ;
}
.c7 {
-webkit-fill: ;
fill: ;
-webkit-fill: ;
fill: ;
}
.c0 {
width: 100%;
height: 1000px;
}
.c0:not(:root) {
overflow: hidden;
}
<div>
.c3 {
stroke: ;
stroke-width: 1.5;
stroke: ;
}
.c1 {
stroke: ;
-webkit-fill: ;
fill: ;
stroke-width: 1.5;
rx: 4;
ry: 4;
stroke: ;
-webkit-fill: ;
fill: ;
}
.c2 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
-webkit-fill: ;
fill: ;
font-size: 16px;
font-weight: 600;
-webkit-fill: ;
fill: ;
cursor: pointer;
}
.c8 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
-webkit-fill: ;
fill: ;
font-size: 12px;
opacity: 0.8;
-webkit-fill: ;
fill: ;
}
.c5 {
opacity: 0;
cursor: pointer;
}
.c5:focus {
outline: none;
}
.c4 {
-webkit-fill: ;
fill: ;
-webkit-fill: ;
fill: ;
}
.c6 {
-webkit-fill: ;
fill: ;
}
.c7 {
-webkit-fill: ;
fill: ;
-webkit-fill: ;
fill: ;
}
.c0 {
width: 100%;
height: 1000px;
}
.c0:not(:root) {
overflow: hidden;
}
<svg
className="c0"
id="topology-svg" id="topology-svg"
onMouseMove={[Function]} onMouseMove={[Function]}
onMouseUp={[Function]} onMouseUp={[Function]}
@ -90,20 +430,194 @@ exports[`renders <ServicesTopology /> without throwing 1`] = `
onTouchEnd={[Function]} onTouchEnd={[Function]}
onTouchMove={[Function]} onTouchMove={[Function]}
> >
<g> .c2 {
<g stroke: ;
stroke-width: 1.5;
stroke: ;
}
.c0 {
stroke: ;
-webkit-fill: ;
fill: ;
stroke-width: 1.5;
rx: 4;
ry: 4;
stroke: ;
-webkit-fill: ;
fill: ;
}
.c1 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
-webkit-fill: ;
fill: ;
font-size: 16px;
font-weight: 600;
-webkit-fill: ;
fill: ;
cursor: pointer;
}
.c7 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
-webkit-fill: ;
fill: ;
font-size: 12px;
opacity: 0.8;
-webkit-fill: ;
fill: ;
}
.c4 {
opacity: 0;
cursor: pointer;
}
.c4:focus {
outline: none;
}
.c3 {
-webkit-fill: ;
fill: ;
-webkit-fill: ;
fill: ;
}
.c5 {
-webkit-fill: ;
fill: ;
}
.c6 {
-webkit-fill: ;
fill: ;
-webkit-fill: ;
fill: ;
}
<g>
.c2 {
stroke: ;
stroke-width: 1.5;
stroke: ;
}
.c0 {
stroke: ;
-webkit-fill: ;
fill: ;
stroke-width: 1.5;
rx: 4;
ry: 4;
stroke: ;
-webkit-fill: ;
fill: ;
}
.c1 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
-webkit-fill: ;
fill: ;
font-size: 16px;
font-weight: 600;
-webkit-fill: ;
fill: ;
cursor: pointer;
}
.c7 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
-webkit-fill: ;
fill: ;
font-size: 12px;
opacity: 0.8;
-webkit-fill: ;
fill: ;
}
.c4 {
opacity: 0;
cursor: pointer;
}
.c4:focus {
outline: none;
}
.c3 {
-webkit-fill: ;
fill: ;
-webkit-fill: ;
fill: ;
}
.c5 {
-webkit-fill: ;
fill: ;
}
.c6 {
-webkit-fill: ;
fill: ;
-webkit-fill: ;
fill: ;
}
<g
transform="translate(0, 0)" transform="translate(0, 0)"
> >
<rect .c0 {
className="c3" stroke: ;
-webkit-fill: ;
fill: ;
stroke-width: 1.5;
rx: 4;
ry: 4;
stroke: ;
-webkit-fill: ;
fill: ;
}
<rect
className="c0"
height={114} height={114}
width={180} width={180}
x={0} x={0}
y={0} y={0}
/> />
<g> .c0 {
<text font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
className="c4" font-weight: 400;
-webkit-fill: ;
fill: ;
font-size: 16px;
font-weight: 600;
-webkit-fill: ;
fill: ;
cursor: pointer;
}
<g>
.c0 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
-webkit-fill: ;
fill: ;
font-size: 16px;
font-weight: 600;
-webkit-fill: ;
fill: ;
cursor: pointer;
}
<text
className="c0"
onClick={[Function]} onClick={[Function]}
onKeyDown={[Function]} onKeyDown={[Function]}
x={12} x={12}
@ -112,36 +626,94 @@ exports[`renders <ServicesTopology /> without throwing 1`] = `
Nginx Nginx
</text> </text>
</g> </g>
<g .c0 {
stroke: ;
stroke-width: 1.5;
stroke: ;
}
.c2 {
opacity: 0;
cursor: pointer;
}
.c2:focus {
outline: none;
}
.c1 {
-webkit-fill: ;
fill: ;
-webkit-fill: ;
fill: ;
}
<g
transform="translate(140, 0)" transform="translate(140, 0)"
> >
<line .c0 {
className="c5" stroke: ;
stroke-width: 1.5;
stroke: ;
}
<line
className="c0"
x1={0} x1={0}
x2={0} x2={0}
y1={0} y1={0}
y2={48} y2={48}
/> />
<circle .c0 {
className="c6" -webkit-fill: ;
fill: ;
-webkit-fill: ;
fill: ;
}
<circle
className="c0"
cx={20} cx={20}
cy={18} cy={18}
r={2} r={2}
/> />
<circle .c0 {
className="c6" -webkit-fill: ;
fill: ;
-webkit-fill: ;
fill: ;
}
<circle
className="c0"
cx={20} cx={20}
cy={24} cy={24}
r={2} r={2}
/> />
<circle .c0 {
className="c6" -webkit-fill: ;
fill: ;
-webkit-fill: ;
fill: ;
}
<circle
className="c0"
cx={20} cx={20}
cy={30} cy={30}
r={2} r={2}
/> />
<rect .c0 {
className="c7" opacity: 0;
cursor: pointer;
}
.c0:focus {
outline: none;
}
<rect
className="c0"
height={48} height={48}
onClick={[Function]} onClick={[Function]}
onKeyDown={[Function]} onKeyDown={[Function]}
@ -150,61 +722,136 @@ exports[`renders <ServicesTopology /> without throwing 1`] = `
width={40} width={40}
/> />
</g> </g>
<g .c0 {
stroke: ;
stroke-width: 1.5;
stroke: ;
}
.c3 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
-webkit-fill: ;
fill: ;
font-size: 12px;
opacity: 0.8;
-webkit-fill: ;
fill: ;
}
.c1 {
-webkit-fill: ;
fill: ;
}
.c2 {
-webkit-fill: ;
fill: ;
-webkit-fill: ;
fill: ;
}
<g
transform="translate(0, 48)" transform="translate(0, 48)"
> >
<line .c0 {
className="c5" stroke: ;
stroke-width: 1.5;
stroke: ;
}
<line
className="c0"
x1={0} x1={0}
x2={180} x2={180}
y1={0} y1={0}
y2={0} y2={0}
/> />
<g .c2 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
-webkit-fill: ;
fill: ;
font-size: 12px;
opacity: 0.8;
-webkit-fill: ;
fill: ;
}
.c0 {
-webkit-fill: ;
fill: ;
}
.c1 {
-webkit-fill: ;
fill: ;
-webkit-fill: ;
fill: ;
}
<g
transform="translate(12, 11)" transform="translate(12, 11)"
> >
<g .c0 {
-webkit-fill: ;
fill: ;
}
<g
transform="translate(0, 0)" transform="translate(0, 0)"
> >
<svg .c0 {
className="" -webkit-fill: ;
fill: ;
}
<svg
className="c0"
healthy="UNHEALTHY"
height="18" height="18"
viewBox="0 0 18 18" viewBox="0 0 18 18"
width="18" width="18"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<title> <title>
icon: error icon: state
</title> </title>
<g <g
fill="none"
fillRule="evenodd" fillRule="evenodd"
> >
<circle <circle
cx="9" cx="9"
cy="9" cy="9"
fill="#DA4B42"
r="9" r="9"
/> />
<g <path
d="M9.477 6.603l-.522.443-.444-.443a2.056 2.056 0 1 0-2.908 2.909l3.352 3.352 3.412-3.352c.803-.804.863-2.106.06-2.91a2.105 2.105 0 0 0-2.95 0z"
fill="#FFF" fill="#FFF"
> />
<path
d="M11.121 5.464l1.415 1.415-5.657 5.657-1.415-1.415z"
/>
<path
d="M12.536 11.121l-1.415 1.415-5.657-5.657L6.88 5.464z"
/>
</g>
</g> </g>
</svg> </svg>
</g> </g>
<g .c0 {
-webkit-fill: ;
fill: ;
-webkit-fill: ;
fill: ;
}
<g
transform="translate(30, 4.5)" transform="translate(30, 4.5)"
> >
<svg .c0 {
-webkit-fill: ;
fill: ;
-webkit-fill: ;
fill: ;
}
<svg
active={undefined} active={undefined}
className="c8" className="c0"
consul={undefined} consul={undefined}
height="9" height="9"
viewBox="0 0 18 9" viewBox="0 0 18 9"
@ -220,21 +867,54 @@ exports[`renders <ServicesTopology /> without throwing 1`] = `
/> />
</svg> </svg>
</g> </g>
<text .c0 {
className="c9" font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
-webkit-fill: ;
fill: ;
font-size: 12px;
opacity: 0.8;
-webkit-fill: ;
fill: ;
}
<text
className="c0"
x={54} x={54}
y={14} y={14}
> >
1 inst. 1 inst.
</text> </text>
<g .c0 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
-webkit-fill: ;
fill: ;
font-size: 12px;
opacity: 0.8;
-webkit-fill: ;
fill: ;
}
<g
transform="translate(54, 36)" transform="translate(54, 36)"
> >
<text .c0 {
className="c9" font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
-webkit-fill: ;
fill: ;
font-size: 12px;
opacity: 0.8;
-webkit-fill: ;
fill: ;
}
<text
className="c0"
> >
1 1
running running
</text> </text>
</g> </g>
</g> </g>

View File

@ -9,6 +9,7 @@ import 'jest-styled-components';
import { ServicesTopology } from '@containers/services/topology.js'; import { ServicesTopology } from '@containers/services/topology.js';
import { Router, Store, services } from '../../mocks'; import { Router, Store, services } from '../../mocks';
it('renders <ServicesTopology /> without throwing', () => { it('renders <ServicesTopology /> without throwing', () => {
const tree = renderer const tree = renderer
.create( .create(
@ -20,4 +21,4 @@ it('renders <ServicesTopology /> without throwing', () => {
) )
.toJSON(); .toJSON();
expect(tree).toMatchSnapshot(); expect(tree).toMatchSnapshot();
}); });

View File

@ -24,8 +24,15 @@ export const deploymentGroup = {
name: 'Wordpress Blog Example' name: 'Wordpress Blog Example'
}; };
export const file = {
id: 'test',
onRemoveFile: () => {},
readOnly: true
};
export const services = [service]; export const services = [service];
export const instances = [instance]; export const instances = [instance];
export const files = [file];
export const deploymentGroups = [deploymentGroup]; export const deploymentGroups = [deploymentGroup];

View File

@ -1,6 +1,4 @@
import { import {
deploymentGroupBySlugSelector,
serviceBySlugSelector,
getInstanceStatuses, getInstanceStatuses,
getInstancesActive, getInstancesActive,
getInstancesHealthy, getInstancesHealthy,
@ -244,4 +242,4 @@ const consulExpectedResult = {
transitionalStatus: true, transitionalStatus: true,
isConsul: true, isConsul: true,
index: 1 index: 1
}; };

View File

@ -61,7 +61,7 @@ const GraphNodeInfo = ({ data, pos }) => {
const healthy = ( const healthy = (
<HealthyIcon <HealthyIcon
healthy={ healthy={
instancesHealthy.total === instancesHealthy.healthy ? ( instancesHealthy && instancesHealthy.total === instancesHealthy.healthy ? (
'HEALTHY' 'HEALTHY'
) : ( ) : (
'UNHEALTHY' 'UNHEALTHY'
@ -95,4 +95,4 @@ GraphNodeInfo.propTypes = {
pos: Point.isRequired pos: Point.isRequired
}; };
export default Baseline(GraphNodeInfo); export default Baseline(GraphNodeInfo);