Create test SCSS files

[agarzola]

Description

With the goal to make this package both reliable and easy to work on and extend, we should be testing every task that Calliope ships with. To that end, we need test SCSS that our tests can build for the purposes of testing the styles task.

Proposed Solution

Create a tests/styles/samples/ directory with a set of stylesheets in it that are largely representative of the kind of SCSS we write for our projects. It should include features such as:

• Importing partials via globs.
• tk

Additionally, we will need a set of generated CSS against which our tests can compare the results of running the styles task.

Alternatives Considered

n/a

Additional Context

[michelegrace]

I started getting the barebones of this going, but I've never really written tests before, so I have a lot of questions (sorry if any of these are silly!). I have a few starter "tests" aka the describe() and some its which will test:

• Styles are linting properly (also have to check to see if the configuration for linting is activated or not?)
• Importing using globs.
• Autoprefixer works.
• Filename changes.
• Stylesheet is getting minfied.

Basically all the steps in the styles task (except sass(config.plugins.sass).on('error', sass.logError), does that also need testing?), but don't have anything filled in yet and now I'm trying to set up a sample styles directory and have some questions. My initial thought is that within tests/styles/samples/ there should be a scss with the raw sass and a css with the compiled CSS, is that correct?

Ideally, what is happening is that mocha is attempting to compile the scss according to style tasks and comparing it to the compiled CSS in css?

Also for testing gulp-sass-glob should that include npm libraries we often use such as breakpoint-sass? Would then including a package.json for it in tests/styles/samples be useful or if that overkill?

Also, I looked around briefly at a few other of our projects (Imprivata, Benz) to see their tests and none seem to match quite closely to this task, do you know if we have anything I can use as an example?

I'm looking up and reading some guides on mocha.js but they all just show examples with simple math which might be a good basis for understanding but I get confused (or just hung up?) on these tests needing to test the contents of a file rather than if a function works. 🤔

[agarzola]

I started getting the barebones of this going, but I've never really written tests before, so I have a lot of questions (sorry if any of these are silly!). I have a few starter "tests" aka the describe() and some its which will test:

• Styles are linting properly (also have to check to see if the configuration for linting is activated or not?)

• Importing using globs.

• Autoprefixer works.

• Filename changes.

• Stylesheet is getting minfied.

This is an excellent start!

Basically all the steps in the styles task (except sass(config.plugins.sass).on('error', sass.logError), does that also need testing?), but don't have anything filled in yet and now I'm trying to set up a sample styles directory and have some questions. My initial thought is that within tests/styles/samples/ there should be a scss with the raw sass and a css with the compiled CSS, is that correct?

Ideally, what is happening is that mocha is attempting to compile the scss according to style tasks and comparing it to the compiled CSS in css?

Yes! That’s exactly what I think we need to do. I can think of ways to over-engineer this test using a library to traverse the resulting CSS and inspect individual rules or blocks of rules, but that feels unnecessary. I think a low-tech solution like comparing the results to the CSS we expect to receive will sufficiently expose any potential breaking changes.

Also for testing gulp-sass-glob should that include npm libraries we often use such as breakpoint-sass? Would then including a package.json for it in tests/styles/samples be useful or if that overkill?

I don’t think it’s overkill at all. We could create a package.json, but frankly I think simply executing yarn install breakpoint-sass in the temp testing directory at the beginning of the test should suffice. That will always fetch the latest version of that library, which is probably fine.

Also, I looked around briefly at a few other of our projects (Imprivata, Benz) to see their tests and none seem to match quite closely to this task, do you know if we have anything I can use as an example?

I'm looking up and reading some guides on mocha.js but they all just show examples with simple math which might be a good basis for understanding but I get confused (or just hung up?) on these tests needing to test the contents of a file rather than if a function works. 🤔

This is the first time we’ve tried to write automated tests for tooling, so there are no examples, but please know you’re not alone here! This is why I asked that we sync up before you dive in 😄 although I very much appreciate your instinct to dive in! 🙏

This ticket is purely about getting sample SCSS that is representative of the SCSS we typically write in our projects. That said, I am super stoked that you’re all-in on writing the tests as well, so let’s get you set up to do that! We can talk after our unrelated call later this morning.