Add SCSS testing of the utilities API #36029

romaricpascal · 2022-03-16T17:57:47Z

Cherry picked the commits for the SCSS testing mentioned in #28496 and added some testing of the utilities API (as far as I could understand it).

Set up testing for the utilities API

I stuck with Mocha as we'd have needed a new dependency anyway. Jasmine is only there by transitive dependency from Karma, which points to an old-ish 3.6 version. So I figured I'd save myself time and stick with it.

I moved the configuration to a scss/tests/.mocharc.js file, both for visibility and so the set up could be commented. Test placement is pretty free, anything ending in .test.scss or .spec.scss is considered a test. I've put all tests under the scss/tests folder following the conventions on the JS side (rather than collocating tests into a __tests__ folder), so this could maybe be tightened a little.

In terms of npm scripts, there's only one new one (instead of the extra described in the original discussion): css-test. As the configuration tells Mocha to also watch non-test .scss files, it'll relaunch them automatically when running npm run css-test -- --watch. When developing you can also use Mocha's --grep option to limit which tests you're running.

The tests have been added to the CSS GitHub worflow. Maybe I should move them before the actual CSS build as they'll likely run quicker than the build and there's no real point building if the CSS tests fail?

If really we want Jasmine, the way .scss files are compiled to tests are similar to what @babel/register does so we could follow the same set up they describe for transpiling tests for React

Add tests for the `generate-utility` mixin

I really went with what I understood of the API and the source code, going through each of the properties/settings. I'm likely to have missed things, though.

And more importantly, I was very unclear as to how to work with the rfs option: I wasn't sure how/what to configure to enter each of the 3 states the code handles (outside media query, inside media query with distinct value from the utility value, inside media query with utility). In the end I just checked that we were calling the right rfs-... function, but these tests could do with some reworking maybe.

I also noticed a couple of oddities while testing:

when using a list value for properties, the local-vars are printed for each of them. Feels like only once at the top of the rule should be enough, I'd believe?
when using states with local-vars, the variables are only set for the class without the state. Wondering if that wouldn't cause issue for a class like text-danger-hover if there's no text-... set when not hovered for example, but didn't take the time to test it.
local-vars are also not set when using css-var, which was a surprise too.

Also thought of some extra developments for the utilities, but I'll open a separate issue to discuss if they're relevant (teasing 😝 ).

Add test for the `utilities/api` import

Takes a small utilities configuration to check that the responsive and print options are working as intended. I saw there was a bit around RFS there too. I haven't looked into it so it'll need an extra test.

Refs #28496

romaricpascal · 2022-03-16T17:58:29Z

scss/mixins/_utilities.scss

@@ -1,6 +1,6 @@
 // Utility generator
 // Used to generate utilities & print utilities
-@mixin generate-utility($utility, $infix, $is-rfs-media-query: false) {
+@mixin generate-utility($utility, $infix: '', $is-rfs-media-query: false) {


This just made the writing of the tests easier as there was no need to carry a '' infix at each call.

romaricpascal · 2022-03-16T17:59:58Z

scss/tests/mixins/_utilities.test.scss

@@ -0,0 +1,391 @@
+$prefix: bs-;
+$enable-important-utilities: false;


It's not the same default as in Bootstrap, but makes the writing of the tests much smoother as there's no !important to repeat. It also made more sense to me tin terms of how tests are written to test what happens when the feature gets enabled.

romaricpascal · 2022-03-16T18:04:12Z

scss/tests/mixins/_utilities.test.scss

@@ -0,0 +1,393 @@
+// stylelint-disable scss/dollar-variable-default, declaration-no-important


I may move that to overrides for tests files, otherwise, it'll be a bit tedious to carry around each test.

XhmikosR · 2022-03-16T19:32:34Z

package.json

@@ -57,6 +57,7 @@
    "css-prefix-main": "postcss --config build/postcss.config.js --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"",
    "css-prefix-examples": "postcss --config build/postcss.config.js --replace \"site/content/**/*.css\"",
    "css-prefix-examples-rtl": "cross-env-shell NODE_ENV=RTL postcss --config build/postcss.config.js --dir \"site/content/docs/$npm_package_config_version_short/examples/\" --ext \".rtl.css\" --base \"site/content/docs/$npm_package_config_version_short/examples/\" \"site/content/docs/$npm_package_config_version_short/examples/{blog,carousel,dashboard,cheatsheet}/*.css\" \"!site/content/docs/$npm_package_config_version_short/examples/{blog,carousel,dashboard,cheatsheet}/*.rtl.css\"",
+    "css-test": "mocha --config scss/tests/.mocharc.js",


Please see if we can use jasmine. A new dependency as mocha where they pin all their deps is pretty annoying.

Sure, I'll rework that to use Jasmine. Hopefully there'll be some overlap between its dependencies and the one pulled by Karma 😊 I could try set it to the same version pulled by Karma, if looking for as much overlap as possible. But it feels like it's something that'll be easily missed on a future upgrade...

XhmikosR · 2022-03-16T19:32:42Z

package.json

@@ -175,5 +178,6 @@
    "peerDependencies": {
      "@popperjs/core": "^2.11.4"
    }
-  }
+  },
+  "dependencies": {}


