feat(RadioButton): implementazione componente radio button (#24)

* implementato componente radiobutton e relatia documentazione

* test(RadioButton): aggiungi unit test per il radio button

* test(RadioButton): aggiungi i test end to end per il componente radio button

fix #16

* chore(RadioButton): rimuovi dichiarazione di variabile non utilizzata

* passate le configurazioni a nunjucks

* Fix configurazioni Nunjacks

* chore: distintinto nunjacks da nunjacks-compile

.circleci/config.yml

@@ -18,8 +18,8 @@ jobs:
       - restore_cache:
           key: *cache_key
       - run: npm install
-      - run: npm run compodoc
-      - run: npm run nunjucks
+      - run: npm run compodoc-compile
+      - run: npm run nunjucks-compile
       - save_cache:
           key: *cache_key
           paths:

.gitignore

@@ -38,7 +38,6 @@ testem.log
 .DS_Store
 Thumbs.db
 
-
 # Generated files
 /**/*-examples.component.html
 /src/assets/documentation.json

e2e/src/radio/radio.e2e-spec.ts

@@ -0,0 +1,70 @@
+import { RadioPage } from './radio.po';
+
+describe('Radio Group', () => {
+  let page: RadioPage;
+
+  beforeEach(async() => {
+    page = new RadioPage();
+    await page.go();
+  });
+
+  it('dovrebbe iniziare con tutti i radio abilitati e Blu selezionato', async () => {
+    expect(await page.getRadioRossoChecked()).toBeFalsy();
+    expect(await page.getRadioBluChecked()).toBeTruthy();
+    expect(await page.getRadioGialloChecked()).toBeFalsy();
+    expect(await page.getRadioRossoDisabled()).toBeFalsy();
+    expect(await page.getRadioBluDisabled()).toBeFalsy();
+    expect(await page.getRadioGialloDisabled()).toBeFalsy();
+  });
+
+  it('dovrebbe interagire con l\'utente al cambio di selezione', async () => {
+    expect(await page.getRadioRossoChecked()).toBeFalsy();
+    expect(await page.getRadioBluChecked()).toBeTruthy();
+    expect(await page.getRadioGialloChecked()).toBeFalsy();
+    await page.clickRossoRadio();
+    expect(await page.getRadioRossoChecked()).toBeTruthy();
+    expect(await page.getRadioBluChecked()).toBeFalsy();
+    expect(await page.getRadioGialloChecked()).toBeFalsy();
+  });
+
+  it('dovrebbe permettere di modificare l\'abilitazione del gruppo', async () => {
+    await page.clickDisabilitatoCheckbox();
+    expect(await page.getRadioRossoDisabled()).toBeTruthy();
+    expect(await page.getRadioBluDisabled()).toBeTruthy();
+    expect(await page.getRadioGialloDisabled()).toBeTruthy();
+    await page.clickDisabilitatoCheckbox();
+    expect(await page.getRadioRossoDisabled()).toBeFalsy();
+    expect(await page.getRadioBluDisabled()).toBeFalsy();
+    expect(await page.getRadioGialloDisabled()).toBeFalsy();
+  });
+
+  it('dovrebbe evitare di far modificare la spunta se disabilitato', async () => {
+    await page.clickDisabilitatoCheckbox();
+    await page.clickRossoRadio();
+    expect(await page.getRadioRossoChecked()).toBeFalsy();
+    expect(await page.getRadioBluChecked()).toBeTruthy();
+  });
+});
+
+describe('Standalone Radio', () => {
+  let page: RadioPage;
+
+  beforeEach(async() => {
+    page = new RadioPage();
+    await page.go();
+  });
+
+  it('dovrebbe iniziare con tutti Italia selezionato', async () => {
+    expect(await page.getRadioUsaChecked()).toBeFalsy();
+    expect(await page.getRadioItaliaChecked()).toBeTruthy();
+    expect(await page.getRadioSpagnaChecked()).toBeFalsy();
+  });
+
+  it('dovrebbe interagire con l\'utente al cambio di selezione', async () => {
+    await page.clickUsaRadio();
+    expect(await page.getRadioUsaChecked()).toBeTruthy();
+    expect(await page.getRadioItaliaChecked()).toBeFalsy();
+    expect(await page.getRadioSpagnaChecked()).toBeFalsy();
+  });
+
+});

e2e/src/radio/radio.po.ts

@@ -0,0 +1,116 @@
+import { browser, by, element, ExpectedConditions } from 'protractor';
+
+export class RadioPage {
+  private readonly RADIO_URL = '/componenti/radio';
+  private readonly ID_EXAMPLE_TAB = 'radio-examples-tab';
+
+  private readonly ID_CHECKBOX_DISABILITATO = 'checkbox-0';
+  private readonly ID_RADIO_ROSSO = 'radio-4';
+  private readonly ID_RADIO_BLU = 'radio-5';
+  private readonly ID_RADIO_GIALLO = 'radio-6';
+  private readonly ID_RADIO_USA = 'radio-1';
+  private readonly ID_RADIO_ITALIA = 'radio-2';
+  private readonly ID_RADIO_SPAGNA = 'radio-3';
+
+  // [for="checkbox-0"]
+  private readonly CSS_SELECTOR_LABEL_DISABILITATO = this.getLabelForAttribute(this.ID_CHECKBOX_DISABILITATO);
+
+  // [for="radio-4"]
+  private readonly CSS_SELECTOR_LABEL_ROSSO = this.getLabelForAttribute(this.ID_RADIO_ROSSO);
+
+  // [for="radio-5"]
+  private readonly CSS_SELECTOR_LABEL_BLU = this.getLabelForAttribute(this.ID_RADIO_BLU);
+
+  // [for="radio-6"]
+  private readonly CSS_SELECTOR_LABEL_GIALLO = this.getLabelForAttribute(this.ID_RADIO_GIALLO);
+
+  // [for="radio-1"]
+  private readonly CSS_SELECTOR_LABEL_USA = this.getLabelForAttribute(this.ID_RADIO_USA);
+
+  // [for="radio-2"]
+  private readonly CSS_SELECTOR_LABEL_ITALIA = this.getLabelForAttribute(this.ID_RADIO_ITALIA);
+
+  // [for="radio-1"]
+  private readonly CSS_SELECTOR_LABEL_SPAGNA = this.getLabelForAttribute(this.ID_RADIO_SPAGNA);
+
+  private readonly ATTR_CHECKED = 'checked';
+  private readonly ATTR_DISABLED = 'disabled';
+
+  async go() {
+    await browser.get(this.RADIO_URL);
+    await element(by.id(this.ID_EXAMPLE_TAB)).click();
+    return await browser.sleep(500);
+  }
+
+  async clickDisabilitatoCheckbox() {
+    await element(by.css(this.CSS_SELECTOR_LABEL_DISABILITATO)).click();
+  }
+
+  async clickRossoRadio() {
+    await element(by.css(this.CSS_SELECTOR_LABEL_ROSSO)).click();
+  }
+
+  async clickBluRadio() {
+    await element(by.css(this.CSS_SELECTOR_LABEL_BLU)).click();
+  }
+
+  async clickGialloRadio() {
+    await element(by.css(this.CSS_SELECTOR_LABEL_GIALLO)).click();
+  }
+
+  async clickUsaRadio() {
+    await element(by.css(this.CSS_SELECTOR_LABEL_USA)).click();
+  }
+
+  async clickItaliaRadio() {
+    await element(by.css(this.CSS_SELECTOR_LABEL_ITALIA)).click();
+  }
+
+  async clickSpagnaRadio() {
+    await element(by.css(this.CSS_SELECTOR_LABEL_SPAGNA)).click();
+  }
+
+  async getRadioRossoChecked() {
+    return await this.getElementById(this.ID_RADIO_ROSSO).getAttribute(this.ATTR_CHECKED);
+  }
+
+  async getRadioBluChecked() {
+    return await this.getElementById(this.ID_RADIO_BLU).getAttribute(this.ATTR_CHECKED);
+  }
+
+  async getRadioGialloChecked() {
+    return await this.getElementById(this.ID_RADIO_GIALLO).getAttribute(this.ATTR_CHECKED);
+  }
+
+  async getRadioUsaChecked() {
+    return await this.getElementById(this.ID_RADIO_USA).getAttribute(this.ATTR_CHECKED);
+  }
+
+  async getRadioItaliaChecked() {
+    return await this.getElementById(this.ID_RADIO_ITALIA).getAttribute(this.ATTR_CHECKED);
+  }
+
+  async getRadioSpagnaChecked() {
+    return await this.getElementById(this.ID_RADIO_SPAGNA).getAttribute(this.ATTR_CHECKED);
+  }
+
+  async getRadioRossoDisabled() {
+    return await this.getElementById(this.ID_RADIO_ROSSO).getAttribute(this.ATTR_DISABLED);
+  }
+
+  async getRadioBluDisabled() {
+    return await this.getElementById(this.ID_RADIO_BLU).getAttribute(this.ATTR_DISABLED);
+  }
+
+  async getRadioGialloDisabled() {
+    return await this.getElementById(this.ID_RADIO_GIALLO).getAttribute(this.ATTR_DISABLED);
+  }
+
+  private getElementById(id) {
+    return element(by.id(id));
+  }
+
+  private getLabelForAttribute(attr: string) {
+    return `[for="${attr}"]`;
+  }
+}

nunjucks.json

@@ -0,0 +1,10 @@
+{
+  "tags": {
+    "blockStart": "{%",
+    "blockEnd": "%}",
+    "variableStart": "{$",
+    "variableEnd": "$}",
+    "commentStart": "{#",
+    "commentEnd": "#}"
+  }
+}

package.json

@@ -3,13 +3,13 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "npm run compodoc && concurrently \"npm run nunjucks -- -w\" \"ng serve\"",
+    "start": "npm run compodoc-compile && concurrently \"npm run nunjucks-compile -- -w\" \"ng serve\"",
     "build": "ng build",
     "test": "ng test design-angular-kit",
     "lint": "ng lint",
     "e2e": "ng e2e",
-    "compodoc": "compodoc -p projects/design-angular-kit/tsconfig.lib.json -e json -d src/assets",
-    "nunjucks": "nunjucks src/app/**/*.tpl"
+    "compodoc-compile": "compodoc -p projects/design-angular-kit/tsconfig.lib.json -e json -d src/assets",
+    "nunjucks-compile": "nunjucks --options nunjucks.json src/app/**/*.tpl"
   },
   "private": true,
   "dependencies": {

projects/design-angular-kit/src/lib/design-angular-kit.module.ts

@@ -3,14 +3,15 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 
 import { CheckboxComponent } from './checkbox/checkbox.component';
+import { RadioButtonComponent, RadioGroupDirective } from './radio/radio.component';
 import { ToggleComponent } from './toggle/toggle.component';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule
   ],
-  declarations: [CheckboxComponent, ToggleComponent],
-  exports: [CheckboxComponent, ToggleComponent]
+  declarations: [CheckboxComponent, ToggleComponent, RadioGroupDirective, RadioButtonComponent],
+  exports: [CheckboxComponent, ToggleComponent, RadioGroupDirective, RadioButtonComponent]
 })
 export class DesignAngularKitModule { }

projects/design-angular-kit/src/lib/radio/radio.component.html

@@ -0,0 +1,10 @@
+<div class="form-check">
+  <input type="radio"
+    [id]="id"
+    [checked]="checked"
+    [disabled]="disabled"
+    [attr.name]="name"
+    (change)="_onInputChange($event)">
+  <label
+    [attr.for]="id">{{label}}</label>
+</div>