Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Mock with MSW #52

Merged
merged 7 commits into from
Nov 29, 2023
Merged

Mock with MSW #52

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
7a3ace2
Replace fetch-mock by msw
jtsaito Nov 28, 2023
22eeafd
Mock with msw: apiwrapper
jtsaito Nov 28, 2023
36f6b4e
Moch with msw: integration test
jtsaito Nov 28, 2023
730265b
Update apiwrapper.js
jtsaito Nov 29, 2023
1b6dc3e
Use msw server methods
jtsaito Nov 29, 2023
305ba4a
Use server.listen in beforeAll
jtsaito Nov 29, 2023
c11afc1
Use mock method to clean up code
jtsaito Nov 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 37 additions & 27 deletions __tests__/apiwrapper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,54 @@
import { Octokit } from '@octokit/core';
import fetchMock from 'fetch-mock'; // https://github.com/wheresrhys/fetch-mock

import { paginateGraphql } from '@octokit/plugin-paginate-graphql';

import { graphql, HttpResponse } from 'msw'; // https://mswjs.io/docs/getting-started/mocks/graphql-api
import { setupServer } from 'msw/node'; // https://mswjs.io/docs/getting-started/integrate/node

import { ApiWrapper } from '../apiwrapper';

const GraphQlOctokit = Octokit.plugin(paginateGraphql);
const octokit = new GraphQlOctokit({ auth: 'fake-token-value' }); // don't use default GITHUB_TOKEN token from env

const apiWrapper = new ApiWrapper({ octokit });

const mockResponse = (name, data) => {
fetchMock.postOnce({
name,
matcher: 'https://api.github.com/graphql',
response: {
status: 200,
body: { data },
},
});
};
let server; // MSW mock server

