@cruglobal/graphql-ergonomock

图QL 埃戈诺莫克

QQ 对 GraphQL 的开发者友好自传游戏
报告错误 • 妇女 请求特性

目录

• 目录
• 关于项目
  • 基本示例
  • 基本示例(阿波罗)
  • 内设
• 开始
  • 安装
  • 使用量
    • 默认大小写
    • ErgonoMocked 与阿波罗- 克利特一起使用
    • 作为模拟形状的解析器提供函数
    • 模拟错误
    • 口交变异
• API 密码
  • ergonomock()
  • <ErgonoMockedProvider>
• 路线图
• 捐款
• 许可证
• 联系人
• 鸣谢

关于项目

此库提供了一个开发者方便的方法来模拟您的 GraphQL 请求 。 默认情况下,其船体具有以下特征: 1

• 自动嘲笑 以计划定义为基础的类型和字段.
• 决定随机 用于支持使用快照等特性.
• 对使用查询的支持 碎片、联盟和接口。 。 。 .
• 允许使用 作为模拟值的函数,其签名为 GraphQL 解析器,并在运行时解决.

基本示例

import { ergonomock } from 'graphql-ergonomock';

// Given a particular GraphQL Schema, ...
const schema = gql`
  type Shape {
    id: ID!
    returnInt: Int
    nestedShape: Shape
    returnBoolean: Boolean
  }

  type Query {
    getShape: Shape
  }
`;

// ...a GraphQL query, ...
const query = gql`
{
  getShape {
    id
    nestedShape {
      returnInt
      nestedShape {
        returnInt
        returnBoolean
      }
    }
  }
}
`;

// ...and a partial, possibly nested shape of data...
const mocks = {
  getShape: {
    nestedShape: {
      returnInt: 5,
      nestedShape: {
        returnInt: 10
      }
    }
  }
};

// ... provides the expected object filled with mock data
const resp = ergonomock(schema, query, { mocks });
expect(resp.data).toMatchObject({
  id: expect.toBeString(),
  nestedShape: {
    returnInt: 5,
    nestedShape: {
      returnInt: 10,
      returnBoolean: expect.toBeBoolean()
    }
  }
}); // ✅ test pass

基本示例(阿波罗)

import { ErgonoMockedProvider as MockedProvider } from "graphql-ergonomock";

// Given a particular GraphQL Schema, ...
const schema = gql`
  type Shape {
    id: ID!
    returnString: String
    returnBoolean: Boolean
  }

  type Query {
    getShape: Shape
  }
`;

// ...a component making a query ...
const QUERY = gql`
query MyQuery {
  getShape {
    id
    returnString
    returnBoolean
  }
}
`;
const MyComponent = () => {
  const { loading, error, data } = useQuery(QUERY);
  if (loading) return <p>Loading</p>;
  if (error) return <p>Error</p>;

  return (
    <div>
      MyComponent.
      <div>String: {data.getShape.returnString}</div>
      <div>Boolean: {data.getShape.returnBoolean.toString()}</div>
    </div>
  );
};

test("MyComponent can render the query results.", async () => {
  const mocks = {
    MyQuery: {
      getShape: { returnString: "John Doe" }
    }
  };
  const { findByText } = render(
    <MockedProvider schema={schema} mocks={mocks}>
      <MyComponent />
    </MockedProvider>
  );
  expect(await findByText(/String: John Doe/)).toBeVisible();
  expect(await findByText(/Boolean: (true|false)/)).toBeVisible();
}); // ✅ test pass

内设

• 字体
• 图QL
• 欢乐

开始

安装

npm i graphql-ergonomock --save-dev

使用量

默认大小写

这个 ergonomock() 函数可以单独用于在 GraphQL 查询中创建模拟响应.

import { ergonomock } from 'graphql-ergonomock';
import schema from '../my-schema.graphql';

test("I can mock a response", () => {
  const resp = ergonomock(schema, 'query MyCrucialOperation { car { id, plateNumber } }', {
    mocks: { car: { plateNumber: '123abc' } }
  });

  expect(resp).toMatchObject({
    data: {
      car: {
        id: expect.toBeString(),
        plateNumber: '123abc'
      }
    }
  });
});

ErgonoMocked 与阿波罗- 克利特一起使用

如果您的应用程序使用 Apollo- Client, 您也可以使用 ErgonoMockedProvider 关闭 ergonomock()。生成的值是稳定的,并基于查询名称、形状和变量决定的(这样,如果您如此倾向,您就可以利用测试快照).

import { ErgonoMockedProvider as MockedProvider } from 'graphql-ergonomock';
import schema from '../my-schema.graphql';

test("I can mock a response", () => {
  const mocks = {
    MyCrucialOperation: {
      car: { plateNumber: '123abc' }
    }
  };
  const { findByText } = render(
    <MockedProvider schema={schema} mocks={mocks}>
      <MyApp />
    </MockedProvider>
  );
  expect(await findByText(/'123abc'/)).toBeVisible();
});

如果某个特定组件在React树中被多次调用(但变量不同),则您可以提供一个函数作为操作的值,该函数将随 operation: GraphQLOperation 作为第一和唯一的论据.

import { ErgonoMockedProvider as MockedProvider } from 'graphql-ergonomock';
import schema from '../my-schema.graphql';

