Mock and Polyfill ZAFClient for local dev and Jest testing

Posted Feb 14, 2022

Hello,

I'm trying to implement best practices with my ZAF sidebar app and bumping into some problems.

I'm using secrets that get injected by the ZAF Proxy
When compiling in dev mode for bug tracking my application is too big to upload to the Zendesk Sandbox to test
Uploading a compiled application for every minor change is an untenable development lifecycle
I need to be able to use Jest to run automated continuous integration testing on my app
Sinatra from Zendesk Apps Tools prompts for secrets but does not inject a working ZAFClient into local dev
ZCLI doesn't seem to have enough maturity to address these issues yet and is confusing to integrate into an app built using ZAT, React, Webpack and Zengarden.

I've left comments on the GitHub repositories also, I'm very happy to develop and implement something, but I'd like to understand how to get involved and contribute meaningfully.

The ideal outcome will provide the opportunity to mock a ZAFClient for local development, where I can mock the proxy using whatever code I need, taking full responsibility for the security of that on local dev.

WebPack would compile with the mock on dev/localhost, and a similar or different Mock using dummy data would apply to Jest testing.

This will allow local development of the app, rather than 'guess testing' and trying to debug by beautifying compiled and minified code in the browser developer tools, which is clunky at best.

6 comments

Date

Tim Ogilvy

Feb 15, 2022

So far I've figured out that by passing in the localhost URL and a guid, the `ZAFClient.init()` method will return true, but that doesn't really help me with figuring out how to polyfill or mock it for local testing.

This 'works' to get past the init failing.

http://localhost:4567/sidebar.html?app_guid=f278bc69-6098-aab88a5ec49f&origin=http://localhost:4567

Tim Ogilvy

Feb 15, 2022

Ok... I'm using a react hook to access the ZAFClient as a singleton, to avoid inadvertently creating new instances of it. I can use process.env.NODE_ENV to switch between the two, which means I can start to make a mockery of it.

The hook also helps with eslint rules - the global only has to be ignored once.

This is my useZafClient hook so far:

import ZafDevClient from '../ZafDevClient/ZafDevClient';

// singleton storage variable within webpacked hook closure
let zafClient;

export const useZafClient = () => {
  if (!zafClient) {
    // eslint-disable-next-line no-undef
    zafClient = process.env.NODE_ENV === 'development' ? ZafDevClient : ZAFClient.init();
  }
  return zafClient;
};

I'd still love to be able to access whatever is getting churned in via Sinatra, but I can't find any docs on how that's working.

Tim Ogilvy

Feb 15, 2022

I'm looking at the documentation for testing with secure settings here:

https://developer.zendesk.com/documentation/apps/app-developer-guide/using-the-apps-framework/#testing-an-app-with-secure-settings-locally

It's a bit cryptic, unclear if that will use the proxy and inject secure settings or not.

Tim Ogilvy

Feb 15, 2022

Ok, by using https://www.npmjs.com/package/dotenv-webpack I've been able to inject secrets into my local development shim for the ZAFClient... which should allow me hopefully to hit my dev api server from the iFrame... that will be the next test.

I'm pretty much preserving this processes as a comment blog at this point. If someone wants to tell me I'm crazy and there's an easier way, I'd love to hear it!

Tim Ogilvy

Feb 16, 2022

Ok so the same principle will work for testing as it does for development.

Probably not ideal, but here's my react hook for now to get a client mock in during testing. I'm sure there's a better way using mocks in jest.conf.json, but I haven't been able to make it work yet.

import ZafDevClient from '../ZafDevClient/ZafDevClient';

let zafClient;

export const useZafClient = () => {
  if (!zafClient) {
    // eslint-disable-next-line no-undef
    zafClient = process.env.NODE_ENV === 'test' ? ZafDevClient : ZAFClient.init();
  }
  return zafClient;
};