feat(design): moved CVA implementation to a directive

graycoreio · May 12, 2020 · d19685b · d19685b
1 parent c2611c6
commit d19685b
Show file tree

Hide file tree

Showing 9 changed files with 272 additions and 48 deletions.
diff --git a/apps/design-land/src/app/checkbox/checkbox.component.html b/apps/design-land/src/app/checkbox/checkbox.component.html
@@ -1,5 +1,5 @@
 <daff-checkbox-set [formGroup]="checkboxes">
-  <daff-checkbox formControlName="option1" value="option1">Option 1 </daff-checkbox>
-  <daff-checkbox formControlName="option2" value="option2">Option 2 </daff-checkbox>
-  <daff-checkbox formControlName="option3" value="option3">Option 3 </daff-checkbox>
+  <daff-checkbox formControlName="0" value="option1">Option 1 </daff-checkbox>
+  <daff-checkbox formControlName="1" value="option2">Option 2 </daff-checkbox>
+  <daff-checkbox formControlName="2" value="option3">Option 3 </daff-checkbox>
 </daff-checkbox-set>
diff --git a/apps/design-land/src/app/checkbox/checkbox.component.ts b/apps/design-land/src/app/checkbox/checkbox.component.ts
@@ -1,17 +1,19 @@
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormControl } from '@angular/forms';
+import { FormControl, FormArray } from '@angular/forms';
 
 @Component({
   selector: 'checkbox-component',
   templateUrl: './checkbox.component.html',
   styleUrls: ['./checkbox.component.scss'],
 
 })
-export class CheckboxComponent {
+export class CheckboxComponent implements OnInit {
 
-  checkboxes = new FormGroup({
-    option1: new FormControl('false'),
-    option2: new FormControl('true'),
-    option3: new FormControl()
-  })
-}
+  option1 = new FormControl();
+  option2 = new FormControl();
+  option3 = new FormControl();
+  checkboxes = new FormArray([this.option1, this.option2, this.option3]);
+  ngOnInit() {
+    this.checkboxes.setValue(['option1', 'false', 'false'])
+  }
+}
diff --git a/libs/design/src/atoms/form/checkbox/checkbox.component.html b/libs/design/src/atoms/form/checkbox/checkbox.component.html
@@ -1,6 +1,6 @@
 <input type="checkbox"
-aria-label="ariaLabel"
-aria-labelledby="ariaLabeledBy"
+[attr.aria-label]="label"
+[attr.aria-labelledby]="labeledBy"
 [attr.checked]="checked ? true : null"
 [attr.id] = "id"
 [attr.value]="value"

diff --git a/libs/design/src/atoms/form/checkbox/checkbox.component.spec.ts b/libs/design/src/atoms/form/checkbox/checkbox.component.spec.ts
@@ -1,7 +1,7 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { Component, DebugElement } from '@angular/core';
 import { By } from '@angular/platform-browser';
-import { ReactiveFormsModule, FormGroup, FormControl } from '@angular/forms';
+import { ReactiveFormsModule, FormGroup, FormControl, FormArray } from '@angular/forms';
 import { DaffCheckboxModule } from './checkbox.module';
 import { DaffCheckboxComponent } from './checkbox.component';
 
