Merge pull request NativeScript#194 from NativeScript/hdeshev/third-party-code-snippets

hdeshev · hdeshev · commit e38cb84832b9 · 2016-04-25T14:32:15.000+03:00
Third party code snippets.
diff --git a/tests/app/tests/third-party-view.ts b/tests/app/tests/third-party-view.ts
@@ -0,0 +1,7 @@
+import {ContentView} from "ui/content-view";
+
+// >> third-party-simple-view
+export class SimpleTag extends ContentView {
+    //...
+}
+// << third-party-simple-view
diff --git a/tests/app/tests/third-party.ts b/tests/app/tests/third-party.ts
@@ -0,0 +1,114 @@
+//make sure you import mocha-config before angular2/core
+import {assert} from "./test-config";
+import {Component, Directive, ElementRef, ViewContainerRef, TemplateRef, Inject} from "angular2/core";
+import {View} from "ui/core/view";
+import {Label} from "ui/label";
+import {TestApp} from "./test-app";
+
+// >> third-party-simple-view-registration
+import {registerElement} from "nativescript-angular/element-registry";
+registerElement("third-party-view", () => require("./third-party-view").SimpleTag);
+// << third-party-simple-view-registration
+
+// >> third-party-simple-view-container
+@Component({
+    selector: 'simple-view-container',
+    template: `
+        <third-party-view prop1="value1"></third-party-view>
+    `
+})
+export class SimpleViewContainer {
+}
+// << third-party-simple-view-container
+//
+// >> third-party-document-form-component
+@Component({
+    selector: 'document-form',
+    template: ''
+})
+export class DocumentFormComponent {
+    // >> (hide)
+    public static titleLabel: Label;
+    // << (hide)
+
+    constructor() {
+    }
+
+    public setTitleView(view: View) {
+        // pass view parameter to native element...
+        // >> (hide)
+        DocumentFormComponent.titleLabel = <Label>view;
+        // << (hide)
+    }
+}
+// << third-party-document-form-component
+
+// >> third-party-template-directive
+@Directive({
+    selector: '[documentTitle]'
+})
+export class DocumentTitleDirective {
+    public static titleLabel: Label;
+    constructor(
+        private ownerForm: DocumentFormComponent,
+        private viewContainer: ViewContainerRef,
+        private template: TemplateRef
+    ) {
+    }
+
+    ngOnInit() {
+        const viewRef = this.viewContainer.createEmbeddedView(this.template);
+        //filter out whitespace nodes
+        const titleViews = viewRef.rootNodes.filter((node) =>
+                            node && node.nodeName !== '#text')
+
+        if (titleViews.length > 0) {
+            const titleView = titleViews[0];
+            this.ownerForm.setTitleView(titleView);
+        }
+    }
+}
+// << third-party-template-directive
+
+// >> third-party-document-form-container
+@Component({
+    selector: 'document-form-container',
+    directives: [DocumentFormComponent, DocumentTitleDirective],
+    template: `
+    <document-form src="document1.pdf">
+        <Label *documentTitle text="Document1"></Label>
+    </document-form>
+    `
+})
+export class DocumentFormContainer {
+}
+// << third-party-document-form-container
+
+describe('Third party component snippets', () => {
+    let testApp: TestApp = null;
+
+    before(() => {
+        registerElement("document-form", () => require("ui/layouts/stack-layout").StackLayout);
+
+        return TestApp.create().then((app) => {
+            testApp = app;
+        })
+    });
+
+    after(() => {
+        testApp.dispose();
+    });
+
+    it("instantiates SimpleView from markup", () => {
+        return testApp.loadComponent(SimpleViewContainer).then((componentRef) => {
+            const componentInstance = componentRef.instance;
+            assert.instanceOf(componentInstance, SimpleViewContainer);
+        });
+    });
+
+    it("renders DocumentForm with title template", () => {
+        return testApp.loadComponent(DocumentFormContainer).then((componentRef) => {
+            assert.equal("Document1", DocumentFormComponent.titleLabel.text);
+        });
+    });
+})
