0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-12 00:08:59 +01:00
Bootstrap/scss/tests/mixins/_utilities.test.scss

394 lines
8.6 KiB
SCSS
Raw Normal View History

$prefix: bs-;
$enable-important-utilities: false;
// Important: Do not import rfs to check that the mixin just calls the appropriate functions from it
@import "../../mixins/utilities";
@mixin test-generate-utility($params...) {
@include assert() {
@include output() {
@include generate-utility($params...);
}
@include expect() {
@content;
}
}
}
@include describe(generate-utility) {
@include it("generates a utility class for each value") {
@include test-generate-utility(
(
property: "padding",
values: (small: .5rem, large: 2rem)
)
) {
.padding-small {
padding: .5rem;
}
.padding-large {
padding: 2rem;
}
}
}
@include describe("global $enable-important-utilities: true") {
@include it("sets !important") {
$enable-important-utilities: true !global;
@include test-generate-utility(
(
property: "padding",
values: (small: .5rem, large: 2rem)
)
) {
.padding-small {
padding: .5rem !important;
}
.padding-large {
padding: 2rem !important;
}
}
$enable-important-utilities: false !global;
}
}
@include describe("$utility") {
@include describe("values") {
@include it("supports null keys") {
@include test-generate-utility(
(
property: "padding",
values: (null: 1rem, small: .5rem, large: 2rem)
),
) {
.padding {
padding: 1rem;
}
.padding-small {
padding: .5rem;
}
.padding-large {
padding: 2rem;
}
}
}
@include it("ignores null values") {
@include test-generate-utility(
(
property: "padding",
values: (small: null, large: 2rem)
)
) {
.padding-large {
padding: 2rem;
}
}
}
@include it("supports lists") {
@include test-generate-utility(
(
property: "padding",
values: 1rem 2rem
)
) {
.padding-1rem {
padding: 1rem;
}
.padding-2rem {
padding: 2rem;
}
}
}
@include it("supports single values") {
@include test-generate-utility(
(
property: padding,
values: 1rem
)
) {
.padding-1rem {
padding: 1rem;
}
}
}
}
@include describe("class & property") {
@include it("adds each property to the declaration") {
@include test-generate-utility(
(
class: padding-x,
property: padding-inline-start padding-inline-end,
values: 1rem
)
) {
.padding-x-1rem {
padding-inline-start: 1rem;
padding-inline-end: 1rem;
}
}
}
@include it("uses the first property as class name") {
@include test-generate-utility(
(
property: padding-inline-start padding-inline-end,
values: 1rem
)
) {
.padding-inline-start-1rem {
padding-inline-start: 1rem;
padding-inline-end: 1rem;
}
}
}
@include it("supports a null class to create classes straight from the values") {
@include test-generate-utility(
(
property: visibility,
class: null,
values: (
visible: visible,
invisible: hidden,
)
)
) {
.visible {
visibility: visible;
}
.invisible {
visibility: hidden;
}
}
}
}
@include describe("state") {
@include it("Generates selectors for each states") {
@include test-generate-utility(
(
property: padding,
values: 1rem,
state: hover focus,
)
) {
.padding-1rem {
padding: 1rem;
}
.padding-1rem-hover:hover {
padding: 1rem;
}
.padding-1rem-focus:focus {
padding: 1rem;
}
}
}
}
@include describe("css-var"){
@include it("sets a CSS variable instead of the property") {
@include test-generate-utility(
(
property: padding,
css-variable-name: padding,
css-var: true,
values: 1rem 2rem
)
) {
.padding-1rem {
--bs-padding: 1rem;
}
.padding-2rem {
--bs-padding: 2rem;
}
}
}
@include it("defaults to class") {
@include test-generate-utility(
(
property: padding,
class: padding,
css-var: true,
values: 1rem 2rem
)
) {
.padding-1rem {
--bs-padding: 1rem;
}
.padding-2rem {
--bs-padding: 2rem;
}
}
}
}
@include describe("local-vars") {
@include it("generates the listed variables") {
@include test-generate-utility(
(
property: color,
class: desaturated-color,
local-vars: (
color-opacity: 1,
color-saturation: .25
),
values: (
blue: hsla(192deg, var(--bs-color-saturation), 0, var(--bs-color-opacity))
)
)
) {
.desaturated-color-blue {
--bs-color-opacity: 1;
// Sass compilation will put a leading zero so we want to keep that one
// stylelint-disable-next-line stylistic/number-leading-zero
--bs-color-saturation: 0.25;
color: hsla(192deg, var(--bs-color-saturation), 0, var(--bs-color-opacity));
}
}
}
}
@include describe("css-var & state") {
@include it("Generates a rule with for each state with a CSS variable") {
@include test-generate-utility(
(
property: padding,
css-var: true,
css-variable-name: padding,
values: 1rem,
state: hover focus,
)
) {
.padding-1rem {
--bs-padding: 1rem;
}
.padding-1rem-hover:hover {
--bs-padding: 1rem;
}
.padding-1rem-focus:focus {
--bs-padding: 1rem;
}
}
}
}
@include describe("rtl") {
@include it("sets up RTLCSS for removal when false") {
@include test-generate-utility(
(
property: padding,
values: 1rem,
rtl: false
)
) {
/* rtl:begin:remove */
.padding-1rem {
padding: 1rem;
}
/* rtl:end:remove */
}
}
}
@include describe("rfs") {
@include it("sets the fluid value when not inside media query") {
@include test-generate-utility(
(
property: padding,
values: 1rem,
rfs: true
)
) {
.padding-1rem {
padding: rfs-fluid-value(1rem);
}
}
}
@include it("sets the value when inside the media query") {
@include test-generate-utility(
(
property: padding,
values: 1rem,
rfs: true
),
$is-rfs-media-query: true
) {
.padding-1rem {
padding: rfs-value(1rem);
}
}
}
}
}
@include describe("$infix") {
@include it("inserts the given infix") {
@include test-generate-utility(
(
property: "padding",
values: (null: 1rem, small: .5rem, large: 2rem)
),
$infix: -sm
) {
.padding-sm {
padding: 1rem;
}
.padding-sm-small {
padding: .5rem;
}
.padding-sm-large {
padding: 2rem;
}
}
}
@include it("strips leading - if class is null") {
@include test-generate-utility(
(
property: visibility,
class: null,
values: (
visible: visible,
invisible: hidden,
)
),
-sm
) {
.sm-visible {
visibility: visible;
}
.sm-invisible {
visibility: hidden;
}
}
}
}
}