fflate in angular & jest test environment

[phanlezz]

I'm not sure if this is really an issue. It could be that this is cause by an error in our config setup, or it may be caused through jest-preset-angular.

We just updated the library jest-preset-angular in which they introduced a polyfill for TextEncoder/TextDecoder (thymikee/jest-preset-angular@c0af6c3). This caused some issues in one of our test suites.

I have created a minimal example, which reproduces the problem. It looks like the strToU8 function uses the global TextEncoder to produce a Uint8Array. But for some reason this array does not resolve to true when checked with instanceof which in turn causes the zipSync function to misinterpret the data.

it("jest-preset-angular demo", async () => {
    const testString = "hello world"

    const nt = strToU8(testString,true)
    const nf = strToU8(testString,false)
    const tege =  new globalThis.TextEncoder().encode(testString)

    const all =  {
        nt:nt,
        nf:nf,
        tege:tege
    }

    for( let i in all ){
        console.log(`${i}: value: ${all[i]} instance: ${all[i] instanceof Uint8Array} utilCheck: ${isUint8Array(all[i])} compressed: ${zipSync({test: all[i]})}`)
    }

    const data = {test: strToU8(testString)}
    const compressed = zipSync(data).buffer
    const unzipOutput = unzipSync(new Uint8Array(compressed))
    console.log(unzipOutput)
    const buildString = strFromU8(unzipOutput["test"])

    expect(buildString).toBe(testString)
})

