I use in my XPages/JSF app partial refresh, e.g. when you check a checkbox this element submits data to the server and the server updates the element in the DOM that was specified to become updated.
In my test written in Cypress the to be updated element is not being updated in the browser (chrome).
Is there something I should set / have missed in my interpretation of Cypress capabilities?
I made a most simple type of form with two types of partial refresh: xsp.partialrefreshget (csjs) and partial refresh via the properties control.
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:this.beforePageLoad><![CDATA[#{javascript:viewScope.put("switch","on")}]]></xp:this.beforePageLoad>
<xp:panel id="pnlAll">
<xp:button value="On" id="btnOn">
<xp:eventHandler event="onclick" submit="true"
refreshMode="norefresh">
<xp:this.action><![CDATA[#{javascript:viewScope.put("switch","on")}]]></xp:this.action>
<xp:this.onComplete><![CDATA[XSP.partialRefreshGet("#{id:pnlAll}", {
onComplete: function() {
console.log("pnlAll refreshed?")
}
});]]></xp:this.onComplete>
</xp:eventHandler>
</xp:button>
<xp:checkBox text="on" id="cbOn">
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="pnlAll">
<xp:this.action><![CDATA[#{javascript:viewScope.put("switch","on")}]]></xp:this.action>
</xp:eventHandler>
</xp:checkBox>
<xp:button value="Off" id="btnOff">
<xp:eventHandler event="onclick" submit="true"
refreshMode="norefresh">
<xp:this.action><![CDATA[#{javascript:viewScope.put("switch","off")}]]></xp:this.action>
<xp:this.onComplete><![CDATA[XSP.partialRefreshGet("#{id:pnlAll}", {
onComplete: function() {
console.log("pnlAll refreshed?")
}
});]]></xp:this.onComplete>
</xp:eventHandler>
</xp:button>
<xp:checkBox text="off" id="cbOff">
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="pnlAll">
<xp:this.action><![CDATA[#{javascript:viewScope.put("switch","off")}]]></xp:this.action>
</xp:eventHandler>
</xp:checkBox>
<xp:panel id="pnlSwitch">
<xp:panel tagName="h1" id="offmode">
Emergency. We are in off mode
<xp:this.rendered><![CDATA[#{javascript:viewScope.get("switch").equals("off")}]]></xp:this.rendered>
</xp:panel>
<xp:panel tagName="h3" id="onmode">
Chill. We are on.
<xp:this.rendered><![CDATA[#{javascript:viewScope.get("switch").equals("on")}]]></xp:this.rendered>
</xp:panel>
</xp:panel>
</xp:panel>
</xp:view>
And here is my Cypress code:
describe('Partial Refresh', () => {
beforeEach(() => {
cy.fixture('credentials.json').then(user => {
expect(user.name).to.eq("dummy user")
expect(user.password).to.eq("dummy password")
cy.visit('https://server1.acme.org/names.nsf?logout&redirectto=projectX/patrick/app.nsf/cypress.xsp')
cy.get('#user-id').type(user.name)
cy.get('#pw-id').type(user.password)
cy.get('[type="submit"]').click()
})
})
it('passes', () => {
cy.wait(1000)
cy.get('#view\\:_id1\\:onmode')
cy.get('#view\\:_id1\\:btnOff').click()
cy.wait(1000)
cy.get('#view\\:_id1\\:offmode')
cy.get('#view\\:_id1\\:btnOn').click()
cy.wait(1000)
cy.get('#view\\:_id1\\:onmode')
cy.get('#view\\:_id1\\:cbOff').check()
cy.wait(1000)
cy.get('#view\\:_id1\\:offmode')
cy.get('#view\\:_id1\\:cbOff').uncheck()
cy.get('#view\\:_id1\\:cbOn').check()
cy.wait(1000)
cy.get('#view\\:_id1\\:onmode')
cy.get('#view\\:_id1\\:cbOn').uncheck()
cy.get('#view\\:_id1\\:btnOff').click()
cy.get('#view\\:_id1\\:offmode')
})
})
"Ofcourse" this simple form seems to pass the test without any disturbance though I notice in the console warnings:
MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 runner:next listeners added. Use emitter.setMaxListeners() to increase limit
The form that I have in Production is very large, I use several web plugins like select2, bootstrap file upload etc. Perhaps there is just too much overload/items that Cypress has a problem with?