import { assert, assertEqual } from "../tk-unit"; import { DOMNode } from "@nativescript/core/debugger/dom-node"; import { attachDOMInspectorCommandCallbacks, attachCSSInspectorCommandCallbacks, attachDOMInspectorEventCallbacks } from "@nativescript/core/debugger/devtools-elements"; import { InspectorCommands, InspectorEvents } from "@nativescript/core/debugger/devtools-elements"; import { unsetValue } from "@nativescript/core/ui/core/properties"; import { Button } from "@nativescript/core/ui/button"; import { Slider } from "@nativescript/core/ui/slider"; import { Label } from "@nativescript/core/ui/label"; import { textProperty } from "@nativescript/core/ui/text-base"; import { TextView } from "@nativescript/core/ui/text-view"; import { StackLayout } from "@nativescript/core/ui/layouts/stack-layout"; import { isAndroid } from "@nativescript/core/platform/platform"; let originalInspectorGlobal: InspectorCommands & InspectorEvents; let currentInspector: InspectorCommands & InspectorEvents; function getTestInspector(): InspectorCommands & InspectorEvents { let inspector = { getDocument(): any { return {}; }, removeNode(nodeId: number): void { /* */ }, getComputedStylesForNode(nodeId: number): any { return []; }, setAttributeAsText(nodeId: number, text: string, name: string): void { /* */ }, childNodeInserted(parentId: number, lastId: number, node: string | DOMNode): void { /* to be replaced */ }, childNodeRemoved(parentId: number, nodeId: number): void { /* to be replaced */ }, attributeModified(nodeId: number, attrName: string, attrValue: string) { /* to be replaced */ }, attributeRemoved(nodeId: number, attrName: string) { /* to be replaced */ } }; attachDOMInspectorCommandCallbacks(inspector); attachDOMInspectorEventCallbacks(inspector); attachCSSInspectorCommandCallbacks(inspector); return inspector; } function getIOSDOMInspector() { return { events: { childNodeInserted(parentId: number, lastId: number, node: DOMNode): void { return; }, childNodeRemoved(parentId: number, nodeId: number): void { return; }, attributeModified(nodeId: number, attrName: string, attrValue: string): void { return; }, attributeRemoved(nodeId: number, attrName: string): void { return; } }, commands: { getDocument(): any { return {}; }, removeNode(nodeId: number): void { /* */ }, getComputedStylesForNode(nodeId: number): any { return []; }, setAttributeAsText(nodeId: number, text: string, name: string): void { /* */ } } }; } export function setUp(): void { if (isAndroid) { originalInspectorGlobal = global.__inspector; currentInspector = getTestInspector(); global.__inspector = currentInspector; } else { let domInspector = getIOSDOMInspector(); currentInspector = getTestInspector(); domInspector.events = currentInspector; } } export function tearDown(): void { if (isAndroid) { global.__inspector = originalInspectorGlobal; } } function assertAttribute(domNode: DOMNode, name: string, value: any) { const propIdx = domNode.attributes.indexOf(name); assert(propIdx >= 0, `Attribute ${name} not found`); assertEqual(domNode.attributes[propIdx + 1], value); } export function test_custom_attribute_is_reported_in_dom_node() { const btn = new Button(); btn["test_prop"] = "test_value"; btn.ensureDomNode(); const domNode = btn.domNode; assertAttribute(domNode, "test_prop", "test_value"); } export function test_custom__falsy_attribute_is_reported_in_dom_node() { const btn = new Button(); btn["test_prop_null"] = null; btn["test_prop_0"] = 0; btn["test_prop_undefined"] = undefined; btn["test_prop_empty_string"] = ""; btn.ensureDomNode(); const domNode = btn.domNode; assertAttribute(domNode, "test_prop_null", null + ""); assertAttribute(domNode, "test_prop_0", 0 + ""); assertAttribute(domNode, "test_prop_undefined", undefined + ""); assertAttribute(domNode, "test_prop_empty_string", ""); } export function test_property_is_reported_in_dom_node() { const btn = new Button(); btn.text = "test_value"; btn.ensureDomNode(); const domNode = btn.domNode; assertAttribute(domNode, "text", "test_value"); } export function test_childNodeInserted_in_dom_node() { let childNodeInsertedCalled = false; let actualParentId = 0; let expectedParentId = 0; currentInspector.childNodeInserted = (parentId, lastNodeId, node) => { childNodeInsertedCalled = true; actualParentId = parentId; }; const stack = new StackLayout(); stack.ensureDomNode(); expectedParentId = stack._domId; const btn1 = new Button(); btn1.text = "button1"; stack.addChild(btn1); assert(childNodeInsertedCalled, "global inspector childNodeInserted not called."); assertEqual(actualParentId, expectedParentId); } export function test_childNodeInserted_at_index_in_dom_node() { const stack = new StackLayout(); stack.ensureDomNode(); // child index 0 const btn1 = new Button(); btn1.text = "button1"; stack.addChild(btn1); // child index 1 const btn2 = new Button(); btn2.text = "button2"; stack.addChild(btn2); // child index 2 const btn3 = new Button(); btn3.text = "button3"; stack.addChild(btn3); const lbl = new Label(); lbl.text = "label me this"; let called = false; currentInspector.childNodeInserted = (parentId, lastNodeId, node: any) => { assertEqual(lastNodeId, btn1._domId, "Child inserted at index 1's previous sibling does not match."); assertEqual(node.toObject().nodeId, lbl._domId, "Child id doesn't match"); called = true; }; stack.insertChild(lbl, 1); assert(called, "childNodeInserted not called"); } export function test_childNodeRemoved_in_dom_node() { let childNodeRemovedCalled = false; let actualRemovedNodeId = 0; let expectedRemovedNodeId = 0; currentInspector.childNodeRemoved = (parentId, nodeId) => { childNodeRemovedCalled = true; actualRemovedNodeId = nodeId; }; const stack = new StackLayout(); stack.ensureDomNode(); const btn1 = new Button(); btn1.text = "button1"; expectedRemovedNodeId = btn1._domId; stack.addChild(btn1); const btn2 = new Button(); btn2.text = "button2"; stack.addChild(btn2); stack.removeChild(btn1); console.log("btn2: " + btn2); assert(childNodeRemovedCalled, "global inspector childNodeRemoved not called."); assertEqual(actualRemovedNodeId, expectedRemovedNodeId); } export function test_falsy_property_is_reported_in_dom_node() { const btn = new Button(); btn.text = null; btn.ensureDomNode(); const domNode = btn.domNode; assertAttribute(domNode, "text", "null"); btn.text = undefined; domNode.loadAttributes(); assertAttribute(domNode, "text", "undefined"); } export function test_property_change_calls_attributeModified() { const btn = new Button(); btn.ensureDomNode(); const domNode = btn.domNode; let callbackCalled = false; currentInspector.attributeModified = (nodeId: number, attrName: string, attrValue: string) => { assertEqual(nodeId, domNode.nodeId, "nodeId"); assertEqual(attrName, "text", "attrName"); assertEqual(attrValue, "new value", "attrValue"); callbackCalled = true; }; btn.text = "new value"; assert(callbackCalled, "attributeModified not called"); } export function test_property_change_from_native_calls_attributeModified() { const tv = new TextView(); tv.ensureDomNode(); const domNode = tv.domNode; let callbackCalled = false; currentInspector.attributeModified = (nodeId: number, attrName: string, attrValue: string) => { assertEqual(nodeId, domNode.nodeId, "nodeId"); assertEqual(attrName, "text", "attrName"); assertEqual(attrValue, "new value", "attrValue"); callbackCalled = true; }; textProperty.nativeValueChange(tv, "new value"); assert(callbackCalled, "attributeModified not called"); } export function test_property_reset_calls_attributeRemoved() { const btn = new Button(); btn.text = "some value"; btn.ensureDomNode(); const domNode = btn.domNode; let callbackCalled = false; currentInspector.attributeRemoved = (nodeId: number, attrName: string) => { assertEqual(nodeId, domNode.nodeId, "nodeId"); assertEqual(attrName, "text", "attrName"); callbackCalled = true; }; btn.text = unsetValue; assert(callbackCalled, "attributeRemoved not called"); } export function test_coercible_property_change_calls_attributeModified() { const slider = new Slider(); slider.ensureDomNode(); const domNode = slider.domNode; let callbackCalled = false; currentInspector.attributeModified = (nodeId: number, attrName: string, attrValue: string) => { assertEqual(nodeId, domNode.nodeId, "nodeId"); assertEqual(attrName, "value", "attrName"); assertEqual(attrValue, "10", "attrValue"); callbackCalled = true; }; slider.value = 10; assert(callbackCalled, "attributeModified not called"); } export function test_coercible_property_reset_calls_attributeRemoved() { const slider = new Slider(); slider.value = 10; slider.ensureDomNode(); const domNode = slider.domNode; let callbackCalled = false; currentInspector.attributeRemoved = (nodeId: number, attrName: string) => { assertEqual(nodeId, domNode.nodeId, "nodeId"); assertEqual(attrName, "value", "attrName"); callbackCalled = true; }; slider.value = unsetValue; assert(callbackCalled, "attributeRemoved not called"); } export function test_inspector_ui_setAttributeAsText_set_existing_property() { // Arrange const label = new Label(); label.text = "original label"; const expectedValue = "updated label"; label.ensureDomNode(); // Act // simulate call from the inspector UI currentInspector.setAttributeAsText(label.domNode.nodeId, "text='" + expectedValue + "'", "text"); // Assert assertEqual(label.text, expectedValue); } export function test_inspector_ui_setAttributeAsText_remove_existing_property() { // Arrange const label = new Label(); label.text = "original label"; label.ensureDomNode(); // Act // simulate call from the inspector UI currentInspector.setAttributeAsText(label.domNode.nodeId, "" /* empty value - removes the attribute */, "text"); // Assert assertEqual(label.text, ""); } export function test_inspector_ui_setAttributeAsText_set_new_property() { // Arrange const label = new Label(); const expectedValue = "custom"; label.ensureDomNode(); // Act // simulate call from the inspector UI currentInspector.setAttributeAsText(label.domNode.nodeId, "data-attr='" + expectedValue + "'" /* data-attr="custom" */, " " /* empty attr name initially */); // Assert assertEqual(label["data-attr"], expectedValue); } export function test_inspector_ui_removeNode() { let childNodeRemovedCalled = false; let stack = new StackLayout(); let label = new Label(); stack.addChild(label); stack.ensureDomNode(); label.ensureDomNode(); let expectedParentId = stack.domNode.nodeId; let expectedNodeId = label.domNode.nodeId; currentInspector.childNodeRemoved = (parentId, nodeId) => { childNodeRemovedCalled = true; assertEqual(parentId, expectedParentId); assertEqual(nodeId, expectedNodeId); }; currentInspector.removeNode(label.domNode.nodeId); assert(childNodeRemovedCalled, "childNodeRemoved callback not called."); }