chromium/chrome/test/data/webui/chromeos/settings/os_apps_page/app_management_page/dom_switch_test.ts

// Copyright 2018 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'chrome://os-settings/lazy_load.js';

import {AppManagementDomSwitchElement} from 'chrome://os-settings/lazy_load.js';
import {DomBind} from 'chrome://resources/polymer/v3_0/polymer/lib/elements/dom-bind.js';
import {html} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
import {assertEquals, assertNull, assertTrue} from 'chrome://webui-test/chai_assert.js';

suite('<app-management-dom-switch>', () => {
  let domSwitch: AppManagementDomSwitchElement;

  interface BindData {
    property: {x: number, y: number};
  }
  type DomBindElement = DomBind&BindData;
  let domBind: DomBindElement;

  setup(() => {
    document.body.appendChild(html`
      <dom-bind>
        <template>
          <app-management-dom-switch id="switch">
            <template>
              <div id='child1' route-id='1'>[[property.x]]</div>
              <div id='child2' route-id='2'>[[property.y]]</div>
            </template>
          </app-management-dom-switch>
        </template>
      </dom-bind>
    `.content);

    const element =
        document.querySelector<AppManagementDomSwitchElement>('#switch');
    assertTrue(!!element);
    domSwitch = element;
    const bind = document.querySelector<DomBindElement>('dom-bind');
    assertTrue(!!bind);
    domBind = bind;
  });

  test('children are attached/detached when the route changes', () => {
    // No children are attached initially.
    assertNull(document.getElementById('child1'));
    assertNull(document.getElementById('child2'));

    // When a child is selected, it is attached to the DOM.
    domSwitch.route = '1';
    assertTrue(!!document.getElementById('child1'));
    assertNull(document.getElementById('child2'));

    // When another child is selected, it is attached and the previous child
    // is detached.
    domSwitch.route = '2';
    assertNull(document.getElementById('child1'));
    assertTrue(!!document.getElementById('child2'));

    // When no child is selected, the currently selected child is detached.
    domSwitch.route = null;
    assertNull(document.getElementById('child1'));
    assertNull(document.getElementById('child2'));
  });

  test('binding to properties and paths works', () => {
    // Bindings update when a parent property is changed.
    domBind.property = {x: 1, y: 2};

    domSwitch.route = '1';
    let child = document.getElementById('child1');
    assertTrue(!!child);
    assertEquals('1', child.textContent);

    domSwitch.route = '2';
    child = document.getElementById('child2');
    assertTrue(!!child);
    assertEquals('2', child.textContent);

    // Bindings update when a path of a parent property is changed.
    domBind.set('property.x', 3);
    domBind.set('property.y', 4);

    assertEquals('4', child.textContent);

    domSwitch.route = '1';
    child = document.getElementById('child1');
    assertTrue(!!child);
    assertEquals('3', child.textContent);
  });
});