test("I can mock a response with a function", () => {
  let cardinality = 0;
  const mocks = {
    MyCrucialOperation: (operation) => ({ plateNumber: `aaa00${cardinality++}` })
  };
  const { findAllByText } = render(
    <MockedProvider schema={schema} mocks={mocks}>
      <MyApp />
    </MockedProvider>
  );
  expect(await findAllByText(/'aaa00'/)).toHaveLength(3);
});

最后,你可以通过 onCall 道具 (英语).

const spy = jest.fn();
const { findByText } = render(
  <MockedProvider schema={schema} onCall={spy}>
    <MyComponent id="1" />
    <MyComponent id="2" />
    <MyComponent id="3" />
  </MockedProvider>
);

//...
expect(spy.mock.calls).toHaveLength(3);
const { operation, response } = spy.mock.calls[0][0];
expect(operation.variables.id).toEqual("1");

作为模拟形状的解析器提供函数

您可以对嵌入的模拟器的任何部分使用函数, 它将被用作此字段的解析器 。 解析器的典型签名是 (root, args, context, info) => any。 。 。 .

// ...
const mocks = {
  returnShape: {
    returnInt: 4321,
    nestedShape: (root: any, args: any, ctx: any, info: any) => {
      return {
        returnInt: root.someField ? 1234 : 5678
      };
    }
  }
}
//...

提供默认模拟解析器函数

如果您有自定义的 scalar 类型或想要为某些类型提供默认的模拟解析器功能,您可以通过 resolvers 选项.

const schema = gql`
  type Shape = {
    id: ID!
    returnInt: Int
    date: Date
    nestedShape: Shape
  }

  type Query {
    getShape: Shape
  }
`;

const testQuery = gql`
{
  getShape {
    id
    returnInt
    date
    nestedShape {
      date
    }
  }
}
`;

const resp = ergonomock(schema, testQuery, {
  resolvers: {
    Date: () => "2021-04-09"
  }
});
expect(resp.data).toMatchObject({
  id: expect.toBeString(),
  returnInt: expect.toBeNumber(),
  date: '2021-04-09'
  nestedShape {
    date: '2021-04-09'
  }
});

模拟错误

您可以在模拟形状中返回或抛出错误 .

const testQuery = gql`
  {
    getCar {
      id
    }
  }
`;

const resp = ergonomock(schema, testQuery, {
  mocks: {
    getCar: () => { throw new Error("Server Error"); }
    // or simply getCar: new Error("Server Error")
  }
});

console.log(resp.data.getCar); // null
console.log(resp.errors[0]); // { message: "Server Error", ...}

口交变异

你可以嘲笑突变,但如果你在使用 ergonomock() 直接需要为操作提供正确的变量,以便操作不失败.

test("Can partially mock mutations", () => {
  const query = /* GraphQL */ `
    mutation SampleQuery($input: ShapeInput!) {
      createShape(input: $input) {
        id
        returnInt
        returnString
      }
    }
  `;

  const resp: any = ergonomock(schema, query, {
    mocks: {
      createShape: { id: "567" }
    },
    variables: {
      input: { someID: "123", someInt: 123 }
    }
  });

  expect(resp.data.createShape).toMatchObject({
    id: "567",
    returnInt: expect.toBeNumber(),
    returnString: expect.toBeString()
  });
});

API 密码

ergonomock()

这个 ergonomock(schema, query, options) 函数需要3个参数

1. (必须) 图QL 计划 (不是SDL形式).
2. (必须) 图QL 查询,或者以SDL(字符串)形式,或者 DocumentNode。 。 。 .
3. (可选) 选项对象 .
   1. mocks 是一个可以部分或全部匹配预期响应形状的对象.
   2. seed 是一个用于种子自动移动值的随机数生成器的字符串.
   3. variables 是查询或突变中使用的可变值对象.

<ErgonoMockedProvider>

这个部件的道具和阿波罗-克利特的非常相像 模拟提供者。唯一的差异是:

• mocks 是一个对象,其中键是操作名称,值是 mocks 输入 ergonomock() 将接受。 (即可以是空的,也可以是任何与预期反应相匹配的形状. )
• onCall 是一个被执行的查询调用的处理器 。 呼叫签名是 ({operation: GraphQLOperation, response: any}) => void 其中,答复是将全部答复反馈给单一查询。 目的 onCall 提供某种间谍(或 jest.fn()(c) 作出判断,说明电话的来历和变量,并掌握从中产生的数值 ergonomock()。 。 。 .
• resolvers 是按键所在的对象 gql 类型和值为模拟解析器函数。 它旨在允许用户覆盖或提供某些类型的默认模拟功能. (例如自定义 scalar 类型). 呼叫签名是 (root, args, context, info) => any。 。 。 .

路线图

见 未决问题 (c) 列出拟议特征(和已知问题).

捐款

贡献使得开放源代码社区成为了如此惊人的学习,激励和创造的地方. 你所做的任何贡献 非常感谢。 。 。 .

1. 项目叉
2. 创建您的特性分支( E)git checkout -b feature/AmazingFeature(中文(简体) )
3. 提交更改( E)git commit -m 'Add some AmazingFeature'(中文(简体) )
4. 推动到该处git push origin feature/AmazingFeature(中文(简体) )
5. 打开拉请求

许可证

根据麻省理工学院的许可证分发。 见 LICENSE 更多信息.

联系人

维护者:乔尔·马可特(吉苏布) @ joual (英语)(中文(简体) )

项目链接 : https://github.com/ surveyMonkey/graphql-ergonomock 页面存档备份,存于互联网档案馆

鸣谢

• 用于模拟图表QL 数据的新方法
• 图QL 工具
• 图QL-JS