feat: add disabled property on TestInput, TestTextarea and TestSelect

fixes #100

projects/ngx-speculoos/src/lib/test-input.spec.ts

@@ -11,6 +11,7 @@ import { TestInput } from './test-input';
       <input type="checkbox" id="c2" value="b" checked (change)="onChange()"/>
       <input type="radio" name="r" id="r1" value="x" (change)="onChange()"/>
       <input type="radio" name="r" id="r2" value="y" checked (change)="onChange()"/>
+      <input id="t2" disabled />
     </form>
   `
 })
@@ -43,6 +44,10 @@ class TestComponentTester extends ComponentTester<TestComponent> {
   get checkedRadio() {
     return this.input('#r2');
   }
+
+  get disabledInput() {
+    return this.input('#t2');
+  }
 }
 
 describe('TestInput', () => {
@@ -123,4 +128,9 @@ describe('TestInput', () => {
     expect(tester.componentInstance.onChange).toHaveBeenCalled();
     expect(tester.detectChanges).toHaveBeenCalled();
   });
+
+  it('should expose the disabled property', () => {
+    expect(tester.textInput.disabled).toBe(false);
+    expect(tester.disabledInput.disabled).toBe(true);
+  });
 });

projects/ngx-speculoos/src/lib/test-input.ts

@@ -33,6 +33,13 @@ export class TestInput extends TestHtmlElement<HTMLInputElement> {
     return this.nativeElement.checked;
   }
 
+  /**
+   * the disabled property of the wrapped input
+   */
+  get disabled() {
+    return this.nativeElement.disabled;
+  }
+
   /**
    * Checks the wrapped input, then dispatches an event of type change and triggers a change detection
    */

projects/ngx-speculoos/src/lib/test-select.spec.ts

@@ -11,6 +11,7 @@ import { TestSelect } from './test-select';
       <option value="a">A</option>
       <option value="b" label="B"></option>
     </select>
+    <select id="s2" disabled></select>
   `
 })
 class TestComponent {
@@ -25,6 +26,10 @@ class TestComponentTester extends ComponentTester<TestComponent> {
   get selectBox() {
     return this.select('#s1');
   }
+
+  get disabledSelectBox() {
+    return this.select('#s2');
+  }
 }
 
 describe('TestButton', () => {
@@ -112,4 +117,9 @@ describe('TestButton', () => {
   it('should expose the size', () => {
     expect(tester.selectBox.size).toBe(3);
   });
+
+  it('should expose the disabled property', () => {
+    expect(tester.selectBox.disabled).toBe(false);
+    expect(tester.disabledSelectBox.disabled).toBe(true);
+  });
 });

projects/ngx-speculoos/src/lib/test-select.ts

@@ -89,4 +89,11 @@ export class TestSelect extends TestHtmlElement<HTMLSelectElement> {
   get size() {
     return this.nativeElement.options.length;
   }
+
+  /**
+   * the disabled property of the wrapped select
+   */
+  get disabled() {
+    return this.nativeElement.disabled;
+  }
 }

projects/ngx-speculoos/src/lib/test-textarea.spec.ts

@@ -6,6 +6,7 @@ import { TestTextArea } from './test-textarea';
 @Component({
   template: `
     <textarea id="t1" value="hello" (input)="onInput()">hello</textarea>
+    <textarea id="t2" disabled></textarea>
   `
 })
 class TestComponent {
@@ -21,6 +22,10 @@ class TestComponentTester extends ComponentTester<TestComponent> {
   get textBox() {
     return this.textarea('#t1');
   }
+
+  get disabledTextBox() {
+    return this.textarea('#t2');
+  }
 }
 
 describe('TestTextArea', () => {
@@ -54,4 +59,9 @@ describe('TestTextArea', () => {
     expect(tester.componentInstance.onInput).toHaveBeenCalled();
     expect(tester.detectChanges).toHaveBeenCalled();
   });
+
+  it('should expose the disabled property', () => {
+    expect(tester.textBox.disabled).toBe(false);
+    expect(tester.disabledTextBox.disabled).toBe(true);
+  });
 });

projects/ngx-speculoos/src/lib/test-textarea.ts

@@ -25,4 +25,11 @@ export class TestTextArea extends TestHtmlElement<HTMLTextAreaElement> {
   get value() {
     return this.nativeElement.value;
   }
+
+  /**
+   * the disabled property of the wrapped select
+   */
+  get disabled() {
+    return this.nativeElement.disabled;
+  }
 }