Misko Hevery
Igor Minar
parent
89bf06c28c
commit
295e0f65a1
|
|
@ -1,202 +0,0 @@
|
||||||
/**
|
|
||||||
* @license
|
|
||||||
* Copyright Google Inc. All Rights Reserved.
|
|
||||||
*
|
|
||||||
* Use of this source code is governed by an MIT-style license that can be
|
|
||||||
* found in the LICENSE file at https://angular.io/license
|
|
||||||
*/
|
|
||||||
|
|
||||||
import {NgForOf, NgForOfContext} from '@angular/common';
|
|
||||||
import {Component, ContentChild, Directive, EventEmitter, Injectable, Input, NgModule, OnDestroy, Optional, Output, Pipe, PipeTransform, QueryList, SimpleChanges, TemplateRef, Type, ViewChild, ViewContainerRef, defineInjectable, defineInjector} from '@angular/core';
|
|
||||||
import {withBody} from '@angular/private/testing';
|
|
||||||
|
|
||||||
import * as r3 from '../../../src/render3/index';
|
|
||||||
|
|
||||||
/// See: `normative.md`
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
interface ToDo {
|
|
||||||
text: string;
|
|
||||||
done: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
type $RenderFlags$ = r3.RenderFlags;
|
|
||||||
|
|
||||||
@Injectable()
|
|
||||||
class AppState {
|
|
||||||
todos: ToDo[] = [
|
|
||||||
{text: 'Demonstrate Components', done: false},
|
|
||||||
{text: 'Demonstrate Structural Directives', done: false},
|
|
||||||
{text: 'Demonstrate NgModules', done: false},
|
|
||||||
{text: 'Demonstrate zoneless changed detection', done: false},
|
|
||||||
{text: 'Demonstrate internationalization', done: false},
|
|
||||||
];
|
|
||||||
|
|
||||||
// NORMATIVE
|
|
||||||
static ngInjectableDef = defineInjectable({factory: () => new AppState()});
|
|
||||||
// /NORMATIVE
|
|
||||||
}
|
|
||||||
|
|
||||||
const ToDoAppComponent_NgForOf_Template = function ToDoAppComponent_NgForOf_Template(
|
|
||||||
rf: $RenderFlags$, ctx1: NgForOfContext<ToDo>) {
|
|
||||||
if (rf & 1) {
|
|
||||||
const $comp$ = r3.nextContext();
|
|
||||||
r3.elementStart(0, 'todo');
|
|
||||||
r3.listener('archive', $comp$.onArchive.bind($comp$));
|
|
||||||
r3.elementEnd();
|
|
||||||
}
|
|
||||||
if (rf & 2) {
|
|
||||||
r3.elementProperty(0, 'todo', r3.bind(ctx1.$implicit));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'todo-app',
|
|
||||||
template: `
|
|
||||||
<h1>ToDo Application</h1>
|
|
||||||
<div>
|
|
||||||
<todo *ngFor="let todo of appState.todos" [todo]="todo" (archive)="onArchive($event)"></todo>
|
|
||||||
</div>
|
|
||||||
<span>count: {{appState.todos.length}}.</span>
|
|
||||||
`
|
|
||||||
})
|
|
||||||
class ToDoAppComponent {
|
|
||||||
constructor(public appState: AppState) {}
|
|
||||||
|
|
||||||
onArchive(item: ToDo) {
|
|
||||||
const todos = this.appState.todos;
|
|
||||||
todos.splice(todos.indexOf(item));
|
|
||||||
r3.markDirty(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
// NORMATIVE
|
|
||||||
static ngComponentDef = r3.defineComponent({
|
|
||||||
type: ToDoAppComponent,
|
|
||||||
selectors: [['todo-app']],
|
|
||||||
factory: function ToDoAppComponent_Factory(t) {
|
|
||||||
return new (t || ToDoAppComponent)(r3.directiveInject(AppState));
|
|
||||||
},
|
|
||||||
consts: 6,
|
|
||||||
vars: 1,
|
|
||||||
template: function ToDoAppComponent_Template(rf: $RenderFlags$, ctx: ToDoAppComponent) {
|
|
||||||
if (rf & 1) {
|
|
||||||
r3.elementStart(0, 'h1');
|
|
||||||
r3.text(1, 'ToDo Application');
|
|
||||||
r3.elementEnd();
|
|
||||||
r3.elementStart(2, 'div');
|
|
||||||
r3.template(3, ToDoAppComponent_NgForOf_Template, 1, 1, '', ['ngForOf', '']);
|
|
||||||
r3.elementEnd();
|
|
||||||
r3.elementStart(4, 'span');
|
|
||||||
r3.text(5);
|
|
||||||
r3.elementEnd();
|
|
||||||
}
|
|
||||||
if (rf & 2) {
|
|
||||||
r3.textBinding(5, r3.interpolation1('count: ', ctx.appState.todos.length, ''));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
// /NORMATIVE
|
|
||||||
}
|
|
||||||
|
|
||||||
// NON-NORMATIVE
|
|
||||||
(ToDoAppComponent.ngComponentDef as r3.ComponentDef<any>).directiveDefs = () =>
|
|
||||||
[ToDoItemComponent.ngComponentDef,
|
|
||||||
(NgForOf as unknown as r3.DirectiveType<NgForOf<any>>).ngDirectiveDef];
|
|
||||||
// /NON-NORMATIVE
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'todo',
|
|
||||||
template: `
|
|
||||||
<div [class.done]="todo.done">
|
|
||||||
<input type="checkbox" [value]="todo.done" (click)="onCheckboxClick()">
|
|
||||||
<span>{{todo.text}}</span>
|
|
||||||
<button (click)="onArchiveClick()">archive</button>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
})
|
|
||||||
class ToDoItemComponent {
|
|
||||||
static DEFAULT_TODO: ToDo = {text: '', done: false};
|
|
||||||
|
|
||||||
@Input()
|
|
||||||
todo: ToDo = ToDoItemComponent.DEFAULT_TODO;
|
|
||||||
|
|
||||||
@Output()
|
|
||||||
archive = new EventEmitter();
|
|
||||||
|
|
||||||
onCheckboxClick() {
|
|
||||||
this.todo.done = !this.todo.done;
|
|
||||||
r3.markDirty(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
onArchiveClick() { this.archive.emit(this.todo); }
|
|
||||||
|
|
||||||
// NORMATIVE
|
|
||||||
static ngComponentDef = r3.defineComponent({
|
|
||||||
type: ToDoItemComponent,
|
|
||||||
selectors: [['todo']],
|
|
||||||
factory: function ToDoItemComponent_Factory(t) { return new (t || ToDoItemComponent)(); },
|
|
||||||
consts: 6,
|
|
||||||
vars: 2,
|
|
||||||
template: function ToDoItemComponent_Template(rf: $RenderFlags$, ctx: ToDoItemComponent) {
|
|
||||||
if (rf & 1) {
|
|
||||||
r3.elementStart(0, 'div');
|
|
||||||
r3.elementStart(1, 'input', e1_attrs);
|
|
||||||
r3.listener('click', ctx.onCheckboxClick.bind(ctx));
|
|
||||||
r3.elementEnd();
|
|
||||||
r3.elementStart(2, 'span');
|
|
||||||
r3.text(3);
|
|
||||||
r3.elementEnd();
|
|
||||||
r3.elementStart(4, 'button');
|
|
||||||
r3.listener('click', ctx.onArchiveClick.bind(ctx));
|
|
||||||
r3.text(5, 'archive');
|
|
||||||
r3.elementEnd();
|
|
||||||
r3.elementEnd();
|
|
||||||
}
|
|
||||||
if (rf & 2) {
|
|
||||||
r3.elementProperty(1, 'value', r3.bind(ctx.todo.done));
|
|
||||||
r3.textBinding(3, r3.bind(ctx.todo.text));
|
|
||||||
}
|
|
||||||
},
|
|
||||||
inputs: {todo: 'todo'},
|
|
||||||
});
|
|
||||||
// /NORMATIVE
|
|
||||||
}
|
|
||||||
// NORMATIVE
|
|
||||||
const e1_attrs = ['type', 'checkbox'];
|
|
||||||
// /NORMATIVE
|
|
||||||
|
|
||||||
|
|
||||||
@NgModule({
|
|
||||||
declarations: [ToDoAppComponent, ToDoItemComponent],
|
|
||||||
providers: [AppState],
|
|
||||||
})
|
|
||||||
class ToDoAppModule {
|
|
||||||
// NORMATIVE
|
|
||||||
static ngInjectorDef = defineInjector({
|
|
||||||
factory: function ToDoAppModule_Factory() { return new ToDoAppModule(); },
|
|
||||||
providers: [AppState],
|
|
||||||
});
|
|
||||||
// /NORMATIVE
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
describe('small_app', () => {
|
|
||||||
xit('should render',
|
|
||||||
() => withBody('<todo-app></todo-app>', async() => {
|
|
||||||
// TODO: Implement this method once all of the pieces of this application can execute.
|
|
||||||
// TODO: add i18n example by translating to french.
|
|
||||||
const todoApp = r3.renderComponent(ToDoAppComponent);
|
|
||||||
await r3.whenRendered(todoApp);
|
|
||||||
expect(r3.getRenderedText(todoApp)).toEqual('...');
|
|
||||||
const firstCheckBox =
|
|
||||||
r3.getHostElement(todoApp).querySelector('input[type=checkbox]') as HTMLElement;
|
|
||||||
firstCheckBox.click();
|
|
||||||
await r3.whenRendered(todoApp);
|
|
||||||
expect(r3.getRenderedText(todoApp)).toEqual('...');
|
|
||||||
const firstArchive = r3.getHostElement(todoApp).querySelector('button') as HTMLElement;
|
|
||||||
firstArchive.click;
|
|
||||||
await r3.whenRendered(todoApp);
|
|
||||||
expect(r3.getRenderedText(todoApp)).toEqual('...');
|
|
||||||
}));
|
|
||||||
});
|
|
||||||
Loading…
Reference in New Issue