perf(ivy): add noop change detection scenario to the styling benchmark (#34775)

PR Close #34775

modules/benchmarks/src/styling/ng2/index.html

@@ -24,8 +24,10 @@
 
     <button id="create">create</button>
     <button id="update">update</button>
+    <button id="detect_changes">detect changes</button>
     <button id="destroy">destroy</button>
     <button id="profile_update">profile update</button>
+    <button id="profile_detect_changes">profile detect changes</button>
     <button id="modify">modify externally</button>
   </p>
 

modules/benchmarks/src/styling/ng2/init.ts

@@ -41,6 +41,8 @@ export function init(moduleRef: NgModuleRef<StylingModule>) {
     appRef.tick();
   }
 
+  function detectChanges() { appRef.tick(); }
+
   function modifyExternally() {
     const buttonEls = componentHostEl.querySelectorAll('button') as HTMLButtonElement[];
     buttonEls.forEach((buttonEl: HTMLButtonElement) => {
@@ -55,11 +57,17 @@ export function init(moduleRef: NgModuleRef<StylingModule>) {
 
   bindAction('#create', () => create(select.selectedIndex));
   bindAction('#update', update);
+  bindAction('#detect_changes', detectChanges);
   bindAction('#destroy', destroy);
   bindAction('#profile_update', profile(() => {
                for (let i = 0; i < 10; i++) {
                  update();
                }
              }, () => {}, 'update and detect changes'));
+  bindAction('#profile_detect_changes', profile(() => {
+               for (let i = 0; i < 10; i++) {
+                 detectChanges();
+               }
+             }, () => {}, 'noop detect changes'));
   bindAction('#modify', modifyExternally);
 }

modules/benchmarks/src/styling/styling_perf.spec.ts

@@ -32,16 +32,34 @@ describe('styling benchmark spec', () => {
     expect(items.first().getAttribute('title')).toBe('baz');
   });
 
+  it('should render and run noop 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('bar');
+  });
+
   // Create benchmarks for each possible test scenario.
   SCENARIOS.forEach(({optionIndex, id}) => {
     describe(id, () => {
-      it('should run detect_changes benchmark', done => {
+      it('should run update benchmark', done => {
         runStylingBenchmark(`styling.${id}.update`, {
           work: () => update(),
           prepare: () => {
-            // Switch to the current scenario by clicking the corresponding option.
-            element.all(by.tagName('option')).get(optionIndex).click();
-            // Create the elements with styling.
+            selectScenario(optionIndex);
+            create();
+          },
+        }).then(done, done.fail);
+      });
+
+      it('should run detect changes benchmark', done => {
+        runStylingBenchmark(`styling.${id}.noop_cd`, {
+          work: () => detectChanges(),
+          prepare: () => {
+            selectScenario(optionIndex);
             create();
           },
         }).then(done, done.fail);
@@ -50,6 +68,11 @@ describe('styling benchmark spec', () => {
   });
 });
 
+function selectScenario(optionIndex: number) {
+  // Switch to the current scenario by clicking the corresponding option.
+  element.all(by.tagName('option')).get(optionIndex).click();
+}
+
 function create() {
   $('#create').click();
 }
@@ -58,6 +81,10 @@ function update() {
   $('#update').click();
 }
 
+function detectChanges() {
+  $('#detect_changes').click();
+}
+
 /**
  * Runs the styling benchmark with the given id and worker. The worker describes
  * the actions that should run for preparation and measurement.