apphouse
Version:
Component library for React that uses observable state management and theme-able components.
808 lines (775 loc) • 22 kB
text/typescript
import CSS from "./CSS";
describe("CSS", () => {
test("camelcaseToDashed", () => {
const str = "helloWorld";
expect(CSS.camelcaseToDashed(str)).toBe("hello-world");
const str2 = "WebkitUserSelect";
expect(CSS.camelcaseToDashed(str2)).toBe("-webkit-user-select");
const str3 = "-webkit-user-select";
expect(CSS.camelcaseToDashed(str3)).toBe("-webkit-user-select");
});
test("getCssObjectWithDashedProperties", () => {
expect(
CSS.getCssObjectWithDashedProperties({
WebkitUserSelect: "none",
})
).toBe(`{"-webkit-user-select": "none"}`);
});
test("fromCssInJstoCssString", () => {
expect(
CSS.fromCssInJstoCssString(
{
backgroundColor: "green",
width: "30px",
height: "30px",
":active": {
backgroundColor: "red",
},
},
true
)
).toBe(
`.container {
background-color: green;
width: 30px;
height: 30px;
}
.container:active {
background-color: red;
}`
);
});
test("fromCssInJstoCssString - ensure webkit prefix is kept", () => {
expect(
CSS.fromCssInJstoCssString(
{
"-webkit-fill-color": "green",
},
true
)
).toBe(`.container { -webkit-fill-color: green; }`);
});
test("getCssObjectWithDashedProperties", () => {
const result = CSS.getCssObjectWithDashedProperties({
backgroundColor: "green",
width: "30px",
height: "30px",
});
expect(result).toEqual({
"background-color": "green",
width: "30px",
height: "30px",
});
});
test("fromCssInJsToJSONAttributes", () => {
expect(
CSS.fromCssInJsToJSONAttributes({
"@media (min-width: 768px)": {
padding: "12px 50px",
},
":active": {
boxShadow: "rgba(0, 0, 0, .125) 0 3px 5px inset",
outline: "0",
},
":focus": {
textDecoration: "none",
},
":hover": {
textDecoration: "none",
},
":not([disabled]):active": {
boxShadow: "#fff 2px 2px 0 0, #000 2px 2px 0 1px",
transform: "translate(2px, 2px)",
},
WebkitUserSelect: "none",
appearance: "button",
backgroundColor: "#000",
backgroundImage: "none",
border: "1px solid #000",
borderRadius: "4px",
boxShadow: "#fff 4px 4px 0 0,#000 4px 4px 0 1px",
boxSizing: "border-box",
color: "#fff",
cursor: "pointer",
display: "inline-block",
fontFamily: "ITCAvantGardeStd-Bk,Arial,sans-serif",
fontSize: "14px",
fontWeight: "400",
lineHeight: "20px",
margin: "0 5px 10px 0",
overflow: "visible",
padding: "12px 40px",
textAlign: "center",
textTransform: "none",
touchAction: "manipulation",
userSelect: "none",
verticalAlign: "middle",
whiteSpace: "nowrap",
})
).toEqual({
attributes: {},
children: {
".container": {
attributes: {
"-webkit-user-select": "none",
appearance: "button",
"background-color": "#000",
"background-image": "none",
border: "1px solid #000",
"border-radius": "4px",
"box-shadow": "#fff 4px 4px 0 0,#000 4px 4px 0 1px",
"box-sizing": "border-box",
color: "#fff",
cursor: "pointer",
display: "inline-block",
"font-family": "ITCAvantGardeStd-Bk,Arial,sans-serif",
"font-size": "14px",
"font-weight": "400",
"line-height": "20px",
margin: "0 5px 10px 0",
overflow: "visible",
padding: "12px 40px",
"text-align": "center",
"text-transform": "none",
"touch-action": "manipulation",
"user-select": "none",
"vertical-align": "middle",
"white-space": "nowrap",
},
children: {},
},
".container:active": {
attributes: {
"box-shadow": "rgba(0, 0, 0, .125) 0 3px 5px inset",
outline: "0",
},
children: {},
},
".container:focus": {
attributes: {
"text-decoration": "none",
},
children: {},
},
".container:hover": {
attributes: {
"text-decoration": "none",
},
children: {},
},
".container:not([disabled]):active": {
attributes: {
"box-shadow": "#fff 2px 2px 0 0, #000 2px 2px 0 1px",
transform: "translate(2px, 2px)",
},
children: {},
},
"@media (min-width: 768px)": {
attributes: {},
children: {
".container": {
attributes: {
padding: "12px 50px",
},
children: {},
},
},
},
},
});
});
test("fromflatJSONToJSONAttributes", () => {
expect(
CSS.fromflatJSONToJSONAttributes({
"@media (min-width: 768px)": {
padding: "12px 50px",
},
":active": {
boxShadow: "rgba(0, 0, 0, .125) 0 3px 5px inset",
outline: "0",
},
":focus": {
textDecoration: "none",
},
":hover": {
textDecoration: "none",
},
":not([disabled]):active": {
boxShadow: "#fff 2px 2px 0 0, #000 2px 2px 0 1px",
transform: "translate(2px, 2px)",
},
root: {
WebkitUserSelect: "none",
appearance: "button",
backgroundColor: "#000",
backgroundImage: "none",
border: "1px solid #000",
borderRadius: "4px",
boxShadow: "#fff 4px 4px 0 0,#000 4px 4px 0 1px",
boxSizing: "border-box",
color: "#fff",
cursor: "pointer",
display: "inline-block",
fontFamily: "ITCAvantGardeStd-Bk,Arial,sans-serif",
fontSize: "14px",
fontWeight: "400",
lineHeight: "20px",
margin: "0 5px 10px 0",
overflow: "visible",
padding: "12px 40px",
textAlign: "center",
textTransform: "none",
touchAction: "manipulation",
userSelect: "none",
verticalAlign: "middle",
whiteSpace: "nowrap",
},
})
).toEqual({
attributes: {},
children: {
".container": {
attributes: {
"-webkit-user-select": "none",
appearance: "button",
"background-color": "#000",
"background-image": "none",
border: "1px solid #000",
"border-radius": "4px",
"box-shadow": "#fff 4px 4px 0 0,#000 4px 4px 0 1px",
"box-sizing": "border-box",
color: "#fff",
cursor: "pointer",
display: "inline-block",
"font-family": "ITCAvantGardeStd-Bk,Arial,sans-serif",
"font-size": "14px",
"font-weight": "400",
"line-height": "20px",
margin: "0 5px 10px 0",
overflow: "visible",
padding: "12px 40px",
"text-align": "center",
"text-transform": "none",
"touch-action": "manipulation",
"user-select": "none",
"vertical-align": "middle",
"white-space": "nowrap",
},
children: {},
},
".container:active": {
attributes: {
"box-shadow": "rgba(0, 0, 0, .125) 0 3px 5px inset",
outline: "0",
},
children: {},
},
".container:focus": {
attributes: {
"text-decoration": "none",
},
children: {},
},
".container:hover": {
attributes: {
"text-decoration": "none",
},
children: {},
},
".container:not([disabled]):active": {
attributes: {
"box-shadow": "#fff 2px 2px 0 0, #000 2px 2px 0 1px",
transform: "translate(2px, 2px)",
},
children: {},
},
"@media (min-width: 768px)": {
attributes: {},
children: {
".container": {
attributes: {
padding: "12px 50px",
},
children: {},
},
},
},
},
});
});
test("toJSONAttributes", () => {
// expect(
// CSS.toJSONAttributes(
// `@media (max-width: 800px) {
// #main #comments {
// margin: 0px;
// width: auto;
// background: red;
// }
// #main #buttons {
// padding: 5px 10px;
// color: blue;
// }
// }
// #main #content {
// margin: 0 7.6%;
// width: auto;
// }
// #nav-below {
// border-bottom: 1px solid #ddd;
// margin-bottom: 1.625em;
// background-image: url(http://www.example.com/images/im.jpg);
// }
// `
// )
// ).toEqual({
// attributes: {},
// children: {
// "#main #content": {
// attributes: { margin: "0 7.6%", width: "auto" },
// children: {},
// },
// "#nav-below": {
// attributes: {
// "background-image": "url(http://www.example.com/images/im.jpg)",
// "border-bottom": "1px solid #ddd",
// "margin-bottom": "1.625em",
// },
// children: {},
// },
// "@media (max-width: 800px)": {
// attributes: {},
// children: {
// "#main #buttons": {
// attributes: { color: "blue", padding: "5px 10px" },
// children: {},
// },
// "#main #comments": {
// attributes: { background: "red", margin: "0px", width: "auto" },
// children: {},
// },
// },
// },
// },
// });
expect(
CSS.toJSONAttributes(
` .button-50 {
appearance: button;
background-color: #000;
background-image: none;
border: 1px solid #000;
border-radius: 4px;
box-shadow: #fff 4px 4px 0 0,#000 4px 4px 0 1px;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: ITCAvantGardeStd-Bk,Arial,sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 20px;
margin: 0 5px 10px 0;
overflow: visible;
padding: 12px 40px;
text-align: center;
text-transform: none;
touch-action: manipulation;
user-select: none;
-webkit-user-select: none;
vertical-align: middle;
white-space: nowrap;
}
.button-50:focus {
text-decoration: none;
}
.button-50:hover {
text-decoration: none;
}
.button-50:active {
box-shadow: rgba(0, 0, 0, .125) 0 3px 5px inset;
outline: 0;
}
.button-50:not([disabled]):active {
box-shadow: #fff 2px 2px 0 0, #000 2px 2px 0 1px;
transform: translate(2px, 2px);
}
@media (min-width: 768px) {
.button-50 {
padding: 12px 50px;
}
}
`
)
).toEqual({
attributes: {},
children: {
".button-50": {
attributes: {
"-webkit-user-select": "none",
appearance: "button",
"background-color": "#000",
"background-image": "none",
border: "1px solid #000",
"border-radius": "4px",
"box-shadow": "#fff 4px 4px 0 0,#000 4px 4px 0 1px",
"box-sizing": "border-box",
color: "#fff",
cursor: "pointer",
display: "inline-block",
"font-family": "ITCAvantGardeStd-Bk,Arial,sans-serif",
"font-size": "14px",
"font-weight": "400",
"line-height": "20px",
margin: "0 5px 10px 0",
overflow: "visible",
padding: "12px 40px",
"text-align": "center",
"text-transform": "none",
"touch-action": "manipulation",
"user-select": "none",
"vertical-align": "middle",
"white-space": "nowrap",
},
children: {},
},
".button-50:active": {
attributes: {
"box-shadow": "rgba(0, 0, 0, .125) 0 3px 5px inset",
outline: "0",
},
children: {},
},
".button-50:focus": {
attributes: {
"text-decoration": "none",
},
children: {},
},
".button-50:hover": {
attributes: {
"text-decoration": "none",
},
children: {},
},
".button-50:not([disabled]):active": {
attributes: {
"box-shadow": "#fff 2px 2px 0 0, #000 2px 2px 0 1px",
transform: "translate(2px, 2px)",
},
children: {},
},
"@media (min-width: 768px)": {
attributes: {},
children: {
".button-50": {
attributes: {
padding: "12px 50px",
},
children: {},
},
},
},
},
});
});
test("getCssObjectWithCamelcaseProperties", () => {
const values = CSS.getCssObjectWithCamelcaseProperties({
"background-color": "#000",
"background-image": "none",
border: "1px solid #000",
"border-radius": "4px",
"-webkit-user-select": "none",
});
expect(values).toEqual({
backgroundColor: "#000",
backgroundImage: "none",
border: "1px solid #000",
borderRadius: "4px",
WebkitUserSelect: "none",
});
});
test("parseCss", () => {
expect(
CSS.parseCss(
`
.button-50 {
appearance: button;
background-color: #000;
background-image: none;
border: 1px solid #000;
border-radius: 4px;
box-shadow: #fff 4px 4px 0 0,#000 4px 4px 0 1px;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: ITCAvantGardeStd-Bk,Arial,sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 20px;
margin: 0 5px 10px 0;
overflow: visible;
padding: 12px 40px;
text-align: center;
text-transform: none;
touch-action: manipulation;
user-select: none;
-webkit-user-select: none;
vertical-align: middle;
white-space: nowrap;
}
.button-50:focus {
text-decoration: none;
}
.button-50:hover {
text-decoration: none;
}
.button-50:active {
box-shadow: rgba(0, 0, 0, .125) 0 3px 5px inset;
outline: 0;
}
.button-50:not([disabled]):active {
box-shadow: #fff 2px 2px 0 0, #000 2px 2px 0 1px;
transform: translate(2px, 2px);
}
@media (min-width: 768px) {
.button-50 {
padding: 12px 50px;
}
}
`
)
).toEqual({
".button-50": {
"-webkit-user-select": "none",
appearance: "button",
"background-color": "#000",
"background-image": "none",
border: "1px solid #000",
"border-radius": "4px",
"box-shadow": "#fff 4px 4px 0 0,#000 4px 4px 0 1px",
"box-sizing": "border-box",
color: "#fff",
cursor: "pointer",
display: "inline-block",
"font-family": "ITCAvantGardeStd-Bk,Arial,sans-serif",
"font-size": "14px",
"font-weight": "400",
"line-height": "20px",
margin: "0 5px 10px 0",
overflow: "visible",
padding: "12px 40px",
"text-align": "center",
"text-transform": "none",
"touch-action": "manipulation",
"user-select": "none",
"vertical-align": "middle",
"white-space": "nowrap",
},
".button-50:active": {
"box-shadow": "rgba(0, 0, 0, .125) 0 3px 5px inset",
outline: "0",
},
".button-50:focus": {
"text-decoration": "none",
},
".button-50:hover": {
"text-decoration": "none",
},
".button-50:not([disabled]):active": {
"box-shadow": "#fff 2px 2px 0 0, #000 2px 2px 0 1px",
transform: "translate(2px, 2px)",
},
"@media (min-width: 768px)": {},
});
});
test("getSelectorValues", () => {
expect(
CSS.getSelectorValues(
`
.button-50 {
appearance: button;
background-color: #000;
background-image: none;
border: 1px solid #000;
border-radius: 4px;
box-shadow: #fff 4px 4px 0 0,#000 4px 4px 0 1px;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: ITCAvantGardeStd-Bk,Arial,sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 20px;
margin: 0 5px 10px 0;
overflow: visible;
padding: 12px 40px;
text-align: center;
text-transform: none;
touch-action: manipulation;
user-select: none;
-webkit-user-select: none;
vertical-align: middle;
white-space: nowrap;
}
.button-50:focus {
text-decoration: none;
}
.button-50:hover {
text-decoration: none;
}
.button-50:active {
box-shadow: rgba(0, 0, 0, .125) 0 3px 5px inset;
outline: 0;
}
.button-50:not([disabled]):active {
box-shadow: #fff 2px 2px 0 0, #000 2px 2px 0 1px;
transform: translate(2px, 2px);
}
@media (min-width: 768px) {
.button-50 {
padding: 12px 50px;
}
}
`
)
).toEqual({
"@media (min-width: 768px)": {},
":active": {
boxShadow: "rgba(0, 0, 0, .125) 0 3px 5px inset",
outline: "0",
},
":focus": {
textDecoration: "none",
},
":hover": {
textDecoration: "none",
},
":not([disabled]):active": {
boxShadow: "#fff 2px 2px 0 0, #000 2px 2px 0 1px",
transform: "translate(2px, 2px)",
},
root: {
WebkitUserSelect: "none",
appearance: "button",
backgroundColor: "#000",
backgroundImage: "none",
border: "1px solid #000",
borderRadius: "4px",
boxShadow: "#fff 4px 4px 0 0,#000 4px 4px 0 1px",
boxSizing: "border-box",
color: "#fff",
cursor: "pointer",
display: "inline-block",
fontFamily: "ITCAvantGardeStd-Bk,Arial,sans-serif",
fontSize: "14px",
fontWeight: "400",
lineHeight: "20px",
margin: "0 5px 10px 0",
overflow: "visible",
padding: "12px 40px",
textAlign: "center",
textTransform: "none",
touchAction: "manipulation",
userSelect: "none",
verticalAlign: "middle",
whiteSpace: "nowrap",
},
});
});
test("toCssInJs", () => {
expect(
CSS.toCssInJs(
`
.button-50 {
appearance: button;
background-color: #000;
background-image: none;
border: 1px solid #000;
border-radius: 4px;
box-shadow: #fff 4px 4px 0 0,#000 4px 4px 0 1px;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: ITCAvantGardeStd-Bk,Arial,sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 20px;
margin: 0 5px 10px 0;
overflow: visible;
padding: 12px 40px;
text-align: center;
text-transform: none;
touch-action: manipulation;
user-select: none;
-webkit-user-select: none;
vertical-align: middle;
white-space: nowrap;
}
.button-50:focus {
text-decoration: none;
}
.button-50:hover {
text-decoration: none;
}
.button-50:active {
box-shadow: rgba(0, 0, 0, .125) 0 3px 5px inset;
outline: 0;
}
.button-50:not([disabled]):active {
box-shadow: #fff 2px 2px 0 0, #000 2px 2px 0 1px;
transform: translate(2px, 2px);
}
@media (min-width: 768px) {
.button-50 {
padding: 12px 50px;
}
}
`
)
).toEqual({
"@media (min-width: 768px)": {},
":active": {
boxShadow: "rgba(0, 0, 0, .125) 0 3px 5px inset",
outline: "0",
},
":focus": {
textDecoration: "none",
},
":hover": {
textDecoration: "none",
},
":not([disabled]):active": {
boxShadow: "#fff 2px 2px 0 0, #000 2px 2px 0 1px",
transform: "translate(2px, 2px)",
},
WebkitUserSelect: "none",
appearance: "button",
backgroundColor: "#000",
backgroundImage: "none",
border: "1px solid #000",
borderRadius: "4px",
boxShadow: "#fff 4px 4px 0 0,#000 4px 4px 0 1px",
boxSizing: "border-box",
color: "#fff",
cursor: "pointer",
display: "inline-block",
fontFamily: "ITCAvantGardeStd-Bk,Arial,sans-serif",
fontSize: "14px",
fontWeight: "400",
lineHeight: "20px",
margin: "0 5px 10px 0",
overflow: "visible",
padding: "12px 40px",
textAlign: "center",
textTransform: "none",
touchAction: "manipulation",
userSelect: "none",
verticalAlign: "middle",
whiteSpace: "nowrap",
});
});
});