q-fetch-html Visual Test
Each result box should fill itself with HTML from test/fixtures/q-fetch-html-source.html after an explicit .fetch() call. A blank result means that case did not resolve.
q-import { dist/q-components/q-fetch-html.qhtml }
q-component fetch-result {
q-property label: "case"
div.case {
h2 { text { ${this.component.label} } }
div.expected { text { Expected: selected fixture HTML appears below. } }
div.result { text { waiting for fetch } }
}
function show(response) {
this.querySelector(".result").innerHTML = response.html;
this.querySelector(".result").setAttribute("data-pass", response.html ? "1" : "0");
}
}
q-fetch-html onResponseFetch {
url: "test/fixtures/q-fetch-html-source.html"
selector: "#remote-card"
}
fetch-result onResponseTarget { label: "1. named q-fetch-html with response signal" }
q-connect { onResponseFetch.response onResponseTarget.show }
q-fetch-html connectedFetch {
url: "test/fixtures/q-fetch-html-source.html"
selector: "#selector-target > span"
}
fetch-result connectedTarget { label: "2. q-connect from myobject.response to component function" }
q-connect { connectedFetch.response connectedTarget.show }
q-fetch-html componentFetch {
url: "test/fixtures/q-fetch-html-source.html"
selector: "#component-fragment"
}
fetch-result componentTarget { label: "3. q-fetch-html component instance with explicit fetch()" }
q-connect { componentFetch.response componentTarget.show }
q-fetch-html propertyLikeFetch {
url: "test/fixtures/q-fetch-html-source.html"
selector: "#property-fragment"
}
fetch-result propertyLikeTarget { label: "4. reusable q-fetch-html object stores lastResponse/html" }
q-connect { propertyLikeFetch.response propertyLikeTarget.show }
q-component slotted-fetch-panel {
slot { main }
}
div.case {
h2 { text { 5. q-fetch-html declared inside slot content } }
div.expected { text { Expected: slot-scoped fetch object resolves through q-connect. } }
div#slot-output.result { text { waiting for slot fetch } }
slotted-fetch-panel slotShell {
main {
q-fetch-html slotFetch {
url: "test/fixtures/q-fetch-html-source.html"
selector: "#slot-fragment"
}
q-connect { slotFetch.response slotReceiver.show }
q-timer slotStarter {
interval: 20
repeat: false
running: true
ontimeout { slotFetch.fetch(); }
}
}
}
}
q-component slot-receiver {
function show(response) {
document.querySelector("#slot-output").innerHTML = response.html;
document.querySelector("#slot-output").setAttribute("data-pass", response.html ? "1" : "0");
}
}
slot-receiver slotReceiver { }
onready {
onResponseFetch.fetch();
connectedFetch.fetch();
componentFetch.fetch();
propertyLikeFetch.fetch();
}