feat(tests): add cypress e2e for buttons demo page

cypress/integration/buttons_page_spec.ts

@@ -0,0 +1,80 @@
+import { ButtonsPo } from '../support/buttons.po';
+
+describe('Buttons page test suite', () => {
+  const buttons = new ButtonsPo();
+  const buttonTitles = buttons.exampleTitlesArr;
+  const buttonDemos = buttons.exampleDemosArr;
+
+  beforeEach(() => buttons.navigateTo());
+
+  it('buttons page loads and displays it\'s content', () => {
+    cy.get('.content')
+      .should('be.visible');
+  });
+
+  it('content header contains title and link to button component at github', () => {
+    cy.get('.content-header').children('h1').as('title')
+      .should('be.visible')
+      .and('to.contain', buttons.pageTitle);
+
+    cy.get('@title').children('a')
+      .should('be.enabled')
+      .and('have.attr', 'href', buttons.ghLinkToComponent);
+  });
+
+  it('usage code example is displayed at demo top section', () => {
+    cy.get('demo-top-section').as('demoTop').children('h2')
+      .should('be.visible')
+      .and('to.contain', buttons.titleDefaultExample);
+
+    cy.get('@demoTop').children('.prettyprint')
+      .should('be.visible')
+      .and('not.to.be.empty');
+  });
+
+  it('single button example contains header, that can be changed by click on button', () => {
+    const defaultVal = '1';
+    const afterClickVal = '0';
+
+    cy.get(buttonDemos[0]).as('singleButton')
+      .should('to.have.descendants', '.card-header')
+      .and('to.have.descendants', 'button');
+
+    cy.get('@singleButton').children('.card-header').as('header').should('to.contain', defaultVal);
+    cy.get('@singleButton').children('button').click();
+    cy.get('@header').should('to.contain', afterClickVal);
+  });
+
+
+  // unfinished, needs to think about best way to check output
+  it('checkbox example contains header, and checkboxes, that can be checked or unchecked', () => {
+    cy.get(buttonDemos[1]).as('checkboxes')
+      .should('to.have.descendants', '.card-header')
+      .and('to.have.descendants', '.btn-group');
+  });
+
+  it('disabled buttons examples contains button, that can be disabled', () => {
+    cy.get(buttonDemos[5]).as('disabledButton')
+      .should('to.have.descendants', '.btn-primary')
+      .and('to.have.descendants', '.btn-warning');
+
+    buttons.clickByText(buttonDemos[5], 'Enable/Disable');
+
+    cy.get('@disabledButton').contains('Button')
+      .should('not.to.be.enabled');
+  });
+
+  it('each demo examples are not mixed up with each other and contains code examples', () => {
+    cy.get('examples').find('h3').as('exampleTitles').each(($title, i) => {
+      expect($title).to.contain(buttonTitles[i]);
+
+      cy.get('@exampleTitles').contains(buttonTitles[i]).parent().as('currentBlock');
+
+      cy.get('@currentBlock').find(buttonDemos[i])
+        .should('to.exist');
+      cy.get('@currentBlock').find('.section').eq(1)
+        .should('be.visible')
+        .and('not.to.be.empty');
+    });
+  });
+});

cypress/support/buttons.po.ts

@@ -0,0 +1,25 @@
+import { BaseComponent } from './base.component';
+
+export class ButtonsPo extends BaseComponent {
+  pageUrl = '/buttons';
+  pageTitle = 'Buttons';
+  ghLinkToComponent = 'https://github.com/valor-software/ngx-bootstrap/tree/development/src/buttons';
+
+  exampleTitlesArr = [
+    'Single button',
+    'Checkbox',
+    'Checkbox with Reactive Forms',
+    'Radio & Uncheckable Radio',
+    'Radio with Reactive Forms',
+    'Disabled Buttons'
+  ];
+
+  exampleDemosArr = [
+    'demo-buttons-basic',
+    'demo-buttons-checkbox',
+    'demo-buttons-checkbox-reactiveforms',
+    'demo-buttons-radio',
+    'demo-buttons-radio-reactiveforms',
+    'demo-buttons-disabled'
+  ];
+}