test(e2e): fix error setting style property of DOM element

Fixes the following error in e2e tests: "Cannot set property style of
\#<HTMLElement> which has only a getter".

Closes #2874
This commit is contained in:
Alfonso Presa 2015-07-04 16:29:30 +02:00 committed by Pawel Kozlowski
parent 81abc39929
commit cd532b00d4
3 changed files with 36 additions and 47 deletions

View File

@ -1,31 +1,31 @@
import {List, ListWrapper, Map, MapWrapper} from 'angular2/src/facade/collection';
import {List, ListWrapper, Map} from 'angular2/src/facade/collection';
import {Company, Opportunity, Offering, Account, CustomDate, STATUS_LIST} from './common';
import {NgFor} from 'angular2/directives';
import {Component, Directive, View} from 'angular2/angular2';
export class HasStyle {
style: Map<any, any>;
cellWidth: int;
constructor() { this.style = new Map(); }
constructor() {}
set width(w) { this.style.set('width', w); }
set width(w: int) { this.cellWidth = w; }
}
@Component({selector: 'company-name', properties: ['width: cell-width', 'company']})
@View({directives: [], template: `<div [style]="style">{{company.name}}</div>`})
@View({directives: [], template: `<div [style.width.px]="cellWidth">{{company.name}}</div>`})
export class CompanyNameComponent extends HasStyle {
company: Company;
}
@Component({selector: 'opportunity-name', properties: ['width: cell-width', 'opportunity']})
@View({directives: [], template: `<div [style]="style">{{opportunity.name}}</div>`})
@View({directives: [], template: `<div [style.width.px]="cellWidth">{{opportunity.name}}</div>`})
export class OpportunityNameComponent extends HasStyle {
opportunity: Opportunity;
}
@Component({selector: 'offering-name', properties: ['width: cell-width', 'offering']})
@View({directives: [], template: `<div [style]="style">{{offering.name}}</div>`})
@View({directives: [], template: `<div [style.width.px]="cellWidth">{{offering.name}}</div>`})
export class OfferingNameComponent extends HasStyle {
offering: Offering;
}
@ -33,7 +33,7 @@ export class OfferingNameComponent extends HasStyle {
export class Stage {
name: string;
isDisabled: boolean;
style: Map<string, string>;
backgroundColor: string;
apply: Function;
}
@ -41,10 +41,10 @@ export class Stage {
@View({
directives: [NgFor],
template: `
<div [style]="style">
<div [style.width.px]="cellWidth">
<button template="ng-for #stage of stages"
[disabled]="stage.isDisabled"
[style]="stage.style"
[style.background-color]="stage.backgroundColor"
on-click="setStage(stage)">
{{stage.name}}
</button>
@ -73,9 +73,7 @@ export class StageButtonsComponent extends HasStyle {
var stage = new Stage();
stage.name = status;
stage.isDisabled = disabled;
var stageStyle = new Map<string, string>();
stageStyle.set('background-color', disabled ? '#DDD' : isCurrent ? '#DDF' : '#FDD');
stage.style = stageStyle;
stage.backgroundColor = disabled ? '#DDD' : isCurrent ? '#DDF' : '#FDD';
if (isCurrent) {
disabled = false;
}
@ -88,7 +86,7 @@ export class StageButtonsComponent extends HasStyle {
@View({
directives: [],
template: `
<div [style]="style">
<div [style.width.px]="cellWidth">
<a href="/account/{{account.accountId}}">
{{account.accountId}}
</a>
@ -99,7 +97,7 @@ export class AccountCellComponent extends HasStyle {
}
@Component({selector: 'formatted-cell', properties: ['width: cell-width', 'value']})
@View({directives: [], template: `<div [style]="style">{{formattedValue}}</div>`})
@View({directives: [], template: `<div [style.width.px]="cellWidth">{{formattedValue}}</div>`})
export class FormattedCellComponent extends HasStyle {
formattedValue: string;

View File

@ -1,4 +1,4 @@
import {ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
import {ListWrapper} from 'angular2/src/facade/collection';
import {Math} from 'angular2/src/facade/math';
import {Component, Directive, View} from 'angular2/angular2';
@ -24,7 +24,8 @@ import {NgFor} from 'angular2/directives';
template: `
<div>
<div id="scrollDiv"
[style]="scrollDivStyle"
[style.height.px]="viewPortHeight"
style="width: 1000px; border: 1px solid #000; overflow: scroll"
on-scroll="onScroll($event)">
<div id="padding"></div>
<div id="inner">
@ -40,19 +41,14 @@ export class ScrollAreaComponent {
_fullList: List<Offering>;
visibleItems: List<Offering>;
scrollDivStyle;
viewPortHeight: number;
paddingDiv;
innerDiv;
constructor() {
this._fullList = generateOfferings(ITEMS);
this.visibleItems = [];
this.scrollDivStyle = MapWrapper.createFromPairs([
['height', `${VIEW_PORT_HEIGHT}px`],
['width', '1000px'],
['border', '1px solid #000'],
['overflow', 'scroll']
]);
this.viewPortHeight = VIEW_PORT_HEIGHT;
this.onScroll(null);
}

View File

@ -1,4 +1,3 @@
import {ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
import {
CompanyNameComponent,
OpportunityNameComponent,
@ -37,7 +36,10 @@ import {
FormattedCellComponent
],
template: `
<div class="row" [style]="itemStyle">
<div class="row"
[style.height.px]="itemHeight"
[style.line-height.px]="itemHeight"
style="font-size: 18px; display: flex; justify-content: space-between;">
<company-name [company]="offering.company"
[cell-width]="companyNameWidth">
</company-name>
@ -75,27 +77,20 @@ import {
})
export class ScrollItemComponent {
offering: Offering;
itemStyle;
constructor() {
this.itemStyle = MapWrapper.createFromPairs([
['height', `${ITEM_HEIGHT}px`],
['line-height', `${ITEM_HEIGHT}px`],
['font-size', '18px'],
['display', 'flex'],
['justify-content', 'space-between']
]);
}
itemHeight: number;
get companyNameWidth() { return `${COMPANY_NAME_WIDTH}px`; }
get opportunityNameWidth() { return `${OPPORTUNITY_NAME_WIDTH}px`; }
get offeringNameWidth() { return `${OFFERING_NAME_WIDTH}px`; }
get accountCellWidth() { return `${ACCOUNT_CELL_WIDTH}px`; }
get basePointsWidth() { return `${BASE_POINTS_WIDTH}px`; }
get kickerPointsWidth() { return `${KICKER_POINTS_WIDTH}px`; }
get stageButtonsWidth() { return `${STAGE_BUTTONS_WIDTH}px`; }
get bundlesWidth() { return `${BUNDLES_WIDTH}px`; }
get dueDateWidth() { return `${DUE_DATE_WIDTH}px`; }
get endDateWidth() { return `${END_DATE_WIDTH}px`; }
get aatStatusWidth() { return `${AAT_STATUS_WIDTH}px`; }
constructor() { this.itemHeight = ITEM_HEIGHT; }
get companyNameWidth() { return COMPANY_NAME_WIDTH; }
get opportunityNameWidth() { return OPPORTUNITY_NAME_WIDTH; }
get offeringNameWidth() { return OFFERING_NAME_WIDTH; }
get accountCellWidth() { return ACCOUNT_CELL_WIDTH; }
get basePointsWidth() { return BASE_POINTS_WIDTH; }
get kickerPointsWidth() { return KICKER_POINTS_WIDTH; }
get stageButtonsWidth() { return STAGE_BUTTONS_WIDTH; }
get bundlesWidth() { return BUNDLES_WIDTH; }
get dueDateWidth() { return DUE_DATE_WIDTH; }
get endDateWidth() { return END_DATE_WIDTH; }
get aatStatusWidth() { return AAT_STATUS_WIDTH; }
}