Add support for opening Next.js examples in Codesandbox about query HOT 9 CLOSED

I would be fine with a single site for all of the non codesandbox examples.

from query.

from query.

Another approach here would be to set up these examples as codesandboxes (but using the next server-side template) That way, you could easily demo/tweak them individually.

Honestly, I think I like that more. Any reason not to do that?

from query.

Going total codesandbox seems like it'd be better for users who are just evaluating the library and checking out the features. That would solve the dependency installation issues and provide a tweakable demo all at once. An argument the other way would be that keeping examples in the repo serves as documentation, of sorts. The README is already pretty robust, though..

from query.

from query.

I would love it if the docs showed an example test!

I can't for the life of me figure out how to test this. I am mocking fetch and I can see that fetch is called, and can validate the URL but the component never renders. A test example that shows how to test with this library and suspense would be awesome. I used CRA so in setupTests.js I also mock the scheduler but I'm not sure about it: jest.mock("scheduler", () => require("scheduler/unstable_mock"));

Here's my test

import React, { Suspense } from 'react';
import { render, waitForElement, cleanup } from '@testing-library/react';

// component to test
import InstagramBackground from '.';
import data from './__mocks__/data.json';

// automatically unmount and cleanup DOM after each test is finished.
afterEach(cleanup);

describe('InstagramBackground', () => {
  // cleanup mocks
  beforeEach(() => {
    fetch.resetMocks();
  });

  it('it renders with suspense', async () => {
    fetch.mockResponseOnce(data);

    // const { getByTestId } = render(
    //   <Suspense fallback={<div>Not Rendered Yet</div>}>
    //     <InstagramBackground username="ferrytalecreative" />
    //   </Suspense>
    // );
    // const element = await waitForElement(() => getByTestId('container'));
    // expect(element.toMatchSnapshot());

    const { asFragment } = await waitForElement(() =>
      render(
        <Suspense fallback={<div>Not Rendered Yet</div>}>
          <InstagramBackground username="ferrytalecreative" />
        </Suspense>
      )
    );

    // assert the snapshot matches
    expect(asFragment()).toMatchSnapshot();

    //assert on the times called and arguments given to fetch
    expect(fetch.mock.calls.length).toEqual(1);
    expect(fetch.mock.calls[0][0]).toEqual(
      '/.netlify/functions/photos?username=ferrytalecreative'
    );
  });
});

Update: I think I need to try this:

const {container} = render(<div>test</div>, {root: 'concurrent'})  //<-!!
expect(container).toHaveTextContent('test')

from query.

Yes, if you are trying to test concurrent mode, you'll need to configure for that. I would suggest starting with a simpler test.

As for the original purpose of this PR, is there anything new here? I would still love for the examples to be easier to access via codesandbox

from query.

@tannerlinsley Codesandbox examples in each of the example directories seems like a good middle-ground. You'd likely want to create those under your own codesandbox account, though, right?

I'll create a PR to resolve the dependency installation errors on the exisiting examples.

from query.

from query.