Console output:

    nt: value: 104,101,108,108,111,32,119,111,114,108,100 instance: true utilCheck: true compressed: 80,75,3,4,20,0,0,0,8,0,74,86,129,90,133,17,74,13,13,0,0,0,11,0,0,0,4,0,0,0,116,101,115,116,203,72,205,201,201,87,40,207,47,202,73,1,0,80,75,1,2,20,0,20,0,0,0,8,0,74,86,129,90,133,17,74,13,13,0,0,0,11,0,0,0,4,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,116,101,115,116,80,75,5,6,0,0,0,0,1,0,1,0,50,0,0,0,47,0,0,0,0,0

    nf: value: 104,101,108,108,111,32,119,111,114,108,100 instance: false utilCheck: true compressed: 80,75,3,4,20,0,0,0,8,0,74,86,129,90,0,0,0,0,2,0,0,0,0,0,0,0,5,0,0,0,116,101,115,116,47,3,0,80,75,3,4,20,0,0,0,8,0,74,86,129,90,0,0,0,0,2,0,0,0,0,0,0,0,7,0,0,0,116,101,115,116,47,48,47,3,0,80,75,3,4,20,0,0,0,8,0,74,86,129,90,0,0,0,0,2,0,0,0,0,0,0,0,7,0,0,0,116,101,115,116,47,49,47,3,0,80,75,3,4,20,0,0,0,8,0,74,86,129,90,0,0,0,0,2,0,0,0,0,0,0,0,7,0,0,0,116,101,115,116,47,50,47,3,0,80,75,3,4,20,0,0,0,8,0,74,86,129,90,0,0,0,0,2,0,0,0,0,0,0,0,7,0,0,0,116,101,115,116,47,51,47,3,0,80,75,3,4,20,0,0,0,8,0,74,86,129,90,0,0,0,0,2,0,0,0,0,0,0,0,7,0,0,0,116,101,115,116,47,52,47,3,0,80,75,3,4,20,0,0,0,8,0,74,86,129,90,0,0,0,0,2,0,0,0,0,0,0,0,7,0,0,0,116,101,115,116,47,53,47,3,0,80,75,3,4,20,0,0,0,8,0,74,86,129,90,0,0,0,0,2,0,0,0,0,0,0,0,7,0,0,0,116,101,115,116,47,54,47,3,0,80,75,3,4,20,0,0,0,8,0,74,86,129,90,0,0,0,0,2,0,0,0,0,0,0,0,7,0,0,0,116,101,115,116,47,55,47,3,0,80,75,3,4,20,0,0,0,8,0,74,86,129,90,0,0,0,0,2,0,0,0,0,0,0,0,7,0,0,0,116,101,115,116,47,56,47,3,0,80,75,3,4,20,0,0,0,8,0,74,86,129,90,0,0,0,0,2,0,0,0,0,0,0,0,7,0,0,0,116,101,115,116,47,57,47,3,0,80,75,3,4,20,0,0,0,8,0,74,86,129,90,0,0,0,0,2,0,0,0,0,0,0,0,8,0,0,0,116,101,115,116,47,49,48,47,3,0,80,75,1,2,20,0,20,0,0,0,8,0,74,86,129,90,0,0,0,0,2,0,0,0,0,0,0,0,5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,116,101,115,116,47,80,75,1,2,20,0,20,0,0,0,8,0,74,86,129,90,0,0,0,0,2,0,0,0,0,0,0,0,7,0,0,0,0,0,0,0,0,0,0,0,0,0,37,0,0,0,116,101,115,116,47,48,47,80,75,1,2,20,0,20,0,0,0,8,0,74,86,129,90,0,0,0,0,2,0,0,0,0,0,0,0,7,0,0,0,0,0,0,0,0,0,0,0,0,0,76,0,0,0,116,101,115,116,47,49,47,80,75,1,2,20,0,20,0,0,0,8,0,74,86,129,90,0,0,0,0,2,0,0,0,0,0,0,0,7,0,0,0,0,0,0,0,0,0,0,0,0,0,115,0,0,0,116,101,115,116,47,50,47,80,75,1,2,20,0,20,0,0,0,8,0,74,86,129,90,0,0,0,0,2,0,0,0,0,0,0,0,7,0,0,0,0,0,0,0,0,0,0,0,0,0,154,0,0,0,116,101,115,116,47,51,47,80,75,1,2,20,0,20,0,0,0,8,0,74,86,129,90,0,0,0,0,2,0,0,0,0,0,0,0,7,0,0,0,0,0,0,0,0,0,0,0,0,0,193,0,0,0,116,101,115,116,47,52,47,80,75,1,2,20,0,20,0,0,0,8,0,74,86,129,90,0,0,0,0,2,0,0,0,0,0,0,0,7,0,0,0,0,0,0,0,0,0,0,0,0,0,232,0,0,0,116,101,115,116,47,53,47,80,75,1,2,20,0,20,0,0,0,8,0,74,86,129,90,0,0,0,0,2,0,0,0,0,0,0,0,7,0,0,0,0,0,0,0,0,0,0,0,0,0,15,1,0,0,116,101,115,116,47,54,47,80,75,1,2,20,0,20,0,0,0,8,0,74,86,129,90,0,0,0,0,2,0,0,0,0,0,0,0,7,0,0,0,0,0,0,0,0,0,0,0,0,0,54,1,0,0,116,101,115,116,47,55,47,80,75,1,2,20,0,20,0,0,0,8,0,74,86,129,90,0,0,0,0,2,0,0,0,0,0,0,0,7,0,0,0,0,0,0,0,0,0,0,0,0,0,93,1,0,0,116,101,115,116,47,56,47,80,75,1,2,20,0,20,0,0,0,8,0,74,86,129,90,0,0,0,0,2,0,0,0,0,0,0,0,7,0,0,0,0,0,0,0,0,0,0,0,0,0,132,1,0,0,116,101,115,116,47,57,47,80,75,1,2,20,0,20,0,0,0,8,0,74,86,129,90,0,0,0,0,2,0,0,0,0,0,0,0,8,0,0,0,0,0,0,0,0,0,0,0,0,0,171,1,0,0,116,101,115,116,47,49,48,47,80,75,5,6,0,0,0,0,12,0,12,0,123,2,0,0,211,1,0,0,0,0

tege produces the same output. nf & tege are both not correctly zipped, although the input data looks identical to nt.

    {
      'test/': Uint8Array(0) [],
      'test/0/': Uint8Array(0) [],
      'test/1/': Uint8Array(0) [],
      'test/2/': Uint8Array(0) [],
      'test/3/': Uint8Array(0) [],
      'test/4/': Uint8Array(0) [],
      'test/5/': Uint8Array(0) [],
      'test/6/': Uint8Array(0) [],
      'test/7/': Uint8Array(0) [],
      'test/8/': Uint8Array(0) [],
      'test/9/': Uint8Array(0) [],
      'test/10/': Uint8Array(0) []
    }

[101arrowz]

I'm not 100% sure why this happens, but it seems possible that this is some cross-iframe thing. Maybe there's something more robust than instanceof to check if the data is a Uint8Array, e.g. checking Object.prototype.toString.call(val) == '[object Uint8Array]' - I'll look into for the next version