Skip to content

Commit 01bc55c

Browse files
graphierosgraphieros
committed
Tests - Add VueDataUi universal component test
1 parent 89de305 commit 01bc55c

13 files changed

+1555
-10
lines changed

‎cypress/fixtures/vdui-components.js

+1,519
Large diffs are not rendered by default.

‎src/components/vue-data-ui.cy.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import VueDataUi from './vue-data-ui.vue';
2+
import { components } from '../../cypress/fixtures/vdui-components';
3+
4+
describe('VueDataUi', () => {
5+
6+
it('handles invalid component gracefully', () => {
7+
cy.mount(VueDataUi, { props: { component: 'InvalidComponent' } });
8+
cy.contains('The provided component InvalidComponent does not exist.')
9+
});
10+
11+
components.forEach(({ name: component, dataset, wrapperClass, config={} }) => {
12+
it(`renders ${component} inside VueDataUi`, () => {
13+
cy.mount(VueDataUi, {
14+
props: { component, dataset, config },
15+
}).then(() => {
16+
cy.get(wrapperClass).should('be.visible');
17+
});
18+
});
19+
});
20+
21+
// TODO: test emits for each component
22+
});

‎src/components/vue-data-ui.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,7 @@ const toggleAnnotator = ref(() => null);
204204
205205
onMounted(() => {
206206
if (isError.value) {
207-
throw new Error(`\n\nVue Data UI exception:\nThe provided component "${props.component}" does not exist. Check the spelling.\n\nAvailable components:\n\n${Object.keys(components).map(key => `. ${key}\n`).join('')}`);
207+
console.error(`\n\nVue Data UI exception:\nThe provided component "${props.component}" does not exist. Check the spelling.\n\nAvailable components:\n\n${Object.keys(components).map(key => `. ${key}\n`).join('')}`);
208208
}
209209
});
210210

