test: run styling benchmarks in benchpress (#34664)
Runs the styling benchmarks that have been added with 2e0b237646863562e336f370372b4b7f9e52d818 in benchpress. The goal is that these benchmarks can be wired up in Latency Lab. PR Close #34664
This commit is contained in:
parent
3dee2244da
commit
5f1f42ba54
|
@ -1 +1,15 @@
|
||||||
package(default_visibility = ["//visibility:public"])
|
package(default_visibility = ["//modules/benchmarks:__subpackages__"])
|
||||||
|
|
||||||
|
load("//tools:defaults.bzl", "ts_library")
|
||||||
|
|
||||||
|
ts_library(
|
||||||
|
name = "tests_lib",
|
||||||
|
testonly = True,
|
||||||
|
srcs = ["styling_perf.spec.ts"],
|
||||||
|
tsconfig = "//modules/benchmarks:tsconfig-e2e.json",
|
||||||
|
deps = [
|
||||||
|
"//modules/e2e_util",
|
||||||
|
"@npm//@types/jasminewd2",
|
||||||
|
"@npm//protractor",
|
||||||
|
],
|
||||||
|
)
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
load("//tools:defaults.bzl", "ng_module", "ng_rollup_bundle", "ts_devserver")
|
load("//tools:defaults.bzl", "ng_module", "ng_rollup_bundle", "ts_devserver")
|
||||||
|
load("//modules/benchmarks:benchmark_test.bzl", "benchmark_test")
|
||||||
|
|
||||||
package(default_visibility = ["//modules/benchmarks:__subpackages__"])
|
package(default_visibility = ["//modules/benchmarks:__subpackages__"])
|
||||||
|
|
||||||
|
@ -30,3 +31,9 @@ ts_devserver(
|
||||||
static_files = ["index.html"],
|
static_files = ["index.html"],
|
||||||
deps = [":bundle.min_debug.es2015.js"],
|
deps = [":bundle.min_debug.es2015.js"],
|
||||||
)
|
)
|
||||||
|
|
||||||
|
benchmark_test(
|
||||||
|
name = "perf",
|
||||||
|
server = ":prodserver",
|
||||||
|
deps = ["//modules/benchmarks/src/styling:tests_lib"],
|
||||||
|
)
|
||||||
|
|
|
@ -11,9 +11,10 @@
|
||||||
<h2>Styling bindings benchmark</h2>
|
<h2>Styling bindings benchmark</h2>
|
||||||
<p>
|
<p>
|
||||||
<select id="scenario-select">
|
<select id="scenario-select">
|
||||||
|
<!-- *Note*: When adding/removing scenarios, ensure the e2e test is also updated. -->
|
||||||
<option value="0">(0) [title]="exp" (no styling involved)</option>
|
<option value="0">(0) [title]="exp" (no styling involved)</option>
|
||||||
<option value="1">(1) class="foo" (static class)</option>
|
<option value="1">(1) class="foo" (static class)</option>
|
||||||
<option value="2">(2) class="foo {{exp}}" (className binding)</option>
|
<option value="2">(2) class="foo {{exp}}" (class interpolation)</option>
|
||||||
<option value="3">(3) [class.foo]="boolExp" binding</option>
|
<option value="3">(3) [class.foo]="boolExp" binding</option>
|
||||||
<option value="4">(4) class="foo" [class.bar]="boolExp" (mix of static and class. bindings</option>
|
<option value="4">(4) class="foo" [class.bar]="boolExp" (mix of static and class. bindings</option>
|
||||||
<option value="5">(5) class="foo" [ngClass]="{bar: boolExp}" (mix of static class and ngClass binding)</option>
|
<option value="5">(5) class="foo" [ngClass]="{bar: boolExp}" (mix of static class and ngClass binding)</option>
|
||||||
|
@ -36,4 +37,4 @@
|
||||||
<script src="/app_bundle.js"></script>
|
<script src="/app_bundle.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -0,0 +1,74 @@
|
||||||
|
/**
|
||||||
|
* @license
|
||||||
|
* Copyright Google Inc. All Rights Reserved.
|
||||||
|
*
|
||||||
|
* 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 {$, by, element} from 'protractor';
|
||||||
|
import {openBrowser, verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
|
||||||
|
import {runBenchmark} from '../../../e2e_util/perf_util';
|
||||||
|
|
||||||
|
/** List of possible scenarios that should be tested. */
|
||||||
|
const SCENARIOS = [
|
||||||
|
{optionIndex: 0, id: 'no_styling_involved'}, {optionIndex: 1, id: 'static_class'},
|
||||||
|
{optionIndex: 2, id: 'static_class_with_interpolation'}, {optionIndex: 3, id: 'class_binding'},
|
||||||
|
{optionIndex: 4, id: 'static_class_and_class_binding'},
|
||||||
|
{optionIndex: 5, id: 'static_class_and_ngclass_binding'},
|
||||||
|
{optionIndex: 6, id: 'static_class_and_ngstyle_binding_and_style_binding'}
|
||||||
|
];
|
||||||
|
|
||||||
|
describe('styling benchmark spec', () => {
|
||||||
|
afterEach(verifyNoBrowserErrors);
|
||||||
|
|
||||||
|
it('should render and interact to change detection', () => {
|
||||||
|
openBrowser({url: '/', ignoreBrowserSynchronization: true});
|
||||||
|
create();
|
||||||
|
const items = element.all(by.css('styling-bindings button'));
|
||||||
|
expect(items.count()).toBe(2000);
|
||||||
|
expect(items.first().getAttribute('title')).toBe('bar');
|
||||||
|
detectChanges();
|
||||||
|
expect(items.first().getAttribute('title')).toBe('baz');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Create benchmarks for each possible test scenario.
|
||||||
|
SCENARIOS.forEach(({optionIndex, id}) => {
|
||||||
|
describe(id, () => {
|
||||||
|
it('should run detect_changes benchmark', done => {
|
||||||
|
runStylingBenchmark(`styling.${id}.detect_changes`, {
|
||||||
|
work: () => detectChanges(),
|
||||||
|
prepare: () => {
|
||||||
|
// Switch to the current scenario by clicking the corresponding option.
|
||||||
|
element.all(by.tagName('option')).get(optionIndex).click();
|
||||||
|
// Create the elements with styling.
|
||||||
|
create();
|
||||||
|
},
|
||||||
|
}).then(done, done.fail);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
function create() {
|
||||||
|
$('#create').click();
|
||||||
|
}
|
||||||
|
|
||||||
|
function detectChanges() {
|
||||||
|
$('#detectChanges').click();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Runs the styling benchmark with the given id and worker. The worker describes
|
||||||
|
* the actions that should run for preparation and measurement.
|
||||||
|
*/
|
||||||
|
function runStylingBenchmark(id: string, worker: {prepare: () => void, work: () => void}) {
|
||||||
|
return runBenchmark({
|
||||||
|
id,
|
||||||
|
url: '/',
|
||||||
|
params: [],
|
||||||
|
ignoreBrowserSynchronization: true,
|
||||||
|
prepare: worker.prepare,
|
||||||
|
work: worker.work
|
||||||
|
});
|
||||||
|
}
|
Loading…
Reference in New Issue