msw#graphql TypeScript Examples

The following examples show how to use msw#graphql. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: GithubDeploymentsCard.test.tsx    From backstage with Apache License 2.0 5 votes vote down vote up 
GRAPHQL_GITHUB_API = graphql.link('https://api.github.com/graphql')
Example #2
Source File: GithubDeploymentsCard.test.tsx    From backstage with Apache License 2.0 5 votes vote down vote up 
GRAPHQL_CUSTOM_API_1 = graphql.link(
  'https://api.my-github-1.com/graphql',
)
Example #3
Source File: GithubDeploymentsCard.test.tsx    From backstage with Apache License 2.0 5 votes vote down vote up 
GRAPHQL_CUSTOM_API_2 = graphql.link(
  'https://api.my-github-2.com/graphql',
)
Example #4
Source File: handlers.ts    From pancake-toolkit with GNU General Public License v3.0 5 votes vote down vote up 
subgraph = graphql.link(profileSubgraphApi)
Example #5
Source File: GithubDeploymentsCard.test.tsx    From backstage with Apache License 2.0 4 votes vote down vote up 
describe('github-deployments', () => {
  const worker = setupServer();
  setupRequestMockHandlers(worker);

  beforeEach(() => {
    worker.resetHandlers();
    jest.resetAllMocks();
  });

  describe('export-plugin', () => {
    it('should export plugin', () => {
      expect(githubDeploymentsPlugin).toBeDefined();
    });
  });

  describe('GithubDeploymentsCard', () => {
    beforeEach(() => {
      entity = entityStub;
      entity.entity.metadata.annotations = {
        'github.com/project-slug': 'org/repo',
      };
    });

    it('displays fetched data using default github api', async () => {
      worker.use(
        GRAPHQL_GITHUB_API.query('deployments', (_, res, ctx) =>
          res(ctx.data(responseStub)),
        ),
      );

      await assertFetchedData();
      expect.assertions(7);
    });

    it('should display empty state when no data', async () => {
      worker.use(
        GRAPHQL_GITHUB_API.query('deployments', (_, res, ctx) =>
          res(ctx.data(noDataResponseStub)),
        ),
      );

      const rendered = await renderInTestApp(
        <ApiProvider apis={apis}>
          <GithubDeploymentsCard />
        </ApiProvider>,
      );

      expect(
        await rendered.findByText('GitHub Deployments'),
      ).toBeInTheDocument();
      expect(
        await rendered.findByText('No deployments found for this entity.'),
      ).toBeInTheDocument();
    });

    it('should show new data on reload', async () => {
      worker.use(
        GRAPHQL_GITHUB_API.query('deployments', (_, res, ctx) =>
          res(ctx.data(responseStub)),
        ),
      );

      const rendered = await renderInTestApp(
        <ApiProvider apis={apis}>
          <GithubDeploymentsCard />
        </ApiProvider>,
      );

      expect(
        await rendered.findByText('GitHub Deployments'),
      ).toBeInTheDocument();
      expect(await rendered.findByText('pending')).toBeInTheDocument();

      worker.resetHandlers();
      worker.use(
        GRAPHQL_GITHUB_API.query('deployments', (_, res, ctx) =>
          res(ctx.data(refreshedResponseStub)),
        ),
      );

      const refreshButton = await rendered.findByTitle('Reload');
      fireEvent.click(refreshButton);

      expect(
        await rendered.findByText('GitHub Deployments'),
      ).toBeInTheDocument();
      expect(await rendered.findByText('failure')).toBeInTheDocument();
    });

    it('should display extra columns', async () => {
      worker.use(
        graphql.query('deployments', (_, res, ctx) =>
          res(ctx.data(responseStub)),
        ),
      );

      const renderTargetFromPayload = (payload: string) => {
        const parsedPayload = JSON.parse(payload);
        return parsedPayload?.target || 'unknown';
      };

      const extraColumn = {
        title: 'Target',
        render: (row: GithubDeployment): JSX.Element => (
          <Box>{renderTargetFromPayload(row.payload)}</Box>
        ),
      };

      const columns = [
        ...GithubDeploymentsTable.defaultDeploymentColumns,
        extraColumn,
      ];

      const rendered = await renderInTestApp(
        <ApiProvider apis={apis}>
          <GithubDeploymentsCard columns={columns} />
        </ApiProvider>,
      );

      expect(await rendered.findByText('moon')).toBeInTheDocument();
      expect(await rendered.findByText('sun')).toBeInTheDocument();
    });

    describe('entity with source location', () => {
      beforeEach(() => {
        entity = entityStub;
        entity.entity.metadata.annotations = {
          'github.com/project-slug': 'org/repo',
          'backstage.io/source-location':
            'url:https://my-github-1.com/org/repo/tree/master/',
        };
      });

      it('should fetch data using custom api', async () => {
        worker.use(
          GRAPHQL_CUSTOM_API_1.query('deployments', (_, res, ctx) =>
            res(ctx.data(responseStub)),
          ),
        );

        await assertFetchedData();
        expect.assertions(7);
      });
    });

    describe('entity with managed by location', () => {
      beforeEach(() => {
        entity = entityStub;
        entity.entity.metadata.annotations = {
          'github.com/project-slug': 'org/repo',
          'backstage.io/managed-by-location':
            'url:https://my-github-2.com/org/repo/blob/master/catalog-info.yaml',
        };
      });

      it('should fetch data using custom api', async () => {
        worker.use(
          GRAPHQL_CUSTOM_API_2.query('deployments', (_, res, ctx) =>
            res(ctx.data(responseStub)),
          ),
        );

        await assertFetchedData();
        expect.assertions(7);
      });
    });

    describe('entity with location without baseApiURL', () => {
      beforeEach(() => {
        entity = entityStub;
        entity.entity.metadata.annotations = {
          'github.com/project-slug': 'org/repo',
          'backstage.io/managed-by-location':
            'url:https://my-github-3.com/org/repo/blob/master/catalog-info.yaml',
        };
      });

      it('shows no apiBaseUrl error', async () => {
        const rendered = await renderInTestApp(
          <ApiProvider apis={apis}>
            <GithubDeploymentsCard />
          </ApiProvider>,
        );

        expect(
          await rendered.findByText(
            'Error: No apiBaseUrl available for host my-github-3.com, please check your integrations config',
          ),
        ).toBeInTheDocument();
      });
    });

    describe('entity with location without matching host', () => {
      beforeEach(() => {
        entity = entityStub;
        entity.entity.metadata.annotations = {
          'github.com/project-slug': 'org/repo',
          'backstage.io/managed-by-location':
            'url:https://my-github-unknown.com/org/repo/blob/master/catalog-info.yaml',
        };
      });

      it('shows no matching host error', async () => {
        const rendered = await renderInTestApp(
          <ApiProvider apis={apis}>
            <GithubDeploymentsCard />
          </ApiProvider>,
        );

        expect(
          await rendered.findByText(
            'Error: No matching GitHub integration configuration for host my-github-unknown.com, please check your integrations config',
          ),
        ).toBeInTheDocument();
      });
    });

    describe('entity with url location type', () => {
      beforeEach(() => {
        entity = entityStub;
        entity.entity.metadata.annotations = {
          'github.com/project-slug': 'org/repo',
          'backstage.io/source-location':
            'url:https://my-github-1.com/org/repo/tree/master/',
          'backstage.io/managed-by-location':
            'url:https://my-github-1.com/org/repo/blob/master/catalog-info.yaml',
        };
      });

      it('should fetch data using custom api', async () => {
        worker.use(
          GRAPHQL_CUSTOM_API_1.query('deployments', (_, res, ctx) =>
            res(ctx.data(responseStub)),
          ),
        );

        await assertFetchedData();
        expect.assertions(7);
      });
    });

    describe('entity with other location types', () => {
      beforeEach(() => {
        entity = entityStub;
        entity.entity.metadata.annotations = {
          'github.com/project-slug': 'org/repo',
          'backstage.io/source-location':
            'some-other-managed-location:my-favourite-location/org/repo',
          'backstage.io/managed-by-location':
            'file:my-favourite-file/org/repo.yaml',
        };
      });

      it('displays fetched data using default github api', async () => {
        worker.use(
          GRAPHQL_GITHUB_API.query('deployments', (_, res, ctx) =>
            res(ctx.data(responseStub)),
          ),
        );

        await assertFetchedData();
        expect.assertions(7);
      });
    });
  });
});