@@ -18,20 +18,20 @@ class CheckboxWrapperComponent { }
   template: `
  
 <daff-checkbox-set [formGroup]="checkboxGroup" name="toppings">
-  <daff-checkbox formControlName="lettuce" value="lettuce">Apple</daff-checkbox>
-  <daff-checkbox formControlName="tomato" value="tomato">Grape</daff-checkbox>
-  <daff-checkbox formControlName="pickle" value="pickle">Peach</daff-checkbox>
+  <daff-checkbox formControlName="0" value="lettuce">Apple</daff-checkbox>
+  <daff-checkbox formControlName="1" value="tomato">Grape</daff-checkbox>
+  <daff-checkbox formControlName="2" value="pickle">Peach</daff-checkbox>
 </daff-checkbox-set>
   `
 })
 class CheckboxEmbeddedComponent {
-  checkboxGroup = new FormGroup({
-    lettuce: new FormControl(),
-    tomato: new FormControl(),
-    pickle: new FormControl()
-  });
+
+  lettuce = new FormControl();
+  tomato = new FormControl();
+  pickle = new FormControl();
+  checkboxGroup = new FormArray([this.lettuce, this.tomato, this.pickle]);
   setValue() {
-    this.checkboxGroup.setValue({ lettuce: 'false', tomato: 'false', pickle: 'false' })
+    this.checkboxGroup.setValue(['lettuce', 'tomato', 'pickle'])
   }
   disable() {
     this.checkboxGroup.disable();
@@ -88,9 +88,9 @@ describe('DaffCheckboxComponent', () => {
       });
       describe('and the control value accessor implementation', () => {
         it('should let the value be set from a form control', () => {
-          embeddedComponent.checked = true;
+          embeddedComponent.checked = false;
           checkboxEmbedded.setValue();
-          expect(embeddedComponent.checked).toEqual(false);
+          expect(embeddedComponent.checked).toEqual(true);
         });
         it('should let the checkbox be disabled from a form control', () => {
           checkboxEmbedded.disable();

diff --git a/libs/design/src/atoms/form/checkbox/checkbox.component.ts b/libs/design/src/atoms/form/checkbox/checkbox.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, HostBinding, ChangeDetectionStrategy, forwardRef } from '@angular/core';
+import { Component, OnInit, Input, HostBinding, ChangeDetectionStrategy, forwardRef, EventEmitter, Output } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 let checkboxIdNum = 0;
@@ -16,34 +16,52 @@ let checkboxIdNum = 0;
   ],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class DaffCheckboxComponent implements ControlValueAccessor {
-  @Input() ariaLabel: string;
-  @Input() ariaLabeledBy: string;
+export class DaffCheckboxComponent {
+
+  /**
+   * The name of the checkbox.
+   */
   @Input() name: string;
+  /**
+   * The value of the checkbox.
+   */
   @Input() value: any;
+  /**
+   * Boolean value to determine whether or not the checkbox is checked.
+   */
   @Input() checked = false;
+  /**
+   * The id of the checkbox. Must be unique. If not entered by a user then it is generated.
+   */
   @Input() id: string = 'daff-checkbox-' + checkboxIdNum;
+  /**
+   * The aria-label of the checkbox. If not set by user then it defaults to the name of the checkbox.
+   */
+  @Input() label = name;
+  /**
+   * The aria-labeledby of the checkbox.
+   */
+  @Input() labeledBy: string;
+
+  /**
+   * Event on whether or not the 
+   */
+  @Output() selectionChange: EventEmitter<boolean> = new EventEmitter();
+
+  /**
+   * Whether the checkbox is focused.chzn-container-active
+   */
   focused: boolean;
+  /**
+   * Whether the checkbox is disabled.
+  */
   disabled: boolean;
-  
+
   @HostBinding('attr.role') role = 'checkbox';
 
 
   onChange: () => {};
   onTouched: () => {};
-
-  writeValue(value: any): void {
-    this.checked = (value === 'true' || value === 'checked' ? true : false)
-  }
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-  registerOnTouched(fn: any): void {
-    this.onTouched = fn;
-  }
-  setDisabledState?(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-  }
   @HostBinding('class.focused') get focusClass() {
     return this.focused === true;
   };
@@ -60,4 +78,16 @@ export class DaffCheckboxComponent implements ControlValueAccessor {
   constructor() {
     checkboxIdNum++;
   }
+  /**
+   * Sets checked to true.
+  */
+  select() {
+    this.checked = true;
+  }
+  /**
+   * Sets checked to false
+  */
+  deselect() {
+    this.checked = false;
+  }
 }
diff --git a/libs/design/src/atoms/form/checkbox/checkbox.module.ts b/libs/design/src/atoms/form/checkbox/checkbox.module.ts
@@ -3,15 +3,18 @@ import { NgModule } from '@angular/core';
 
 import { DaffCheckboxComponent } from './checkbox.component';
 import { DaffCheckboxSetComponent } from '../checkbox-set/checkbox-set.component';
+import { DaffCheckboxControlValueAccessorDirective } from './cva/checkbox-cva.directive';
 
 @NgModule({
     exports: [
         DaffCheckboxComponent,
-        DaffCheckboxSetComponent
+        DaffCheckboxSetComponent,
+        DaffCheckboxControlValueAccessorDirective
     ],
     declarations: [
         DaffCheckboxComponent,
-        DaffCheckboxSetComponent
+        DaffCheckboxSetComponent,
+        DaffCheckboxControlValueAccessorDirective
     ],
     imports: [],
     providers: []

diff --git a/libs/design/src/atoms/form/checkbox/cva/checkbox-cva.directive.spec.ts b/libs/design/src/atoms/form/checkbox/cva/checkbox-cva.directive.spec.ts
@@ -0,0 +1,93 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, async, TestBed } from '@angular/core/testing';
+import { ReactiveFormsModule, FormControl } from '@angular/forms';
+import { By } from '@angular/platform-browser';
+
+import { DaffCheckboxComponent } from '../checkbox.component';
+import { DaffCheckboxModule } from '../checkbox.module';
+
+
+
+@Component({
+  template: `
+    <daff-checkbox name='test' value='testValue' [formControl]='checkbox'></daff-checkbox>
+  `
+})
+class CheckboxWrapperComponent {
+  checkbox = new FormControl()
+}
+
+describe('DaffCheckboxControlValueAccessorDirective', () => {
+
+  describe('with the directive', () => {
+    let CheckboxWrapper: CheckboxWrapperComponent;
+
+    let component: DaffCheckboxComponent;
+
+    let fixture: ComponentFixture<CheckboxWrapperComponent>;
+
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        declarations: [
+          CheckboxWrapperComponent,
+        ],
+        imports: [
+          ReactiveFormsModule,
+          DaffCheckboxModule
+        ]
+      })
+        .compileComponents();
+    }));
+    describe('the DaffCheckboxComponent', () => {
+
+      beforeEach(() => {
+
+        fixture = TestBed.createComponent(CheckboxWrapperComponent);
+        CheckboxWrapper = fixture.componentInstance;
+        component = fixture.debugElement.query(By.css('daff-Checkbox')).componentInstance;
+        fixture.detectChanges();
+      });
+      it('has the writeValue function for formControls', async () => {
+
+        expect(component.checked).toEqual(false);
+
+        CheckboxWrapper.checkbox.setValue('testValue');
+
+        expect(component.checked).toEqual(true);
+      });
+    });
+
+  });
+  describe('without the directive', () => {
+    let CheckboxWrapper: CheckboxWrapperComponent;
+
+    let component: DaffCheckboxComponent;
+
+    let fixture: ComponentFixture<CheckboxWrapperComponent>;
+
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        declarations: [
+          CheckboxWrapperComponent,
+          DaffCheckboxComponent
+        ],
+        imports: [
+          ReactiveFormsModule,
+        ]
+      })
+        .compileComponents();
+    }));
+    describe('the DaffCheckboxComponent', () => {
+
+      it('throws an error without the directive to give the itself the CVA interface', async () => {
+        fixture = TestBed.createComponent(CheckboxWrapperComponent);
+        CheckboxWrapper = fixture.componentInstance;
+        expect(() => {
+          component = fixture.debugElement.query(By.css('daff-checkbox')).componentInstance;
+          fixture.detectChanges();
+        }).toThrowError()
+      });
+
+    });
+  });
+});