ZATS & Shadow component

answered 2019-10-24 12:34:49 +0800

cor3000
6280 ● 2 ● 7

It is not enabled per se, because there is no difference. Shadow elements just provide another way to add/remove components to a page.

So if your components appear due to a change to the template/templateUri property the contained components are queryable from ZATS just as normal. However the shadow elements itself aren't supported by ZATS via QueryAgent. Still - if really needed - you can query them directly from the actual component instance behind a ComponentAgent object, which also has a query() method. e.g.:

componentAgent.as(Div.class).query('::shadow#myApply')

Here a small example demonstrating this (uses zscript for simplicity - the same result can be achieved with normal @Command bindings, so don't copy/paste this pattern):

clicking the button will toggle between template1<->template2

zats-shadow.zul

<zk>
    <zs cript>
        public class MyVm {
            private String template = "template1";
            public String getTemplate() { return this.template; }

            //can't use annotations in zscript, in a java class you can do that
            //@Command
            //@NotifyChange("template");
            public void toggleTemplate() {
                this.template = "template1".equals(this.template) ? "template2" : "template1";
                BindUtils.postNotifyChange(null, null, this, "template");
            }
        }
    </zscript>
    <div id="root" viewModel="@id('vm') @init('MyVm')">
        <button id="toggleTemplate" onClick="vm.toggleTemplate()"/>
<!--        <button id="toggleTemplate" onClick="@command('toggleTemplate')"/>-->
        <apply id="myApply" dynamicValue="true" template="@load(vm.template)">
            <template name="template1">
                <div id="template1Content">
                    Template 1
                </div>
            </template>
            <template name="template2">
                <div id="template2Content">
                    Template 2
                </div>
            </template>
        </apply>
    </div>
</zk>

Here a corresponding ZATS test case asserting the updated components inside the different templates. Also shows how to access the inner state of the shadow element directly - if you really need that for a particular reason.

public class ZatsShadowTest {
    @ClassRule
    public static AutoEnvironment env = new AutoEnvironment("src/main/webapp");
    @Rule
    public AutoClient autoClient = env.autoClient();

    private DesktopAgent desktopAgent;

    @Before
    public void setup() {
        this.desktopAgent = autoClient.connect("/zats-shadow.zul");
    }

    @After
    public void cleanup() {
        this.desktopAgent = null;
    }

    public ComponentAgent root() { return desktopAgent.query("#root"); }
    public ComponentAgent template1Content() { return desktopAgent.query("#template1Content"); }
    public ComponentAgent template2Content() { return desktopAgent.query("#template2Content"); }
    public ComponentAgent toggleTemplate() { return desktopAgent.query("#toggleTemplate"); }
    public Apply myApply() { return (Apply) root().as(Div.class).query("::shadow#myApply"); }

    @Test
    public void testShadowTemplate() {
        assertEquals("template1", myApply().getTemplate());
        assertNotNull(template1Content());
        assertNull(template2Content());

        toggleTemplate().click();

        assertEquals("template2", myApply().getTemplate());
        assertNull(template1Content());
        assertNotNull(template2Content());
    }
}

Since this works on my side and you didn't provide any non working example. I can't comment on your particular issue.

In any case Shadow elements are nothing a user can/will interact with, that's why they aren't considered in the ZatsMimic library. It should be enough to just assert the actual contents tempalte1Content/template2Content are added/removed as expected.