unrelated change

Whoop, didn't see that, sorry 😞 I'll tidy it up!

XhmikosR · 2022-03-17T06:12:11Z

scss/tests/sass-true/register.js

+
+require.extensions['.scss'] = function (module, filename) {
+  return module._compile(`
+var sassTrue = require('sass-true');


Can you also switch to const and match the current JS style?

XhmikosR · 2022-03-17T14:30:01Z

package.json

@@ -125,6 +127,7 @@
    "hammer-simulator": "0.0.1",
    "hugo-bin": "^0.82.2",
    "ip": "^1.1.5",
+    "jasmine": "^4.0.2",


How about using the latest jasmine 3.x so that we don't use duplicate packages? We can update to 4.x when karma-jasmine is updated too.

Damn, I'm very confused as to which packages get pulled now. I had originally found a 3.x (3.6 I think), then this morning I looked in the node-modules before adding Jasmine and jasmine-core was 4.0.1. I'll double check on the main branch after clearing node-modules 😄

Oh, so on main, there's two jasmine-core pulled:

one inside karma-jasmine, which is 3.99.1 (brought from it requiring ^3.6.0)

one at the root of node-modules, which is 4.0.1 (this one I'm not sure of the origin, but I'd guess karma-jasmine-html-reporter with >=3.8)

I'll try and align if I can 😄

You should stick to 3.x which is what we specify. The v4.x is a dependency of a dependency, not a direct one.

romaricpascal · 2022-03-18T09:18:59Z

I think it's in a better shape now. Apologies for the too eager opening for review, and thanks for the comments 😄

The switch to Jasmine introduced the need to add a watch-css-test script as Jasmine doesn't seem to provide a --watch option. Besides that, the setup is pretty much the same to the one described in the original PR for Mocha.

The code actually calling sass-true has been extracted into its own module (runner.js) so it could be linted like the rest of the JavaScript of the project.

One thing to be aware of is that sass-true compiles in expanded mode by default, which clashes with the linting at time (for rules like number-leading-zero). There may be need for a few stylelint-disable in the expected output of tests, but I think it's better than configuring sass-true to its compressed mode as Bootstrap explicitely sets the expanded. It'll require caution if running npm run css-lint-stylelint -- --fix though.

mdo · 2022-04-06T17:57:15Z

Just a heads up that I'll be jumping back into this soon! <3

mdo · 2022-12-20T21:47:29Z

@romaricpascal So sorry for dropping the ball here. I'd like to get this merged in so we can write some additional tests—any chance you can bring it up to speed with main once more?

romaricpascal · 2022-12-21T13:25:23Z

@mdo No worries, figured you have a lot of balls to juggle. I should be able to get it back in shape at some point during the next two weeks ☺️

Use mocha to handle the heavy lifting of finding tests and running them. Mocha is made to look directly for SCSS files which are compiled thanks to Node's require.extensions mechanism.

romaricpascal requested review from a team as code owners March 16, 2022 17:57

romaricpascal commented Mar 16, 2022

View reviewed changes

romaricpascal mentioned this pull request Mar 16, 2022

Add functions and mixins to manipulate the utlities map #35977

Closed

romaricpascal commented Mar 16, 2022

View reviewed changes

XhmikosR reviewed Mar 16, 2022

View reviewed changes

XhmikosR marked this pull request as draft March 16, 2022 19:33

mdo added css v5 labels Mar 16, 2022

XhmikosR reviewed Mar 17, 2022

View reviewed changes

romaricpascal force-pushed the sass-true branch from 39bfb6f to f848c45 Compare March 18, 2022 08:36

romaricpascal marked this pull request as ready for review March 18, 2022 09:19

romaricpascal requested review from XhmikosR and removed request for a team April 1, 2022 09:30

GeoSot added the tests label Apr 6, 2022

romaricpascal mentioned this pull request May 11, 2022

Finer control on utilities responsiveness #36330

Open

2 tasks

romaricpascal force-pushed the sass-true branch from 40fae1f to 45bf211 Compare September 9, 2022 10:34

romaricpascal force-pushed the sass-true branch from 45bf211 to 76bc979 Compare November 1, 2022 08:12

romaricpascal mentioned this pull request Nov 1, 2022

Utilities functions mixin #37398

Open

romaricpascal added 4 commits December 24, 2022 09:13

Set up CSS testing using sass-true and mocha

e88afcb

Use mocha to handle the heavy lifting of finding tests and running them. Mocha is made to look directly for SCSS files which are compiled thanks to Node's require.extensions mechanism.

Add CSS tests to workflow

93b5113

Add tests for the generate-utility mixin

7abcb51

Add tests for utilities generation

f0c60ef

This was referenced Aug 26, 2024

[Snyk] Upgrade bootstrap from 5.1.3 to 5.3.3 sujit6060/Trend-Shop#2

Open

[Snyk] Upgrade bootstrap from 5.1.3 to 5.3.3 sujit6060/BuyBookNow#2

Open

[Snyk] Upgrade bootstrap from 5.1.1 to 5.3.3 sujit6060/TIPCALCULATOR_REACT#2

Open

tchellam mentioned this pull request Aug 27, 2024

[Snyk] Upgrade bootstrap from 5.2.3 to 5.3.3 tanuchellam/tanuchellam.github.io#10

Open

sophakphol mentioned this pull request Aug 29, 2024

[Snyk] Upgrade bootstrap from 5.2.3 to 5.3.3 sophakphol/multimart-react-ecommerce#4

Open

csmartinez22 mentioned this pull request Aug 30, 2024

[Snyk] Upgrade bootstrap from 5.0.0 to 5.3.3 csmartinez22/csmartinez22.github.io#35

Open

ungtsuhan mentioned this pull request Aug 30, 2024

[Snyk] Upgrade bootstrap from 5.2.3 to 5.3.3 ungtsuhan/CleanArchitecture#5

Open

This was referenced Sep 3, 2024

[Snyk] Upgrade bootstrap from 5.2.2 to 5.3.3 Mohsen-mhm/chat-app#2

Open

[Snyk] Upgrade bootstrap from 5.2.2 to 5.3.3 Mohsen-mhm/chat-app#4

Open

[Snyk] Upgrade bootstrap from 5.2.2 to 5.3.3 Mohsen-mhm/chat-app#5

Open

IngageDigitalAgency mentioned this pull request Sep 7, 2024

[Snyk] Upgrade: bootstrap, flot, jquery IngageDigitalAgency/modit#2

Open

thanhdt24 mentioned this pull request Sep 7, 2024

[Snyk] Upgrade bootstrap from 5.1.3 to 5.3.3 thanhdt24/timesheet#2

Open

AlexanderSCK mentioned this pull request Sep 8, 2024

[Snyk] Upgrade bootstrap from 5.1.3 to 5.3.3 AlexanderSCK/Microservice-Ticketing-App#78

Open

arlindo0x73 mentioned this pull request Sep 8, 2024

[Snyk] Upgrade: bootstrap, js-cookie, react-icons arlindo0x73/athsec#13

Open

AndresElacion mentioned this pull request Sep 24, 2024

[Snyk] Upgrade bootstrap from 5.2.3 to 5.3.3 AndresElacion/Imperial-home#1

Open

castle2668 mentioned this pull request Sep 24, 2024

[Snyk] Upgrade bootstrap from 5.0.0 to 5.3.3 castle2668/maplestory-shop#101

Merged

This was referenced Sep 25, 2024

[Snyk] Upgrade bootstrap from 5.2.3 to 5.3.3 AndresElacion/Imperial-home#3

Open

[Snyk] Upgrade bootstrap from 5.2.3 to 5.3.3 AndresElacion/Imperial-home#4

Open

[Snyk] Upgrade bootstrap from 5.2.3 to 5.3.3 AndresElacion/Imperial-home#5

Open

pinco227 mentioned this pull request Sep 27, 2024

[Snyk] Upgrade bootstrap from 5.1.1 to 5.3.3 pinco227/digicreche#5

Open

Akhamesra mentioned this pull request Oct 2, 2024

[Snyk] Upgrade bootstrap from 5.1.3 to 5.3.3 Akhamesra/glpi#5

Open

YnnusAsamal mentioned this pull request Oct 3, 2024

[Snyk] Upgrade bootstrap from 5.2.0 to 5.3.3 YnnusAsamal/TTI-NRL-WEB#5

Open

jtprogru mentioned this pull request Oct 5, 2024

[Snyk] Upgrade bootstrap from 5.1.3 to 5.3.3 jtprogru/s11l.me#33

Open

Gutts-n mentioned this pull request Oct 5, 2024

[Snyk] Upgrade bootstrap from 5.1.3 to 5.3.3 datopian/ckan#3

Open

Kimahari mentioned this pull request Oct 5, 2024

[Snyk] Upgrade bootstrap from 5.0.0 to 5.3.3 Kimahari/nginx-dotnetcore-proxy#73

Open

Arrhenius09 mentioned this pull request Nov 6, 2024

[Snyk] Upgrade bootstrap from 5.0.0 to 5.3.3 Arrhenius09/sonarqube-sample#2

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add SCSS testing of the utilities API #36029

Add SCSS testing of the utilities API #36029

romaricpascal commented Mar 16, 2022 •

edited by XhmikosR

Loading

romaricpascal Mar 16, 2022

romaricpascal Mar 16, 2022

romaricpascal Mar 16, 2022

XhmikosR Mar 16, 2022

romaricpascal Mar 16, 2022

XhmikosR Mar 16, 2022

romaricpascal Mar 16, 2022

XhmikosR Mar 17, 2022

XhmikosR Mar 17, 2022

romaricpascal Mar 17, 2022

romaricpascal Mar 17, 2022

XhmikosR Mar 17, 2022

romaricpascal commented Mar 18, 2022 •

edited

Loading

mdo commented Apr 6, 2022

mdo commented Dec 20, 2022

romaricpascal commented Dec 21, 2022

		@@ -0,0 +1,391 @@
		$prefix: bs-;
		$enable-important-utilities: false;

		@@ -0,0 +1,393 @@
		// stylelint-disable scss/dollar-variable-default, declaration-no-important

Add SCSS testing of the utilities API #36029

Add SCSS testing of the utilities API #36029

Conversation

romaricpascal commented Mar 16, 2022 • edited by XhmikosR Loading

Set up testing for the utilities API

Add tests for the generate-utility mixin

Add test for the utilities/api import

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

romaricpascal commented Mar 18, 2022 • edited Loading

mdo commented Apr 6, 2022

mdo commented Dec 20, 2022

romaricpascal commented Dec 21, 2022

romaricpascal commented Mar 16, 2022 •

edited by XhmikosR

Loading

Add tests for the `generate-utility` mixin

Add test for the `utilities/api` import

romaricpascal commented Mar 18, 2022 •

edited

Loading