Skip to content

/ bootstrap Public

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Basic Sass tests for $theme-colors customization #34967

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Basic Sass tests for $theme-colors customization #34967

wants to merge 1 commit into from
+187 −0

Conversation

@mdo
Copy link
Member

@mdo mdo commented Sep 14, 2021

This is a super simple Sass test to demonstrate if our maps are working as intended.

@import "../scss/functions";

$custom-color: #df711b;
$custom-theme-colors: (
  "custom": $custom-color
);

@import "../scss/variables";

$theme-colors: map-merge($theme-colors, $custom-theme-colors);

@import "../scss/maps";

@debug "The following three maps should be the same, ending with the custom key.";
@debug map.keys($theme-colors);
@debug map.keys($theme-colors-rgb);
@debug map.keys($utilities-colors);
@debug "";
@debug "The following two maps should be the same: including custom and ending in black, white, and body.";
@debug map.keys($utilities-text-colors);
@debug map.keys($utilities-bg-colors);
➜ ~/work/bootstrap (split-vars-maps-import) npm run css-test

> bootstrap@5.1.1 css-test /Users/mdo/work/bootstrap
> sass --style expanded --source-map --embed-sources --no-error-css test/index.scss:test/output.css

test/index.scss:35 Debug: The following three maps should be the same, ending with the custom key.
test/index.scss:36 Debug: "primary", "secondary", "success", "info", "warning", "danger", "light", "dark", "custom"
test/index.scss:37 Debug: "primary", "secondary", "success", "info", "warning", "danger", "light", "dark", "custom"
test/index.scss:38 Debug: "primary", "secondary", "success", "info", "warning", "danger", "light", "dark", "custom"
test/index.scss:40 Debug: 
test/index.scss:41 Debug: The following two maps should be the same: including custom and ending in black, white, and body.
test/index.scss:42 Debug: "primary", "secondary", "success", "info", "warning", "danger", "light", "dark", "custom", "black", "white", "body"
test/index.scss:43 Debug: "primary", "secondary", "success", "info", "warning", "danger", "light", "dark", "custom", "black", "white", "body"
@mdo mdo requested a review from as a code owner Sep 14, 2021
@ffoodd
Copy link
Member

@ffoodd ffoodd commented Sep 14, 2021

Would there be a way to output boolean values, and maybe handle exit codes for proper CI & test integration?

Can't play around this for now but even if this is a great step already, it requires we read the output, doesn't it?

@mdo
Copy link
Member Author

@mdo mdo commented Sep 15, 2021

This is definitely a spike I want to revisit with @error instead of just @debug. For example, we could write something like:

@if map.get($theme-colors, "primary") != blue {
  @error "That's not the right color.";
}

Which would output:

Error: "That's not the right color."
   ╷
29 │   @error "That's not the right color.";
   │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  test/index.scss 29:3  root stylesheet

@mdo
Copy link
Member Author

@mdo mdo commented Sep 15, 2021 •
edited

Latest commits include new tests @ffoodd that use @warn to pass output to the CLI. This should then be trigger-able in Actions to cause a failing test. @error isn't being used because it stops the CSS from being compiled at that error, so it wouldn't show all the errors in the entire test file.

$expected-theme-colors: (
  "primary": "",
  "secondary": "",
  "success": "",
  "info": "",
  "warning": "",
  "danger": "",
  "light": "",
  "dark": "",
  "custom": ""
);

@if map.keys($theme-colors) != map.keys($expected-theme-colors) {
  @warn "Keys in $theme-colors don't match expected output.";
  @debug "Expected: " + map.keys($expected-theme-colors);
  @debug "Actual:   " + map.keys($theme-colors);
}
@if map.keys($theme-colors-rgb) != map.keys($expected-theme-colors) {
  @warn "Keys in $theme-colors-rgb don't match expected output.";
  @debug "Expected: " + map.keys($expected-theme-colors);
  @debug "Actual:   " + map.keys($theme-colors-rgb);
}
@if map.keys($utilities-colors) != map.keys($expected-theme-colors) {
  @warn "Keys in $utilities-colors don't match expected output.";
  @debug "Expected: " + map.keys($expected-theme-colors);
  @debug "Actual:   " + map.keys($utilities-colors);
}
➜ ~/work/bootstrap (basic-sass-tests) npm run css-test

> bootstrap@5.1.1 css-test /Users/mdo/work/bootstrap
> sass --style expanded --source-map --embed-sources --no-error-css test/index.scss:test/output.css

Warning: Keys in $theme-colors-rgb don't match expected output.
    test/index.scss 61:3  root stylesheet

test/index.scss:62 Debug: Expected: "primary", "secondary", "success", "info", "warning", "danger", "light", "dark", "custom"
test/index.scss:63 Debug: Actual:   "primary", "secondary", "success", "info", "warning", "danger", "light", "dark"

Warning: Keys in $utilities-colors don't match expected output.
    test/index.scss 66:3  root stylesheet

test/index.scss:67 Debug: Expected: "primary", "secondary", "success", "info", "warning", "danger", "light", "dark", "custom"
test/index.scss:68 Debug: Actual:   "primary", "secondary", "success", "info", "warning", "danger", "light", "dark"

Warning: Keys in $utilities-text-colors don't match expected output.
    test/index.scss 92:3  root stylesheet

test/index.scss:93 Debug: Expected: "primary", "secondary", "success", "info", "warning", "danger", "light", "dark", "custom", "black", "white", "body"
test/index.scss:94 Debug: Actual:   "primary", "secondary", "success", "info", "warning", "danger", "light", "dark", "black", "white", "body"

XhmikosR
XhmikosR reviewed Sep 15, 2021
View changes
package.json Show resolved Hide resolved
@XhmikosR XhmikosR force-pushed the basic-sass-tests branch from 6a57cc6 to 6e479e8 Sep 15, 2021
@mdo mdo force-pushed the basic-sass-tests branch 2 times, most recently from 9cb4a6d to ec552ae Sep 15, 2021
@mdo
Add custom Sass debug tests
8ae5a11
@mdo mdo force-pushed the basic-sass-tests branch from ec552ae to 8ae5a11 Sep 15, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@XhmikosR XhmikosR

@twbs/css-review css-review

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
css tests v5
Projects
None yet
Milestone
No milestone
Linked issues

Successfully merging this pull request may close these issues.

None yet

3 participants
@mdo @ffoodd @XhmikosR