[EXPERIMENT] native inspection

[sunesimonsen]

Don't take this too seriously. I just wanted to see what would happen if we inspected the rendered output.

[sunesimonsen]

This is pretty much how I would like things to work. I don't really care about the shallow wrapper, I would have no problem only support the full renderer.

[sunesimonsen]

I haven't tackled to contain yet as that would require me to add that to unexpected-dom (would make sense). Just so you don't get confused about that input not changing.

[sunesimonsen]

@Anifacted made me aware that the shallow rendered is useful for unit tests. So we should probably keep that around and use htmllike for it.

[sunesimonsen]

It is also an interesting fact that snapshot testing in Jest renders the native elements.

[sunesimonsen]

I find it an intriguing thought that you might be able to test your React components by only looking at the rendered DOM. What would you need, a very thin wrapper around React TestUtils to mount and return the DOM node, use node.querySelector('...') to find stuff. Simulate events using TestUtils. I'm just thinking out the box, don't worry.

[sunesimonsen]

I tried out the idea, it is pretty interesting. With out any fancyness you can achieve the following with test utils and unexpected-dom:

    describe("when clicking on the close button", () => {
      it("closes the sidebar", async () => {
        const rendered = findDOMNode(
          renderIntoDocument(
            <Provider store={store}>
              <WorkflowSidebar articleId={String(articles[0].id)} />
            </Provider>
          )
        );

        Simulate.click(
          rendered.querySelector('[data-test-id="showArticleSettings"]')
        );

        Simulate.click(
          rendered.querySelector('[data-test-id="closeArticleSettings"]')
        );

        expect(
          rendered,
          "to contain no elements matching",
          '[data-test-id="editSidebar"]'
        );
      });

[sunesimonsen]

I by the way found a pretty significant problem with to satisfy in unexpected-dom where is requires you to state all children on the left hand side. That would need to change if we want to more in this direction.