it('should detect () syntax', () => {
var results = process(el('<div (click)="b()"></div>'));
expect(MapWrapper.get(results[0].eventBindings, 'click').source).toEqual('b()');
// "(click[])" is not an expected syntax and is only used to validate the regexp
results = process(el('<div (click[])="b()"></div>'));
expect(MapWrapper.get(results[0].eventBindings, 'click[]').source).toEqual('b()');
});
it('should return different styles given different components', () => {
var styleElement = el('<style>.foo {} :host {}</style>');
strategy.processStyleElement('someComponent1', 'http://base', styleElement);
var styleElement2 = el('<style>.foo {} :host {}</style>');
strategy.processStyleElement('someComponent2', 'http://base', styleElement2);
expect(DOM.getText(styleElement)).not.toEqual(DOM.getText(styleElement2));
});
it('should return the same style given the same component', () => {
var styleElement = el('<style>.foo {} :host {}</style>');
strategy.processStyleElement('someComponent', 'http://base', styleElement);
var styleElement2 = el('<style>.foo {} :host {}</style>');
strategy.processStyleElement('someComponent', 'http://base', styleElement2);
expect(DOM.getText(styleElement)).toEqual(DOM.getText(styleElement2));
});
it('should attach the view nodes as child of the host element', () => {
var host = el('<div><span>original content</span></div>');
var originalChild = DOM.childNodes(host)[0];
var nodes = el('<div>view</div>');
var view = new DomView(null, [nodes], [], [], []);
strategy.attachTemplate(host, view);
expect(DOM.childNodes(host)[0]).toBe(originalChild);
expect(DOM.childNodes(host)[1]).toBe(nodes);
});
function createView() {
var proto = new RenderProtoView({element: el('<div></div>'), isRootView: false, elementBinders: []});
var rootNodes = [el('<div></div>')];
var boundTextNodes = [];
var boundElements = [el('<div></div>')];
var viewContainers = [];
var contentTags = [];
var eventManager = null;
return new RenderView(proto, rootNodes,
boundTextNodes, boundElements, viewContainers, contentTags, eventManager);
}
it('should insert the same style only once in the style host', () => {
var styleEls = [
el('<style>/*css1*/</style>'),
el('<style>/*css2*/</style>'),
el('<style>/*css1*/</style>')
];
ListWrapper.forEach(styleEls, (styleEl) => {
strategy.processStyleElement('someComponent', 'http://base', styleEl);
});
expect(styleHost).toHaveText("/*css1*//*css2*/");
});
it('should rewrite style urls', () => {
var styleElement = el('<style>.foo {background-image: url("img.jpg");}</style>');
strategy.processStyleElement('someComponent', 'http://base', styleElement);
expect(styleElement).toHaveText(".foo {" +
"background-image: url('http://base/img.jpg');" +
"}");
});
beforeEach(() => {
var urlResolver = new UrlResolver();
var styleUrlResolver = new StyleUrlResolver(urlResolver);
styleHost = el('<div></div>');
strategy = new EmulatedUnscopedShadowDomStrategy(styleUrlResolver, styleHost);
resetShadowDomCache();
});
it('should store working property setters', () => {
var element = el('<input bind-value="1">');
var results = process(element);
var setter = MapWrapper.get(results[0].propertySetters, 'value');
setter(element, 'abc');
expect(element.value).toEqual('abc');
});
it('should move the style element to the style host', () => {
var compileElement = el('<div><style>.one {}</style></div>');
var styleElement = DOM.firstChild(compileElement);
strategy.processStyleElement('someComponent', 'http://base', styleElement);
expect(compileElement).toHaveText('');
expect(styleHost).toHaveText('.one {}');
});
it('should bind directive properties from attribute values', () => {
var results = process(
el('<div some-decor-props el-prop="someValue"></div>')
);
var directiveBinding = results[0].directives[0];
var simpleProp = MapWrapper.get(directiveBinding.propertyBindings, 'dirProp');
expect(simpleProp.source).toEqual('someValue');
});
it('should bind directive events', () => {
var results = process(
el('<div some-decor-events></div>')
);
var directiveBinding = results[0].directives[0];
expect(MapWrapper.get(directiveBinding.eventBindings, 'click').source)
.toEqual('doIt()');
});
it('should store working property setters', () => {
var element = el('<input some-decor-props>');
var results = process(element);
var directiveBinding = results[0].directives[0];
var setter = MapWrapper.get(directiveBinding.propertySetters, 'value');
setter(element, 'abc');
expect(element.value).toEqual('abc');
});
it('should select by attr name only once if the value is from the DOM', () => {
matcher.addSelectables(s1 = CssSelector.parse('[some-decor]'), 1);
var elementSelector = new CssSelector();
var element = el('<div attr></div>');
var empty = DOM.getAttribute(element, 'attr');
elementSelector.addAttribute('some-decor', empty);
matcher.match(elementSelector, selectableCollector);
expect(matched).toEqual([s1[0],1]);
});
it('should bind directive properties from bound properties', () => {
var results = process(
el('<div some-decor-props></div>'),
{
'elProp': parser.parseBinding('someExpr', '')
}
);
var directiveBinding = results[0].directives[0];
expect(MapWrapper.get(directiveBinding.propertyBindings, 'dirProp').source)
.toEqual('someExpr');
});
it('should inline @import rules', inject([AsyncTestCompleter], (async) => {
xhr.reply('http://base/one.css', '.one {}');
var styleElement = el('<style>@import "one.css";</style>');
var stylePromise = strategy.processStyleElement('someComponent', 'http://base', styleElement);
expect(stylePromise).toBePromise();
expect(styleElement).toHaveText('');
stylePromise.then((_) => {
expect(styleElement).toHaveText('.one[_ngcontent-0] {\n\n}');
async.done();
});
}));
it('should bind directive properties with pipes', () => {
var results = process(
el('<div some-decor-props></div>'),
{
'elProp': parser.parseBinding('someExpr', '')
}
);
var directiveBinding = results[0].directives[0];
var pipedProp = MapWrapper.get(directiveBinding.propertyBindings, 'doubleProp');
var simpleProp = MapWrapper.get(directiveBinding.propertyBindings, 'dirProp');
expect(pipedProp.ast.name).toEqual('double');
expect(pipedProp.ast.exp).toEqual(simpleProp.ast);
expect(simpleProp.source).toEqual('someExpr');
});
it('should parse event handlers using on- syntax as actions', () => {
var results = process(el('<div on-click="foo=bar"></div>'));
expect(MapWrapper.get(results[0].eventBindings, 'click').source).toEqual('foo=bar');
});
it('should detect variable bindings only if an attribute name starts with #', () => {
var results = process(el('<p b#george></p>'));
expect(results[0]).toEqual(null);
});
it('should store a variable binding with an implicit value using shorthand syntax', () => {
var results = process(el('<p #george></p>'));
expect(MapWrapper.get(results[0].variableBindings, '\$implicit')).toEqual('george');
});
it('should store variable binding for a non-template element using shorthand syntax', () => {
var results = process(el('<p #george="washington"></p>'));
expect(MapWrapper.get(results[0].variableBindings, 'washington')).toEqual('george');
});
it('should store variable binding for a non-template element using shorthand syntax on the nestedProtoView', () => {
var results = process(el('<template #george="washington"></template>'), true);
expect(results[0].variableBindings).toEqual(EMPTY_MAP);
expect(MapWrapper.get(results[0].nestedProtoView.variableBindings, 'washington')).toEqual('george');
});
it('should detect var- syntax', () => {
var results = process(el('<template var-a="b"></template>'));
expect(MapWrapper.get(results[0].variableBindings, 'b')).toEqual('a');
});
it('should detect interpolation syntax', () => {
var results = process(el('<div a="{{b}}"></div>'));
expect(MapWrapper.get(results[0].propertyBindings, 'a').source).toEqual('{{b}}');
});
it('should detect bind- syntax only if an attribute name starts with bind', () => {
expect(process(el('<div _bind-a="b"></div>'))[0]).toEqual(null);
});
it('should detect bind- syntax', () => {
var results = process(el('<div bind-a="b"></div>'));
expect(MapWrapper.get(results[0].propertyBindings, 'a').source).toEqual('b');
});
it('should detect [] syntax only if an attribute name starts and ends with []', () => {
expect(process(el('<div z[a]="b"></div>'))[0]).toBe(null);
expect(process(el('<div [a]v="b"></div>'))[0]).toBe(null);
});
new MockStep((parent, current, control) => {
if (hasNestedProtoView) {
current.bindElement().bindNestedProtoView(el('<template></template>'));
}
}),
it('should store property setters as camel case', () => {
var element = el('<div bind-some-prop="1">');
var results = process(element);
expect(MapWrapper.get(results[0].propertySetters, 'someProp')).toBeTruthy();
});
it('should store variables as temporal attributes', () => {
var results = createPipeline().process(el('<div var-a="b" #c="d"></div>'));
expect(MapWrapper.get(results[0].attrs(), 'a')).toEqual('b');
expect(MapWrapper.get(results[0].attrs(), 'c')).toEqual('d');
});