feat(tests): add full coverage for Collapse component demo (#4847)

Author: ludmilanesvitiy

cypress/full/collapse_page_spec.ts

@@ -0,0 +1,88 @@
+import { CollapsePo } from '../support/collapse.po';
+
+describe('Collapse demo page test suite', () => {
+  const collapse = new CollapsePo();
+
+  beforeEach(() => collapse.navigateTo());
+
+  describe('Events', () => {
+    const events = collapse.exampleDemosArr.events;
+
+    it('example contains "Toggle collapse" button and div block with "Some content", "Event: expanded"', () => {
+      collapse.isCollapseExpanded(events, 'true');
+      collapse.isCollapseInfoEqual(events, 'Event: expanded');
+    });
+
+    it('when user clicks on "Toggle collapse", then "Some content" disappear and user see "Event: collapsed"', () => {
+      const toglerText = 'Toggle collapse';
+      collapse.clickByText(events, toglerText);
+      collapse.isCollapseExpanded(events, 'false');
+      collapse.isCollapseInfoEqual(events, 'Event: collapsed');
+
+    });
+
+    it('when user clicks on "Toggle collapse" again, then "Some content" and "Event: expanded" appear', () => {
+      const toglerText = 'Toggle collapse';
+      collapse.dblClickByText(events, toglerText);
+      collapse.isCollapseExpanded(events, 'true');
+      collapse.isCollapseInfoEqual(events, 'Event: expanded');
+    });
+  });
+
+  describe('Manual toggle', () => {
+    const manualToggle = collapse.exampleDemosArr.manualToggle;
+
+    beforeEach(() => {
+      collapse.scrollToMenu('Manual toggle');
+    });
+
+    it('example contains "Show content" and "Hide content" buttons, div block with "Some content"', () => {
+      collapse.isBtnTxtEqual(manualToggle, 'Show content\n', 0);
+      collapse.isBtnTxtEqual(manualToggle, 'Hide content\n', 1);
+      collapse.isCollapseExpanded(manualToggle, 'true');
+
+    });
+
+    it('when user clicks on "Hide content", then collapse disappear, on "Show content" - "Some content" appear', () => {
+      collapse.clickOnBtn(manualToggle, 1);
+      collapse.isCollapseExpanded(manualToggle, 'false');
+
+      collapse.clickOnBtn(manualToggle, 0);
+      collapse.isCollapseExpanded(manualToggle, 'true');
+    });
+  });
+
+  describe('Inline display', () => {
+    const inlineDisplay = collapse.exampleDemosArr.inlineDisplay;
+
+    beforeEach(() => {
+      collapse.scrollToMenu('Inline display');
+    });
+
+    it('example contains "Inline-block" and "None" buttons', () => {
+      collapse.isBtnTxtEqual(inlineDisplay, 'Inline-block\n', 0);
+      collapse.isBtnTxtEqual(inlineDisplay, 'None\n', 1);
+      collapse.isCollapseExpanded(inlineDisplay, 'false');
+
+    });
+
+    it('when user clicks on "Inline-block", then collapse appear with inline-block, on "None" - without inline', () => {
+      collapse.clickOnBtn(inlineDisplay, 0);
+      collapse.isCollapseExpanded(inlineDisplay, 'false');
+      collapse.isCollapseWithInline(inlineDisplay, true);
+
+      collapse.clickOnBtn(inlineDisplay, 1);
+      collapse.isCollapseExpanded(inlineDisplay, 'false');
+      collapse.isCollapseWithInline(inlineDisplay, false);
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('example contains info about "aria-expanded", "aria-controls" attributes', () => {
+      const accessibilityInfo = collapse.exampleDemosArr.accessibility;
+      cy.viewport(1440, 900);
+      collapse.clickOnDemoMenu('Accessibility');
+      collapse.isDemoContainsTxt(accessibilityInfo, 'aria-expanded', 'aria-controls');
+    });
+  });
+});

cypress/integration/collapse_page_spec.ts

@@ -10,13 +10,10 @@ describe('Collapse demo page test suite', () => {
 
     it('contains togler and content, that can be collapsed', () => {
       const toglerText = 'Toggle collapse';
-
-      cy.get(`${ basic } ${ collapse.collapseClass }`)
-        .should('to.have.class', collapse.showIndicator);
+      collapse.isCollapseExpanded(basic, 'true');
 
       collapse.clickByText(basic, toglerText);
-      cy.get(`${ basic } ${ collapse.collapseClass }`)
-        .should('not.to.have.class', collapse.showIndicator);
+      collapse.isCollapseExpanded(basic, 'false');
     });
   });
 });

cypress/support/collapse.po.ts

@@ -7,8 +7,30 @@ export class CollapsePo extends BaseComponent {
 
   collapseClass = '.collapse';
   showIndicator = 'in show';
+  infoClass = '.col-md-9';
 
   exampleDemosArr = {
-    basic: 'collapse-demo'
+    basic: 'collapse-demo',
+    events: 'collapse-demo-events',
+    manualToggle: 'toggle-manual-demo',
+    inlineDisplay: 'inline-display-demo',
+    accessibility: 'demo-accessibility'
   };
+
+  isCollapseExpanded(baseSelector: string, expandedAttrValue: string) {
+    cy.get(`${ baseSelector } ${ this.collapseClass }`)
+      .should(expandedAttrValue === 'true' ? 'to.have.class' : 'not.to.have.class', this.showIndicator)
+      .and('to.have.attr', 'aria-expanded', expandedAttrValue);
+  }
+
+  isCollapseWithInline(baseSelector: string, inline: boolean) {
+    cy.get(`${ baseSelector } ${ this.collapseClass }`)
+      .should('to.have.attr', 'style', inline ? 'display: inline-block;' : 'display: none;');
+
+  }
+
+  isCollapseInfoEqual(baseSelector: string, expectedText: string) {
+    cy.get(`${ baseSelector } ${ this.infoClass }`).invoke('text')
+      .should(infoTxt => expect(infoTxt).to.equal(expectedText));
+  }
 }

docs/spec/collapse/collapse.examples.accessibility.use-case.md

@@ -1,4 +1,4 @@
-4.4: Collapse accessibility example
+4.5: Collapse accessibility example
 ===================================
 **Primary Actor**: User
 

docs/spec/collapse/collapse.examples.inline-display.use-case.md

@@ -0,0 +1,19 @@
+4.4: Collapse inline display example
+===================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user collapse with inline display example
+
+Main success scenario:
+----------------------
+1. User opens Collapse demo page
+2. User clicks on Inline display sub-menu
+3. User see clickable "Inline-block" and "None" buttons
+4. When user clicks on "Inline-block", then "Some content" appear with style: inline-block
+5. When user clicks on "None", tthen "Some content" disappear with style: display-none
+
+Variations:
+-----------
+2*. User scrolls to Inline display sub-menu