Skip to content

Commit

Permalink
fix(tests): Error setting style property of DOM element
Browse files Browse the repository at this point in the history 
Fixes the following error in e2e tests: "Cannot set property style of
\#<HTMLElement> which has only a getter".
  • Loading branch information
@alfonso-presa
alfonso-presa committed Jul 13, 2015
1 parent f5f85bb commit e4a479f
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 43 deletions.
28 changes: 13 additions & 15 deletions modules/benchmarks/src/naive_infinite_scroll/cells.ts
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,50 @@
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;
}

export class Stage {
name: string;
isDisabled: boolean;
style: Map<string, string>;
backgroundColor: string;
apply: Function;
}

@Component({selector: 'stage-buttons', properties: ['width: cell-width', 'offering']})
@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>
Expand Down Expand Up @@ -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;
}
Expand All @@ -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>
Expand All @@ -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;

Expand Down
19 changes: 11 additions & 8 deletions modules/benchmarks/src/naive_infinite_scroll/scroll_area.ts
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -24,7 +24,10 @@ import {NgFor} from 'angular2/directives';
template: `
<div>
<div id="scrollDiv"
[style]="scrollDivStyle"
[style.height.px]="scrollDivStyle.height"
[style.width.px]="scrollDivStyle.width"
[style.border]="scrollDivStyle.border"
[style.overflow]="scrollDivStyle.overflow"
on-scroll="onScroll($event)">
<div id="padding"></div>
<div id="inner">
Expand All @@ -47,12 +50,12 @@ export class ScrollAreaComponent {
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.scrollDivStyle = {
'height': VIEW_PORT_HEIGHT,
'width': 1000,
'border': '1px solid #000',
'overflow': 'scroll'
};
this.onScroll(null);
}

Expand Down
44 changes: 24 additions & 20 deletions modules/benchmarks/src/naive_infinite_scroll/scroll_item.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import {ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
import {
CompanyNameComponent,
OpportunityNameComponent,
Expand Down Expand Up @@ -37,7 +36,12 @@ import {
FormattedCellComponent
],
template: `
<div class="row" [style]="itemStyle">
<div class="row"
[style.height.px]="itemStyle.height"
[style.line-height.px]="itemStyle.line-height"
[style.font-size.px]="itemStyle.font-size"
[style.display]="itemStyle.display"
[style.justify-content]="itemStyle.justify-content">
<company-name [company]="offering.company"
[cell-width]="companyNameWidth">
</company-name>
Expand Down Expand Up @@ -78,24 +82,24 @@ export class ScrollItemComponent {
itemStyle;

constructor() {
this.itemStyle = MapWrapper.createFromPairs([
['height', `${ITEM_HEIGHT}px`],
['line-height', `${ITEM_HEIGHT}px`],
['font-size', '18px'],
['display', 'flex'],
['justify-content', 'space-between']
]);
this.itemStyle = {
'height': ITEM_HEIGHT,
'line-height': ITEM_HEIGHT,
'font-size': 18,
'display': 'flex',
'justify-content': 'space-between'
};
}

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`; }
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; }
}

0 comments on commit e4a479f

Please sign in to comment.