<commit_before>/**
 * @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 update and detect changes', () => {
    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');
    update();
    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 update benchmark', done => {
        runStylingBenchmark(`styling.${id}.update`, {
          work: () => update(),
          prepare: () => {
            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);
      });
    });
  });
});

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();
}

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.
 */
function runStylingBenchmark(id: string, worker: {prepare: () => void, work: () => void}) {
  return runBenchmark({
    id,
    url: '/',
    params: [],
    ignoreBrowserSynchronization: true,
    prepare: worker.prepare,
    work: worker.work
  });
}
<commit_msg>perf(ivy): add create scenario to the styling benchmark (#34775)<commit_after>/**
 * @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 update and detect changes', () => {
    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');
    update();
    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 create benchmark', done => {
        runStylingBenchmark(`styling.${id}.create`, {
          work: () => create(),
          prepare: () => {
            selectScenario(optionIndex);
            destroy();
          },
        }).then(done, done.fail);
      });

      it('should run update benchmark', done => {
        runStylingBenchmark(`styling.${id}.update`, {
          work: () => update(),
          prepare: () => {
            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);
      });
    });
  });
});

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();
}

function destroy() {
  $('#destroy').click();
}

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.
 */
function runStylingBenchmark(id: string, worker: {prepare: () => void, work: () => void}) {
  return runBenchmark({
    id,
    url: '/',
    params: [],
    ignoreBrowserSynchronization: true,
    prepare: worker.prepare,
    work: worker.work
  });
}

{'fraction_non_alphanumeric': 0.17001319067858714, 'fraction_numerical': 0.00600908691191558, 'mean_word_length': 3.4485006518904826, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 32, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2489761', 'n_tokens_mistral': 2049, 'n_tokens_neox': 2020, 'n_words': 476}