Pass in a secondary object to display better info about the inspected value

[keithamus]

Following from chaijs/chai#469 - we should be able to use loupe() to have a shallow inspection on different properties of a value (but without becoming a full diffing engine). To quote my own words in chaijs/chai#469:

There is another part of the puzzle though, and that's chai's inspection engine. The message which says 'AssertionError: expected [ Array(2) ] to deeply equal [ Array(2) ]' is from Chai, and we use our own inspection library (found here) to create these.

I think here we have a lot of room to make things better. [ Array(2) ] isn't that useful, [ [1, 2] ] would be more useful I'm guessing - but we need to strike a good balance between too much info and too little.

Can I suggest we move the topic of conversation on how to deal with these small arrays and objects within messages? Here's the code for formatting Arrays - we could place in some length checks and try to output the full contents of short Arrays, or truncate them in the middle and only show [0..2, n-2..n].

I think we could go further, because we have knowledge about the actual and expected properties - that we could supply to loupe to generate more interesting inspection strings from within loupe, for example:

// Inspecting a standard value.
loupe({ foo: 1, bar: 1, baz: 1 }) === '{ foo: 1, bar: 1, baz: 1 }';
// Inspecting a value with a comparison value, to generate a better representation of the first object:
var actual = { foo: 1 };
loupe({ foo: 1, bar: 1, baz: 1}, { diff: actual }) === '{ ... bar: 1, baz: 1 }';

The example above isn't the most clear - because the benefit isn't really properly demonstrated on such small objects, but imagine objects or TypedArrays or Buffers which have hundreds of values and we just show a very poor representation without giving useful info about them:

loupe(my1MbPngFile) === '<Buffer 28 66 75 6e 63 74 69 6f 6e 28 66 29 7b 69 66 28 74 79 70 65 6f 66 20 65 78 70 6f 72 74 73 3d 3d 3d 22 6f 62 6a 65 63 74 22 26 26 74 79 70 65 6f 66 20 ... >'

loupe(my1MbPngFile, { diff: mySubtlyDifferent1MbPngFile }) === '<Buffer ... 75 ... 6a 7c ...>'

cha.expect(my1MbPngFile).to.deep.equal(mySubtlyDifferent1MbPngFile);
// ^ throws `expected '<Buffer ... 75 ... 6a 7c ...>' to equal '<Buffer ... 76 ... 44 7f ...>'`