diff --git a/packages/gatsby-source-url/test/createResolvers.test.ts b/packages/gatsby-source-url/test/createResolvers.test.ts index 60406f87..463ccdfd 100644 --- a/packages/gatsby-source-url/test/createResolvers.test.ts +++ b/packages/gatsby-source-url/test/createResolvers.test.ts @@ -72,6 +72,37 @@ describe('createResolvers', () => { expect(fluidFieldResult.aspectRatio).toBe(2); }); }); + + describe('base64 field', () => { + it('should set a valid base64 image', async () => { + const resolveResult = await resolveFieldInternal({ + field: 'fluid', + fieldParams: { + imgixParams: { ar: '2:1' }, + }, + }); + + // Need to resolve base64 again + const base64ResolvedValue = await resolveResult.resolverMap.Query.imgixImage.type + .getFields() + ['fluid'].type.getFields() + ?.base64?.resolve(resolveResult.fieldResult, {}); + + expect(base64ResolvedValue).toMatch(/^data:image\/jpeg;base64,.*\//); + }); + + it('should respond to placeholderParams', async () => { + // We are resolving the fluid field here and not the base64 field so that we can just assert on the url. + const fluidFieldResult: FluidObject = await resolveField({ + field: 'fluid', + fieldParams: { + placeholderImgixParams: { w: 100 }, + }, + }); + + expect(fluidFieldResult.base64).toMatch(/w=100/); + }); + }); describe('when setting maxWidth and maxHeight', () => { it('should set fit=crop by default to ensure image is cropped', async () => { const fluidFieldResult: FluidObject = await resolveField({ @@ -224,13 +255,10 @@ const mockGatsbyCache = { }; const resolveField = async ({ - appConfig = { - domain: 'assets.imgix.net', - plugins: [], - }, + appConfig, field, fieldParams = {}, - url = 'amsterdam.jpg', + url, }: { appConfig?: PluginOptions; field: 'url' | 'fluid' | 'fixed'; @@ -249,6 +277,72 @@ const resolveField = async ({ */ // Call createResolvers and capture the result + const resolveResult = await resolveFieldInternal({ + appConfig, + field, + fieldParams, + url, + }); + + return resolveResult.fieldResult; +}; + +type FieldParams = Record; + +async function resolveFieldInternal({ + appConfig, + field, + fieldParams = {}, + url = 'amsterdam.jpg', +}: { + appConfig?: PluginOptions<{ domain: string }>; + field: 'url' | 'fluid' | 'fixed'; + fieldParams?: Object; + url?: string; +}) { + const resolverMap = createRootResolversMap(appConfig); + + const fieldParamsWithDefaults = createFieldParamsWithDefaults( + resolverMap, + field, + fieldParams, + ); + + // Get root value from the root imgixImage resolver. This is passed to child resolvers. + const imgixImageRootValue = resolverMap.Query.imgixImage.resolve({}, { url }); + + // Resolve the field specified in the imgixImage type + const fieldResult = await resolverMap.Query.imgixImage.type + .getFields() + [field].resolve(imgixImageRootValue, fieldParamsWithDefaults); + return { fieldResult, resolverMap }; +} + +function createFieldParamsWithDefaults( + resolverMap: any, + field: 'url' | 'fluid' | 'fixed', + fieldParams: FieldParams, +) { + const defaultParamsForField = pipe( + R.chain( + (v: any): [string, any][] => + v.defaultValue ? [[v.name, v.defaultValue]] : [], + resolverMap.Query.imgixImage.type.getFields()[field].args ?? [], + ), + (v) => R.fromPairs(v), + ); + return { + ...defaultParamsForField, + ...fieldParams, + }; +} + +function createRootResolversMap( + appConfig: PluginOptions<{ domain: string }> = { + domain: 'assets.imgix.net', + plugins: [], + }, +) { const mockCreateResolversFunction = jest.fn(); createResolvers && createResolvers( @@ -259,26 +353,5 @@ const resolveField = async ({ appConfig, ); const resolverMap = mockCreateResolversFunction.mock.calls[0][0]; - - const fieldParamsWithDefaults = { - ...pipe( - R.chain( - (v: any): [string, any][] => - v.defaultValue ? [[v.name, v.defaultValue]] : [], - resolverMap.Query.imgixImage.type.getFields()[field].args ?? [], - ), - (v) => R.fromPairs(v), - ), - ...fieldParams, - }; - - // Get root value from the root imgixImage resolver. This is passed to child resolvers. - const imgixImageRootValue = resolverMap.Query.imgixImage.resolve({}, { url }); - - // Resolve the `url` field in the imgixImage type - const fieldResult = await resolverMap.Query.imgixImage.type - .getFields() - [field].resolve(imgixImageRootValue, fieldParamsWithDefaults); - - return fieldResult; -}; + return resolverMap; +}