VueUiSmiley add e2e component test

Author: graphieros

cypress/fixtures/smiley.json

@@ -0,0 +1,63 @@
+{
+    "dataset": {
+        "rating": {
+            "1": 1,
+            "2": 1,
+            "3": 1,
+            "4": 1,
+            "5": 30
+        }
+    },
+    "config": {
+        "readonly": false,
+        "style": {
+            "fontFamily": "inherit",
+            "itemSize": 32,
+            "backgroundColor": "#FFFFFF",
+            "colors": {
+                "activeReadonly": ["#e20001", "#ff9f03", "#ffd004", "#61c900", "#059f00"],
+                "active": ["#e20001", "#ff9f03", "#ffd004", "#61c900", "#059f00"],
+                "inactive": ["#e1e5e8","#e1e5e8","#e1e5e8","#e1e5e8","#e1e5e8"]
+            },
+            "icons": {
+                "filled": false,
+                "useGradient": true
+            },
+            "title": {
+                "textAlign": "center",
+                "fontSize": 20,
+                "color": "#2D353C",
+                "bold": true,
+                "text": "Title",
+                "offsetY": 6,
+                "subtitle": {
+                    "fontSize": 14,
+                    "color": "#CCCCCC",
+                    "bold": false,
+                    "text": "Subtitle",
+                    "offsetY": 12
+                }
+            },
+            "rating": {
+                "show": true,
+                "fontSize": 28,
+                "bold": true,
+                "roundingValue": 1,
+                "position": "bottom",
+                "offsetY": 0,
+                "offsetX":0
+            },
+            "tooltip": {
+                "show": true,
+                "fontSize": 14,
+                "offsetY": 0,
+                "color":"#2D353C",
+                "bold": true,
+                "backgroundColor":"#FFFFFF",
+                "borderColor": "#e1e5e8",
+                "borderRadius": 4,
+                "boxShadow":"0 6px 12px -6px rgba(0,0,0,0.2)"
+            }
+        }
+    }
+}

src/components/vue-ui-smiley.cy.js

@@ -0,0 +1,93 @@
+import VueUiSmiley from './vue-ui-smiley.vue'
+
+describe('<VueUiSmiley />', () => {
+  beforeEach(function () {
+    cy.fixture('smiley.json').as('fixture');
+    cy.viewport(800, 160);
+  });
+
+  function updateConfigInFixture(modifiedConfig) {
+    cy.get('@fixture').then((fixture) => {
+      const updatedFixture = { ...fixture, config: modifiedConfig };
+      cy.wrap(updatedFixture).as('fixture');
+    });
+  }
+
+  it('renders with different config attributes', function () {
+    cy.get('@fixture').then((fixture) => {
+      cy.mount(VueUiSmiley, {
+        props: {
+          dataset: fixture.dataset,
+          config: fixture.config
+        }
+      });
+
+      function calculateAverageRating(source) {
+        if (source === null) return null;
+        let totalSum = 0;
+        let totalCount = 0;
+
+        for (const key in source) {
+          const ratingValue = parseInt(key);
+          const ratingCount = source[key];
+
+          totalSum += ratingValue * ratingCount;
+          totalCount += ratingCount;
+        }
+
+        if (totalCount === 0) {
+          return 0;
+        }
+
+        const averageRating = totalSum / totalCount;
+        return averageRating;
+      }
+
+      const staticRating = calculateAverageRating(fixture.dataset.rating).toFixed(fixture.config.style.rating.roundingValue);
+
+      cy.get(`[data-cy="smiley-title"]`)
+        .should('exist')
+        .contains('Title');
+
+      cy.get(`[data-cy="smiley-subtitle"]`)
+        .should('exist')
+        .contains('Subtitle');
+
+      cy.get(`[data-cy="smiley-position-bottom"]`)
+        .should('exist')
+        .contains(staticRating);
+
+      for (let i = 0; i < 5; i += 1) {
+        cy.get(`[data-cy="smiley-item-${i}"]`)
+          .should('exist')
+          .click();
+
+        cy.get(`[data-cy="smiley-position-bottom"]`)
+          .contains(`${i + 1}.0`)
+      }
+
+      let modifiedConfig = {
+        ...fixture.config,
+        readonly: true
+      }
+
+      updateConfigInFixture(modifiedConfig);
+
+      cy.mount(VueUiSmiley, {
+        props: {
+          dataset: fixture.dataset,
+          config: modifiedConfig
+        }
+      });
+
+      for (let i = 0; i < 5; i += 1) {
+        cy.get(`[data-cy="smiley-item-${i}"]`)
+          .trigger('mouseenter')
+
+        cy.get(`[data-cy="smiley-tooltip-${i}"]`)
+          .should('exist')
+          .contains(`${Object.keys(fixture.dataset.rating)[i]} : ${fixture.dataset.rating[i + 1]}`)
+      }
+    });
+  });
+})