topic Re: reactiveUtils.watch() on a custom class? in ArcGIS JavaScript Maps SDK Questions

reactiveUtils.watch() on a custom class?

fdeters — Tue, 25 Mar 2025 20:37:44 GMT

I'm starting to lean more on `reactiveUtils.watch()` for reactivity that isn't easily handled by my JavaScript framework. Generally, things are going well, but I'm running into an issue with unit/integration tests:

A common issue is that I will want to stub or mock a JS SDK class. For example, I frequently create a fake WebMap with fake layers:

class FakeLayer { constructor({ id, listMode, visible, type }) { this.id = id; this.listMode = listMode; this.visible = visible; this.type = type; } when = async () => true; } const fakeWebMap = { allLayers: [ new FakeLayer({ id: 'layer-1', listMode: 'hide', visible: true, }), new FakeLayer({ id: 'layer-2', listMode: 'hide', visible: false, }), new FakeLayer({ id: 'layer-3', listMode: 'show', visible: true, }), };

My problem is this: reactiveUtils.watch() does not seem to work on POJOs or custom classes like FakeLayer above.

In the example above, I might be testing code that watches the `visible` property on each FakeLayer and mutates `listMode` if `visible` changes. How can I implement a mock/stub testing class that works with reactiveUtils.watch()?

Re: reactiveUtils.watch() on a custom class?

JoelBennett — Wed, 26 Mar 2025 02:21:33 GMT

Have you considered extending the Accessor class? See also https://developers.arcgis.com/javascript/latest/implementing-accessor/

Re: reactiveUtils.watch() on a custom class?

fdeters — Wed, 26 Mar 2025 21:38:26 GMT

This looks like exactly the starting point I was looking for, thanks. I'll come back and accept as solution once I've seen if it works for what I need.

Re: reactiveUtils.watch() on a custom class?

JoelBennett — Wed, 09 Apr 2025 18:09:52 GMT

Did this end up working out, or did you find something else more suitable?

Re: reactiveUtils.watch() on a custom class?

fdeters — Fri, 11 Apr 2025 22:50:54 GMT

Actually, yes! I just got it to work moments ago. I used this section of the article you linked: https://developers.arcgis.com/javascript/latest/implementing-accessor/#define-a-simple-property

Here's what my solution looks like for setting up a single property that I can use reactiveUtils.watch() on:

const MyCustomClass = Accessor.createSubclass({ constructor: function () { this.myProperty = null; }, properties: { myProperty: {}, }, });

I wanted to use native classes, but neither of the following were working for me (I'm not using TypeScript):

// native class using the @property decorator class MyCustomClass extends Accessor { @property state = null; } // native class, no decorators class MyCustomClass extends Accessor { constructor() { super(...arguments); this.myProperty= null; } properties = { myProperty: {}, }; }