testing.mjs 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. import { ComponentHarness, HarnessPredicate, parallel } from '@angular/cdk/testing';
  2. import { coerceNumberProperty } from '@angular/cdk/coercion';
  3. /** Possible positions of a slider thumb. */
  4. var ThumbPosition;
  5. (function (ThumbPosition) {
  6. ThumbPosition[ThumbPosition["START"] = 0] = "START";
  7. ThumbPosition[ThumbPosition["END"] = 1] = "END";
  8. })(ThumbPosition || (ThumbPosition = {}));
  9. /** Harness for interacting with a thumb inside of a Material slider in tests. */
  10. class MatSliderThumbHarness extends ComponentHarness {
  11. static hostSelector = 'input[matSliderThumb], input[matSliderStartThumb], input[matSliderEndThumb]';
  12. /**
  13. * Gets a `HarnessPredicate` that can be used to search for a slider thumb with specific attributes.
  14. * @param options Options for filtering which thumb instances are considered a match.
  15. * @return a `HarnessPredicate` configured with the given options.
  16. */
  17. static with(options = {}) {
  18. return new HarnessPredicate(this, options).addOption('position', options.position, async (harness, value) => {
  19. return (await harness.getPosition()) === value;
  20. });
  21. }
  22. /** Gets the position of the thumb inside the slider. */
  23. async getPosition() {
  24. // Meant to mimic MDC's logic where `matSliderThumb` is treated as END.
  25. const isStart = (await (await this.host()).getAttribute('matSliderStartThumb')) != null;
  26. return isStart ? ThumbPosition.START : ThumbPosition.END;
  27. }
  28. /** Gets the value of the thumb. */
  29. async getValue() {
  30. return await (await this.host()).getProperty('valueAsNumber');
  31. }
  32. /** Sets the value of the thumb. */
  33. async setValue(newValue) {
  34. const input = await this.host();
  35. // Since this is a range input, we can't simulate the user interacting with it so we set the
  36. // value directly and dispatch a couple of fake events to ensure that everything fires.
  37. await input.setInputValue(newValue + '');
  38. await input.dispatchEvent('input');
  39. await input.dispatchEvent('change');
  40. }
  41. /** Gets the current percentage value of the slider. */
  42. async getPercentage() {
  43. const [value, min, max] = await parallel(() => [
  44. this.getValue(),
  45. this.getMinValue(),
  46. this.getMaxValue(),
  47. ]);
  48. return (value - min) / (max - min);
  49. }
  50. /** Gets the maximum value of the thumb. */
  51. async getMaxValue() {
  52. return coerceNumberProperty(await (await this.host()).getProperty('max'));
  53. }
  54. /** Gets the minimum value of the thumb. */
  55. async getMinValue() {
  56. return coerceNumberProperty(await (await this.host()).getProperty('min'));
  57. }
  58. /** Gets the text representation of the slider's value. */
  59. async getDisplayValue() {
  60. return (await (await this.host()).getAttribute('aria-valuetext')) || '';
  61. }
  62. /** Whether the thumb is disabled. */
  63. async isDisabled() {
  64. return (await this.host()).getProperty('disabled');
  65. }
  66. /** Gets the name of the thumb. */
  67. async getName() {
  68. return await (await this.host()).getProperty('name');
  69. }
  70. /** Gets the id of the thumb. */
  71. async getId() {
  72. return await (await this.host()).getProperty('id');
  73. }
  74. /**
  75. * Focuses the thumb and returns a promise that indicates when the
  76. * action is complete.
  77. */
  78. async focus() {
  79. return (await this.host()).focus();
  80. }
  81. /**
  82. * Blurs the thumb and returns a promise that indicates when the
  83. * action is complete.
  84. */
  85. async blur() {
  86. return (await this.host()).blur();
  87. }
  88. /** Whether the thumb is focused. */
  89. async isFocused() {
  90. return (await this.host()).isFocused();
  91. }
  92. }
  93. /** Harness for interacting with a MDC mat-slider in tests. */
  94. class MatSliderHarness extends ComponentHarness {
  95. static hostSelector = '.mat-mdc-slider';
  96. /**
  97. * Gets a `HarnessPredicate` that can be used to search for a slider with specific attributes.
  98. * @param options Options for filtering which input instances are considered a match.
  99. * @return a `HarnessPredicate` configured with the given options.
  100. */
  101. static with(options = {}) {
  102. return new HarnessPredicate(this, options)
  103. .addOption('isRange', options.isRange, async (harness, value) => {
  104. return (await harness.isRange()) === value;
  105. })
  106. .addOption('disabled', options.disabled, async (harness, disabled) => {
  107. return (await harness.isDisabled()) === disabled;
  108. });
  109. }
  110. /** Gets the start thumb of the slider (only applicable for range sliders). */
  111. async getStartThumb() {
  112. if (!(await this.isRange())) {
  113. throw Error('`getStartThumb` is only applicable for range sliders. ' +
  114. 'Did you mean to use `getEndThumb`?');
  115. }
  116. return this.locatorFor(MatSliderThumbHarness.with({ position: ThumbPosition.START }))();
  117. }
  118. /** Gets the thumb (for single point sliders), or the end thumb (for range sliders). */
  119. async getEndThumb() {
  120. return this.locatorFor(MatSliderThumbHarness.with({ position: ThumbPosition.END }))();
  121. }
  122. /** Gets whether the slider is a range slider. */
  123. async isRange() {
  124. return await (await this.host()).hasClass('mdc-slider--range');
  125. }
  126. /** Gets whether the slider is disabled. */
  127. async isDisabled() {
  128. return await (await this.host()).hasClass('mdc-slider--disabled');
  129. }
  130. /** Gets the value step increments of the slider. */
  131. async getStep() {
  132. // The same step value is forwarded to both thumbs.
  133. const startHost = await (await this.getEndThumb()).host();
  134. return coerceNumberProperty(await startHost.getProperty('step'));
  135. }
  136. /** Gets the maximum value of the slider. */
  137. async getMaxValue() {
  138. return (await this.getEndThumb()).getMaxValue();
  139. }
  140. /** Gets the minimum value of the slider. */
  141. async getMinValue() {
  142. const startThumb = (await this.isRange())
  143. ? await this.getStartThumb()
  144. : await this.getEndThumb();
  145. return startThumb.getMinValue();
  146. }
  147. }
  148. export { MatSliderHarness, MatSliderThumbHarness, ThumbPosition };
  149. //# sourceMappingURL=testing.mjs.map