feat(Button): implementa componente button

fix #44

.vscode/launch.json

@@ -0,0 +1,27 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "chrome",
+      "request": "launch",
+      "url": "http://localhost:4200/#",
+      "webRoot": "${workspaceFolder}"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "url": "http://localhost:9876/debug.html",
+      "webRoot": "${workspaceFolder}"
+    },
+    {
+      "name": "ng e2e",
+      "type": "node",
+      "request": "launch",
+      "program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
+      "protocol": "inspector",
+      "args": ["${workspaceFolder}/e2e/protractor.conf.js"]
+    }
+  ]
+}

e2e/src/button/button.e2e-spec.ts

@@ -0,0 +1,120 @@
+import { browser } from 'protractor';
+import { ButtonPage } from './button.po';
+
+const BUTTON_TEXT = 'Numero click eseguiti: ';
+describe('Button', () => {
+  let page: ButtonPage;
+
+  beforeEach(async() => {
+    page = new ButtonPage();
+    await page.go();
+  });
+
+  it('dovrebbe poter essere cliccato', async () => {
+    let actualValue = await page.getButtonText();
+    expect(actualValue).toBe(BUTTON_TEXT + 0);
+
+    await page.clickButton();
+
+    actualValue = await page.getButtonText();
+    expect(actualValue).toBe(BUTTON_TEXT + 1);
+  });
+
+  it('dovrebbe poter essere disabilitato', async () => {
+    let actualValue = await page.getButtonText();
+    let buttonClasses = await page.getButtonClasses();
+    let isDisabled = buttonClasses.indexOf('disabled') > -1;
+    expect(actualValue).toBe(BUTTON_TEXT + 0);
+    expect(isDisabled).toBeFalsy();
+
+    try {
+      await page.clickDisabledCheckbox();
+    } catch (ex) {
+      console.log(ex);
+    }
+
+    await page.clickButton();
+
+    actualValue = await page.getButtonText();
+    buttonClasses = await page.getButtonClasses();
+    isDisabled = buttonClasses.indexOf('disabled') > -1;
+    expect(actualValue).toBe(BUTTON_TEXT + 0);
+    expect(isDisabled).toBeTruthy();
+  });
+
+  it('dovrebbe poter essere un elemento a blocco', async () => {
+    let actualValue = await page.getButtonText();
+    let buttonClasses = await page.getButtonClasses();
+    let isDisabled = buttonClasses.indexOf('btn-block') > -1;
+    expect(actualValue).toBe(BUTTON_TEXT + 0);
+    expect(isDisabled).toBeFalsy();
+
+    await page.clickBlockCheckbox();
+    await page.clickButton();
+
+    actualValue = await page.getButtonText();
+    buttonClasses = await page.getButtonClasses();
+    isDisabled = buttonClasses.indexOf('btn-block') > -1;
+    expect(actualValue).toBe(BUTTON_TEXT + 1);
+    expect(isDisabled).toBeTruthy();
+  });
+
+  it('dovrebbe poter avere diverse dimensioni', async () => {
+    let buttonClasses = await page.getButtonClasses();
+    expect(page.isButtonStandardSize()).toBeTruthy();
+
+    await page.clickElement(page.ID_RADIO_XS);
+    buttonClasses = await page.getButtonClasses();
+    const isXsSize = buttonClasses.indexOf('btn-xs') > -1;
+    expect(page.isButtonStandardSize()).toBeFalsy();
+    expect(isXsSize).toBeTruthy();
+
+    await page.clickElement(page.ID_RADIO_SM);
+    buttonClasses = await page.getButtonClasses();
+    const isSmSize = buttonClasses.indexOf('btn-sm') > -1;
+    expect(page.isButtonStandardSize()).toBeFalsy();
+    expect(isSmSize).toBeTruthy();
+
+    await page.clickElement(page.ID_RADIO_LG);
+    buttonClasses = await page.getButtonClasses();
+    const isLgSize = buttonClasses.indexOf('btn-lg') > -1;
+    expect(page.isButtonStandardSize()).toBeFalsy();
+    expect(isLgSize).toBeTruthy();
+
+    await page.clickElement(page.ID_RADIO_STANDARD);
+    buttonClasses = await page.getButtonClasses();
+    expect(page.isButtonStandardSize()).toBeTruthy();
+  });
+
+  it('dovrebbe poter aver un colore diverso e poi avere un colore a contorno', async () => {
+    expect(page.isButtonColored()).toBeFalsy();
+    expect(page.isButtonOutlined()).toBeFalsy();
+
+    await page.clickElement(page.ID_RADIO_PRIMARY);
+    let buttonClasses = await page.getButtonClasses();
+    const isPrimaryColored = buttonClasses.indexOf('btn-primary') > -1;
+    expect(page.isButtonColored()).toBeTruthy();
+    expect(page.isButtonOutlined()).toBeFalsy();
+    expect(isPrimaryColored).toBeTruthy();
+
+    await page.clickOutlineCheckbox();
+    buttonClasses = await page.getButtonClasses();
+    const isPrimaryOutlined = buttonClasses.indexOf('btn-outline-primary') > -1;
+    expect(page.isButtonColored()).toBeFalsy();
+    expect(page.isButtonOutlined()).toBeTruthy();
+    expect(isPrimaryOutlined).toBeTruthy();
+
+    await page.clickElement(page.ID_RADIO_SECONDARY);
+    buttonClasses = await page.getButtonClasses();
+    const isSecondaryOutlined = buttonClasses.indexOf('btn-outline-secondary') > -1;
+    expect(page.isButtonColored()).toBeFalsy();
+    expect(page.isButtonOutlined()).toBeTruthy();
+    expect(isSecondaryOutlined).toBeTruthy();
+
+    await page.clickOutlineCheckbox();
+    await page.clickElement(page.ID_RADIO_NONE);
+    expect(page.isButtonColored()).toBeFalsy();
+    expect(page.isButtonOutlined()).toBeFalsy();
+  });
+
+});

