fix(ivy): update largetable benchmark to use ngFor (#26604)
PR Close #26604
This commit is contained in:
Kara Erickson
Alex Rickabaugh
parent
a9f2952882
commit
1006eab482
|
|
@ -56,15 +56,6 @@ describe('largetable benchmark perf', () => {
|
|||
}).then(done, done.fail);
|
||||
});
|
||||
|
||||
it('should run for render3', done => {
|
||||
runTableBenchmark({
|
||||
id: `largeTable.render3.${worker.id}`,
|
||||
url: 'all/benchmarks/src/largetable/render3/index.html',
|
||||
ignoreBrowserSynchronization: true,
|
||||
worker: worker
|
||||
}).then(done, done.fail);
|
||||
});
|
||||
|
||||
it('should run for iv', done => {
|
||||
runTableBenchmark({
|
||||
id: `largeTable.iv.${worker.id}`,
|
||||
|
|
|
|||
|
|
@ -25,13 +25,6 @@ describe('largetable benchmark spec', () => {
|
|||
});
|
||||
});
|
||||
|
||||
it('should work for render3', () => {
|
||||
testTableBenchmark({
|
||||
url: 'all/benchmarks/src/largetable/render3/index.html',
|
||||
ignoreBrowserSynchronization: true,
|
||||
});
|
||||
});
|
||||
|
||||
it('should work for iv', () => {
|
||||
testTableBenchmark({
|
||||
url: 'all/benchmarks/src/largetable/iv/index.html',
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
|
||||
import {$} from 'protractor';
|
||||
|
||||
import {openBrowser} from '../../../e2e_util/e2e_util';
|
||||
import {runBenchmark, verifyNoBrowserErrors} from '../../../e2e_util/perf_util';
|
||||
|
||||
interface Worker {
|
||||
|
|
@ -39,9 +40,23 @@ describe('largetable benchmark perf', () => {
|
|||
|
||||
afterEach(verifyNoBrowserErrors);
|
||||
|
||||
it('should render the table for render3', () => {
|
||||
openBrowser({
|
||||
url: '',
|
||||
ignoreBrowserSynchronization: true,
|
||||
params: [{name: 'cols', value: 5}, {name: 'rows', value: 5}],
|
||||
});
|
||||
$('#createDom').click();
|
||||
expect($('#root').getText()).toContain('0/0');
|
||||
$('#createDom').click();
|
||||
expect($('#root').getText()).toContain('A/A');
|
||||
$('#destroyDom').click();
|
||||
expect($('#root').getText() as any).toEqual('');
|
||||
});
|
||||
|
||||
[CreateOnlyWorker, CreateAndDestroyWorker, UpdateWorker].forEach((worker) => {
|
||||
describe(worker.id, () => {
|
||||
it('should run for render3', done => {
|
||||
it('should run benchmark for render3', done => {
|
||||
runTableBenchmark({
|
||||
id: `largeTable.render3.${worker.id}`,
|
||||
url: 'index.html',
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
package(default_visibility = ["//visibility:public"])
|
||||
|
||||
load("//tools:defaults.bzl", "ng_rollup_bundle", "ts_library")
|
||||
load("//tools:defaults.bzl", "ng_module", "ng_rollup_bundle")
|
||||
load("//packages/bazel:index.bzl", "protractor_web_test")
|
||||
load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver")
|
||||
|
||||
ts_library(
|
||||
ng_module(
|
||||
name = "largetable_lib",
|
||||
srcs = glob(
|
||||
[
|
||||
|
|
@ -12,18 +12,20 @@ ts_library(
|
|||
],
|
||||
exclude = ["protractor.on-prepare.ts"],
|
||||
),
|
||||
tags = ["ivy-only"],
|
||||
deps = [
|
||||
"//modules/benchmarks/src:util_lib",
|
||||
"//modules/benchmarks/src/largetable:util_lib",
|
||||
"//packages:types",
|
||||
"//packages/common",
|
||||
"//packages/core",
|
||||
"@rxjs",
|
||||
],
|
||||
)
|
||||
|
||||
ng_rollup_bundle(
|
||||
name = "bundle",
|
||||
entry_point = "modules/benchmarks/src/largetable/render3/index.js",
|
||||
tags = ["ivy-only"],
|
||||
deps = [
|
||||
":largetable_lib",
|
||||
],
|
||||
|
|
@ -44,6 +46,7 @@ ts_devserver(
|
|||
"index.html",
|
||||
":favicon",
|
||||
],
|
||||
tags = ["ivy-only"],
|
||||
)
|
||||
|
||||
protractor_web_test(
|
||||
|
|
@ -59,7 +62,7 @@ protractor_web_test(
|
|||
],
|
||||
on_prepare = ":protractor.on-prepare.js",
|
||||
server = ":devserver",
|
||||
tags = ["manual"],
|
||||
tags = ["ivy-only"],
|
||||
deps = [
|
||||
"//modules/benchmarks/src/largetable:perf_lib",
|
||||
],
|
||||
|
|
|
|||
|
|
@ -28,14 +28,8 @@
|
|||
<script>
|
||||
// TODO(mlaval): remove once we have a proper solution
|
||||
ngDevMode = false;
|
||||
var isBazel = location.pathname.indexOf('/all/') !== 0;
|
||||
// isBazel needed while 'scripts/ci/test-e2e.sh test.e2e.protractor-e2e' is run
|
||||
// on Travis
|
||||
// TODO: port remaining protractor e2e tests to bazel protractor_web_test_suite rule
|
||||
var bazelBundle = document.location.search.endsWith('debug') ? 'bundle.min_debug.js' : 'bundle.min.js';
|
||||
var mainUrl = window.location.search.split(/[?&]main=([^&]+)/)[1]
|
||||
|| '../../bootstrap_ng2.js';
|
||||
document.write('<script src="' + (isBazel ? bazelBundle : mainUrl) + '">\u003c/script>');
|
||||
document.write('<script src="' + bazelBundle + '">\u003c/script>');
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
* 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 'reflect-metadata';
|
||||
import {ɵrenderComponent as renderComponent} from '@angular/core';
|
||||
|
||||
import {bindAction, profile} from '../../util';
|
||||
|
|
|
|||
|
|
@ -6,76 +6,39 @@
|
|||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {ɵRenderFlags, ɵbind, ɵcontainer, ɵcontainerRefreshEnd, ɵcontainerRefreshStart, ɵdefineComponent, ɵdetectChanges, ɵelementEnd, ɵelementStart, ɵelementStyleProp, ɵelementStyling, ɵembeddedViewEnd, ɵembeddedViewStart, ɵtext, ɵtextBinding as ɵtextBinding} from '@angular/core';
|
||||
import {ComponentDef} from '@angular/core/src/render3/interfaces/definition';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {Component, Input, NgModule, ɵdetectChanges} from '@angular/core';
|
||||
|
||||
import {TableCell, buildTable, emptyTable} from '../util';
|
||||
|
||||
const c0 = ['background-color'];
|
||||
@Component({
|
||||
selector: 'largetable',
|
||||
template: `
|
||||
<table>
|
||||
<tbody>
|
||||
<tr *ngFor="let row of data; trackBy: trackByIndex">
|
||||
<td *ngFor="let cell of row; trackBy: trackByIndex" [style.background-color]="getColor(cell.row)">
|
||||
{{cell.value}}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
`,
|
||||
})
|
||||
export class LargeTableComponent {
|
||||
@Input()
|
||||
data: TableCell[][] = emptyTable;
|
||||
|
||||
/** @nocollapse */
|
||||
static ngComponentDef: ComponentDef<LargeTableComponent> = ɵdefineComponent({
|
||||
type: LargeTableComponent,
|
||||
selectors: [['largetable']],
|
||||
consts: 3,
|
||||
vars: 0,
|
||||
template: function(rf: ɵRenderFlags, ctx: LargeTableComponent) {
|
||||
if (rf & ɵRenderFlags.Create) {
|
||||
ɵelementStart(0, 'table');
|
||||
{
|
||||
ɵelementStart(1, 'tbody');
|
||||
{ ɵcontainer(2); }
|
||||
ɵelementEnd();
|
||||
trackByIndex(index: number, item: any) { return index; }
|
||||
|
||||
getColor(row: number) { return row % 2 ? '' : 'grey'; }
|
||||
}
|
||||
ɵelementEnd();
|
||||
}
|
||||
if (rf & ɵRenderFlags.Update) {
|
||||
ɵcontainerRefreshStart(2);
|
||||
{
|
||||
for (let row of ctx.data) {
|
||||
let rf1 = ɵembeddedViewStart(1, 2, 0);
|
||||
{
|
||||
if (rf1 & ɵRenderFlags.Create) {
|
||||
ɵelementStart(0, 'tr');
|
||||
ɵcontainer(1);
|
||||
ɵelementEnd();
|
||||
}
|
||||
if (rf1 & ɵRenderFlags.Update) {
|
||||
ɵcontainerRefreshStart(1);
|
||||
{
|
||||
for (let cell of row) {
|
||||
let rf2 = ɵembeddedViewStart(2, 2, 1);
|
||||
{
|
||||
if (rf2 & ɵRenderFlags.Create) {
|
||||
ɵelementStart(0, 'td');
|
||||
ɵelementStyling(null, c0);
|
||||
{ ɵtext(1); }
|
||||
ɵelementEnd();
|
||||
}
|
||||
if (rf2 & ɵRenderFlags.Update) {
|
||||
ɵelementStyleProp(0, 0, null, cell.row % 2 ? '' : 'grey');
|
||||
ɵtextBinding(1, ɵbind(cell.value));
|
||||
}
|
||||
}
|
||||
ɵembeddedViewEnd();
|
||||
}
|
||||
}
|
||||
ɵcontainerRefreshEnd();
|
||||
}
|
||||
}
|
||||
ɵembeddedViewEnd();
|
||||
}
|
||||
}
|
||||
ɵcontainerRefreshEnd();
|
||||
}
|
||||
},
|
||||
factory: () => new LargeTableComponent(),
|
||||
inputs: {data: 'data'}
|
||||
});
|
||||
|
||||
@NgModule({declarations: [LargeTableComponent], imports: [CommonModule]})
|
||||
class TableModule {
|
||||
}
|
||||
|
||||
|
||||
export function destroyDom(component: LargeTableComponent) {
|
||||
component.data = emptyTable;
|
||||
ɵdetectChanges(component);
|
||||
|
|
|
|||
|
|
@ -40,6 +40,7 @@ export function runBenchmark(config: {
|
|||
if (config.setup) {
|
||||
config.setup();
|
||||
}
|
||||
if (!cmdArgs) readCommandLine();
|
||||
const description: {[key: string]: any} = {'bundles': cmdArgs.bundles};
|
||||
config.params.forEach((param) => { description[param.name] = param.value; });
|
||||
return runner.sample({
|
||||
|
|
|
|||
Loading…
Reference in New Issue