Skip to content

Commit 704ed07

Browse files
graphierosgraphieros
committed
Dev environment - Improve manual testing arena with dedicated app
1 parent ef69abd commit 704ed07

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+1217
-1671
lines changed

‎CONTRIBUTING.md‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,13 @@ We'd also love PRs. If you're thinking of a large PR, we advise opening up an is
1919

2020
0. [Fork][fork] and clone the repository.
2121
1. Configure and install the dependencies: `npm install`.
22-
2. `npm run prod`
23-
3. Run development: `npm run dev`. This step will install a temporary local vue-data-ui
24-
4. Create a new branch: `git checkout -b my-branch-name`.
25-
5. Make your change, add tests, and make sure the tests still pass by running `npm run prod`.
26-
6. Push to your fork and [submit a pull request][pr].
22+
2. `npm run prod`. Will run all the tests and build the package.
23+
3. cd into `manual-testing`
24+
4. `npm install` in the manual-testing directory
25+
5. `npm run dev` in the manual-testing directory: will hook the local build of the library to the testing app.
26+
6. Create a new branch: `git checkout -b my-branch-name`.
27+
7. Make your change, add tests, and make sure the tests still pass by running `npm run prod` from the root directory.
28+
8. Push to your fork and [submit a pull request][pr].
2729

2830
Here are a few things you can do that will increase the likelihood of your pull request being accepted:
2931

@@ -69,25 +71,25 @@ If a feature added in a component requires the addition of a new emit or a new e
6971
### Updating the testing arena
7072

7173
The testing arena provides a quick way to visually test changes made on components, and toggle inputs to test configs.
72-
`npm run dev` starts the dev server and serves a page where components are listed (App.vue).
74+
cd into the `manual-testing` directory and run `npm run dev` to start the dev server.
7375

74-
The page shows either 4 or 5 versions of the tested component:
76+
Each page shows several versions of the tested component:
7577

7678
1. responsive version (if applicable) in a resizable container
7779
2. local component
7880
3. local VueDataUi component
7981
4. build component
8082
5. build VueDataUi component
8183

82-
All versions 2 to 5 must be identical after running `npm run prod` then `npm run dev`
84+
All versions 2 to 5 must be identical after running `npm run prod` in the root directory then `npm run dev` in the `manual-testing` directory.
8385

8486
The testing arena is pretty raw in terms of layout. Feel free to make it better ;)
8587

8688
### Tests
8789

8890
1. Unit tests (Vitest)
8991

90-
- `npm run test` to run, add `-w` flag to watch
92+
- `npm run test` to run from the root directory, add `-w` flag to watch
9193

9294
2. Component tests (Cypress, Component testing)
93-
- `npm run test:e2e` to open Cypress
95+
- `npm run test:e2e` from the root directory to open Cypress

‎TestingArena/ArenaVueUi3dBar.vue‎

