CSS Output Asset/Expect does not give a pass/fail

[Jakobud]

I am new to True and am trying to understand the process for testing CSS Output. When I do a assert-equal test I get something like this:

✔ [assert-equal] This is some test...

But when I do a CSS Output test like this:

  @include assert {
    @include output {
      width: 14em + 2;
    }
    @include expect {
      width: 16em;
    }
  }

I get

/*   ASSERT:    */
/*   OUTPUT   */
.test-output {
  width: 16em;
}

/*   END_OUTPUT   */
/*   EXPECTED   */
.test-output {
  width: 16em;
}

/*   END_EXPECTED   */
/*   END_ASSERT   */

Maybe it's just me, but that isn't very helpful. I don't see any sort of pass/fail check. Also just messing around with the values I purposely mess it up:

  @include assert {
    @include output {
      width: 14em + 2;
    }
    @include expect {
      width: 1em;
    }
  }

and I get

/*   ASSERT:    */
/*   OUTPUT   */
.test-output {
  width: 16em;
}

/*   END_OUTPUT   */
/*   EXPECTED   */
.test-output {
  width: 1em;
}

/*   END_EXPECTED   */
/*   END_ASSERT   */
/*  */

So obviously this test fails but it doesn't actually say anything about failure. Am I supposed to just read it line by line and manually determine the pass/fail myself?

I'm just trying to understand the workflow here and how this is supposed to work. I guess I would have expected the library to take the output and expected and actually compare them and give a pass/fail.

If you have a complicated mixin that outputs a bunch of generated CSS, manually determining pass/fail is definitely prone to error.

[mirisuzanne]

This may need better documentation, but there's simply no way for Sass to test it's own output – and True is written in Sass. So the assert/output/expect mixins can only provide the output in a structured format. But no, we don't expect you to do the comparison manually. This is where it's helpful to integrate True with a test runner like Mocha or Jest. We provide all the JS required to automate those tests. First Sass provides the output, and then the command-line test runner can automate the comparison.

@jgerigmeyer understands that setup better than I do, but let us know if you still have questions! Or if you think there's a better way we can set that up.

[Jakobud]

Hmmm I tried also using Vitest but was getting similar results. Let me look at that again more closely. Thanks for the explanation. Make sense!

[Jakobud]

I got this working with both jest and vitest. Thanks!

[mirisuzanne]

@jgerigmeyer I wonder if this should get explained at the top of the 'testing output' page in the docs.

[jgerigmeyer]

@jgerigmeyer I wonder if this should get explained at the top of the 'testing output' page in the docs.

@mirisuzanne That's a good idea. Do you want to add that, or would you like me to write a draft?

[mirisuzanne]

Would you be ok drafting it? I don't really know how that part works, lol. :) Can you run our JS without any third-party tools?

[Jakobud]

So I got this:

// my-library.test.js
const path = require('node:path');
const { pathToFileURL } = require('node:url');
const sassTrue = require('sass-true');

const importers = [
  {
    findFileUrl(url) {
      if (!url.startsWith('~')) {
        return null;
      }
      return new URL(
        pathToFileURL(path.resolve('node_modules', url.substring(1))),
      );
    },
  },
];

const sassFile = path.join(__dirname, 'poly-fluid-sizing.spec.scss');
sassTrue.runSass({ describe, it }, sassFile, { importers });

And my SCSS:

// my-library.spec.scss
@use '../node_modules/sass-true' as *;
@use 'sass:list';

// Test a function
@include describe('This is some tests') {
  @include it('test 123') {
    @include assert-equal(list.zip(a b c, 1 2 3), (a 1, b 2, c 3));
  }
  @include it('testing output') {
    @include assert {
      @include output {
        width: 14em + 2;
      }
      @include expect {
        width: 16em;
      }
    }
  }
}

And using vitest I get

✓ test/my-library.test.js (2 tests) 2ms
   ✓ This is some tests (2)
     ✓ test 123 1ms
     ✓ testing output 0ms

 Test Files  1 passed (1)
      Tests  2 passed (2)
   Start at  22:42:44
   Duration  513ms (transform 14ms, setup 0ms, collect 354ms, tests 2ms, environment 0ms, prepare 13ms)

 PASS  Waiting for file changes...
       press h to show help, press q to quit

Seems to work perfectly. The only 3rd party tool I'm using is vitest. Also tried it with jest and that worked just as well.

[Jakobud]

@jgerigmeyer I wonder if this should get explained at the top of the 'testing output' page in the docs.

I think the more examples you can show in the documentation the more clear it is.

[jgerigmeyer]

@mirisuzanne and/or @Jakobud, let me know if the new docs in #339 are helpful.

[Jakobud]

I think it looks good although I cannot get the Node Package Importer feature to work:

Error: Can't find stylesheet to import.
  ╷
1 │ @use 'pkg:sass-true' as *;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵

To be fair, this is a feature of Sass I have never used before too. sass-true is obviously installed in node_modules correctly. @use '../node_modules/sass-true' as *; works fine.

[jgerigmeyer]

I cannot get the Node Package Importer feature to work

@Jakobud If you are defining your own importers (or if you have Sass < v1.71) then the NodePackageImporter is not automatically added for you. I think you could remove your custom importers logic unless your project uses non-standard import syntax.