VueUiSkeleton add e2e component test

Author: graphieros

cypress/fixtures/skeleton.json

@@ -0,0 +1,116 @@
+{
+    "config": {
+        "type": "line",
+        "style": {
+            "backgroundColor": "#FFFFFF",
+            "color": "#2D353C",
+            "maxHeight": 500,
+            "animated": true,
+            "chestnut": {
+                "color": "#6376DD"
+            },
+            "sparkline": {
+                "color": "#6376DD",
+                "strokeWidth": 0.7
+            },
+            "line": {
+                "axis": {
+                    "show": true,
+                    "color": "#6376DD",
+                    "strokeWidth": 0.5
+                },
+                "path": {
+                    "color": "#6376DD",
+                    "strokeWidth": 1,
+                    "showPlots": true
+                }
+            },
+            "bar": {
+                "axis": {
+                    "show": true,
+                    "color": "#6376DD",
+                    "strokeWidth": 0.5
+                },
+                "borderRadius": 0.5,
+                "color": "#6376DD",
+                "barWidth": 9
+            },
+            "donut": {
+                "color": "#6376DD",
+                "strokeWidth": 64
+            },
+            "onion": {
+                "color": "#6376DD"
+            },
+            "gauge": {
+                "color": "#6376DD"
+            },
+            "quadrant": {
+                "grid": {
+                    "color": "#6376DD",
+                    "strokeWidth": 0.5
+                },
+                "plots": {
+                    "radius": 1.5,
+                    "color": "#6376DD"
+                }
+            },
+            "radar": {
+                "grid": {
+                    "color": "#6376DD",
+                    "strokeWidth": 0.5
+                },
+                "shapes": {
+                    "color": "#6376DD"
+                }
+            },
+            "waffle": {
+                "color": "#6376DD"
+            },
+            "table": {
+                "th": {
+                    "color": "#6376DD"
+                },
+                "td": {
+                    "color": "#6376DD",
+                    "strokeWidth": 0.5
+                }
+            },
+            "rating": {
+                "useSmiley": false,
+                "color": "#6376DD",
+                "filled": true,
+                "strokeWidth": 1,
+                "maxWidth": 200
+            },
+            "verticalBar": {
+                "axis": {
+                    "show": true,
+                    "color": "#6376DD",
+                    "strokeWidth": 0.5
+                },
+                "borderRadius": 0.5,
+                "color": "#6376DD"
+            },
+            "heatmap": {
+                "cellsX": 26,
+                "cellsY": 7,
+                "color": "#6376DD"
+            },
+            "candlesticks": {
+                "axis": {
+                    "show": true,
+                    "color": "#6376DD",
+                    "strokeWidth": 0.5
+                },
+                "candle": {
+                    "color": "#6376DD",
+                    "strokeWidth": 1
+                }
+            },
+            "pyramid": {
+                "color": "#6376DD"
+            }
+        }
+    }
+}

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

@@ -0,0 +1,116 @@
+import VueUiSkeleton from './vue-ui-skeleton.vue'
+
+describe('<VueUiSkeleton />', () => {
+
+  function updateConfigInFixture(modifiedConfig) {
+    cy.get('@fixture').then((fixture) => {
+      const updatedFixture = { ...fixture, config: modifiedConfig };
+      cy.wrap(updatedFixture).as('fixture');
+    });
+  }
+
+  beforeEach(function () {
+    cy.fixture('skeleton.json').as('fixture');
+    cy.viewport(500, 360);
+  });
+
+  it('renders', () => {
+    cy.get('@fixture').then((fixture) => {
+      cy.mount(VueUiSkeleton, {
+        props: {
+          dataset: fixture.dataset,
+          config: fixture.config
+        }
+      });
+
+      [
+        {
+          type: 'pyramid',
+          height: 400
+        },
+        {
+          type: 'sparkline',
+          height: 120
+        },
+        {
+          type: 'candlesticks',
+          height: 330
+        },
+        {
+          type: 'heatmap',
+          height: 150
+        },
+        {
+          type: 'chestnut',
+          height: 320
+        },
+        {
+          type: 'line',
+          height: 360
+        },
+        {
+          type: 'bar',
+          height: 360
+        },
+        {
+          type: 'donut',
+          height: 500
+        },
+        {
+          type: 'onion',
+          height: 500
+        },
+        {
+          type: 'gauge',
+          height: 500
+        },
+        {
+          type: 'quadrant',
+          height: 500
+        },
+        {
+          type: 'radar',
+          height: 500
+        },
+        {
+          type: 'waffle',
+          height: 500
+        },
+        {
+          type: 'table',
+          height: 360
+        },
+        {
+          type: 'rating',
+          height: 80
+        },
+        {
+          type: 'verticalBar',
+          height: 500
+        },
+      ].forEach(t => {
+        cy.wait(300);
+
+        let modifiedConfig = {
+          ...fixture.config,
+          type: t.type
+        }
+  
+        updateConfigInFixture(modifiedConfig);
+  
+        cy.mount(VueUiSkeleton, {
+          props: {
+            dataset: fixture.dataset,
+            config: modifiedConfig
+          }
+        });
+        
+        cy.viewport(500, t.height);
+
+        cy.get(`[data-cy="skeleton-${t.type}"]`)
+          .should('exist');
+
+      });
+    });
+  })
+})