src/cdk/testing/tests/test-main-component.html - main - githubmirror/components

src/cdk/testing/tests/test-main-component.html
105 строк4 KB
Kristiyan Kostadinov
build: set up harness integration test for vitest
18 дек 2025, 16:44
18 дек 2025, 16:447b1df64
<!-- Note that this element is fixed to avoid flakiness if the page has been scrolled down. -->
<div
  class="click-test"
  (click)="onClick($event)"
  (contextmenu)="onRightClick($event)"
  style="width: 100px; height: 100px; background: grey; position: fixed; top: 0; right: 0; z-index: 10;"
  #clickTestElement
></div>
<div class="click-test-result">{{clickResult.x}}-{{clickResult.y}}</div>
<div class="contextmenu-test-result">
  {{rightClickResult.x}}-{{rightClickResult.y}}-{{rightClickResult.button}}
</div>
<div class="click-modifiers-test-result">{{modifiers}}</div>
<h1 style="height: 100px; width: 200px;">Main Component</h1>
<div id="username">Hello {{username}} from Angular!</div>
<div class="counters">
  <button (click)="click()" id="up-button">Up</button><br />
  <label>Count:</label>
  <div id="counter">{{counter}}</div>
  <label>AsyncCounter:</label>
  <div id="asyncCounter">{{asyncCounter}}</div>
</div>
<span id="contenteditable" contenteditable>initial value</span>
<div class="inputs">
  <input [(ngModel)]="input" id="input" aria-label="input" (keydown)="onKeyDown($event)" />
  <span class="special-key">{{specialKey}}</span>
  <div id="value">Input: {{input}}</div>
  <textarea id="memo" aria-label="memo">{{memo}}</textarea>
  <select
    id="single-select"
    aria-label="single select"
    [(ngModel)]="singleSelect"
    (change)="singleSelectChangeEventCount = singleSelectChangeEventCount + 1"
  >
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
  </select>
  <div id="single-select-value">Select: {{singleSelect}}</div>
  <div id="single-select-change-counter">Change events: {{singleSelectChangeEventCount}}</div>

  <select
    multiple
    id="multi-select"
    aria-label="multi select"
    [(ngModel)]="multiSelect"
    (change)="multiSelectChangeEventCount = multiSelectChangeEventCount + 1"
  >
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
  </select>
  <div id="multi-select-value">Multi-select: {{multiSelect}}</div>
  <div id="multi-select-change-counter">Change events: {{multiSelectChangeEventCount}}</div>
  <div (myCustomEvent)="basicEvent = basicEvent + 1" id="custom-event-basic">
    Basic event: {{basicEvent}}
  </div>
  <div (myCustomEvent)="onCustomEvent($event)" id="custom-event-object">
    Event with object: {{customEventData}}
  </div>

  <input
    id="number-input"
    type="number"
    aria-label="Enter a number"
    [formControl]="numberControl"
  />
  <div id="number-input-value">Number value: {{numberControl.value}}</div>
</div>
<div class="subcomponents">
  <test-sub class="test-special" title="test tools" [items]="testTools"></test-sub>
  <test-sub title="test methods" [items]="testMethods"></test-sub>
</div>
<div class="other">
  <test-sub title="other 1"></test-sub>
  <test-sub title="other 2"></test-sub>
</div>
<div class="parent">
  <div class="some-div">Div inside parent</div>
  <div class="some-span">Span inside parent</div>
</div>
<div class="some-div">Div outside parent</div>
<div class="some-span">Span outside parent</div>
<div class="quoted-comma-parent">
  <div has-comma="a,b">Has comma inside attribute</div>
</div>
<div class="task-state-tests">
  <button (click)="runTaskOutsideZone()" id="task-state-test-trigger">Run task outside zone</button>
  <span id="task-state-result" #taskStateResult></span>
</div>
@if (_shadowDomSupported) {
  <test-shadow-boundary></test-shadow-boundary>
}

<div
  id="hover-box"
  [class.hovering]="isHovering"
  [class.pointer-over]="isPointerOver"
  (mouseenter)="isHovering = true"
  (mouseleave)="isHovering = false"
  (mouseover)="isPointerOver = true"
  (mouseout)="isPointerOver = false"
  style="width: 50px; height: 50px; background: hotpink;"
></div>
<div class="hidden-element" style="display: none;">Hello</div>