Magic assert

[vadimdemedes]

AVA team is extremely excited to announce the new & shiny AVA feature. We call it "Magic assert".

We could try and describe magic-assert and all its features, but it's faster and better to let you see what it is all about right away.

Strings

test('strings', t => {
  const actual = 'this is so cool';
  const expected = 'this is so bad';

  t.is(actual, expected);
});

Different value types

test('different types', t => {
  const actual = 'this is so cool';
  const expected = {msg:'this is so bad'};

  t.is(actual, expected);
});

Objects and arrays

test('objects', t => {
  const actual = {
    a: 1,
    b: {
      c: 2
    }
  };

  const expected = {
    a: 2,
    b: {
      c: 1
    }
  };

  t.deepEqual(actual, expected);
});

t.true/t.false assertions

These kind of assertions obviously can't have diffs, because they're being compared to true/false. Having "actual: true, expected: false" output wouldn't be much of a help, so instead we display the value of each statement in the assertion.

test('nested', t => {
  const actual = {a:[1]};
  
  t.true(actual.a[0]);
});

---

Now that we got you all excited (hopefully), few words about what it actually is. Magic assert is not an assertion library, but a feature that handles assertion errors and is responsible for displaying them in a clean yet informative way. It replaces power-assert output, although it still uses its core for some cases.

Magic assert adds code excerpts pointing to the source of the error and clean colorful diffs to each error report. You can also spot there's now more spacing between each error, which makes it easier to go through all the errors.

Your tests don't need to be modified in any way to take support magic-assert's output. If you use other assertion library like expect/chai or other, you are in luck too - you will get the same magical output!

There's one more thing...

React support

Magic assert PR also lands two new assertion methods to improve React support: t.jsxEquals() and t.jsxNotEquals(). And as you may have expected, it provides a nice output of the "React tree" as well!

test('react', t => {
  const actual = <div className="body">Hello</div>;
  const expected = <div className="header">Hello</div>;

  t.jsxEqual(actual, expected);
});

I'm not sure whether this change should be in this or separate PR - feedback welcome here too.

Credits

Magic assert was made possible by these amazing modules:

• power-assert by Takuto Wada (@twada).
• diff by Kevin Decker (@kpdecker).
• pretty-format by James Kyle (@thejameskyle).

Huge thanks!

---

We think it is a big step forward towards more comfortable debugging of failed tests and developer happiness in general.

You can try Magic assert by using PR #1154 today!

We'd love to hear your feedback and ideas on how to improve the output of Magic assert! Thank you!

[ccorcos]

I'm interested to see where this goes. I'm looking at the following error message right now thinking how it could be better.

  t.deepEqual(result.value, output, result.fail)
                     |      |
                     |      [Object{type:"italic",children:[#Object#]}]
                     [Object{type:"italic",children:[#Object#]}]

So amen to magic assert!

[ccorcos]

Using your current WIP branch:

 Difference:

    Array [
      Object {
        children: Array [
          Object {
  -         type: "text",
  -         value: "[hello](world)",
  +         children: Array [
  +           Object {
  +             type: "text",
  +             value: "hello",
  +           },
  +         ],
  +         type: "link",
  +         url: "world",
          },
        ],
        type: "italic",
      },

Awww yeah! Thank you so much @vadimdemedes :)

[ccorcos]

One thing to consider is the directionality of the + vs -.

t.deepEqual(something, value) implies to me that if something has a value that value does not, then that should be a +, not a -...

[vadimdemedes]

@ccorcos I agree, that it may be a little confusing. Are there any alternative "outputs" for diffs? I was following git diff's output.

[jamiebuilds]

Would it be weird to use A for actual and E for expected?

    Array [
      Object {
        children: Array [
          Object {
  A         type: "text",
  A         value: "[hello](world)",
  E         children: Array [
  E           Object {
  E             type: "text",
  E             value: "hello",
  E           },
  E         ],
  E         type: "link",
  E         url: "world",
          },
        ],
        type: "italic",
      },

Probably looks a lot better with highlighting.

[mightyiam]

On the subject of +/-/A/E perhaps there are suitable characters in Unicode?

[jamiebuilds]

    Array [
      Object {
        children: Array [
          Object {
  😕         type: "text",
  😕         value: "[hello](world)",
  💁         children: Array [
  💁           Object {
  💁             type: "text",
  💁             value: "hello",
  💁           },
  💁         ],
  💁         type: "link",
  💁         url: "world",
          },
        ],
        type: "italic",
      },

[mightyiam]

@thejameskyle I like your thinking.
Here's another:

    Array [
      Object {
        children: Array [
          Object {
  ≠         type: "text",
  ≠         value: "[hello](world)",
  ☆         children: Array [
  ☆           Object {
  ☆             type: "text",
  ☆             value: "hello",
  ☆           },
  ☆         ],
  ☆         type: "link",
  ☆         url: "world",
          },
        ],
        type: "italic",
      },

[ccorcos]

haha i like all of this

[vadimdemedes]

I think we'll probably stick with the default "-" for "missing" and "+" for "extra" signs, like in git diff. We can improve it after some real world usage of magic assert (if needed).