bootstrap/scss/tests/mixins/_utilities.test.scss

@use "../../config" as *;
@use "../../variables" as *;
@use "../../functions" as *;
@use "../../vendor/rfs" as *;
@use "../../mixins/utilities" as *;

$true-terminal-output: false;
$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 {
            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 {
            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 {
            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;
  //       }
  //     }
  //   }
  // }
}