Lines changed: 25 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { useArena } from "../src/useArena";
88
99
import { VueUi3dBar } from "vue-data-ui";
1010
import { VueUi3dBar as VueUi3dBarTreeshaken } from "vue-data-ui/vue-ui-3d-bar";
11+
import ConfigKnobs from "./ConfigKnobs.vue";
1112
1213
1314
const { local, build, vduiLocal, vduiBuild, toggleTable } = useArena()
@@ -240,30 +241,32 @@ onMounted(async () => {
240241
</div>
241242
<select v-model="selectedDataset" @change="step += 1"><option>simple</option><option>stacked</option></select>
242243

243-
<div style="width: 600px; height: 600px; resize: both; overflow: auto; background: white">
244-
<LocalVueUi3dBar :key="`responsive_${step}`" :dataset="dataset" :config="{
245-
...config,
246-
responsive: true
247-
}">
248-
<!-- <template #chart-background>
249-
<div style="width: 100%; height: 100%; background: radial-gradient(at top left, red, white)"/>
250-
</template> -->
251-
<template #watermark="{ isPrinting }">
252-
<div v-if="isPrinting" style="font-size: 100px; opacity: 0.1; transform: rotate(-10deg)">
253-
WATERMARK
254-
</div>
255-
</template>
256-
<template #source>
257-
<div style="width:100%;font-size:10px;text-align:left">
258-
SOURCE: Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur, molestiae perspiciatis nam quae libero, deserunt in aperiam unde officia sint saepe laboriosam ducimus aspernatur labore! Sapiente aspernatur corrupti quis ad.
259-
</div>
260-
</template>
261-
</LocalVueUi3dBar>
262-
</div>
263-
264244
<Box comp="VueUi3dBar" :dataset="dataset">
265245
<template #title>VueUi3dBar</template>
266246

247+
<template #responsive>
248+
<div style="width: 600px; height: 600px; resize: both; overflow: auto; background: white">
249+
<LocalVueUi3dBar :key="`responsive_${step}`" :dataset="dataset" :config="{
250+
...config,
251+
responsive: true
252+
}">
253+
<!-- <template #chart-background>
254+
<div style="width: 100%; height: 100%; background: radial-gradient(at top left, red, white)"/>
255+
</template> -->
256+
<template #watermark="{ isPrinting }">
257+
<div v-if="isPrinting" style="font-size: 100px; opacity: 0.1; transform: rotate(-10deg)">
258+
WATERMARK
259+
</div>
260+
</template>
261+
<template #source>
262+
<div style="width:100%;font-size:10px;text-align:left">
263+
SOURCE: Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur, molestiae perspiciatis nam quae libero, deserunt in aperiam unde officia sint saepe laboriosam ducimus aspernatur labore! Sapiente aspernatur corrupti quis ad.
264+
</div>
265+
</template>
266+
</LocalVueUi3dBar>
267+
</div>
268+
</template>
269+
267270
<template #theme>
268271
<LocalVueUi3dBar :dataset="dataset" :config="configTheme" />
269272
</template>
@@ -300,20 +303,7 @@ onMounted(async () => {
300303
</template>
301304

302305
<template #knobs>
303-
<div
304-
style="display: flex; flex-direction: row; flex-wrap:wrap; align-items:center; width: 100%; color: #CCCCCC; gap:24px;">
305-
<div v-for="knob in model">
306-
<label style="font-size: 10px">{{ knob.key }}</label>
307-
<div
308-
style="display:flex; flex-direction:row; flex-wrap: wrap; align-items:center; gap:6px; height: 40px">
309-
<input v-if="!['none', 'select'].includes(knob.type)" :step="knob.step" :type="knob.type"
310-
:min="knob.min ?? 0" :max="knob.max ?? 0" v-model="knob.def" @change="step += 1">
311-
<select v-if="knob.type === 'select'" v-model="knob.def" @change="step += 1">
312-
<option v-for="opt in knob.options">{{ opt }}</option>
313-
</select>
314-
</div>
315-
</div>
316-
</div>
306+
<ConfigKnobs :model="model" @change="step += 1"/>
317307
</template>
318308

319309
<template #config>

‎TestingArena/ArenaVueUiAgePyramid.vue‎

Lines changed: 25 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import convertArrayToObject from "./convertModel";
77
88
import { VueUiAgePyramid } from "vue-data-ui";
99
import { VueUiAgePyramid as VueUiAgePyramidTreeshaken } from "vue-data-ui/vue-ui-age-pyramid";
10+
import ConfigKnobs from "./ConfigKnobs.vue";
1011
1112
const dataset = ref(undefined);
1213
@@ -256,30 +257,32 @@ onMounted(async () => {
256257
<button @click="toggleProps">TOGGLE PROPS: {{ isPropsToggled }}</button>
257258
<button @click="alterDataset">ALTER DATASET</button>
258259

259-
<div style="width: 600px; height: 600px; resize: both; overflow: auto; background: white">
260-
<LocalVueUiAgePyramid :key="`responsive_${step}`" :dataset="dataset" :config="{
261-
...config,
262-
responsive: true
263-
}">
264-
<template #chart-background>
265-
<div style="width: 100%; height: 100%; background: radial-gradient(at top left, red, white)"/>
266-
</template>
267-
<template #watermark="{ isPrinting }">
268-
<div v-if="isPrinting" style="font-size: 100px; opacity: 0.1; transform: rotate(-10deg)">
269-
WATERMARK
270-
</div>
271-
</template>
272-
<template #source>
273-
<div style="width:100%;font-size:10px;text-align:left">
274-
SOURCE: Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur, molestiae perspiciatis nam quae libero, deserunt in aperiam unde officia sint saepe laboriosam ducimus aspernatur labore! Sapiente aspernatur corrupti quis ad.
275-
</div>
276-
</template>
277-
</LocalVueUiAgePyramid>
278-
</div>
279-
280260
<Box comp="VueUiAgePyramid" :dataset="dataset">
281261
<template #title>VueUiAgePyramid</template>
282262

263+
<template #responsive>
264+
<div style="width: 600px; height: 600px; resize: both; overflow: auto; background: white">
265+
<LocalVueUiAgePyramid :key="`responsive_${step}`" :dataset="dataset" :config="{
266+
...config,
267+
responsive: true
268+
}">
269+
<template #chart-background>
270+
<div style="width: 100%; height: 100%; background: radial-gradient(at top left, red, white)"/>
271+
</template>
272+
<template #watermark="{ isPrinting }">
273+
<div v-if="isPrinting" style="font-size: 100px; opacity: 0.1; transform: rotate(-10deg)">
274+
WATERMARK
275+
</div>
276+
</template>
277+
<template #source>
278+
<div style="width:100%;font-size:10px;text-align:left">
279+
SOURCE: Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur, molestiae perspiciatis nam quae libero, deserunt in aperiam unde officia sint saepe laboriosam ducimus aspernatur labore! Sapiente aspernatur corrupti quis ad.
280+
</div>
281+
</template>
282+
</LocalVueUiAgePyramid>
283+
</div>
284+
</template>
285+
283286
<template #theme>
284287
<LocalVueUiAgePyramid :dataset="dataset" :config="configTheme" />
285288
</template>
@@ -393,20 +396,7 @@ onMounted(async () => {
393396
</template>
394397

395398
<template #knobs>
396-
<div
397-
style="display: flex; flex-direction: row; flex-wrap:wrap; align-items:center; width: 100%; color: #CCCCCC; gap:24px;">
398-
<div v-for="knob in model">
399-
<label style="font-size: 10px">{{ knob.key }}</label>
400-
<div
401-
style="display:flex; flex-direction:row; flex-wrap: wrap; align-items:center; gap:6px; height: 40px">
402-
<input v-if="!['none', 'select'].includes(knob.type)" :step="knob.step" :type="knob.type" :min="knob.min ?? 0"
403-
:max="knob.max ?? 0" v-model="knob.def" @change="step += 1">
404-
<select v-if="knob.type === 'select'" v-model="knob.def" @change="step += 1">
405-
<option v-for="opt in knob.options">{{ opt }}</option>
406-
</select>
407-
</div>
408-
</div>
409-
</div>
399+
<ConfigKnobs :model="model" @change="step += 1"/>
410400
</template>
411401

412402
<template #config>

‎TestingArena/ArenaVueUiAnnotator.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,8 @@ const initLastSelectedShape = ref({
9494
"isDash": false
9595
});
9696
97+
// TODO: vdui & build renders; add knobs
98+
9799
</script>
98100

99101
<template>

‎TestingArena/ArenaVueUiBullet.vue‎

Lines changed: 11 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { useArena } from "../src/useArena";
88
99
import { VueUiBullet } from "vue-data-ui";
1010
import { VueUiBullet as VueUiBulletTreeshaken } from "vue-data-ui/vue-ui-bullet";
11+
import ConfigKnobs from "./ConfigKnobs.vue";
1112
1213
const { local, build, vduiLocal, vduiBuild } = useArena()
1314
@@ -160,16 +161,18 @@ onMounted(async () => {
160161
</select>
161162
</div>
162163

163-
<div style="width: 600px; height: 600px; resize: both; overflow: auto; background: white">
164-
<LocalVueUiBullet :dataset="dataset" :config="{
165-
...config,
166-
responsive: true
167-
}" ref="local"/>
168-
</div>
169-
170164
<Box>
171165
<template #title>VueUiBullet</template>
172166

167+
<template #reponsive>
168+
<div style="width: 600px; height: 600px; resize: both; overflow: auto; background: white">
169+
<LocalVueUiBullet :dataset="dataset" :config="{
170+
...config,
171+
responsive: true
172+
}" ref="local"/>
173+
</div>
174+
</template>
175+
173176
<template #theme>
174177
<LocalVueUiBullet :dataset="dataset" :config="configTheme" />
175178
</template>
@@ -204,20 +207,7 @@ onMounted(async () => {
204207
</template>
205208

206209
<template #knobs>
207-
<div
208-
style="display: flex; flex-direction: row; flex-wrap:wrap; align-items:center; width: 100%; color: #CCCCCC; gap:24px;">
209-
<div v-for="knob in model">
210-
<label style="font-size: 10px">{{ knob.key }}</label>
211-
<div
212-
style="display:flex; flex-direction:row; flex-wrap: wrap; align-items:center; gap:6px; height: 40px">
213-
<input v-if="!['none', 'select'].includes(knob.type)" :step="knob.step" :type="knob.type" :min="knob.min ?? 0"
214-
:max="knob.max ?? 0" v-model="knob.def" @change="step += 1">
215-
<select v-if="knob.type === 'select'" v-model="knob.def" @change="step += 1">
216-
<option v-for="opt in knob.options">{{ opt }}</option>
217-
</select>
218-
</div>
219-
</div>
220-
</div>
210+
<ConfigKnobs :model="model" @change="step += 1"/>
221211
</template>
222212

223213
<template #config>

‎TestingArena/ArenaVueUiCandlestick.vue‎

Lines changed: 30 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { useArena } from "../src/useArena";
88
99
import { VueUiCandlestick } from "vue-data-ui";
1010
import { VueUiCandlestick as VueUiCandlestickTreshaken } from "vue-data-ui/vue-ui-candlestick";
11+
import ConfigKnobs from "./ConfigKnobs.vue";
1112
1213
const dataset = ref([]);
1314
@@ -371,35 +372,37 @@ function freestyle({ drawingArea, data }) {
371372
<label for="custom-tooltip" style="color:#CCCCCC">Test custom tooltip</label>
372373
</div>
373374
374-
<div style="width: 600px; height: 600px; resize: both; overflow: auto; background: white">
375-
<LocalVueUiCandlestick :key="`responsive_${step}`" :dataset="dataset" :config="{
376-
...config,
377-
responsive: true
378-
}">
379-
<template #svg="{ svg }">
380-
<g v-html="freestyle(svg)"/>
381-
</template>
382-
383-
<template #chart-background>
384-
<div style="width: 100%; height: 100%; background: radial-gradient(at top left, red, white)"/>
385-
</template>
386-
387-
<template #watermark="{ isPrinting }">
388-
<div v-if="isPrinting" style="font-size: 100px; opacity: 0.1; transform: rotate(-10deg)">
389-
WATERMARK
390-
</div>
391-
</template>
392-
<template #source>
393-
<div style="width:100%;font-size:10px;text-align:left">
394-
SOURCE: Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur, molestiae perspiciatis nam quae libero, deserunt in aperiam unde officia sint saepe laboriosam ducimus aspernatur labore! Sapiente aspernatur corrupti quis ad.
395-
</div>
396-
</template>
397-
</LocalVueUiCandlestick>
398-
</div>
399-
400375
<Box comp="VueUiCandlestick" :dataset="dataset">
401376
<template #title>VueUiCandlestick</template>
402377
378+
<template #responsive>
379+
<div style="width: 600px; height: 600px; resize: both; overflow: auto; background: white">
380+
<LocalVueUiCandlestick :key="`responsive_${step}`" :dataset="dataset" :config="{
381+
...config,
382+
responsive: true
383+
}">
384+
<template #svg="{ svg }">
385+
<g v-html="freestyle(svg)"/>
386+
</template>
387+
388+
<template #chart-background>
389+
<div style="width: 100%; height: 100%; background: radial-gradient(at top left, red, white)"/>
390+
</template>
391+
392+
<template #watermark="{ isPrinting }">
393+
<div v-if="isPrinting" style="font-size: 100px; opacity: 0.1; transform: rotate(-10deg)">
394+
WATERMARK
395+
</div>
396+
</template>
397+
<template #source>
398+
<div style="width:100%;font-size:10px;text-align:left">
399+
SOURCE: Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur, molestiae perspiciatis nam quae libero, deserunt in aperiam unde officia sint saepe laboriosam ducimus aspernatur labore! Sapiente aspernatur corrupti quis ad.
400+
</div>
401+
</template>
402+
</LocalVueUiCandlestick>
403+
</div>
404+
</template>
405+
403406
<template #theme>
404407
<LocalVueUiCandlestick :dataset="dataset" :config="configTheme" />
405408
</template>
@@ -528,20 +531,7 @@ function freestyle({ drawingArea, data }) {
528531
</template>
529532
530533
<template #knobs>
531-
<div
532-
style="display: flex; flex-direction: row; flex-wrap:wrap; align-items:center; width: 100%; color: #CCCCCC; gap:24px;">
533-
<div v-for="knob in model">
534-
<label style="font-size: 10px">{{ knob.key }}</label>
535-
<div
536-
style="display:flex; flex-direction:row; flex-wrap: wrap; align-items:center; gap:6px; height: 40px">
537-
<input v-if="!['none', 'select'].includes(knob.type)" :step="knob.step" :type="knob.type" :min="knob.min ?? 0"
538-
:max="knob.max ?? 0" v-model="knob.def" @change="step += 1">
539-
<select v-if="knob.type === 'select'" v-model="knob.def" @change="step += 1">
540-
<option v-for="opt in knob.options">{{ opt }}</option>
541-
</select>
542-
</div>
543-
</div>
544-
</div>
534+
<ConfigKnobs :model="model" @change="step += 1"/>
545535
</template>
546536
547537
<template #config>

0 commit comments

Comments
 (0)