harness-environment.d-BbFzIFDE.d.ts 44 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893
  1. /**
  2. * Dimensions for element size and its position relative to the viewport.
  3. */
  4. interface ElementDimensions {
  5. /** The distance from the top of the viewport in pixels */
  6. top: number;
  7. /** The distance from the left of the viewport in pixels */
  8. left: number;
  9. /** The width of the element in pixels */
  10. width: number;
  11. /** The height of the element in pixels */
  12. height: number;
  13. }
  14. /** Modifier keys that may be held while typing. */
  15. interface ModifierKeys {
  16. control?: boolean;
  17. alt?: boolean;
  18. shift?: boolean;
  19. meta?: boolean;
  20. }
  21. /** Data that can be attached to a custom event dispatched from a `TestElement`. */
  22. type EventData = string | number | boolean | Function | undefined | null | EventData[] | {
  23. [key: string]: EventData;
  24. };
  25. /** An enum of non-text keys that can be used with the `sendKeys` method. */
  26. declare enum TestKey {
  27. BACKSPACE = 0,
  28. TAB = 1,
  29. ENTER = 2,
  30. SHIFT = 3,
  31. CONTROL = 4,
  32. ALT = 5,
  33. ESCAPE = 6,
  34. PAGE_UP = 7,
  35. PAGE_DOWN = 8,
  36. END = 9,
  37. HOME = 10,
  38. LEFT_ARROW = 11,
  39. UP_ARROW = 12,
  40. RIGHT_ARROW = 13,
  41. DOWN_ARROW = 14,
  42. INSERT = 15,
  43. DELETE = 16,
  44. F1 = 17,
  45. F2 = 18,
  46. F3 = 19,
  47. F4 = 20,
  48. F5 = 21,
  49. F6 = 22,
  50. F7 = 23,
  51. F8 = 24,
  52. F9 = 25,
  53. F10 = 26,
  54. F11 = 27,
  55. F12 = 28,
  56. META = 29,
  57. COMMA = 30
  58. }
  59. /**
  60. * This acts as a common interface for DOM elements across both unit and e2e tests. It is the
  61. * interface through which the ComponentHarness interacts with the component's DOM.
  62. */
  63. interface TestElement {
  64. /** Blur the element. */
  65. blur(): Promise<void>;
  66. /** Clear the element's input (for input and textarea elements only). */
  67. clear(): Promise<void>;
  68. /**
  69. * Click the element at the default location for the current environment. If you need to guarantee
  70. * the element is clicked at a specific location, consider using `click('center')` or
  71. * `click(x, y)` instead.
  72. */
  73. click(modifiers?: ModifierKeys): Promise<void>;
  74. /** Click the element at the element's center. */
  75. click(location: 'center', modifiers?: ModifierKeys): Promise<void>;
  76. /**
  77. * Click the element at the specified coordinates relative to the top-left of the element.
  78. * @param relativeX Coordinate within the element, along the X-axis at which to click.
  79. * @param relativeY Coordinate within the element, along the Y-axis at which to click.
  80. * @param modifiers Modifier keys held while clicking
  81. */
  82. click(relativeX: number, relativeY: number, modifiers?: ModifierKeys): Promise<void>;
  83. /**
  84. * Right clicks on the element at the specified coordinates relative to the top-left of it.
  85. * @param relativeX Coordinate within the element, along the X-axis at which to click.
  86. * @param relativeY Coordinate within the element, along the Y-axis at which to click.
  87. * @param modifiers Modifier keys held while clicking
  88. */
  89. rightClick(relativeX: number, relativeY: number, modifiers?: ModifierKeys): Promise<void>;
  90. /** Focus the element. */
  91. focus(): Promise<void>;
  92. /** Get the computed value of the given CSS property for the element. */
  93. getCssValue(property: string): Promise<string>;
  94. /** Hovers the mouse over the element. */
  95. hover(): Promise<void>;
  96. /** Moves the mouse away from the element. */
  97. mouseAway(): Promise<void>;
  98. /**
  99. * Sends the given string to the input as a series of key presses. Also fires input events
  100. * and attempts to add the string to the Element's value. Note that some environments cannot
  101. * reproduce native browser behavior for keyboard shortcuts such as Tab, Ctrl + A, etc.
  102. * @throws An error if no keys have been specified.
  103. */
  104. sendKeys(...keys: (string | TestKey)[]): Promise<void>;
  105. /**
  106. * Sends the given string to the input as a series of key presses. Also fires input
  107. * events and attempts to add the string to the Element's value.
  108. * @throws An error if no keys have been specified.
  109. */
  110. sendKeys(modifiers: ModifierKeys, ...keys: (string | TestKey)[]): Promise<void>;
  111. /**
  112. * Gets the text from the element.
  113. * @param options Options that affect what text is included.
  114. */
  115. text(options?: TextOptions): Promise<string>;
  116. /**
  117. * Sets the value of a `contenteditable` element.
  118. * @param value Value to be set on the element.
  119. * @breaking-change 16.0.0 Will become a required method.
  120. */
  121. setContenteditableValue?(value: string): Promise<void>;
  122. /** Gets the value for the given attribute from the element. */
  123. getAttribute(name: string): Promise<string | null>;
  124. /** Checks whether the element has the given class. */
  125. hasClass(name: string): Promise<boolean>;
  126. /** Gets the dimensions of the element. */
  127. getDimensions(): Promise<ElementDimensions>;
  128. /** Gets the value of a property of an element. */
  129. getProperty<T = any>(name: string): Promise<T>;
  130. /** Checks whether this element matches the given selector. */
  131. matchesSelector(selector: string): Promise<boolean>;
  132. /** Checks whether the element is focused. */
  133. isFocused(): Promise<boolean>;
  134. /** Sets the value of a property of an input. */
  135. setInputValue(value: string): Promise<void>;
  136. /** Selects the options at the specified indexes inside of a native `select` element. */
  137. selectOptions(...optionIndexes: number[]): Promise<void>;
  138. /**
  139. * Dispatches an event with a particular name.
  140. * @param name Name of the event to be dispatched.
  141. */
  142. dispatchEvent(name: string, data?: Record<string, EventData>): Promise<void>;
  143. }
  144. /**
  145. * Options that affect the text returned by `TestElement.text`.
  146. */
  147. interface TextOptions {
  148. /** Optional selector for elements whose content should be excluded from the text string. */
  149. exclude?: string;
  150. }
  151. /**
  152. * An async function that returns a promise when called.
  153. * @deprecated This was just an alias for `() => Promise<T>`. Use that instead.
  154. * @breaking-change 21.0.0 Remove this alias.
  155. * @docs-private
  156. */
  157. type AsyncFactoryFn<T> = () => Promise<T>;
  158. /** An async function that takes an item and returns a boolean promise */
  159. type AsyncPredicate<T> = (item: T) => Promise<boolean>;
  160. /** An async function that takes an item and an option value and returns a boolean promise. */
  161. type AsyncOptionPredicate<T, O> = (item: T, option: O) => Promise<boolean>;
  162. /**
  163. * A query for a `ComponentHarness`, which is expressed as either a `ComponentHarnessConstructor` or
  164. * a `HarnessPredicate`.
  165. */
  166. type HarnessQuery<T extends ComponentHarness> = ComponentHarnessConstructor<T> | HarnessPredicate<T>;
  167. /**
  168. * The result type obtained when searching using a particular list of queries. This type depends on
  169. * the particular items being queried.
  170. * - If one of the queries is for a `ComponentHarnessConstructor<C1>`, it means that the result
  171. * might be a harness of type `C1`
  172. * - If one of the queries is for a `HarnessPredicate<C2>`, it means that the result might be a
  173. * harness of type `C2`
  174. * - If one of the queries is for a `string`, it means that the result might be a `TestElement`.
  175. *
  176. * Since we don't know for sure which query will match, the result type if the union of the types
  177. * for all possible results.
  178. *
  179. * @usageNotes
  180. * ### Example
  181. *
  182. * The type:
  183. * ```ts
  184. * LocatorFnResult<[
  185. * ComponentHarnessConstructor<MyHarness>,
  186. * HarnessPredicate<MyOtherHarness>,
  187. * string
  188. * ]>
  189. * ```
  190. *
  191. * is equivalent to:
  192. *
  193. * ```ts
  194. * MyHarness | MyOtherHarness | TestElement
  195. * ```
  196. */
  197. type LocatorFnResult<T extends (HarnessQuery<any> | string)[]> = {
  198. [I in keyof T]: T[I] extends new (...args: any[]) => infer C ? C : T[I] extends {
  199. harnessType: new (...args: any[]) => infer C;
  200. } ? C : T[I] extends string ? TestElement : never;
  201. }[number];
  202. /**
  203. * Interface used to load ComponentHarness objects. This interface is used by test authors to
  204. * instantiate `ComponentHarness`es.
  205. */
  206. interface HarnessLoader {
  207. /**
  208. * Searches for an element with the given selector under the current instances's root element,
  209. * and returns a `HarnessLoader` rooted at the matching element. If multiple elements match the
  210. * selector, the first is used. If no elements match, an error is thrown.
  211. * @param selector The selector for the root element of the new `HarnessLoader`
  212. * @return A `HarnessLoader` rooted at the element matching the given selector.
  213. * @throws If a matching element can't be found.
  214. */
  215. getChildLoader(selector: string): Promise<HarnessLoader>;
  216. /**
  217. * Searches for all elements with the given selector under the current instances's root element,
  218. * and returns an array of `HarnessLoader`s, one for each matching element, rooted at that
  219. * element.
  220. * @param selector The selector for the root element of the new `HarnessLoader`
  221. * @return A list of `HarnessLoader`s, one for each matching element, rooted at that element.
  222. */
  223. getAllChildLoaders(selector: string): Promise<HarnessLoader[]>;
  224. /**
  225. * Searches for an instance of the component corresponding to the given harness type under the
  226. * `HarnessLoader`'s root element, and returns a `ComponentHarness` for that instance. If multiple
  227. * matching components are found, a harness for the first one is returned. If no matching
  228. * component is found, an error is thrown.
  229. * @param query A query for a harness to create
  230. * @return An instance of the given harness type
  231. * @throws If a matching component instance can't be found.
  232. */
  233. getHarness<T extends ComponentHarness>(query: HarnessQuery<T>): Promise<T>;
  234. /**
  235. * Searches for an instance of the component corresponding to the given harness type under the
  236. * `HarnessLoader`'s root element, and returns a `ComponentHarness` for that instance. If multiple
  237. * matching components are found, a harness for the first one is returned. If no matching
  238. * component is found, null is returned.
  239. * @param query A query for a harness to create
  240. * @return An instance of the given harness type (or null if not found).
  241. */
  242. getHarnessOrNull<T extends ComponentHarness>(query: HarnessQuery<T>): Promise<T | null>;
  243. /**
  244. * Searches for all instances of the component corresponding to the given harness type under the
  245. * `HarnessLoader`'s root element, and returns a list `ComponentHarness` for each instance.
  246. * @param query A query for a harness to create
  247. * @return A list instances of the given harness type.
  248. */
  249. getAllHarnesses<T extends ComponentHarness>(query: HarnessQuery<T>): Promise<T[]>;
  250. /**
  251. * Searches for an instance of the component corresponding to the given harness type under the
  252. * `HarnessLoader`'s root element, and returns a boolean indicating if any were found.
  253. * @param query A query for a harness to create
  254. * @return A boolean indicating if an instance was found.
  255. */
  256. hasHarness<T extends ComponentHarness>(query: HarnessQuery<T>): Promise<boolean>;
  257. }
  258. /**
  259. * Interface used to create asynchronous locator functions used find elements and component
  260. * harnesses. This interface is used by `ComponentHarness` authors to create locator functions for
  261. * their `ComponentHarness` subclass.
  262. */
  263. interface LocatorFactory {
  264. /** Gets a locator factory rooted at the document root. */
  265. documentRootLocatorFactory(): LocatorFactory;
  266. /** The root element of this `LocatorFactory` as a `TestElement`. */
  267. rootElement: TestElement;
  268. /**
  269. * Creates an asynchronous locator function that can be used to find a `ComponentHarness` instance
  270. * or element under the root element of this `LocatorFactory`.
  271. *
  272. * For example, given the following DOM and assuming `DivHarness.hostSelector` is `'div'`
  273. *
  274. * ```html
  275. * <div id="d1"></div><div id="d2"></div>
  276. * ```
  277. *
  278. * then we expect:
  279. *
  280. * ```ts
  281. * await lf.locatorFor(DivHarness, 'div')() // Gets a `DivHarness` instance for #d1
  282. * await lf.locatorFor('div', DivHarness)() // Gets a `TestElement` instance for #d1
  283. * await lf.locatorFor('span')() // Throws because the `Promise` rejects
  284. * ```
  285. *
  286. * @param queries A list of queries specifying which harnesses and elements to search for:
  287. * - A `string` searches for elements matching the CSS selector specified by the string.
  288. * - A `ComponentHarness` constructor searches for `ComponentHarness` instances matching the
  289. * given class.
  290. * - A `HarnessPredicate` searches for `ComponentHarness` instances matching the given
  291. * predicate.
  292. * @return An asynchronous locator function that searches for and returns a `Promise` for the
  293. * first element or harness matching the given search criteria. Matches are ordered first by
  294. * order in the DOM, and second by order in the queries list. If no matches are found, the
  295. * `Promise` rejects. The type that the `Promise` resolves to is a union of all result types for
  296. * each query.
  297. */
  298. locatorFor<T extends (HarnessQuery<any> | string)[]>(...queries: T): () => Promise<LocatorFnResult<T>>;
  299. /**
  300. * Creates an asynchronous locator function that can be used to find a `ComponentHarness` instance
  301. * or element under the root element of this `LocatorFactory`.
  302. *
  303. * For example, given the following DOM and assuming `DivHarness.hostSelector` is `'div'`
  304. *
  305. * ```html
  306. * <div id="d1"></div><div id="d2"></div>
  307. * ```
  308. *
  309. * then we expect:
  310. *
  311. * ```ts
  312. * await lf.locatorForOptional(DivHarness, 'div')() // Gets a `DivHarness` instance for #d1
  313. * await lf.locatorForOptional('div', DivHarness)() // Gets a `TestElement` instance for #d1
  314. * await lf.locatorForOptional('span')() // Gets `null`
  315. * ```
  316. *
  317. * @param queries A list of queries specifying which harnesses and elements to search for:
  318. * - A `string` searches for elements matching the CSS selector specified by the string.
  319. * - A `ComponentHarness` constructor searches for `ComponentHarness` instances matching the
  320. * given class.
  321. * - A `HarnessPredicate` searches for `ComponentHarness` instances matching the given
  322. * predicate.
  323. * @return An asynchronous locator function that searches for and returns a `Promise` for the
  324. * first element or harness matching the given search criteria. Matches are ordered first by
  325. * order in the DOM, and second by order in the queries list. If no matches are found, the
  326. * `Promise` is resolved with `null`. The type that the `Promise` resolves to is a union of all
  327. * result types for each query or null.
  328. */
  329. locatorForOptional<T extends (HarnessQuery<any> | string)[]>(...queries: T): () => Promise<LocatorFnResult<T> | null>;
  330. /**
  331. * Creates an asynchronous locator function that can be used to find `ComponentHarness` instances
  332. * or elements under the root element of this `LocatorFactory`.
  333. *
  334. * For example, given the following DOM and assuming `DivHarness.hostSelector` is `'div'` and
  335. * `IdIsD1Harness.hostSelector` is `'#d1'`
  336. *
  337. * ```html
  338. * <div id="d1"></div><div id="d2"></div>
  339. * ```
  340. *
  341. * then we expect:
  342. *
  343. * ```ts
  344. * // Gets [DivHarness for #d1, TestElement for #d1, DivHarness for #d2, TestElement for #d2]
  345. * await lf.locatorForAll(DivHarness, 'div')()
  346. * // Gets [TestElement for #d1, TestElement for #d2]
  347. * await lf.locatorForAll('div', '#d1')()
  348. * // Gets [DivHarness for #d1, IdIsD1Harness for #d1, DivHarness for #d2]
  349. * await lf.locatorForAll(DivHarness, IdIsD1Harness)()
  350. * // Gets []
  351. * await lf.locatorForAll('span')()
  352. * ```
  353. *
  354. * @param queries A list of queries specifying which harnesses and elements to search for:
  355. * - A `string` searches for elements matching the CSS selector specified by the string.
  356. * - A `ComponentHarness` constructor searches for `ComponentHarness` instances matching the
  357. * given class.
  358. * - A `HarnessPredicate` searches for `ComponentHarness` instances matching the given
  359. * predicate.
  360. * @return An asynchronous locator function that searches for and returns a `Promise` for all
  361. * elements and harnesses matching the given search criteria. Matches are ordered first by
  362. * order in the DOM, and second by order in the queries list. If an element matches more than
  363. * one `ComponentHarness` class, the locator gets an instance of each for the same element. If
  364. * an element matches multiple `string` selectors, only one `TestElement` instance is returned
  365. * for that element. The type that the `Promise` resolves to is an array where each element is
  366. * the union of all result types for each query.
  367. */
  368. locatorForAll<T extends (HarnessQuery<any> | string)[]>(...queries: T): () => Promise<LocatorFnResult<T>[]>;
  369. /** @return A `HarnessLoader` rooted at the root element of this `LocatorFactory`. */
  370. rootHarnessLoader(): Promise<HarnessLoader>;
  371. /**
  372. * Gets a `HarnessLoader` instance for an element under the root of this `LocatorFactory`.
  373. * @param selector The selector for the root element.
  374. * @return A `HarnessLoader` rooted at the first element matching the given selector.
  375. * @throws If no matching element is found for the given selector.
  376. */
  377. harnessLoaderFor(selector: string): Promise<HarnessLoader>;
  378. /**
  379. * Gets a `HarnessLoader` instance for an element under the root of this `LocatorFactory`
  380. * @param selector The selector for the root element.
  381. * @return A `HarnessLoader` rooted at the first element matching the given selector, or null if
  382. * no matching element is found.
  383. */
  384. harnessLoaderForOptional(selector: string): Promise<HarnessLoader | null>;
  385. /**
  386. * Gets a list of `HarnessLoader` instances, one for each matching element.
  387. * @param selector The selector for the root element.
  388. * @return A list of `HarnessLoader`, one rooted at each element matching the given selector.
  389. */
  390. harnessLoaderForAll(selector: string): Promise<HarnessLoader[]>;
  391. /**
  392. * Flushes change detection and async tasks captured in the Angular zone.
  393. * In most cases it should not be necessary to call this manually. However, there may be some edge
  394. * cases where it is needed to fully flush animation events.
  395. */
  396. forceStabilize(): Promise<void>;
  397. /**
  398. * Waits for all scheduled or running async tasks to complete. This allows harness
  399. * authors to wait for async tasks outside of the Angular zone.
  400. */
  401. waitForTasksOutsideAngular(): Promise<void>;
  402. }
  403. /**
  404. * Base class for component test harnesses that all component harness authors should extend. This
  405. * base component harness provides the basic ability to locate element and sub-component harnesses.
  406. */
  407. declare abstract class ComponentHarness {
  408. protected readonly locatorFactory: LocatorFactory;
  409. constructor(locatorFactory: LocatorFactory);
  410. /** Gets a `Promise` for the `TestElement` representing the host element of the component. */
  411. host(): Promise<TestElement>;
  412. /**
  413. * Gets a `LocatorFactory` for the document root element. This factory can be used to create
  414. * locators for elements that a component creates outside of its own root element. (e.g. by
  415. * appending to document.body).
  416. */
  417. protected documentRootLocatorFactory(): LocatorFactory;
  418. /**
  419. * Creates an asynchronous locator function that can be used to find a `ComponentHarness` instance
  420. * or element under the host element of this `ComponentHarness`.
  421. *
  422. * For example, given the following DOM and assuming `DivHarness.hostSelector` is `'div'`
  423. *
  424. * ```html
  425. * <div id="d1"></div><div id="d2"></div>
  426. * ```
  427. *
  428. * then we expect:
  429. *
  430. * ```ts
  431. * await ch.locatorFor(DivHarness, 'div')() // Gets a `DivHarness` instance for #d1
  432. * await ch.locatorFor('div', DivHarness)() // Gets a `TestElement` instance for #d1
  433. * await ch.locatorFor('span')() // Throws because the `Promise` rejects
  434. * ```
  435. *
  436. * @param queries A list of queries specifying which harnesses and elements to search for:
  437. * - A `string` searches for elements matching the CSS selector specified by the string.
  438. * - A `ComponentHarness` constructor searches for `ComponentHarness` instances matching the
  439. * given class.
  440. * - A `HarnessPredicate` searches for `ComponentHarness` instances matching the given
  441. * predicate.
  442. * @return An asynchronous locator function that searches for and returns a `Promise` for the
  443. * first element or harness matching the given search criteria. Matches are ordered first by
  444. * order in the DOM, and second by order in the queries list. If no matches are found, the
  445. * `Promise` rejects. The type that the `Promise` resolves to is a union of all result types for
  446. * each query.
  447. */
  448. protected locatorFor<T extends (HarnessQuery<any> | string)[]>(...queries: T): () => Promise<LocatorFnResult<T>>;
  449. /**
  450. * Creates an asynchronous locator function that can be used to find a `ComponentHarness` instance
  451. * or element under the host element of this `ComponentHarness`.
  452. *
  453. * For example, given the following DOM and assuming `DivHarness.hostSelector` is `'div'`
  454. *
  455. * ```html
  456. * <div id="d1"></div><div id="d2"></div>
  457. * ```
  458. *
  459. * then we expect:
  460. *
  461. * ```ts
  462. * await ch.locatorForOptional(DivHarness, 'div')() // Gets a `DivHarness` instance for #d1
  463. * await ch.locatorForOptional('div', DivHarness)() // Gets a `TestElement` instance for #d1
  464. * await ch.locatorForOptional('span')() // Gets `null`
  465. * ```
  466. *
  467. * @param queries A list of queries specifying which harnesses and elements to search for:
  468. * - A `string` searches for elements matching the CSS selector specified by the string.
  469. * - A `ComponentHarness` constructor searches for `ComponentHarness` instances matching the
  470. * given class.
  471. * - A `HarnessPredicate` searches for `ComponentHarness` instances matching the given
  472. * predicate.
  473. * @return An asynchronous locator function that searches for and returns a `Promise` for the
  474. * first element or harness matching the given search criteria. Matches are ordered first by
  475. * order in the DOM, and second by order in the queries list. If no matches are found, the
  476. * `Promise` is resolved with `null`. The type that the `Promise` resolves to is a union of all
  477. * result types for each query or null.
  478. */
  479. protected locatorForOptional<T extends (HarnessQuery<any> | string)[]>(...queries: T): () => Promise<LocatorFnResult<T> | null>;
  480. /**
  481. * Creates an asynchronous locator function that can be used to find `ComponentHarness` instances
  482. * or elements under the host element of this `ComponentHarness`.
  483. *
  484. * For example, given the following DOM and assuming `DivHarness.hostSelector` is `'div'` and
  485. * `IdIsD1Harness.hostSelector` is `'#d1'`
  486. *
  487. * ```html
  488. * <div id="d1"></div><div id="d2"></div>
  489. * ```
  490. *
  491. * then we expect:
  492. *
  493. * ```ts
  494. * // Gets [DivHarness for #d1, TestElement for #d1, DivHarness for #d2, TestElement for #d2]
  495. * await ch.locatorForAll(DivHarness, 'div')()
  496. * // Gets [TestElement for #d1, TestElement for #d2]
  497. * await ch.locatorForAll('div', '#d1')()
  498. * // Gets [DivHarness for #d1, IdIsD1Harness for #d1, DivHarness for #d2]
  499. * await ch.locatorForAll(DivHarness, IdIsD1Harness)()
  500. * // Gets []
  501. * await ch.locatorForAll('span')()
  502. * ```
  503. *
  504. * @param queries A list of queries specifying which harnesses and elements to search for:
  505. * - A `string` searches for elements matching the CSS selector specified by the string.
  506. * - A `ComponentHarness` constructor searches for `ComponentHarness` instances matching the
  507. * given class.
  508. * - A `HarnessPredicate` searches for `ComponentHarness` instances matching the given
  509. * predicate.
  510. * @return An asynchronous locator function that searches for and returns a `Promise` for all
  511. * elements and harnesses matching the given search criteria. Matches are ordered first by
  512. * order in the DOM, and second by order in the queries list. If an element matches more than
  513. * one `ComponentHarness` class, the locator gets an instance of each for the same element. If
  514. * an element matches multiple `string` selectors, only one `TestElement` instance is returned
  515. * for that element. The type that the `Promise` resolves to is an array where each element is
  516. * the union of all result types for each query.
  517. */
  518. protected locatorForAll<T extends (HarnessQuery<any> | string)[]>(...queries: T): () => Promise<LocatorFnResult<T>[]>;
  519. /**
  520. * Flushes change detection and async tasks in the Angular zone.
  521. * In most cases it should not be necessary to call this manually. However, there may be some edge
  522. * cases where it is needed to fully flush animation events.
  523. */
  524. protected forceStabilize(): Promise<void>;
  525. /**
  526. * Waits for all scheduled or running async tasks to complete. This allows harness
  527. * authors to wait for async tasks outside of the Angular zone.
  528. */
  529. protected waitForTasksOutsideAngular(): Promise<void>;
  530. }
  531. /**
  532. * Base class for component harnesses that authors should extend if they anticipate that consumers
  533. * of the harness may want to access other harnesses within the `<ng-content>` of the component.
  534. */
  535. declare abstract class ContentContainerComponentHarness<S extends string = string> extends ComponentHarness implements HarnessLoader {
  536. /**
  537. * Gets a `HarnessLoader` that searches for harnesses under the first element matching the given
  538. * selector within the current harness's content.
  539. * @param selector The selector for an element in the component's content.
  540. * @returns A `HarnessLoader` that searches for harnesses under the given selector.
  541. */
  542. getChildLoader(selector: S): Promise<HarnessLoader>;
  543. /**
  544. * Gets a list of `HarnessLoader` for each element matching the given selector under the current
  545. * harness's cotnent that searches for harnesses under that element.
  546. * @param selector The selector for elements in the component's content.
  547. * @returns A list of `HarnessLoader` for each element matching the given selector.
  548. */
  549. getAllChildLoaders(selector: S): Promise<HarnessLoader[]>;
  550. /**
  551. * Gets the first matching harness for the given query within the current harness's content.
  552. * @param query The harness query to search for.
  553. * @returns The first harness matching the given query.
  554. * @throws If no matching harness is found.
  555. */
  556. getHarness<T extends ComponentHarness>(query: HarnessQuery<T>): Promise<T>;
  557. /**
  558. * Gets the first matching harness for the given query within the current harness's content.
  559. * @param query The harness query to search for.
  560. * @returns The first harness matching the given query, or null if none is found.
  561. */
  562. getHarnessOrNull<T extends ComponentHarness>(query: HarnessQuery<T>): Promise<T | null>;
  563. /**
  564. * Gets all matching harnesses for the given query within the current harness's content.
  565. * @param query The harness query to search for.
  566. * @returns The list of harness matching the given query.
  567. */
  568. getAllHarnesses<T extends ComponentHarness>(query: HarnessQuery<T>): Promise<T[]>;
  569. /**
  570. * Checks whether there is a matching harnesses for the given query within the current harness's
  571. * content.
  572. *
  573. * @param query The harness query to search for.
  574. * @returns Whetehr there is matching harnesses for the given query.
  575. */
  576. hasHarness<T extends ComponentHarness>(query: HarnessQuery<T>): Promise<boolean>;
  577. /**
  578. * Gets the root harness loader from which to start
  579. * searching for content contained by this harness.
  580. */
  581. protected getRootHarnessLoader(): Promise<HarnessLoader>;
  582. }
  583. /**
  584. * Constructor for a ComponentHarness subclass. To be a valid ComponentHarnessConstructor, the
  585. * class must also have a static `hostSelector` property.
  586. */
  587. interface ComponentHarnessConstructor<T extends ComponentHarness> {
  588. new (locatorFactory: LocatorFactory): T;
  589. /**
  590. * `ComponentHarness` subclasses must specify a static `hostSelector` property that is used to
  591. * find the host element for the corresponding component. This property should match the selector
  592. * for the Angular component.
  593. */
  594. hostSelector: string;
  595. }
  596. /** A set of criteria that can be used to filter a list of `ComponentHarness` instances. */
  597. interface BaseHarnessFilters {
  598. /** Only find instances whose host element matches the given selector. */
  599. selector?: string;
  600. /** Only find instances that are nested under an element with the given selector. */
  601. ancestor?: string;
  602. }
  603. /**
  604. * A class used to associate a ComponentHarness class with predicate functions that can be used to
  605. * filter instances of the class to be matched.
  606. */
  607. declare class HarnessPredicate<T extends ComponentHarness> {
  608. harnessType: ComponentHarnessConstructor<T>;
  609. private _predicates;
  610. private _descriptions;
  611. private _ancestor;
  612. constructor(harnessType: ComponentHarnessConstructor<T>, options: BaseHarnessFilters);
  613. /**
  614. * Checks if the specified nullable string value matches the given pattern.
  615. * @param value The nullable string value to check, or a Promise resolving to the
  616. * nullable string value.
  617. * @param pattern The pattern the value is expected to match. If `pattern` is a string,
  618. * `value` is expected to match exactly. If `pattern` is a regex, a partial match is
  619. * allowed. If `pattern` is `null`, the value is expected to be `null`.
  620. * @return Whether the value matches the pattern.
  621. */
  622. static stringMatches(value: string | null | Promise<string | null>, pattern: string | RegExp | null): Promise<boolean>;
  623. /**
  624. * Adds a predicate function to be run against candidate harnesses.
  625. * @param description A description of this predicate that may be used in error messages.
  626. * @param predicate An async predicate function.
  627. * @return this (for method chaining).
  628. */
  629. add(description: string, predicate: AsyncPredicate<T>): this;
  630. /**
  631. * Adds a predicate function that depends on an option value to be run against candidate
  632. * harnesses. If the option value is undefined, the predicate will be ignored.
  633. * @param name The name of the option (may be used in error messages).
  634. * @param option The option value.
  635. * @param predicate The predicate function to run if the option value is not undefined.
  636. * @return this (for method chaining).
  637. */
  638. addOption<O>(name: string, option: O | undefined, predicate: AsyncOptionPredicate<T, O>): this;
  639. /**
  640. * Filters a list of harnesses on this predicate.
  641. * @param harnesses The list of harnesses to filter.
  642. * @return A list of harnesses that satisfy this predicate.
  643. */
  644. filter(harnesses: T[]): Promise<T[]>;
  645. /**
  646. * Evaluates whether the given harness satisfies this predicate.
  647. * @param harness The harness to check
  648. * @return A promise that resolves to true if the harness satisfies this predicate,
  649. * and resolves to false otherwise.
  650. */
  651. evaluate(harness: T): Promise<boolean>;
  652. /** Gets a description of this predicate for use in error messages. */
  653. getDescription(): string;
  654. /** Gets the selector used to find candidate elements. */
  655. getSelector(): string;
  656. /** Adds base options common to all harness types. */
  657. private _addBaseOptions;
  658. }
  659. /**
  660. * Base harness environment class that can be extended to allow `ComponentHarness`es to be used in
  661. * different test environments (e.g. testbed, protractor, etc.). This class implements the
  662. * functionality of both a `HarnessLoader` and `LocatorFactory`. This class is generic on the raw
  663. * element type, `E`, used by the particular test environment.
  664. */
  665. declare abstract class HarnessEnvironment<E> implements HarnessLoader, LocatorFactory {
  666. /** The native root element of this `HarnessEnvironment`. */
  667. protected rawRootElement: E;
  668. /** The root element of this `HarnessEnvironment` as a `TestElement`. */
  669. get rootElement(): TestElement;
  670. set rootElement(element: TestElement);
  671. private _rootElement;
  672. protected constructor(
  673. /** The native root element of this `HarnessEnvironment`. */
  674. rawRootElement: E);
  675. /** Gets a locator factory rooted at the document root. */
  676. documentRootLocatorFactory(): LocatorFactory;
  677. /**
  678. * Creates an asynchronous locator function that can be used to find a `ComponentHarness` instance
  679. * or element under the root element of this `HarnessEnvironment`.
  680. *
  681. * For example, given the following DOM and assuming `DivHarness.hostSelector` is `'div'`
  682. *
  683. * ```html
  684. * <div id="d1"></div><div id="d2"></div>
  685. * ```
  686. *
  687. * then we expect:
  688. *
  689. * ```ts
  690. * await lf.locatorFor(DivHarness, 'div')() // Gets a `DivHarness` instance for #d1
  691. * await lf.locatorFor('div', DivHarness)() // Gets a `TestElement` instance for #d1
  692. * await lf.locatorFor('span')() // Throws because the `Promise` rejects
  693. * ```
  694. *
  695. * @param queries A list of queries specifying which harnesses and elements to search for:
  696. * - A `string` searches for elements matching the CSS selector specified by the string.
  697. * - A `ComponentHarness` constructor searches for `ComponentHarness` instances matching the
  698. * given class.
  699. * - A `HarnessPredicate` searches for `ComponentHarness` instances matching the given
  700. * predicate.
  701. * @return An asynchronous locator function that searches for and returns a `Promise` for the
  702. * first element or harness matching the given search criteria. Matches are ordered first by
  703. * order in the DOM, and second by order in the queries list. If no matches are found, the
  704. * `Promise` rejects. The type that the `Promise` resolves to is a union of all result types for
  705. * each query.
  706. */
  707. locatorFor<T extends (HarnessQuery<any> | string)[]>(...queries: T): () => Promise<LocatorFnResult<T>>;
  708. /**
  709. * Creates an asynchronous locator function that can be used to find a `ComponentHarness` instance
  710. * or element under the root element of this `HarnessEnvironmnet`.
  711. *
  712. * For example, given the following DOM and assuming `DivHarness.hostSelector` is `'div'`
  713. *
  714. * ```html
  715. * <div id="d1"></div><div id="d2"></div>
  716. * ```
  717. *
  718. * then we expect:
  719. *
  720. * ```ts
  721. * await lf.locatorForOptional(DivHarness, 'div')() // Gets a `DivHarness` instance for #d1
  722. * await lf.locatorForOptional('div', DivHarness)() // Gets a `TestElement` instance for #d1
  723. * await lf.locatorForOptional('span')() // Gets `null`
  724. * ```
  725. *
  726. * @param queries A list of queries specifying which harnesses and elements to search for:
  727. * - A `string` searches for elements matching the CSS selector specified by the string.
  728. * - A `ComponentHarness` constructor searches for `ComponentHarness` instances matching the
  729. * given class.
  730. * - A `HarnessPredicate` searches for `ComponentHarness` instances matching the given
  731. * predicate.
  732. * @return An asynchronous locator function that searches for and returns a `Promise` for the
  733. * first element or harness matching the given search criteria. Matches are ordered first by
  734. * order in the DOM, and second by order in the queries list. If no matches are found, the
  735. * `Promise` is resolved with `null`. The type that the `Promise` resolves to is a union of all
  736. * result types for each query or null.
  737. */
  738. locatorForOptional<T extends (HarnessQuery<any> | string)[]>(...queries: T): () => Promise<LocatorFnResult<T> | null>;
  739. /**
  740. * Creates an asynchronous locator function that can be used to find `ComponentHarness` instances
  741. * or elements under the root element of this `HarnessEnvironment`.
  742. *
  743. * For example, given the following DOM and assuming `DivHarness.hostSelector` is `'div'` and
  744. * `IdIsD1Harness.hostSelector` is `'#d1'`
  745. *
  746. * ```html
  747. * <div id="d1"></div><div id="d2"></div>
  748. * ```
  749. *
  750. * then we expect:
  751. *
  752. * ```ts
  753. * // Gets [DivHarness for #d1, TestElement for #d1, DivHarness for #d2, TestElement for #d2]
  754. * await lf.locatorForAll(DivHarness, 'div')()
  755. * // Gets [TestElement for #d1, TestElement for #d2]
  756. * await lf.locatorForAll('div', '#d1')()
  757. * // Gets [DivHarness for #d1, IdIsD1Harness for #d1, DivHarness for #d2]
  758. * await lf.locatorForAll(DivHarness, IdIsD1Harness)()
  759. * // Gets []
  760. * await lf.locatorForAll('span')()
  761. * ```
  762. *
  763. * @param queries A list of queries specifying which harnesses and elements to search for:
  764. * - A `string` searches for elements matching the CSS selector specified by the string.
  765. * - A `ComponentHarness` constructor searches for `ComponentHarness` instances matching the
  766. * given class.
  767. * - A `HarnessPredicate` searches for `ComponentHarness` instances matching the given
  768. * predicate.
  769. * @return An asynchronous locator function that searches for and returns a `Promise` for all
  770. * elements and harnesses matching the given search criteria. Matches are ordered first by
  771. * order in the DOM, and second by order in the queries list. If an element matches more than
  772. * one `ComponentHarness` class, the locator gets an instance of each for the same element. If
  773. * an element matches multiple `string` selectors, only one `TestElement` instance is returned
  774. * for that element. The type that the `Promise` resolves to is an array where each element is
  775. * the union of all result types for each query.
  776. */
  777. locatorForAll<T extends (HarnessQuery<any> | string)[]>(...queries: T): () => Promise<LocatorFnResult<T>[]>;
  778. /** @return A `HarnessLoader` rooted at the root element of this `HarnessEnvironment`. */
  779. rootHarnessLoader(): Promise<HarnessLoader>;
  780. /**
  781. * Gets a `HarnessLoader` instance for an element under the root of this `HarnessEnvironment`.
  782. * @param selector The selector for the root element.
  783. * @return A `HarnessLoader` rooted at the first element matching the given selector.
  784. * @throws If no matching element is found for the given selector.
  785. */
  786. harnessLoaderFor(selector: string): Promise<HarnessLoader>;
  787. /**
  788. * Gets a `HarnessLoader` instance for an element under the root of this `HarnessEnvironment`.
  789. * @param selector The selector for the root element.
  790. * @return A `HarnessLoader` rooted at the first element matching the given selector, or null if
  791. * no matching element is found.
  792. */
  793. harnessLoaderForOptional(selector: string): Promise<HarnessLoader | null>;
  794. /**
  795. * Gets a list of `HarnessLoader` instances, one for each matching element.
  796. * @param selector The selector for the root element.
  797. * @return A list of `HarnessLoader`, one rooted at each element matching the given selector.
  798. */
  799. harnessLoaderForAll(selector: string): Promise<HarnessLoader[]>;
  800. /**
  801. * Searches for an instance of the component corresponding to the given harness type under the
  802. * `HarnessEnvironment`'s root element, and returns a `ComponentHarness` for that instance. If
  803. * multiple matching components are found, a harness for the first one is returned. If no matching
  804. * component is found, an error is thrown.
  805. * @param query A query for a harness to create
  806. * @return An instance of the given harness type
  807. * @throws If a matching component instance can't be found.
  808. */
  809. getHarness<T extends ComponentHarness>(query: HarnessQuery<T>): Promise<T>;
  810. /**
  811. * Searches for an instance of the component corresponding to the given harness type under the
  812. * `HarnessEnvironment`'s root element, and returns a `ComponentHarness` for that instance. If
  813. * multiple matching components are found, a harness for the first one is returned. If no matching
  814. * component is found, null is returned.
  815. * @param query A query for a harness to create
  816. * @return An instance of the given harness type (or null if not found).
  817. */
  818. getHarnessOrNull<T extends ComponentHarness>(query: HarnessQuery<T>): Promise<T | null>;
  819. /**
  820. * Searches for all instances of the component corresponding to the given harness type under the
  821. * `HarnessEnvironment`'s root element, and returns a list `ComponentHarness` for each instance.
  822. * @param query A query for a harness to create
  823. * @return A list instances of the given harness type.
  824. */
  825. getAllHarnesses<T extends ComponentHarness>(query: HarnessQuery<T>): Promise<T[]>;
  826. /**
  827. * Searches for an instance of the component corresponding to the given harness type under the
  828. * `HarnessEnvironment`'s root element, and returns a boolean indicating if any were found.
  829. * @param query A query for a harness to create
  830. * @return A boolean indicating if an instance was found.
  831. */
  832. hasHarness<T extends ComponentHarness>(query: HarnessQuery<T>): Promise<boolean>;
  833. /**
  834. * Searches for an element with the given selector under the evironment's root element,
  835. * and returns a `HarnessLoader` rooted at the matching element. If multiple elements match the
  836. * selector, the first is used. If no elements match, an error is thrown.
  837. * @param selector The selector for the root element of the new `HarnessLoader`
  838. * @return A `HarnessLoader` rooted at the element matching the given selector.
  839. * @throws If a matching element can't be found.
  840. */
  841. getChildLoader(selector: string): Promise<HarnessLoader>;
  842. /**
  843. * Searches for all elements with the given selector under the environment's root element,
  844. * and returns an array of `HarnessLoader`s, one for each matching element, rooted at that
  845. * element.
  846. * @param selector The selector for the root element of the new `HarnessLoader`
  847. * @return A list of `HarnessLoader`s, one for each matching element, rooted at that element.
  848. */
  849. getAllChildLoaders(selector: string): Promise<HarnessLoader[]>;
  850. /** Creates a `ComponentHarness` for the given harness type with the given raw host element. */
  851. protected createComponentHarness<T extends ComponentHarness>(harnessType: ComponentHarnessConstructor<T>, element: E): T;
  852. /**
  853. * Flushes change detection and async tasks captured in the Angular zone.
  854. * In most cases it should not be necessary to call this manually. However, there may be some edge
  855. * cases where it is needed to fully flush animation events.
  856. * This is an abstrct method that must be implemented by subclasses.
  857. */
  858. abstract forceStabilize(): Promise<void>;
  859. /**
  860. * Waits for all scheduled or running async tasks to complete. This allows harness
  861. * authors to wait for async tasks outside of the Angular zone.
  862. * This is an abstrct method that must be implemented by subclasses.
  863. */
  864. abstract waitForTasksOutsideAngular(): Promise<void>;
  865. /** Gets the root element for the document. */
  866. protected abstract getDocumentRoot(): E;
  867. /** Creates a `TestElement` from a raw element. */
  868. protected abstract createTestElement(element: E): TestElement;
  869. /** Creates a `HarnessEnvironment` rooted at the given raw element. */
  870. protected abstract createEnvironment(element: E): HarnessEnvironment<E>;
  871. /**
  872. * Gets a list of all elements matching the given selector under this environment's root element.
  873. */
  874. protected abstract getAllRawElements(selector: string): Promise<E[]>;
  875. /**
  876. * Matches the given raw elements with the given list of element and harness queries to produce a
  877. * list of matched harnesses and test elements.
  878. */
  879. private _getAllHarnessesAndTestElements;
  880. /**
  881. * Check whether the given query matches the given element, if it does return the matched
  882. * `TestElement` or `ComponentHarness`, if it does not, return null. In cases where the caller
  883. * knows for sure that the query matches the element's selector, `skipSelectorCheck` can be used
  884. * to skip verification and optimize performance.
  885. */
  886. private _getQueryResultForElement;
  887. }
  888. export { ComponentHarness as C, HarnessEnvironment as H, TestKey as a, ContentContainerComponentHarness as j, HarnessPredicate as k };
  889. export type { AsyncFactoryFn as A, BaseHarnessFilters as B, ElementDimensions as E, LocatorFnResult as L, ModifierKeys as M, TestElement as T, TextOptions as b, EventData as c, HarnessLoader as d, ComponentHarnessConstructor as e, AsyncPredicate as f, AsyncOptionPredicate as g, HarnessQuery as h, LocatorFactory as i };