How to test @each and & with True

[silvinabt87]

I've found the documentation to test mixins and functions, but I cannot find the way to test @each and how classes are generated with "&". I'm trying to integrate this library in an open source project and I'm having a hard time doing it.
As an example, I would need to test the following:

@each $color-namespace, $brand-color in $brand-colors {
    .has-background-#{$color-namespace} {
        background-color: $brand-color;
    }

    .has-text-#{$color-namespace}, // Bulma convention
    .has-color-#{$color-namespace} {
        color: $brand-color;
    }
}

If you could help me with this, I would appreciate it!

[mirisuzanne]

Hi @silvinabt87 - you should be able to test that exactly like you test a mixin:

@include assert('<description>') {
  @include output {
    // your loop here…
  }

  @include expect {
    // expected output here…
  }
}

By default, output() and expect() are already nested inside a selector. If you are using & parent-selector in your loop, that generated selector will factor in. You can either put matching parent-selectors in both blocks, or you can handle it manually and turn off our default with $selector: false.

If it helps make things more clear, you could turn your loop into a mixin, and test the mixin:

@mixin color-classes(
  $color-namespace: $color-namespace,
  $brand-color: $brand-color,
  $brand-colors: $brand-colors
) {
  @each $color-namespace, $brand-color in $brand-colors {
    .has-background-#{$color-namespace} {
        background-color: $brand-color;
    }
  
    .has-text-#{$color-namespace}, // Bulma convention
    .has-color-#{$color-namespace} {
        color: $brand-color;
    }
  }  
}

@include assert('<description>') {
  @include output {
    @include color-classes;
  }

  @include expect {
    // expected output here
  }
}

[silvinabt87]

Thank you for the answer! I'm trying it out with my code, but I was wondering: I will only run @each once, so is it useful to test it this way? Is there another way to test @each?
Thanks in advance

[mirisuzanne]

Yeah, it might feel odd to create a single-use mixin, but the more I think about it, that's probably what I would do. By moving the loop into a mixin, you can both name it and test it.