Mock and Polyfill ZAFClient for local dev and Jest testing

6 Comments

  • Tim Ogilvy

    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
    0
  • Tim Ogilvy

    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.
    0
  • Tim Ogilvy

    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.

    0
  • Tim Ogilvy

    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!

    0
  • Tim Ogilvy

    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;
    };
    0
  • Tim Ogilvy

    Looks like the app scaffolds have been updated too... very helpful!

    https://github.com/zendesk/app_scaffolds

    Is the only way to keep up to date with this stuff to dig around, or am I missing an obvious thread somewhere?

    0

Please sign in to leave a comment.

Powered by Zendesk