Tests - Rewrite VueUiverticalBar component test

Author: graphieros

cypress/fixtures/vdui-components.js

@@ -1654,6 +1654,16 @@ export const components = [
                 ],
             },
         ],
+        config: {
+            style: {
+                chart: {
+                    title: {
+                        text: 'Title',
+                        subtitle: { text: 'Subtitle' }
+                    }
+                }
+            }
+        },
         wrapperClass: ".vue-ui-vertical-bar",
     },
     {

cypress/fixtures/vertical-bar.json

@@ -1,89 +1,37 @@
-import VueUiVerticalBar from './vue-ui-vertical-bar.vue'
+import VueUiVerticalBar from './vue-ui-vertical-bar.vue';
+import { components } from '../../cypress/fixtures/vdui-components';
+import { testCommonFeatures } from '../../cypress/fixtures';
 
-describe('<VueUiVerticalBar />', () => {
-
-  beforeEach(function () {
-    cy.fixture('vertical-bar.json').as('fixture');
-    cy.viewport(1000, 800);
-  });
-
-  it('segregates series when selecting legend items', () => {
-    cy.get('@fixture').then((fixture) => {
-      cy.mount(VueUiVerticalBar, {
-        props: {
-          dataset: fixture.dataset,
-          config: fixture.config
-        }
-      });
-
-      cy.get('[data-cy-legend-item]').eq(0).click()
-      cy.get('[data-cy-trap]').should('have.length', 7)
-      cy.get('[data-cy-legend-item]').eq(0).click()
-      cy.get('[data-cy-trap]').should('have.length', 8)
-    });
-  })
-
-  it('renders', () => {
-    cy.get('@fixture').then((fixture) => {
-      cy.mount(VueUiVerticalBar, {
-        props: {
-          dataset: fixture.dataset,
-          config: fixture.config
-        }
-      });
-
-      cy.get(`[data-cy="vertical-bar-div-title"]`)
-        .should('exist')
-        .contains(fixture.config.style.chart.title.text);
-
-      cy.get(`[data-cy="vertical-bar-div-subtitle"]`)
-        .should('exist')
-        .contains(fixture.config.style.chart.title.subtitle.text);
-
-      cy.get(`[data-cy="user-options-summary"]`).click();
+const { config, dataset } = components.find(c => c.name === 'VueUiVerticalBar');
 
-      cy.get(`[data-cy="user-options-table"]`).click({ force: true});
-      cy.viewport(1000, 1050);
-
-      const bars = fixture.dataset.map(d => {
-        if(d.children) {
-          return d.children.length;
-        }
-        return 1;
-      }).reduce((a,b) => a +b, 0);
-
-      for (let i = 0; i < bars; i += 1) {
-        cy.get(`[data-cy="vertical-bar-rect-underlayer-${i}"]`)
-          .should('exist')
-          .invoke('attr', 'fill')
-          .should('eq', fixture.config.style.chart.layout.bars.underlayerColor);
-        cy.get(`[data-cy="vertical-bar-datalabel-${i}"]`)
-          .should('exist');
-      }
-
-      cy.get(`[data-cy="vertical-bar-trap-0"]`)
-        .trigger('mouseenter');
-        
-      cy.get(`[data-cy="tooltip"]`)
-      .should('exist');
-      
-      cy.get(`[data-cy="vertical-bar-trap-0"]`)
-      .trigger('mouseleave');
-
-      cy.get(`[data-cy="tooltip"]`)
-      .should('not.exist');
-
-        cy.get(`[data-cy="user-options-summary"]`).click({ force: true });
-
-        // cy.get(`[data-cy="user-options-pdf"]`).click({ force: true });
-        // cy.readFile(`cypress\\Downloads\\${fixture.config.style.chart.title.text}.pdf`);
-        // cy.get(`[data-cy="user-options-xls"]`).click({ force: true });
-        // cy.readFile(`cypress\\Downloads\\${fixture.config.style.chart.title.text}.csv`);
-        // cy.get(`[data-cy="user-options-img"]`).click({ force: true });
-        // cy.readFile(`cypress\\Downloads\\${fixture.config.style.chart.title.text}.png`);
-        // cy.clearDownloads();
-        cy.get(`[data-cy="user-options-summary"]`).click({ force: true });
-
-      });
-  });
+describe('<VueUiVerticalBar />', () => {
+	it('renders', () => {
+		cy.mount(VueUiVerticalBar, {
+			props: {
+				dataset,
+				config
+			}
+		}).then(() => {
+			
+			testCommonFeatures({
+				userOptions: true,
+				title: true,
+				subtitle: true,
+				dataTable: true,
+				legend: true,
+				tooltipCallback: () => {
+					cy.get('[data-cy="tooltip-trap"]').first().trigger('mouseenter', { force: true })
+				}
+			});
+
+			cy.log('datapoints');
+			cy.get('[data-cy="datapoint-underlayer"]').should('exist').and('be.visible').and('have.length', 8);
+			cy.get('[data-cy="datapoint-bar"]').should('exist').and('be.visible').and('have.length', 8);
+			cy.get('[data-cy="datapoint-separator"]').should('exist').and('have.css', 'opacity', '1').and('have.length', 4);
+			cy.get('[data-cy="datapoint-label"]').should('exist').and('be.visible').and('have.length', 8);
+			cy.get('[data-cy="datapoint-name"]').should('exist').and('be.visible').and('have.length', 8);
+			cy.get('[data-cy="datapoint-parent-name"]').should('exist').and('be.visible').and('have.length', dataset.filter(d => !!d.children).length);
+			cy.get('[data-cy="datapoint-parent-value"]').should('exist').and('be.visible').and('have.length', dataset.filter(d => !!d.children).length);
+		});
+	});
 });