describe('ApiWrapper', () => {
afterAll(() => {
fetchMock.reset();
afterEach(() => {
server.close();
});

describe('.createProject()', () => {
const data = { createProjectV2: { projectV2: { id: 'PVT_000000000000002' } } };

beforeAll(() => {
jtsaito marked this conversation as resolved.
Show resolved Hide resolved
server = setupServer(
graphql.mutation(/createProject/, () => HttpResponse.json({ data })),
);
server.listen();
});

const input = {
title: 'example-project-title',
organization: { id: 'O_0000000001' },
repository: { id: 'R_0000000001' },
};

beforeEach(() => { mockResponse('createProject', data); });
afterEach(() => { fetchMock.reset(); });

test('returns id', async () => {
const id = await apiWrapper.fetchOrganiztion(input);
expect(id).toEqual(data.id);
const id = await apiWrapper.createProject(input);
expect(id).toEqual(data.createProjectV2.projectV2.id);
});
});

describe('.fetchOrganiztion()', () => {
const data = { organization: { id: 'O_0000000001' } };

beforeEach(() => { mockResponse('fetchOrganiztion', data); });
afterEach(() => { fetchMock.reset(); });
beforeAll(() => {
server = setupServer(
graphql.query(/fetchOrgainzation/, () => HttpResponse.json({ data })),
);
server.listen();
jtsaito marked this conversation as resolved.
Show resolved Hide resolved
});

test('returns object containing id', async () => {
const { id } = await apiWrapper.fetchOrganiztion({ owner: 'acme' });
Expand Down Expand Up @@ -78,14 +80,18 @@ describe('ApiWrapper', () => {
},
};

beforeAll(() => {
server = setupServer(
graphql.query(/paginate/, () => HttpResponse.json({ data })),
);
server.listen();
});

const input = {
ownerName: 'acme',
repositoryName: 'example-repository-name',
};

beforeEach(() => { mockResponse('fetchRepository', data); });
afterEach(() => { fetchMock.reset(); });

test('returns object containing id', async () => {
const repository = await apiWrapper.fetchRepository(input);
expect({ repository }).toEqual(data); // checks deep
Expand All @@ -95,14 +101,18 @@ describe('ApiWrapper', () => {
describe('.deleteProject()', () => {
const data = { projectId: 'PVT_000000000000001' };

beforeAll(() => {
server = setupServer(
graphql.mutation(/deleteProject/, () => HttpResponse.json({ data })),
);
server.listen();
});

const input = {
project: { id: 'PVT_000000000000001' },
clientMutationId: 'example-client-mutation-id',
};

beforeEach(() => { mockResponse('deleteProject', data); });
afterEach(() => { fetchMock.reset(); });

test('returns object containing id', async () => {
const id = await apiWrapper.deleteProject(input);
expect(id).toEqual(data.projectId); // checks deep
Expand Down
131 changes: 56 additions & 75 deletions __tests__/integration.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import fetchMock from 'fetch-mock'; // https://github.com/wheresrhys/fetch-mock

import { Octokit } from '@octokit/core';
import { paginateGraphql } from '@octokit/plugin-paginate-graphql';

import { graphql, HttpResponse } from 'msw'; // https://mswjs.io/docs/getting-started/mocks/graphql-api
import { setupServer } from 'msw/node'; // https://mswjs.io/docs/getting-started/integrate/node

import { ApiWrapper } from '../apiwrapper';
import { RepositoryProjectsManager } from '../projects.js'; // eslint-disable-line import/extensions

Expand All @@ -12,94 +14,73 @@ const apiWrapper = new ApiWrapper({ octokit });

const rpm = new RepositoryProjectsManager({ apiWrapper, ownerName: 'acme', repositoryName: 'example-repository' });

describe('RepositoryProjectsManager integration test', () => {
afterAll(() => {
fetchMock.reset();
});
let server; // MSW mock server

beforeEach(() => {
fetchMock
.postOnce({
name: '1',
matcher: 'https://api.github.com/graphql',
response: {
status: 200,
body: {
data: {
organization: {
id: 'O_0000000001',
name: 'ACME Corporation',
},
},
describe('RepositoryProjectsManager integration test', () => {
beforeAll(() => {
server = setupServer(
graphql.query(/fetchOrgainzation/, () => HttpResponse.json({
data: {
organization: {
id: 'O_0000000001',
name: 'ACME Corporation',
},
},
})
.postOnce({
name: '2',
matcher: 'https://api.github.com/graphql',
response: {
status: 200,
body: {
data: {
repository: {
name: 'example-repository',
id: 'R_0000000001',
projectsV2: {
nodes: [
{
id: 'PVT_kwDOAnsQgs4AP9Qq',
title: 'layer-200/module-1',
},
{
id: 'PVT_000000000000002',
title: 'layer-100/module-2',
},
],
pageInfo: {
hasNextPage: false,
endCursor: 'Nw',
},
})),
graphql.query(/paginate/, () => HttpResponse.json({
data: {
repository: {
name: 'example-repository',
id: 'R_0000000001',
projectsV2: {
nodes: [
{
id: 'PVT_kwDOAnsQgs4AP9Qq',
title: 'layer-200/module-1',
},
{
id: 'PVT_000000000000002',
title: 'layer-100/module-2',
},
],
pageInfo: {
hasNextPage: false,
endCursor: 'Nw',
},
},
},
},
})
.postOnce({
name: '3',
matcher: 'https://api.github.com/graphql',
response: {
status: 200,
body: {
data: {
repository: {
name: 'example-repository',
id: 'R_0000000001',
projectsV2: {
nodes: [
{
id: 'PVT_kwDOAnsQgs4AP9Qq',
title: 'layer-200/module-1',
},
{
id: 'PVT_000000000000002',
title: 'layer-100/module-2',
},
],
pageInfo: {
hasNextPage: false,
endCursor: 'Nw',
},
})),
graphql.query(/paginate/, () => HttpResponse.json({
data: {
repository: {
name: 'example-repository',
id: 'R_0000000001',
projectsV2: {
nodes: [
{
id: 'PVT_kwDOAnsQgs4AP9Qq',
title: 'layer-200/module-1',
},
{
id: 'PVT_000000000000002',
title: 'layer-100/module-2',
},
],
pageInfo: {
hasNextPage: false,
endCursor: 'Nw',
},
},
},
},
});
})),
);
server.listen();
});

afterEach(() => {
fetchMock.reset();
afterAll(() => {
server.close();
});

test('when no change is required', async () => {
Expand Down
7 changes: 3 additions & 4 deletions apiwrapper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ class ApiWrapper {

async createProject({ title, organization, repository }) {
const { createProjectV2: { projectV2: { id } } } = await this.#octokit.graphql(`
mutation {
mutation createProject {
createProjectV2(
input: {
ownerId: "${organization.id}",
Expand All @@ -27,8 +27,7 @@ class ApiWrapper {
async fetchOrganiztion({ ownerName }) {
const { organization } = await this.#octokit.graphql(
`
query {
organization(login: "${ownerName}") {
query fetchOrgainzation { organization(login: "${ownerName}") {
jtsaito marked this conversation as resolved.
Show resolved Hide resolved
id
name
}
Expand Down Expand Up @@ -68,7 +67,7 @@ class ApiWrapper {

async deleteProject({ project, clientMutationId }) {
const { projectId: id } = await this.#octokit.graphql(`
mutation{
mutation deleteProject {
deleteProjectV2(
input: {
clientMutationId: "${clientMutationId}"
Expand Down
Loading