From cd532b00d4b35afc2aa2500bb9594ba74c5a86cc Mon Sep 17 00:00:00 2001 From: Alfonso Presa Date: Sat, 4 Jul 2015 16:29:30 +0200 Subject: [PATCH] test(e2e): fix error setting style property of DOM element Fixes the following error in e2e tests: "Cannot set property style of \# which has only a getter". Closes #2874 --- .../src/naive_infinite_scroll/cells.ts | 28 ++++++------- .../src/naive_infinite_scroll/scroll_area.ts | 14 +++---- .../src/naive_infinite_scroll/scroll_item.ts | 41 ++++++++----------- 3 files changed, 36 insertions(+), 47 deletions(-) diff --git a/modules/benchmarks/src/naive_infinite_scroll/cells.ts b/modules/benchmarks/src/naive_infinite_scroll/cells.ts index 57a605ed289a2..af0097bd12569 100644 --- a/modules/benchmarks/src/naive_infinite_scroll/cells.ts +++ b/modules/benchmarks/src/naive_infinite_scroll/cells.ts @@ -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; + 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: `
{{company.name}}
`}) +@View({directives: [], template: `
{{company.name}}
`}) export class CompanyNameComponent extends HasStyle { company: Company; } @Component({selector: 'opportunity-name', properties: ['width: cell-width', 'opportunity']}) -@View({directives: [], template: `
{{opportunity.name}}
`}) +@View({directives: [], template: `
{{opportunity.name}}
`}) export class OpportunityNameComponent extends HasStyle { opportunity: Opportunity; } @Component({selector: 'offering-name', properties: ['width: cell-width', 'offering']}) -@View({directives: [], template: `
{{offering.name}}
`}) +@View({directives: [], template: `
{{offering.name}}
`}) 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; + backgroundColor: string; apply: Function; } @@ -41,10 +41,10 @@ export class Stage { @View({ directives: [NgFor], template: ` -
+
@@ -73,9 +73,7 @@ export class StageButtonsComponent extends HasStyle { var stage = new Stage(); stage.name = status; stage.isDisabled = disabled; - var stageStyle = new Map(); - 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: ` -
+
{{account.accountId}} @@ -99,7 +97,7 @@ export class AccountCellComponent extends HasStyle { } @Component({selector: 'formatted-cell', properties: ['width: cell-width', 'value']}) -@View({directives: [], template: `
{{formattedValue}}
`}) +@View({directives: [], template: `
{{formattedValue}}
`}) export class FormattedCellComponent extends HasStyle { formattedValue: string; diff --git a/modules/benchmarks/src/naive_infinite_scroll/scroll_area.ts b/modules/benchmarks/src/naive_infinite_scroll/scroll_area.ts index 92ba8a5205246..ed85247c5e8fa 100644 --- a/modules/benchmarks/src/naive_infinite_scroll/scroll_area.ts +++ b/modules/benchmarks/src/naive_infinite_scroll/scroll_area.ts @@ -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: `
@@ -40,19 +41,14 @@ export class ScrollAreaComponent { _fullList: List; visibleItems: List; - 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); } diff --git a/modules/benchmarks/src/naive_infinite_scroll/scroll_item.ts b/modules/benchmarks/src/naive_infinite_scroll/scroll_item.ts index 2615bc03e64c4..435d7f9e7ec70 100644 --- a/modules/benchmarks/src/naive_infinite_scroll/scroll_item.ts +++ b/modules/benchmarks/src/naive_infinite_scroll/scroll_item.ts @@ -1,4 +1,3 @@ -import {ListWrapper, MapWrapper} from 'angular2/src/facade/collection'; import { CompanyNameComponent, OpportunityNameComponent, @@ -37,7 +36,10 @@ import { FormattedCellComponent ], template: ` -
+
@@ -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; } }