testing.mjs 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. import { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
  2. import { coerceBooleanProperty } from '@angular/cdk/coercion';
  3. /** Harness for interacting with a mat-checkbox in tests. */
  4. class MatCheckboxHarness extends ComponentHarness {
  5. static hostSelector = '.mat-mdc-checkbox';
  6. _input = this.locatorFor('input');
  7. _label = this.locatorFor('label');
  8. _inputContainer = this.locatorFor('.mdc-checkbox');
  9. /**
  10. * Gets a `HarnessPredicate` that can be used to search for a checkbox with specific attributes.
  11. * @param options Options for narrowing the search:
  12. * - `selector` finds a checkbox whose host element matches the given selector.
  13. * - `label` finds a checkbox with specific label text.
  14. * - `name` finds a checkbox with specific name.
  15. * @return a `HarnessPredicate` configured with the given options.
  16. */
  17. static with(options = {}) {
  18. return (new HarnessPredicate(this, options)
  19. .addOption('label', options.label, (harness, label) => HarnessPredicate.stringMatches(harness.getLabelText(), label))
  20. // We want to provide a filter option for "name" because the name of the checkbox is
  21. // only set on the underlying input. This means that it's not possible for developers
  22. // to retrieve the harness of a specific checkbox with name through a CSS selector.
  23. .addOption('name', options.name, async (harness, name) => (await harness.getName()) === name)
  24. .addOption('checked', options.checked, async (harness, checked) => (await harness.isChecked()) == checked)
  25. .addOption('disabled', options.disabled, async (harness, disabled) => {
  26. return (await harness.isDisabled()) === disabled;
  27. }));
  28. }
  29. /** Whether the checkbox is checked. */
  30. async isChecked() {
  31. const checked = (await this._input()).getProperty('checked');
  32. return coerceBooleanProperty(await checked);
  33. }
  34. /** Whether the checkbox is in an indeterminate state. */
  35. async isIndeterminate() {
  36. const indeterminate = (await this._input()).getProperty('indeterminate');
  37. return coerceBooleanProperty(await indeterminate);
  38. }
  39. /** Whether the checkbox is disabled. */
  40. async isDisabled() {
  41. const input = await this._input();
  42. const disabled = await input.getAttribute('disabled');
  43. if (disabled !== null) {
  44. return coerceBooleanProperty(disabled);
  45. }
  46. return (await input.getAttribute('aria-disabled')) === 'true';
  47. }
  48. /** Whether the checkbox is required. */
  49. async isRequired() {
  50. const required = (await this._input()).getProperty('required');
  51. return coerceBooleanProperty(await required);
  52. }
  53. /** Whether the checkbox is valid. */
  54. async isValid() {
  55. const invalid = (await this.host()).hasClass('ng-invalid');
  56. return !(await invalid);
  57. }
  58. /** Gets the checkbox's name. */
  59. async getName() {
  60. return (await this._input()).getAttribute('name');
  61. }
  62. /** Gets the checkbox's value. */
  63. async getValue() {
  64. return (await this._input()).getProperty('value');
  65. }
  66. /** Gets the checkbox's aria-label. */
  67. async getAriaLabel() {
  68. return (await this._input()).getAttribute('aria-label');
  69. }
  70. /** Gets the checkbox's aria-labelledby. */
  71. async getAriaLabelledby() {
  72. return (await this._input()).getAttribute('aria-labelledby');
  73. }
  74. /** Gets the checkbox's label text. */
  75. async getLabelText() {
  76. return (await this._label()).text();
  77. }
  78. /** Focuses the checkbox. */
  79. async focus() {
  80. return (await this._input()).focus();
  81. }
  82. /** Blurs the checkbox. */
  83. async blur() {
  84. return (await this._input()).blur();
  85. }
  86. /** Whether the checkbox is focused. */
  87. async isFocused() {
  88. return (await this._input()).isFocused();
  89. }
  90. /**
  91. * Toggles the checked state of the checkbox.
  92. *
  93. * Note: This attempts to toggle the checkbox as a user would, by clicking it. Therefore if you
  94. * are using `MAT_CHECKBOX_DEFAULT_OPTIONS` to change the behavior on click, calling this method
  95. * might not have the expected result.
  96. */
  97. async toggle() {
  98. const elToClick = await ((await this.isDisabled()) ? this._inputContainer() : this._input());
  99. return elToClick.click();
  100. }
  101. /**
  102. * Puts the checkbox in a checked state by toggling it if it is currently unchecked, or doing
  103. * nothing if it is already checked.
  104. *
  105. * Note: This attempts to check the checkbox as a user would, by clicking it. Therefore if you
  106. * are using `MAT_CHECKBOX_DEFAULT_OPTIONS` to change the behavior on click, calling this method
  107. * might not have the expected result.
  108. */
  109. async check() {
  110. if (!(await this.isChecked())) {
  111. await this.toggle();
  112. }
  113. }
  114. /**
  115. * Puts the checkbox in an unchecked state by toggling it if it is currently checked, or doing
  116. * nothing if it is already unchecked.
  117. *
  118. * Note: This attempts to uncheck the checkbox as a user would, by clicking it. Therefore if you
  119. * are using `MAT_CHECKBOX_DEFAULT_OPTIONS` to change the behavior on click, calling this method
  120. * might not have the expected result.
  121. */
  122. async uncheck() {
  123. if (await this.isChecked()) {
  124. await this.toggle();
  125. }
  126. }
  127. }
  128. export { MatCheckboxHarness };
  129. //# sourceMappingURL=testing.mjs.map