‎src/components/vue-ui-carousel-table.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -395,7 +395,7 @@ defineExpose({
395395
</script>
396396

397397
<template>
398-
<div style="position:relative; overflow:visible;" ref="chartContainer" @mouseenter="() => setUserOptionsVisibility(true)" @mouseleave="() => setUserOptionsVisibility(false)">
398+
<div class="vue-ui-carousel-table" style="position:relative; overflow:visible;" ref="chartContainer" @mouseenter="() => setUserOptionsVisibility(true)" @mouseleave="() => setUserOptionsVisibility(false)">
399399
<div
400400
ref="tableContainer"
401401
:id="`carousel-table_${uid}`"

‎src/components/vue-ui-digits.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ const maxY = computed(() => {
5858
</script>
5959

6060
<template>
61-
<svg :xmlns="XMLNS" :viewBox="`0 0 ${maxY} 80`" :style="`background:${FINAL_CONFIG.backgroundColor};${FINAL_CONFIG.height ? `height:${FINAL_CONFIG.height};` : ''}${FINAL_CONFIG.width ? `width:${FINAL_CONFIG.width}` : ''}`">
61+
<svg class="vue-ui-digits" :xmlns="XMLNS" :viewBox="`0 0 ${maxY} 80`" :style="`background:${FINAL_CONFIG.backgroundColor};${FINAL_CONFIG.height ? `height:${FINAL_CONFIG.height};` : ''}${FINAL_CONFIG.width ? `width:${FINAL_CONFIG.width}` : ''}`">
6262
<Digit
6363
v-for="digit in digits"
6464
:x="digit.x"

‎src/components/vue-ui-mini-loader.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ const barBlur = computed(() => `blur(${FINAL_CONFIG.value.bar.trackBlur}px) hue-
5757
</script>
5858

5959
<template>
60-
<svg :xmlns="XMLNS" :viewBox="viewBox[FINAL_CONFIG.type]" style="background: transparent" width="100%">
60+
<svg class="vue-ui-mini-loader" :xmlns="XMLNS" :viewBox="viewBox[FINAL_CONFIG.type]" style="background: transparent" width="100%">
6161
<g v-if="FINAL_CONFIG.type === 'onion'">
6262
<path d="M 3 32 C 3 45 12 62 32 62 A 1 1 0 0 0 32 3" stroke-width="4" fill="none" stroke-linecap="round" :style="onionStyle.gutter + onionStyle.gutterBlur"/>
6363
<path d="M 13 32 C 13 39 19 52 32 52 A 1 1 0 0 0 32 13" stroke-width="4" fill="none" stroke-linecap="round" :style="onionStyle.gutter + onionStyle.gutterBlur"/>

‎src/components/vue-ui-smiley.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,7 @@ function getActiveColor(index) {
162162
</script>
163163

164164
<template>
165-
<div :style="`background:${FINAL_CONFIG.style.backgroundColor};font-family:${FINAL_CONFIG.style.fontFamily};width:100%;`" @mouseover="isTooltip = true" @mouseleave="isTooltip = false; hoveredValue = undefined">
165+
<div class="vue-ui-smiley" :style="`background:${FINAL_CONFIG.style.backgroundColor};font-family:${FINAL_CONFIG.style.fontFamily};width:100%;`" @mouseover="isTooltip = true" @mouseleave="isTooltip = false; hoveredValue = undefined">
166166
<!-- TITLE -->
167167
<div class="vue-ui-rating-title" v-if="FINAL_CONFIG.style.title.text" style="width:100%">
168168
<div data-cy="smiley-title" :style="`color:${FINAL_CONFIG.style.title.color};font-weight:${FINAL_CONFIG.style.title.bold ? 'bold' : 'normal'};text-align:${FINAL_CONFIG.style.title.textAlign};margin-bottom:${FINAL_CONFIG.style.title.offsetY}px;font-size:${FINAL_CONFIG.style.title.fontSize}px`">

‎src/components/vue-ui-sparkbar.vue

+1
Original file line numberDiff line numberDiff line change
@@ -233,6 +233,7 @@ function selectDatapoint(datapoint, index) {
233233

234234
<template>
235235
<div
236+
class="vue-ui-sparkbar"
236237
:style="{
237238
width: '100%',
238239
fontFamily: FINAL_CONFIG.style.fontFamily,

‎src/components/vue-ui-sparkgauge.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -188,7 +188,7 @@ const trackColor = computed(() => {
188188
</script>
189189
190190
<template>
191-
<div :style="`font-family:${FINAL_CONFIG.style.fontFamily};width: 100%; background:${FINAL_CONFIG.style.background}`">
191+
<div class="vue-ui-sparkgauge" :style="`font-family:${FINAL_CONFIG.style.fontFamily};width: 100%; background:${FINAL_CONFIG.style.background}`">
192192
<!-- TITLE TOP -->
193193
<div v-if="FINAL_CONFIG.style.title.show && nameLabel && FINAL_CONFIG.style.title.position === 'top'" class="vue-data-ui-sparkgauge-label" :style="`font-size:${FINAL_CONFIG.style.title.fontSize}px;text-align:${FINAL_CONFIG.style.title.textAlign};font-weight:${FINAL_CONFIG.style.title.bold ? 'bold': 'normal'};color:${FINAL_CONFIG.style.title.color}`">
194194
{{ nameLabel }}

‎src/components/vue-ui-sparkhistogram.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,7 @@ const animation = computed(() => {
178178
</script>
179179

180180
<template>
181-
<div :style="`width:100%;background:${FINAL_CONFIG.style.backgroundColor};font-family:${FINAL_CONFIG.style.fontFamily}`" @mouseleave="selectedIndex = null">
181+
<div class="vue-ui-spark-histogram" :style="`width:100%;background:${FINAL_CONFIG.style.backgroundColor};font-family:${FINAL_CONFIG.style.fontFamily}`" @mouseleave="selectedIndex = null">
182182
<!-- TITLE -->
183183
<div v-if="FINAL_CONFIG.style.title.text" :style="`width:calc(100% - 12px);background:transparent;margin:0 auto;margin:${FINAL_CONFIG.style.title.margin};padding: 0 6px;text-align:${FINAL_CONFIG.style.title.textAlign}`">
184184
<div :style="`font-size:${FINAL_CONFIG.style.title.fontSize}px;color:${FINAL_CONFIG.style.title.color};font-weight:${FINAL_CONFIG.style.title.bold ? 'bold' : 'normal'}`">

‎src/components/vue-ui-sparkstackbar.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -299,7 +299,7 @@ function useTooltip({ datapoint, seriesIndex }) {
299299
</script>
300300

301301
<template>
302-
<div ref="sparkstackbarChart" :style="`width:100%; background:${FINAL_CONFIG.style.backgroundColor}`">
302+
<div class="vue-ui-spark-stackbar" ref="sparkstackbarChart" :style="`width:100%; background:${FINAL_CONFIG.style.backgroundColor}`">
303303
<!-- TITLE -->
304304
<div data-cy="sparkstackbar-title-wrapper" v-if="FINAL_CONFIG.style.title.text" :style="`width:calc(100% - 12px);background:transparent;margin:0 auto;margin:${FINAL_CONFIG.style.title.margin};padding: 0 6px;text-align:${FINAL_CONFIG.style.title.textAlign}`">
305305
<div data-cy="sparkstackbar-title" :style="`font-size:${FINAL_CONFIG.style.title.fontSize}px;color:${FINAL_CONFIG.style.title.color};font-weight:${FINAL_CONFIG.style.title.bold ? 'bold' : 'normal'}`">

‎src/components/vue-ui-table-sparkline.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -465,7 +465,7 @@ defineExpose({
465465
</script>
466466
467467
<template>
468-
<div ref="tableContainer" :class="{ 'vue-ui-responsive': isResponsive }" style="overflow: hidden" :id="`table_${uid}`" @mouseenter="() => setUserOptionsVisibility(true)" @mouseleave="() => setUserOptionsVisibility(false)">
468+
<div ref="tableContainer" :class="{ 'vue-ui-table-sparkline': true, 'vue-ui-responsive': isResponsive }" style="overflow: hidden" :id="`table_${uid}`" @mouseenter="() => setUserOptionsVisibility(true)" @mouseleave="() => setUserOptionsVisibility(false)">
469469
470470
<div
471471
v-if="FINAL_CONFIG.title.text"

‎vite.config.cypress.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,8 @@ export default defineConfig({
77
alias: {
88
'vue': 'vue/dist/vue.esm-bundler.js'
99
}
10-
}
10+
},
11+
optimizeDeps: {
12+
include: ['vue-data-ui']
13+
},
1114
});

0 commit comments

Comments
 (0)