e2e/src/button/button.po.ts

@@ -0,0 +1,96 @@
+import { browser, by, element, ExpectedConditions } from 'protractor';
+
+export class ButtonPage {
+  private readonly BUTTON_URL = '/#/componenti/button';
+  private readonly ID_EXAMPLE_TAB = 'button-examples-tab';
+
+  private readonly ID_BUTTON = 'button-0';
+  private readonly ID_CHECKBOX_DISABLE = this.getLabelForAttribute('checkbox-0');
+  private readonly ID_CHECKBOX_BLOCK = this.getLabelForAttribute('checkbox-1');
+  private readonly ID_CHECKBOX_OUTLINE = this.getLabelForAttribute('checkbox-2');
+
+  public readonly ID_RADIO_STANDARD = this.getLabelForAttribute('radio-1');
+  public readonly ID_RADIO_LG = this.getLabelForAttribute('radio-2');
+  public readonly ID_RADIO_SM = this.getLabelForAttribute('radio-3');
+  public readonly ID_RADIO_XS = this.getLabelForAttribute('radio-4');
+
+  public readonly ID_RADIO_NONE = this.getLabelForAttribute('radio-6');
+  public readonly ID_RADIO_PRIMARY = this.getLabelForAttribute('radio-7');
+  public readonly ID_RADIO_SECONDARY = this.getLabelForAttribute('radio-8');
+  public readonly ID_RADIO_SUCCESS = this.getLabelForAttribute('radio-9');
+  public readonly ID_RADIO_WARNING = this.getLabelForAttribute('radio-10');
+  public readonly ID_RADIO_DANGER = this.getLabelForAttribute('radio-11');
+  public readonly ID_RADIO_INFO = this.getLabelForAttribute('radio-12');
+  public readonly ID_RADIO_LIGHT = this.getLabelForAttribute('radio-13');
+  public readonly ID_RADIO_DARK = this.getLabelForAttribute('radio-14');
+
+  private getLabelForAttribute(attr: string) {
+    return `[for="${attr}"]`;
+  }
+
+  async go() {
+    await browser.get(this.BUTTON_URL);
+    await element(by.id(this.ID_EXAMPLE_TAB)).click();
+    return await browser.sleep(500);
+  }
+
+  async clickButton() {
+    await element(by.id(this.ID_BUTTON)).click();
+  }
+
+  async clickElement(id: string) {
+    await element(by.css(id)).click();
+  }
+
+  async clickDisabledCheckbox() {
+    await this.clickElement(this.ID_CHECKBOX_DISABLE);
+  }
+
+  async clickBlockCheckbox() {
+    await this.clickElement(this.ID_CHECKBOX_BLOCK);
+  }
+
+  async getButtonText() {
+    return await element(by.id(this.ID_BUTTON)).getText();
+  }
+
+  async getButtonClasses() {
+    const classAttribute = await element(by.id(this.ID_BUTTON)).getAttribute('class');
+    return classAttribute.split(' ');
+  }
+
+  async clickOutlineCheckbox() {
+    await this.clickElement(this.ID_CHECKBOX_OUTLINE);
+  }
+
+  async isButtonColored() {
+    const buttonClasses = await this.getButtonClasses();
+    return await (buttonClasses.indexOf('btn-primary') > -1)
+      || (buttonClasses.indexOf('btn-secondary') > -1)
+      || (buttonClasses.indexOf('btn-success') > -1)
+      || (buttonClasses.indexOf('btn-warning') > -1)
+      || (buttonClasses.indexOf('btn-danger') > -1)
+      || (buttonClasses.indexOf('btn-info') > -1)
+      || (buttonClasses.indexOf('btn-light') > -1)
+      || (buttonClasses.indexOf('btn-dark') > -1);
+  }
+
+  async isButtonOutlined() {
+    const buttonClasses = await this.getButtonClasses();
+    return await (buttonClasses.indexOf('btn-outline-primary') > -1)
+      || (buttonClasses.indexOf('btn-outline-secondary') > -1)
+      || (buttonClasses.indexOf('btn-outline-success') > -1)
+      || (buttonClasses.indexOf('btn-outline-warning') > -1)
+      || (buttonClasses.indexOf('btn-outline-danger') > -1)
+      || (buttonClasses.indexOf('btn-outline-info') > -1)
+      || (buttonClasses.indexOf('btn-outline-light') > -1)
+      || (buttonClasses.indexOf('btn-outline-dark') > -1);
+  }
+
+  async isButtonStandardSize() {
+    const buttonClasses = await this.getButtonClasses();
+    return await !(buttonClasses.indexOf('btn-xs') > -1)
+      && !(buttonClasses.indexOf('btn-sm') > -1)
+      && !(buttonClasses.indexOf('btn-lg') > -1);
+  }
+}