Debugging test case for pos-resource error

[jg10-mastodon-social]

This is a debugging test case for #119 (comment)

pos-resource currently assumes that this.uri is defined. It is not clear to me whether it is safe for it to do so.

The test fails if this.uri is not checked and passes if it does - but still with the same warning.

 console.warn
    @Prop() "uri" on <pos-resource> is immutable but was modified from within the component.
    More information: https://stenciljs.com/docs/properties#prop-mutability

      at consoleDevWarn (node_modules/@stencil/core/internal/testing/index.js:162:11)
      at PosResource.set (node_modules/@stencil/core/internal/testing/index.js:2882:17)
      at PosResource.set (node_modules/@stencil/core/internal/testing/index.js:2895:26)
      at setterSetVal (node_modules/@stencil/core/internal/testing/index.js:2921:48)
      at node_modules/@stencil/core/internal/testing/index.js:2927:49

 FAIL  elements/src/components/pos-resource/pos-resource-error.spec.tsx
  pos-resource
    ✓ gets called only once, even if pos-resource is rendered by another component (45 ms)
    ✕ gets called only once, even if pos-resource is rendered by another component (41 ms)

  ● pos-resource › gets called only once, even if pos-resource is rendered by another component

    expect(received).toHaveLength(expected)

    Expected length: 1
    Received length: 2
    Received array:  [[undefined], ["https://video.test/video-1"]]

      26 |                 </pos-app>`
      27 |             });
    > 28 |             expect(os.fetch.mock.calls).toHaveLength(1);
         |                                         ^
      29 |         });
      30 |     }
      31 |

      at Object.<anonymous> (src/components/pos-resource/pos-resource-error.spec.tsx:28:41)

My current understanding of what is happening:

• pos-resource A is already present in the (virtual?) dom.
• A second pos-resource B is added dynamically by test-comp
• componentWillLoad is called on pos-resource B before this.uri is set. This does not happen without the pre-existing pos-resource A.
• loadResource is called a first time (with undefined this.uri)
• When uri is set, loadResource is called a second time

This is essentially a race condition on os being received and set before uri is set, but it is not yet clear whether:

• stenciljs does not provide guarantees against this race condition and pos-resource should check for undefined
• this is a stenciljs testing bug, and an even simpler test case needs to be found to report it
• this is a limitation of stenciljs testing, and a workaround is needed to provide the same guarantees as in production
• no workaround is possible: pos-resource should check for undefined to pass tests, and the warning will need to be ignored or suppressed (e.g. by marking the prop as internally mutable - which it isn't).

Given that this issue is only appearing through test pollution, it's not yet clear to me what new test I would add to pos-resource related to this issue.

Edit: A possible follow-up action is to test whether the duplicate fetch call does happen in production.

[jg10-mastodon-social]

• I was not able to reproduce the issue in production - there does not appear to be duplicate fetch calls.
• Until proven otherwise, it does appear that stenciljs does not suffer from this race condition.
• The workaround for the tests is to use separate files for tests that result in this issue.

It turns out there are a number of similar warnings in other tests.
Identifying a reproducible case to report to stenciljs is likely not a priority.

[angelo-v]

Thanks for this quite minimal PR and the detailed analysis. Very weird problem... I wonder especially that both requirements are needed a) a top level pos-resource and b) a second pos-resource that is nested in another component. Oh and c) only in the second test run... the stars really have to be alligned...

I guess that some stuff in the stencil spec page gets reused between tests