feat: use spread operator instead of mock builder

Mock builder is nice but it adds overhead and it's not naturally typed. We need an interface to support `withXxx` methods.
With ES2015, the spread operator with an `overrides` function parameter can achieve the same goal

Author: ardeois

.github/workflows/test.yml

@@ -0,0 +1,18 @@
+name: test
+
+on: [push]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    steps:
+      - uses: actions/checkout@v1
+      - uses: docker://borales/yarn:latest
+        with:
+          args: 'install'
+      - name: test
+        uses: docker://borales/yarn:latest
+        with:
+          cmd: 'test'

package.json

@@ -32,6 +32,7 @@
         "@types/jest": "^24.0.19",
         "@typescript-eslint/eslint-plugin": "^1.4.2",
         "@typescript-eslint/parser": "^1.4.2",
+        "auto": "^7.12.2",
         "eslint": "6.0.0",
         "eslint-config-landr": "0.1.0",
         "eslint-config-prettier": "^4.1.0",

src/index.ts

@@ -2,57 +2,11 @@ import { printSchema, parse, visit, ASTKindToNode, NamedTypeNode, TypeNode, Visi
 import faker from 'faker';
 import { toPascalCase, PluginFunction } from '@graphql-codegen/plugin-helpers';
 
-const mockBuilderHelper = `
-function lowerFirst(value: string) {
-    return value.replace(/^\\w/, c => c.toLowerCase());
-}
-
-/**
- * Creates a new mock object for use on mock providers, or unit tests.
- * @param {T} obj Initial object from which mock will be created
- * @returns {T} Object with auto-generated methods \`withPropertyName\`
- * for each property \`propertyName\` of the initial object.
- * @note Will failed to create accessors for optional TypeScript properties
- * like \`propertyName?: boolean\` that will result in no property created in JavaScript.
- */
-export function mockBuilder<T extends Object>(obj: T): T & any {
-    let proxy = new Proxy(obj, {
-        get: (target: T, key: keyof T) => {
-            if (typeof key === 'string' && key.startsWith('with') && !(key in target)) {
-                // It's a builder property \`withXxxx\` we dynamically create the setter function
-                let property = key.substring(4);
-                property = property in target ? property : lowerFirst(property);
-                if (property in target) {
-                    return function(value: any) {
-                        // Property is a simple value
-                        // @ts-ignore
-                        target[property] = value;
-                        return proxy;
-                    };
-                } else {
-                    throw \`Property '\${property}' doesn't exist for object \${target.constructor.name ||
-    typeof target}\`;
-                }
-            }
-            return target[key];
-        }
-    });
-
-    return proxy;
-}`;
-
 const toMockName = (name: string) => {
     const isVowel = name.match(/^[AEIO]/);
     return isVowel ? `an${name}` : `a${name}`;
 };
 
-const capitalize = (s: unknown) => {
-    if (typeof s !== 'string') {
-        return '';
-    }
-    return s.charAt(0).toUpperCase() + s.slice(1);
-};
-
 const hashedString = (value: string) => {
     let hash = 0;
     if (value.length === 0) {
@@ -131,7 +85,7 @@ const generateMockValue = (
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface TypescriptMocksPluginConfig {
-    typesFile: string;
+    typesFile?: string;
 }
 
 interface TypeItem {
@@ -197,20 +151,12 @@ export const plugin: PluginFunction<TypescriptMocksPluginConfig> = (schema, docu
                 typeName,
                 mockFn: () => {
                     const mockFields = fields ? fields.map(({ mockFn }: any) => mockFn(typeName)).join('\n') : '';
-                    const fieldNames = fields ? fields.map(({ name }) => name) : [];
-
-                    const mockInterface = `interface ${typeName}Mock extends ${typeName} {
-    ${fieldNames
-        .map(name => `with${capitalize(name)}: (value: ${typeName}['${name}']) => ${typeName}Mock;`)
-        .join('\n    ')}
-}`;
 
                     return `
-${mockInterface}
-
-export const ${toMockName(typeName)} = (): ${typeName}Mock => {
-    return mockBuilder<${typeName}>({
+export const ${toMockName(typeName)} = (overrides?: Partial<${typeName}>): ${typeName} => {
+    return {
 ${mockFields}
+        ...overrides
     });
 };`;
                 },
@@ -220,7 +166,7 @@ ${mockFields}
 
     const result: any = visit(astNode, { leave: visitor });
     const definitions = result.definitions.filter((definition: any) => !!definition);
-    const typesFile = config.typesFile.replace(/\.[\w]+$/, '');
+    const typesFile = config.typesFile ? config.typesFile.replace(/\.[\w]+$/, '') : null;
     const typeImports = definitions
         .map(({ typeName }: { typeName: string }) => typeName)
         .filter((typeName: string) => !!typeName);
@@ -233,8 +179,6 @@ ${mockFields}
 import { ${typeImports.join(', ')} } from '${typesFile}';\n`
         : '';
 
-    return `${typesFileImport}
-${mockBuilderHelper}
-${mockFns.map((mockFn: Function) => mockFn()).join('\n')}
+    return `${typesFileImport}${mockFns.map((mockFn: Function) => mockFn()).join('\n')}
 `;
 };

tests/__snapshots__/typescript-mock-data.spec.ts.snap

@@ -1,71 +1,44 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should generate mock data functions 1`] = `
-"/* eslint-disable @typescript-eslint/no-use-before-define,@typescript-eslint/no-unused-vars */
-import { Avatar, User } from './types/graphql';
-
-
-function lowerFirst(value: string) {
-    return value.replace(/^\\\\w/, c => c.toLowerCase());
-}
-
-/**
- * Creates a new mock object for use on mock providers, or unit tests.
- * @param {T} obj Initial object from which mock will be created
- * @returns {T} Object with auto-generated methods \`withPropertyName\`
- * for each property \`propertyName\` of the initial object.
- * @note Will failed to create accessors for optional TypeScript properties
- * like \`propertyName?: boolean\` that will result in no property created in JavaScript.
- */
-export function mockBuilder<T extends Object>(obj: T): T & any {
-    let proxy = new Proxy(obj, {
-        get: (target: T, key: keyof T) => {
-            if (typeof key === 'string' && key.startsWith('with') && !(key in target)) {
-                // It's a builder property \`withXxxx\` we dynamically create the setter function
-                let property = key.substring(4);
-                property = property in target ? property : lowerFirst(property);
-                if (property in target) {
-                    return function(value: any) {
-                        // Property is a simple value
-                        // @ts-ignore
-                        target[property] = value;
-                        return proxy;
-                    };
-                } else {
-                    throw \`Property '\${property}' doesn't exist for object \${target.constructor.name ||
-    typeof target}\`;
-                }
-            }
-            return target[key];
-        }
+"
+export const anAvatar = (overrides?: Partial<Avatar>): Avatar => {
+    return {
+        id: '1550ff93-cd31-49b4-bc38-ef1cb68bdc38',
+        url: 'aliquid',
+        ...overrides
     });
+};
 
-    return proxy;
-}
+export const aUser = (overrides?: Partial<User>): User => {
+    return {
+        id: 'b5756f00-51a6-422a-9a7d-c13ee6a63750',
+        login: 'libero',
+        avatar: anAvatar(),
+        ...overrides
+    });
+};
+"
+`;
 
-interface AvatarMock extends Avatar {
-    withId: (value: Avatar['id']) => AvatarMock;
-    withUrl: (value: Avatar['url']) => AvatarMock;
-}
+exports[`should generate mock data functions with external types file import 1`] = `
+"/* eslint-disable @typescript-eslint/no-use-before-define,@typescript-eslint/no-unused-vars */
+import { Avatar, User } from './types/graphql';
 
-export const anAvatar = (): AvatarMock => {
-    return mockBuilder<Avatar>({
+export const anAvatar = (overrides?: Partial<Avatar>): Avatar => {
+    return {
         id: '1550ff93-cd31-49b4-bc38-ef1cb68bdc38',
         url: 'aliquid',
+        ...overrides
     });
 };
 
-interface UserMock extends User {
-    withId: (value: User['id']) => UserMock;
-    withLogin: (value: User['login']) => UserMock;
-    withAvatar: (value: User['avatar']) => UserMock;
-}
-
-export const aUser = (): UserMock => {
-    return mockBuilder<User>({
+export const aUser = (overrides?: Partial<User>): User => {
+    return {
         id: 'b5756f00-51a6-422a-9a7d-c13ee6a63750',
         login: 'libero',
         avatar: anAvatar(),
+        ...overrides
     });
 };
 "

tests/typescript-mock-data.spec.ts

@@ -25,9 +25,16 @@ it('can be called', async () => {
 });
 
 it('should generate mock data functions', async () => {
+    const result = await plugin(testSchema, [], {});
+
+    expect(result).toBeDefined();
+    expect(result).toMatchSnapshot();
+});
+
+it('should generate mock data functions with external types file import', async () => {
     const result = await plugin(testSchema, [], { typesFile: './types/graphql.ts' });
 
     expect(result).toBeDefined();
-    // @ts-ignore
+    expect(result).toContain("import { Avatar, User } from './types/graphql';");
     expect(result).toMatchSnapshot();
 });