= []
-function getRandomNumber(min: number, max: number) {
- return Math.random() * (max - min) + min
-}
-const createColumns = (minValue: number, maxValue: number) => {
- TIME_COL = []
- VALUE_COL = []
for (let i = 0; i < numberOfRecords; i += 1) {
- VALUE_COL.push(getRandomNumber(minValue, maxValue))
- TIME_COL.push(now + (i % recordsPerLine) * 1000 * 60)
+ VALUE_COL.push(getRandomOrFixed(fixed, i, minValue, maxValue))
+ TIME_COL.push(nowOrFixed(fixed) + (i % recordsPerLine) * 1000 * 60)
}
-}
-export const gaugeTable = memoizeOne(
- (minValue: number, maxValue: number): Table => {
- createColumns(minValue, maxValue)
- return newTable(numberOfRecords)
- .addColumn('_time', 'dateTime:RFC3339', 'time', TIME_COL)
- .addColumn('_value', 'system', 'number', VALUE_COL)
- }
-)
+ return newTable(numberOfRecords)
+ .addColumn('_time', 'dateTime:RFC3339', 'time', TIME_COL)
+ .addColumn('_value', 'system', 'number', VALUE_COL)
+}
diff --git a/stories/src/data/geoLayer.ts b/stories/src/data/geoLayer.ts
index aa6530f4..5a53a74e 100644
--- a/stories/src/data/geoLayer.ts
+++ b/stories/src/data/geoLayer.ts
@@ -1,57 +1,46 @@
-import {newTable, Table} from '../../../giraffe/src'
+import { newTable, Table } from '../../../giraffe/src'
import memoizeOne from 'memoize-one'
+import { getRandomOrFixed, nowOrFixed } from "./utils"
-const now = Date.now()
-
-function getRandomNumber(center: number, spread: number) {
- return center + (0.5 - Math.random()) * spread * 2
-}
-
-const createDataColumns = (numberOfRecords: number) => {
+export const getGeoTable = (fixed: boolean, numberOfRecords = 200) => {
const TIME_COL = []
const VALUE1_COL = []
const VALUE2_COL = []
const LAT_COL = []
const LON_COL = []
for (let i = 0; i < numberOfRecords; i += 1) {
- VALUE1_COL.push(getRandomNumber(3.5, 3.5))
- VALUE2_COL.push(getRandomNumber(50, 30))
- LAT_COL.push(getRandomNumber(40, 3))
- LON_COL.push(getRandomNumber(-78, 3))
- TIME_COL.push(now + i * 1000 * 60)
+ VALUE1_COL.push(getRandomOrFixed(fixed, i, 0, 7))
+ VALUE2_COL.push(getRandomOrFixed(fixed, i, 20, 80))
+ LAT_COL.push(getRandomOrFixed(fixed, i, 37, 43))
+ LON_COL.push(getRandomOrFixed(fixed, i, -81, -75))
+ TIME_COL.push(nowOrFixed(fixed) + i * 1000 * 60)
}
- return {TIME_COL, VALUE1_COL, VALUE2_COL, LAT_COL, LON_COL}
-}
-export const geoTable = memoizeOne(
- (numberOfRecords = 200): Table => {
- const columns = createDataColumns(numberOfRecords)
- return newTable(numberOfRecords)
- .addColumn('_time', 'dateTime:RFC3339', 'time', columns.TIME_COL)
- .addColumn('magnitude', 'double', 'number', columns.VALUE1_COL)
- .addColumn('duration', 'double', 'number', columns.VALUE2_COL)
- .addColumn('lat', 'double', 'number', columns.LAT_COL)
- .addColumn('lon', 'double', 'number', columns.LON_COL)
- }
-)
+ return newTable(numberOfRecords)
+ .addColumn('_time', 'dateTime:RFC3339', 'time', TIME_COL)
+ .addColumn('magnitude', 'double', 'number', VALUE1_COL)
+ .addColumn('duration', 'double', 'number', VALUE2_COL)
+ .addColumn('lat', 'double', 'number', LAT_COL)
+ .addColumn('lon', 'double', 'number', LON_COL)
+}
-const addTrack = (data, startLat: number, startLon: number) => {
+const addTrack = (fixed: boolean, data, startLat: number, startLon: number) => {
const tid = Math.floor(Math.random() * 1000)
let lat = startLat,
lon = startLon
for (let i = 0; i < 10; i++) {
- const time = now + i * 1000 * 60
+ const time = nowOrFixed(fixed) + i * 1000 * 60
lat += Math.random() * 1.5
lon += Math.random() * 1.5
- data.push({time, lat, lon, tid})
+ data.push({ time, lat, lon, tid })
}
}
export const geoTracks = memoizeOne(
- (lon: number, lat: number, count = 1): Table => {
+ (fixed: boolean, lon: number, lat: number, count = 1): Table => {
const data = []
for (let i = 0; i < count; i++) {
- addTrack(data, lat - 4, lon - 6)
+ addTrack(fixed, data, lat - 4, lon - 6)
}
return newTable(data.length)
.addColumn(
diff --git a/stories/src/data/randomTable.ts b/stories/src/data/randomTable.ts
index 6adf6f55..d41f914f 100644
--- a/stories/src/data/randomTable.ts
+++ b/stories/src/data/randomTable.ts
@@ -1,17 +1,14 @@
-import {newTable} from '../../../giraffe/src/utils/newTable'
+import { newTable } from '../../../giraffe/src/utils/newTable'
import memoizeOne from 'memoize-one'
+import { getRandomOrFixed, nowOrFixed } from "./utils"
-const now = Date.now()
const defaultNumberOfRecords = 80
const defaultRecordsPerLine = 20
-function getRandomNumber(max) {
- return Math.random() * Math.floor(max) - max / 2
-}
-
export const getRandomTable = memoizeOne(
(
- maxValue: number,
+ fixed: boolean,
+ maxValue: number = 200,
numberOfRecords: number = defaultNumberOfRecords,
recordsPerLine: number = defaultRecordsPerLine
) => {
@@ -20,9 +17,9 @@ export const getRandomTable = memoizeOne(
const cpuColumn = []
for (let i = 0; i < numberOfRecords; i += 1) {
- valueColumn.push(getRandomNumber(maxValue))
+ valueColumn.push(getRandomOrFixed(fixed, i, maxValue))
cpuColumn.push(`cpu${Math.floor(i / recordsPerLine)}`)
- timeColumn.push(now + (i % recordsPerLine) * 1000 * 60)
+ timeColumn.push(nowOrFixed(fixed) + (i % recordsPerLine) * 1000 * 60)
}
return newTable(numberOfRecords)
diff --git a/stories/src/data/singleStatLayer.ts b/stories/src/data/singleStatLayer.ts
index 3418f4f8..0d7e9ca0 100644
--- a/stories/src/data/singleStatLayer.ts
+++ b/stories/src/data/singleStatLayer.ts
@@ -1,24 +1,24 @@
-import {newTable} from '../../../giraffe/src'
+import { newTable } from '../../../giraffe/src'
+import { getRandomOrFixed, nowOrFixed } from "./utils"
-const now = Date.now()
const numberOfRecords = 20
const recordsPerLine = 20
const maxValue = 10
-const TIME_COL = []
-const VALUE_COL = []
-const CPU_COL = []
+export const getSingleStatTable = (fixed: boolean) => {
+ const TIME_COL = []
+ const VALUE_COL = []
+ const CPU_COL = []
-function getRandomNumber(max) {
- return Math.random() * Math.floor(max)
-}
-for (let i = 0; i < numberOfRecords; i += 1) {
- VALUE_COL.push(getRandomNumber(maxValue))
- CPU_COL.push(`cpu${Math.floor(i / recordsPerLine)}`)
- TIME_COL.push(now + (i % recordsPerLine) * 1000 * 60)
-}
+ for (let i = 0; i < numberOfRecords; i += 1) {
+ VALUE_COL.push(getRandomOrFixed(fixed, i, maxValue))
+ CPU_COL.push(`cpu${Math.floor(i / recordsPerLine)}`)
+ TIME_COL.push(nowOrFixed(fixed) + (i % recordsPerLine) * 1000 * 60)
+ }
-export const singleStatTable = newTable(numberOfRecords)
- .addColumn('_time', 'dateTime:RFC3339', 'time', TIME_COL)
- .addColumn('_value', 'system', 'number', VALUE_COL)
- .addColumn('cpu', 'string', 'string', CPU_COL)
+ return newTable(numberOfRecords)
+ .addColumn('_time', 'dateTime:RFC3339', 'time', TIME_COL)
+ .addColumn('_value', 'system', 'number', VALUE_COL)
+ .addColumn('cpu', 'string', 'string', CPU_COL)
+
+}
diff --git a/stories/src/data/stackedLineLayer.ts b/stories/src/data/stackedLineLayer.ts
index 9b9a8be8..e8729f94 100644
--- a/stories/src/data/stackedLineLayer.ts
+++ b/stories/src/data/stackedLineLayer.ts
@@ -1,6 +1,6 @@
-import {newTable} from '../../../giraffe/src'
+import { newTable } from '../../../giraffe/src'
+import { getRandomOrFixed, nowOrFixed } from "./utils"
-const now = Date.now()
const numberOfRecords = 80
const recordsPerLine = 20
const maxValue = 100
@@ -35,49 +35,48 @@ const alphabet = [
'z',
]
-const TIME_COL = []
-const VALUE_COL = []
-const CPU_COL = []
-const TEST_COL_A = []
-const TEST_COL_B = []
-const TEST_COL_C = []
-const TEST_COL_D = []
-
-function getRandomNumber(max) {
- return Math.random() * Math.floor(max)
-}
-
-function getRandomAlphabetChar() {
- const index = Math.floor(Math.random() * (alphabet.length - 1))
- return alphabet[index]
-}
+function getRandomString(fixed: boolean, i: number) {
+ function getRandomAlphabetChar(ii: number) {
+ const index = Math.floor(getRandomOrFixed(fixed, ii + i, alphabet.length - 1))
+ return alphabet[index]
+ }
-function getRandomString() {
- const stringLength = getRandomNumber(maxStringLength)
+ const stringLength = getRandomOrFixed(fixed, i, maxStringLength)
let randomString = ''
for (let i = 0; i <= stringLength; i++) {
- randomString += getRandomAlphabetChar()
+ randomString += getRandomAlphabetChar(i)
}
return randomString
}
-for (let i = 0; i < numberOfRecords; i += 1) {
- VALUE_COL.push(getRandomNumber(maxValue))
- CPU_COL.push(`cpu${Math.floor(i / recordsPerLine)}`)
- TIME_COL.push(now + (i % recordsPerLine) * 1000 * 60)
- TEST_COL_A.push(getRandomString())
- TEST_COL_B.push(getRandomString())
- TEST_COL_C.push(getRandomString())
- TEST_COL_D.push(getRandomString())
-}
+export const getStackedLineTable = (fixed: boolean) => {
+ const TIME_COL = []
+ const VALUE_COL = []
+ const CPU_COL = []
+ const TEST_COL_A = []
+ const TEST_COL_B = []
+ const TEST_COL_C = []
+ const TEST_COL_D = []
+
+ for (let i = 0; i < numberOfRecords; i += 1) {
+ VALUE_COL.push(getRandomOrFixed(fixed, i, maxValue))
+ CPU_COL.push(`cpu${Math.floor(i / recordsPerLine)}`)
+ TIME_COL.push(nowOrFixed(fixed) + (i % recordsPerLine) * 1000 * 60)
+ TEST_COL_A.push(getRandomString(fixed, i * 4 + 0))
+ TEST_COL_B.push(getRandomString(fixed, i * 4 + 1))
+ TEST_COL_C.push(getRandomString(fixed, i * 4 + 2))
+ TEST_COL_D.push(getRandomString(fixed, i * 4 + 3))
+ }
+
+ return newTable(numberOfRecords)
+ .addColumn('_time', 'dateTime:RFC3339', 'time', TIME_COL)
+ .addColumn('_value', 'system', 'number', VALUE_COL)
+ .addColumn('cpu', 'string', 'string', CPU_COL)
+ .addColumn('test_col_a', 'string', 'string', TEST_COL_A)
+ .addColumn('test_col_b', 'string', 'string', TEST_COL_B)
+ .addColumn('test_col_c', 'string', 'string', TEST_COL_C)
+ .addColumn('test_col_d', 'string', 'string', TEST_COL_D)
-export const stackedLineTable = newTable(numberOfRecords)
- .addColumn('_time', 'dateTime:RFC3339', 'time', TIME_COL)
- .addColumn('_value', 'system', 'number', VALUE_COL)
- .addColumn('cpu', 'string', 'string', CPU_COL)
- .addColumn('test_col_a', 'string', 'string', TEST_COL_A)
- .addColumn('test_col_b', 'string', 'string', TEST_COL_B)
- .addColumn('test_col_c', 'string', 'string', TEST_COL_C)
- .addColumn('test_col_d', 'string', 'string', TEST_COL_D)
+}
\ No newline at end of file
diff --git a/stories/src/data/utils.ts b/stories/src/data/utils.ts
new file mode 100644
index 00000000..7e51d780
--- /dev/null
+++ b/stories/src/data/utils.ts
@@ -0,0 +1,20 @@
+// utilities for fixing data sources of stories for regression testing
+
+export const getRandomOrFixed: {
+ (fixed: boolean, index: number, minValue: number, maxValue: number): number
+ (fixed: boolean, index: number, maxValue: number): number
+} = (fixed: boolean, index: number, minValue: number, maxValue?: number) => {
+ if (maxValue === undefined) {
+ return getRandomOrFixed(fixed, index, 0, minValue)
+ }
+
+ if (fixed) {
+ return (((Math.sin(index) + 1) / 2)) * (maxValue - minValue) + minValue
+ } else {
+ return Math.random() * (maxValue - minValue) + minValue
+ }
+}
+
+export const nowOrFixed = (fixed: boolean) => {
+ return fixed ? 0 : Date.now()
+}
diff --git a/stories/src/gauge.stories.tsx b/stories/src/gauge.stories.tsx
index 73c65016..6eb3f79b 100644
--- a/stories/src/gauge.stories.tsx
+++ b/stories/src/gauge.stories.tsx
@@ -1,15 +1,16 @@
import * as React from 'react'
-import {storiesOf} from '@storybook/react'
-import {withKnobs, number, text} from '@storybook/addon-knobs'
-import {Config, Plot, GaugeTheme} from '../../giraffe/src'
-import {DEFAULT_GAUGE_COLORS} from '../../giraffe/src'
+import { storiesOf } from '@storybook/react'
+import { withKnobs, number, text, boolean } from '@storybook/addon-knobs'
+import { Config, Plot, GaugeTheme } from '../../giraffe/src'
+import { DEFAULT_GAUGE_COLORS } from '../../giraffe/src'
-import {PlotContainer} from './helpers'
-import {gaugeTable} from './data/gaugeLayer'
+import { PlotContainer } from './helpers'
+import { getGaugeTable } from './data/gaugeLayer'
storiesOf('Gauge', module)
.addDecorator(withKnobs)
.add('Gauge', () => {
+ const fixed = boolean('Fixed data', false)
const decimalPlaces = Number(text('Decimal Places', '4'))
const lineCount = Number(text('Gauge Lines', '6'))
const smallLineCount = Number(text('Ticks between lines', '10'))
@@ -37,7 +38,7 @@ storiesOf('Gauge', module)
max: 200,
step: 1,
})
- const gaugeMin = Number(text('Gauge Min', '0'))
+ const gaugeMin = number('Gauge Min', 0)
const gaugeMax = Number(text('Gauge Max', '100'))
const prefix = text('Prefix', '')
const suffix = text('Suffix', '')
@@ -45,7 +46,7 @@ storiesOf('Gauge', module)
const tickSuffix = text('TickSuffix', '')
const config: Config = {
- table: gaugeTable(gaugeMin, gaugeMax),
+ table: getGaugeTable(fixed, gaugeMin, gaugeMax),
layers: [
{
type: 'gauge',
@@ -58,8 +59,8 @@ storiesOf('Gauge', module)
digits: decimalPlaces,
},
gaugeColors: [
- {...DEFAULT_GAUGE_COLORS[0], value: gaugeMin},
- {...DEFAULT_GAUGE_COLORS[1], value: gaugeMax},
+ { ...DEFAULT_GAUGE_COLORS[0], value: gaugeMin },
+ { ...DEFAULT_GAUGE_COLORS[1], value: gaugeMax },
],
gaugeSize,
gaugeTheme: {
diff --git a/stories/src/geo.stories.tsx b/stories/src/geo.stories.tsx
index 9d280ceb..12069741 100644
--- a/stories/src/geo.stories.tsx
+++ b/stories/src/geo.stories.tsx
@@ -3,7 +3,7 @@ import {storiesOf} from '@storybook/react'
import {Config, Plot} from '../../giraffe/src'
import {PlotContainer} from './helpers'
-import {geoTable, geoTracks} from './data/geoLayer'
+import {getGeoTable, geoTracks} from './data/geoLayer'
import {
boolean,
color,
@@ -53,6 +53,7 @@ const genericKnobs = () => {
}
const buildCircleMapStory = tileServerConfiguration => () => {
+ const fixed = boolean('Fixed data', false)
const numberOfRecords = number('Circle count', 26, {
range: true,
min: 0,
@@ -61,7 +62,7 @@ const buildCircleMapStory = tileServerConfiguration => () => {
})
const {allowPanAndZoom, latitude, longitude, zoom} = genericKnobs()
const config: Config = {
- table: geoTable(numberOfRecords),
+ table: getGeoTable(fixed, numberOfRecords),
showAxes: false,
layers: [
{
@@ -99,6 +100,7 @@ const buildCircleMapStory = tileServerConfiguration => () => {
geo.add('Circle Markers', buildCircleMapStory(osmTileServerConfiguration))
geo.add('Map Markers Static', () => {
+ const fixed = boolean('Fixed data', false)
const numberOfRecords = number('Marker count', 20, {
range: true,
min: 0,
@@ -107,7 +109,7 @@ geo.add('Map Markers Static', () => {
})
const {allowPanAndZoom, latitude, longitude, zoom} = genericKnobs()
const config: Config = {
- table: geoTable(numberOfRecords),
+ table: getGeoTable(fixed, numberOfRecords),
showAxes: false,
layers: [
{
@@ -182,6 +184,7 @@ geo.add('Map Markers Custom CSV', () => {
})
geo.add('Marker Clustering', () => {
+ const fixed = boolean('Fixed data', false)
const {allowPanAndZoom, latitude, longitude, zoom} = genericKnobs()
const maxClusterRadius = number('Maximum Cluster Radius', 50, {
range: true,
@@ -201,7 +204,7 @@ geo.add('Marker Clustering', () => {
ClusterAggregation.mean
)
const config: Config = {
- table: geoTable(200),
+ table: getGeoTable(fixed, 200),
showAxes: false,
layers: [
{
@@ -256,6 +259,7 @@ const heatmapKnobs = () => {
}
geo.add('Heatmap', () => {
+ const fixed = boolean('Fixed data', false)
const numberOfPoints = number('Data point count', 200, {
range: true,
min: 0,
@@ -265,7 +269,7 @@ geo.add('Heatmap', () => {
const {allowPanAndZoom, latitude, longitude, zoom} = genericKnobs()
const {radius, blur} = heatmapKnobs()
const config: Config = {
- table: geoTable(numberOfPoints),
+ table: getGeoTable(fixed, numberOfPoints),
showAxes: false,
layers: [
{
@@ -333,6 +337,7 @@ const trackKnobs = () => {
}
geo.add('Tracks', () => {
+ const fixed = boolean('Fixed data', false)
const numberOfTracks = number('Track count', 3, {
range: true,
min: 0,
@@ -350,7 +355,7 @@ geo.add('Tracks', () => {
endStopMarkerRadius,
} = trackKnobs()
const config: Config = {
- table: geoTracks(-74, 40, numberOfTracks),
+ table: geoTracks(fixed, -74, 40, numberOfTracks),
showAxes: false,
layers: [
{
@@ -388,6 +393,7 @@ geo.add('Tracks', () => {
})
geo.add('Layering visualizations', () => {
+ const fixed = boolean('Fixed data', false)
const {allowPanAndZoom, latitude, longitude, zoom} = genericKnobs()
const {
speed,
@@ -398,7 +404,7 @@ geo.add('Layering visualizations', () => {
endStopMarkerRadius,
} = trackKnobs()
const config: Config = {
- table: geoTracks(-74, 40),
+ table: geoTracks(fixed, -74, 40),
showAxes: false,
layers: [
{
diff --git a/stories/src/index.stories.tsx b/stories/src/index.stories.tsx
index 7dd651e1..c0640e16 100644
--- a/stories/src/index.stories.tsx
+++ b/stories/src/index.stories.tsx
@@ -3,7 +3,7 @@ import {storiesOf} from '@storybook/react'
import {withKnobs, number, select, boolean, text} from '@storybook/addon-knobs'
import {Config, Plot, MAGMA, timeFormatter} from '../../giraffe/src'
-import {stackedLineTable} from './data/stackedLineLayer'
+import {getStackedLineTable} from './data/stackedLineLayer'
import {
PlotContainer,
@@ -27,7 +27,8 @@ import {
storiesOf('XY Plot', module)
.addDecorator(withKnobs)
.add('Stacked Line Layer', () => {
- const table = tableKnob(stackedLineTable)
+ const baseTable = getStackedLineTable(boolean('Fixed data', false))
+ const table = tableKnob(baseTable)
const colors = colorSchemeKnob()
const legendFont = legendFontKnob()
const tickFont = tickFontKnob()
diff --git a/stories/src/linegraph.stories.tsx b/stories/src/linegraph.stories.tsx
index b1282fb5..f9c6e0b6 100644
--- a/stories/src/linegraph.stories.tsx
+++ b/stories/src/linegraph.stories.tsx
@@ -25,12 +25,10 @@ import {
import {tooltipFalsyValues} from './data/fluxCSV'
-const maxValue = Math.random() * Math.floor(200)
-
storiesOf('Line Graph', module)
.addDecorator(withKnobs)
.add('User defined ticks', () => {
- let table = getRandomTable(maxValue)
+ let table = getRandomTable(boolean('Fixed data', false))
const xTickStart = number('xTickStart', new Date().getTime())
const xTickStep = number('xTickStep', 200_000)
const xTotalTicks = number('xTotalTicks', 5)
diff --git a/stories/src/utilities.stories.tsx b/stories/src/utilities.stories.tsx
index c280f69e..0142f75a 100644
--- a/stories/src/utilities.stories.tsx
+++ b/stories/src/utilities.stories.tsx
@@ -10,7 +10,7 @@ import {
fromFlux,
timeFormatter,
} from '../../giraffe/src'
-import {stackedLineTable} from './data/stackedLineLayer'
+import {getStackedLineTable} from './data/stackedLineLayer'
import {PlotEnv} from '../../giraffe/src/utils/PlotEnv'
@@ -51,7 +51,8 @@ import {
storiesOf('Utilities', module)
.addDecorator(withKnobs)
.add('Screenshot A Stacked Line Layer', () => {
- const table = tableKnob(stackedLineTable)
+ const baseTable = getStackedLineTable(boolean('fixed data', false))
+ const table = tableKnob(baseTable)
const colors = colorSchemeKnob()
const legendFont = legendFontKnob()
const tickFont = tickFontKnob()
From 9623d6d1506749ea6d295af81b86d1074ff2d683 Mon Sep 17 00:00:00 2001
From: Sciator <39964450+Sciator@users.noreply.github.com>
Date: Mon, 8 Mar 2021 13:16:04 +0100
Subject: [PATCH 06/11] test: inputKnobs checkbox
---
stories/cypress/integration/test.test.ts | 11 ++++++++---
stories/cypress/support/commands.ts | 12 +++++++++---
2 files changed, 17 insertions(+), 6 deletions(-)
diff --git a/stories/cypress/integration/test.test.ts b/stories/cypress/integration/test.test.ts
index 12b0de9b..9dc626ea 100644
--- a/stories/cypress/integration/test.test.ts
+++ b/stories/cypress/integration/test.test.ts
@@ -1,5 +1,10 @@
describe('testing test', () => {
- it.only('should make snapsot of band chart', () => {
+ it.only('should fix geo data', () => {
+ cy.visitTest('Geo', 'Circle Markers')
+ cy.inputKnobs('Fixed data', true, 'boolean')
+ })
+
+ it('should make snapsot of band chart', () => {
cy.visitTest('Band Chart', 'Static: groupBy applied')
cy.inputKnobs('Time Format', 'HH:mm', 'select')
})
@@ -9,11 +14,11 @@ describe('testing test', () => {
cy.snapshotComponent('gauge-test-1')
- cy.inputKnobs('Decimal Places', 2)
+ cy.inputKnobs('Decimal Places', 2, 'number')
cy.snapshotComponent('gauge-test-2-decimal-places')
- cy.inputKnobs('Gauge Min', 20)
+ cy.inputKnobs('Gauge Min', 20, 'number')
cy.snapshotComponent('gauge-test-start-20')
})
diff --git a/stories/cypress/support/commands.ts b/stories/cypress/support/commands.ts
index e9d1e002..02a0e6ad 100644
--- a/stories/cypress/support/commands.ts
+++ b/stories/cypress/support/commands.ts
@@ -70,12 +70,14 @@ export const snapshotComponent = (
export const inputKnobs: {
(label: string, value: string): void
(label: string, value: string, type: 'select'): void
-} = (label: string, value: number | string, type: 'range' | 'select' | 'number' | 'text' = 'text') => {
+ (label: string, value: number, type: 'number'): void
+ (label: string, value: boolean, type: 'boolean'): void
+} = (label: string, value: number | string | boolean, type: 'range' | 'select' | 'number' | 'text' | 'boolean' = 'text') => {
const escapeSpaces = (str: string) => str.replace(/ /, '\\ ')
- const selector = `#${escapeSpaces(label)}, [name='${label}']`;
+ const selector = `#${escapeSpaces(label)}, [name='${label}']`
switch (type) {
case 'text':
- const valueStr = typeof value === 'number' ? value.toString() : value
+ const valueStr = value as string
cy.get(selector)
.clear({ force: true })
.type(valueStr, { force: true })
@@ -84,6 +86,10 @@ export const inputKnobs: {
cy.get(selector)
.select(value as string)
break
+ case 'boolean':
+ cy.get(selector + ' input')
+ [value ? 'check' : 'uncheck']()
+ break
case 'range':
throw new Error(`Input knobs of type ${type} not implemented`)
// todo: input - range
From cd856a2f4189ca8281ef02911021d460814d4e29 Mon Sep 17 00:00:00 2001
From: Sciator <39964450+Sciator@users.noreply.github.com>
Date: Mon, 8 Mar 2021 13:17:54 +0100
Subject: [PATCH 07/11] style: lint:fix
---
stories/cypress/support/commands.ts | 54 ++++++++++++++--------------
stories/src/annotation.stories.tsx | 46 +++++++++++++-----------
stories/src/customLayer.stories.tsx | 19 +++++-----
stories/src/data/annotation.ts | 2 +-
stories/src/data/bandLayer.ts | 4 +--
stories/src/data/gaugeLayer.ts | 10 ++++--
stories/src/data/geoLayer.ts | 6 ++--
stories/src/data/randomTable.ts | 4 +--
stories/src/data/singleStatLayer.ts | 5 ++-
stories/src/data/stackedLineLayer.ts | 11 +++---
stories/src/data/utils.ts | 2 +-
stories/src/gauge.stories.tsx | 16 ++++-----
12 files changed, 95 insertions(+), 84 deletions(-)
diff --git a/stories/cypress/support/commands.ts b/stories/cypress/support/commands.ts
index 02a0e6ad..67b690ac 100644
--- a/stories/cypress/support/commands.ts
+++ b/stories/cypress/support/commands.ts
@@ -1,5 +1,5 @@
-import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command'
-import { Options as ImageSnapshotOptions } from 'cypress-image-snapshot'
+import {addMatchImageSnapshotCommand} from 'cypress-image-snapshot/command'
+import {Options as ImageSnapshotOptions} from 'cypress-image-snapshot'
addMatchImageSnapshotCommand()
@@ -72,43 +72,45 @@ export const inputKnobs: {
(label: string, value: string, type: 'select'): void
(label: string, value: number, type: 'number'): void
(label: string, value: boolean, type: 'boolean'): void
-} = (label: string, value: number | string | boolean, type: 'range' | 'select' | 'number' | 'text' | 'boolean' = 'text') => {
+} = (
+ label: string,
+ value: number | string | boolean,
+ type: 'range' | 'select' | 'number' | 'text' | 'boolean' = 'text'
+) => {
const escapeSpaces = (str: string) => str.replace(/ /, '\\ ')
const selector = `#${escapeSpaces(label)}, [name='${label}']`
switch (type) {
case 'text':
const valueStr = value as string
cy.get(selector)
- .clear({ force: true })
- .type(valueStr, { force: true })
+ .clear({force: true})
+ .type(valueStr, {force: true})
break
case 'select':
- cy.get(selector)
- .select(value as string)
+ cy.get(selector).select(value as string)
break
case 'boolean':
- cy.get(selector + ' input')
- [value ? 'check' : 'uncheck']()
+ cy.get(selector + ' input')[value ? 'check' : 'uncheck']()
break
case 'range':
throw new Error(`Input knobs of type ${type} not implemented`)
- // todo: input - range
- cy.get(`[name='${escapeSpaces(label)}']`)
- // .then(x => {
- // x.first().trigger("change", {value})
- // })
- // .invoke('val', value)
- // .invoke('attr', 'value', value)
- // .trigger('input', { force: true, data: value })
- // .trigger('change', { force: true, value })
- // .invoke('mouseup')
- // .trigger('blur')
- // .type(100)
- // .trigger('mousedown', { which: 1 })
- // .trigger('mousemove', { clientX: 0, clientY: 100 })
- // .trigger('mouseup', {force: true})
- cy.wait(1000)
- break
+ // todo: input - range
+ // cy.get(`[name='${escapeSpaces(label)}']`)
+ // // .then(x => {
+ // // x.first().trigger("change", {value})
+ // // })
+ // // .invoke('val', value)
+ // // .invoke('attr', 'value', value)
+ // // .trigger('input', { force: true, data: value })
+ // // .trigger('change', { force: true, value })
+ // // .invoke('mouseup')
+ // // .trigger('blur')
+ // // .type(100)
+ // // .trigger('mousedown', { which: 1 })
+ // // .trigger('mousemove', { clientX: 0, clientY: 100 })
+ // // .trigger('mouseup', {force: true})
+ // cy.wait(1000)
+ // break
default:
throw new Error(`Input knobs of type ${type} not implemented`)
}
diff --git a/stories/src/annotation.stories.tsx b/stories/src/annotation.stories.tsx
index be2255bb..74a4dece 100644
--- a/stories/src/annotation.stories.tsx
+++ b/stories/src/annotation.stories.tsx
@@ -1,8 +1,8 @@
import * as React from 'react'
-import { storiesOf } from '@storybook/react'
-import { boolean, number, select, text, withKnobs } from '@storybook/addon-knobs'
-import { Config, Plot, LayerConfig, timeFormatter } from '../../giraffe/src'
-import { TIME, VALUE } from '../../giraffe/src/constants/columnKeys'
+import {storiesOf} from '@storybook/react'
+import {boolean, number, select, text, withKnobs} from '@storybook/addon-knobs'
+import {Config, Plot, LayerConfig, timeFormatter} from '../../giraffe/src'
+import {TIME, VALUE} from '../../giraffe/src/constants/columnKeys'
import {
PlotContainer,
@@ -22,7 +22,7 @@ import {
annotationPinKnob,
} from './helpers'
-import { matchAnnotationsToTable, getAnnotationsTable } from './data/annotation'
+import {matchAnnotationsToTable, getAnnotationsTable} from './data/annotation'
storiesOf('Annotations', module)
.addDecorator(withKnobs)
@@ -73,7 +73,7 @@ storiesOf('Annotations', module)
const yTotalTicks = number('Y Total Ticks', 10)
const position = select(
'Line Position',
- { stacked: 'stacked', overlaid: 'overlaid' },
+ {stacked: 'stacked', overlaid: 'overlaid'},
'overlaid'
)
const interpolation = interpolationKnob()
@@ -81,7 +81,7 @@ storiesOf('Annotations', module)
const lineWidth = number('Line Width', 1)
const hoverDimension = select(
'Hover Dimension',
- { auto: 'auto', x: 'x', y: 'y', xy: 'xy' },
+ {auto: 'auto', x: 'x', y: 'y', xy: 'xy'},
'auto'
)
@@ -122,9 +122,10 @@ storiesOf('Annotations', module)
const config: Config = {
table,
valueFormatters: {
- _time: timeFormatter({ timeZone, format: timeFormat }),
+ _time: timeFormatter({timeZone, format: timeFormat}),
_value: val =>
- `${val.toFixed(2)}${valueAxisLabel ? ` ${valueAxisLabel}` : valueAxisLabel
+ `${val.toFixed(2)}${
+ valueAxisLabel ? ` ${valueAxisLabel}` : valueAxisLabel
}`,
},
xScale,
@@ -189,7 +190,7 @@ storiesOf('Annotations', module)
const yTotalTicks = number('Y Total Ticks', 10)
const position = select(
'Line Position',
- { stacked: 'stacked', overlaid: 'overlaid' },
+ {stacked: 'stacked', overlaid: 'overlaid'},
'overlaid'
)
const interpolation = interpolationKnob()
@@ -197,7 +198,7 @@ storiesOf('Annotations', module)
const lineWidth = number('Line Width', 1)
const hoverDimension = select(
'Hover Dimension',
- { auto: 'auto', x: 'x', y: 'y', xy: 'xy' },
+ {auto: 'auto', x: 'x', y: 'y', xy: 'xy'},
'auto'
)
@@ -255,9 +256,10 @@ storiesOf('Annotations', module)
const config: Config = {
table,
valueFormatters: {
- _time: timeFormatter({ timeZone, format: timeFormat }),
+ _time: timeFormatter({timeZone, format: timeFormat}),
_value: val =>
- `${val.toFixed(2)}${valueAxisLabel ? ` ${valueAxisLabel}` : valueAxisLabel
+ `${val.toFixed(2)}${
+ valueAxisLabel ? ` ${valueAxisLabel}` : valueAxisLabel
}`,
},
xScale,
@@ -324,7 +326,7 @@ storiesOf('Annotations', module)
const yTotalTicks = number('Y Total Ticks', 10)
const position = select(
'Line Position',
- { stacked: 'stacked', overlaid: 'overlaid' },
+ {stacked: 'stacked', overlaid: 'overlaid'},
'overlaid'
)
const interpolation = interpolationKnob()
@@ -332,7 +334,7 @@ storiesOf('Annotations', module)
const lineWidth = number('Line Width', 1)
const hoverDimension = select(
'Hover Dimension',
- { auto: 'auto', x: 'x', y: 'y', xy: 'xy' },
+ {auto: 'auto', x: 'x', y: 'y', xy: 'xy'},
'auto'
)
@@ -390,9 +392,10 @@ storiesOf('Annotations', module)
const config: Config = {
table,
valueFormatters: {
- _time: timeFormatter({ timeZone, format: timeFormat }),
+ _time: timeFormatter({timeZone, format: timeFormat}),
_value: val =>
- `${val.toFixed(2)}${valueAxisLabel ? ` ${valueAxisLabel}` : valueAxisLabel
+ `${val.toFixed(2)}${
+ valueAxisLabel ? ` ${valueAxisLabel}` : valueAxisLabel
}`,
},
xScale,
@@ -469,7 +472,7 @@ storiesOf('Annotations', module)
const yTotalTicks = number('Y Total Ticks', 10)
const position = select(
'Line Position',
- { stacked: 'stacked', overlaid: 'overlaid' },
+ {stacked: 'stacked', overlaid: 'overlaid'},
'overlaid'
)
const interpolation = interpolationKnob()
@@ -477,7 +480,7 @@ storiesOf('Annotations', module)
const lineWidth = number('Line Width', 1)
const hoverDimension = select(
'Hover Dimension',
- { auto: 'auto', x: 'x', y: 'y', xy: 'xy' },
+ {auto: 'auto', x: 'x', y: 'y', xy: 'xy'},
'auto'
)
@@ -516,9 +519,10 @@ storiesOf('Annotations', module)
const config: Config = {
table,
valueFormatters: {
- _time: timeFormatter({ timeZone, format: timeFormat }),
+ _time: timeFormatter({timeZone, format: timeFormat}),
_value: val =>
- `${val.toFixed(2)}${valueAxisLabel ? ` ${valueAxisLabel}` : valueAxisLabel
+ `${val.toFixed(2)}${
+ valueAxisLabel ? ` ${valueAxisLabel}` : valueAxisLabel
}`,
},
xScale,
diff --git a/stories/src/customLayer.stories.tsx b/stories/src/customLayer.stories.tsx
index 5550458d..c3eca75e 100644
--- a/stories/src/customLayer.stories.tsx
+++ b/stories/src/customLayer.stories.tsx
@@ -1,6 +1,6 @@
import * as React from 'react'
-import { storiesOf } from '@storybook/react'
-import { boolean, number, select, text, withKnobs } from '@storybook/addon-knobs'
+import {storiesOf} from '@storybook/react'
+import {boolean, number, select, text, withKnobs} from '@storybook/addon-knobs'
import {
Config,
Plot,
@@ -26,8 +26,8 @@ import {
tooltipColorizeRowsKnob,
} from './helpers'
-import { CPU } from './data/cpu'
-import { getSingleStatTable } from './data/singleStatLayer'
+import {CPU} from './data/cpu'
+import {getSingleStatTable} from './data/singleStatLayer'
storiesOf('Custom Layer', module)
.addDecorator(withKnobs)
@@ -42,7 +42,7 @@ storiesOf('Custom Layer', module)
},
{
type: 'custom',
- render: ({ key, yScale }) => {
+ render: ({key, yScale}) => {
return (
- `${val.toFixed(2)}${valueAxisLabel ? ` ${valueAxisLabel}` : valueAxisLabel
+ `${val.toFixed(2)}${
+ valueAxisLabel ? ` ${valueAxisLabel}` : valueAxisLabel
}`,
},
xScale,
diff --git a/stories/src/data/annotation.ts b/stories/src/data/annotation.ts
index 456d57ba..fda38f09 100644
--- a/stories/src/data/annotation.ts
+++ b/stories/src/data/annotation.ts
@@ -5,7 +5,7 @@ import {
Table,
} from '../../../giraffe/src/types'
import {newTable} from '../../../giraffe/src'
-import { getRandomOrFixed, nowOrFixed } from "./utils"
+import {getRandomOrFixed, nowOrFixed} from './utils'
const numberOfRecords = 20
const recordsPerLine = 20
diff --git a/stories/src/data/bandLayer.ts b/stories/src/data/bandLayer.ts
index 2bfdb0ed..ce8eab58 100644
--- a/stories/src/data/bandLayer.ts
+++ b/stories/src/data/bandLayer.ts
@@ -1,5 +1,5 @@
-import { newTable } from '../../../giraffe/src'
-import { getRandomOrFixed, nowOrFixed } from "./utils"
+import {newTable} from '../../../giraffe/src'
+import {getRandomOrFixed, nowOrFixed} from './utils'
const numberOfRecords = 40
const recordsPerLine = 20
diff --git a/stories/src/data/gaugeLayer.ts b/stories/src/data/gaugeLayer.ts
index b70596c1..03414a15 100644
--- a/stories/src/data/gaugeLayer.ts
+++ b/stories/src/data/gaugeLayer.ts
@@ -1,10 +1,14 @@
-import { newTable, Table } from '../../../giraffe/src'
-import { getRandomOrFixed, nowOrFixed } from "./utils"
+import {newTable} from '../../../giraffe/src'
+import {getRandomOrFixed, nowOrFixed} from './utils'
const numberOfRecords = 20
const recordsPerLine = 20
-export const getGaugeTable = (fixed: boolean, minValue: number, maxValue: number) => {
+export const getGaugeTable = (
+ fixed: boolean,
+ minValue: number,
+ maxValue: number
+) => {
const TIME_COL: Array = []
const VALUE_COL: Array = []
diff --git a/stories/src/data/geoLayer.ts b/stories/src/data/geoLayer.ts
index 5a53a74e..3a4d1271 100644
--- a/stories/src/data/geoLayer.ts
+++ b/stories/src/data/geoLayer.ts
@@ -1,6 +1,6 @@
-import { newTable, Table } from '../../../giraffe/src'
+import {newTable, Table} from '../../../giraffe/src'
import memoizeOne from 'memoize-one'
-import { getRandomOrFixed, nowOrFixed } from "./utils"
+import {getRandomOrFixed, nowOrFixed} from './utils'
export const getGeoTable = (fixed: boolean, numberOfRecords = 200) => {
const TIME_COL = []
@@ -32,7 +32,7 @@ const addTrack = (fixed: boolean, data, startLat: number, startLon: number) => {
const time = nowOrFixed(fixed) + i * 1000 * 60
lat += Math.random() * 1.5
lon += Math.random() * 1.5
- data.push({ time, lat, lon, tid })
+ data.push({time, lat, lon, tid})
}
}
diff --git a/stories/src/data/randomTable.ts b/stories/src/data/randomTable.ts
index d41f914f..bcf70c12 100644
--- a/stories/src/data/randomTable.ts
+++ b/stories/src/data/randomTable.ts
@@ -1,6 +1,6 @@
-import { newTable } from '../../../giraffe/src/utils/newTable'
+import {newTable} from '../../../giraffe/src/utils/newTable'
import memoizeOne from 'memoize-one'
-import { getRandomOrFixed, nowOrFixed } from "./utils"
+import {getRandomOrFixed, nowOrFixed} from './utils'
const defaultNumberOfRecords = 80
const defaultRecordsPerLine = 20
diff --git a/stories/src/data/singleStatLayer.ts b/stories/src/data/singleStatLayer.ts
index 0d7e9ca0..2a7a6a2f 100644
--- a/stories/src/data/singleStatLayer.ts
+++ b/stories/src/data/singleStatLayer.ts
@@ -1,5 +1,5 @@
-import { newTable } from '../../../giraffe/src'
-import { getRandomOrFixed, nowOrFixed } from "./utils"
+import {newTable} from '../../../giraffe/src'
+import {getRandomOrFixed, nowOrFixed} from './utils'
const numberOfRecords = 20
const recordsPerLine = 20
@@ -20,5 +20,4 @@ export const getSingleStatTable = (fixed: boolean) => {
.addColumn('_time', 'dateTime:RFC3339', 'time', TIME_COL)
.addColumn('_value', 'system', 'number', VALUE_COL)
.addColumn('cpu', 'string', 'string', CPU_COL)
-
}
diff --git a/stories/src/data/stackedLineLayer.ts b/stories/src/data/stackedLineLayer.ts
index e8729f94..3ab50374 100644
--- a/stories/src/data/stackedLineLayer.ts
+++ b/stories/src/data/stackedLineLayer.ts
@@ -1,5 +1,5 @@
-import { newTable } from '../../../giraffe/src'
-import { getRandomOrFixed, nowOrFixed } from "./utils"
+import {newTable} from '../../../giraffe/src'
+import {getRandomOrFixed, nowOrFixed} from './utils'
const numberOfRecords = 80
const recordsPerLine = 20
@@ -37,7 +37,9 @@ const alphabet = [
function getRandomString(fixed: boolean, i: number) {
function getRandomAlphabetChar(ii: number) {
- const index = Math.floor(getRandomOrFixed(fixed, ii + i, alphabet.length - 1))
+ const index = Math.floor(
+ getRandomOrFixed(fixed, ii + i, alphabet.length - 1)
+ )
return alphabet[index]
}
@@ -78,5 +80,4 @@ export const getStackedLineTable = (fixed: boolean) => {
.addColumn('test_col_b', 'string', 'string', TEST_COL_B)
.addColumn('test_col_c', 'string', 'string', TEST_COL_C)
.addColumn('test_col_d', 'string', 'string', TEST_COL_D)
-
-}
\ No newline at end of file
+}
diff --git a/stories/src/data/utils.ts b/stories/src/data/utils.ts
index 7e51d780..f5d62f15 100644
--- a/stories/src/data/utils.ts
+++ b/stories/src/data/utils.ts
@@ -9,7 +9,7 @@ export const getRandomOrFixed: {
}
if (fixed) {
- return (((Math.sin(index) + 1) / 2)) * (maxValue - minValue) + minValue
+ return ((Math.sin(index) + 1) / 2) * (maxValue - minValue) + minValue
} else {
return Math.random() * (maxValue - minValue) + minValue
}
diff --git a/stories/src/gauge.stories.tsx b/stories/src/gauge.stories.tsx
index 6eb3f79b..1a5a721f 100644
--- a/stories/src/gauge.stories.tsx
+++ b/stories/src/gauge.stories.tsx
@@ -1,11 +1,11 @@
import * as React from 'react'
-import { storiesOf } from '@storybook/react'
-import { withKnobs, number, text, boolean } from '@storybook/addon-knobs'
-import { Config, Plot, GaugeTheme } from '../../giraffe/src'
-import { DEFAULT_GAUGE_COLORS } from '../../giraffe/src'
+import {storiesOf} from '@storybook/react'
+import {withKnobs, number, text, boolean} from '@storybook/addon-knobs'
+import {Config, Plot, GaugeTheme} from '../../giraffe/src'
+import {DEFAULT_GAUGE_COLORS} from '../../giraffe/src'
-import { PlotContainer } from './helpers'
-import { getGaugeTable } from './data/gaugeLayer'
+import {PlotContainer} from './helpers'
+import {getGaugeTable} from './data/gaugeLayer'
storiesOf('Gauge', module)
.addDecorator(withKnobs)
@@ -59,8 +59,8 @@ storiesOf('Gauge', module)
digits: decimalPlaces,
},
gaugeColors: [
- { ...DEFAULT_GAUGE_COLORS[0], value: gaugeMin },
- { ...DEFAULT_GAUGE_COLORS[1], value: gaugeMax },
+ {...DEFAULT_GAUGE_COLORS[0], value: gaugeMin},
+ {...DEFAULT_GAUGE_COLORS[1], value: gaugeMax},
],
gaugeSize,
gaugeTheme: {
From 81bdebd3ec6bccfa77069a6965c9322b006b0220 Mon Sep 17 00:00:00 2001
From: Sciator <39964450+Sciator@users.noreply.github.com>
Date: Mon, 8 Mar 2021 13:40:56 +0100
Subject: [PATCH 08/11] test: number input knobs
---
stories/cypress/support/commands.ts | 5 +++++
1 file changed, 5 insertions(+)
diff --git a/stories/cypress/support/commands.ts b/stories/cypress/support/commands.ts
index 67b690ac..16cef53e 100644
--- a/stories/cypress/support/commands.ts
+++ b/stories/cypress/support/commands.ts
@@ -86,6 +86,11 @@ export const inputKnobs: {
.clear({force: true})
.type(valueStr, {force: true})
break
+ case 'number':
+ cy.get(selector)
+ .clear({force: true})
+ .type((value as number).toString(), {force: true})
+ break
case 'select':
cy.get(selector).select(value as string)
break
From 81d118cbda3e8a70cc7681c7399e82fae73e6ec3 Mon Sep 17 00:00:00 2001
From: Sciator <39964450+Sciator@users.noreply.github.com>
Date: Mon, 8 Mar 2021 13:44:45 +0100
Subject: [PATCH 09/11] test: fix resize observer error
---
stories/cypress/support/index.js | 10 ++++++++++
1 file changed, 10 insertions(+)
diff --git a/stories/cypress/support/index.js b/stories/cypress/support/index.js
index d68db96d..94fb7e12 100644
--- a/stories/cypress/support/index.js
+++ b/stories/cypress/support/index.js
@@ -18,3 +18,13 @@ import './commands'
// Alternatively you can use CommonJS syntax:
// require('./commands')
+
+const resizeObserverLoopErrRe = /^ResizeObserver loop limit exceeded/
+
+Cypress.on('uncaught:exception', err => {
+ if (resizeObserverLoopErrRe.test(err.message)) {
+ // returning false here prevents Cypress from
+ // failing the test
+ return false
+ }
+})
From 9df94dbd430eee1eb4cdf1143732a3b2c56b35e4 Mon Sep 17 00:00:00 2001
From: Sciator <39964450+Sciator@users.noreply.github.com>
Date: Mon, 8 Mar 2021 13:50:53 +0100
Subject: [PATCH 10/11] test: skip error on dev snapshots
---
stories/cypress/support/index.js | 2 +-
stories/package.json | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/stories/cypress/support/index.js b/stories/cypress/support/index.js
index 94fb7e12..811b152d 100644
--- a/stories/cypress/support/index.js
+++ b/stories/cypress/support/index.js
@@ -19,7 +19,7 @@ import './commands'
// Alternatively you can use CommonJS syntax:
// require('./commands')
-const resizeObserverLoopErrRe = /^ResizeObserver loop limit exceeded/
+const resizeObserverLoopErrRe = /> ResizeObserver loop limit exceeded/
Cypress.on('uncaught:exception', err => {
if (resizeObserverLoopErrRe.test(err.message)) {
diff --git a/stories/package.json b/stories/package.json
index 7ffbd3a9..5c771a60 100644
--- a/stories/package.json
+++ b/stories/package.json
@@ -16,7 +16,7 @@
"storybook": "start-storybook -p 50000",
"publish": "storybook-to-ghpages --out=.out",
"chromatic": "chromatic test",
- "cy": "cypress open",
+ "cy": "cypress open --env failOnSnapshotDiff=false",
"cy:ci": "wait-on http://localhost:50000/ && cypress run",
"cy:update": "cypress run --env updateSnapshots=true",
"cy:gen-diff": "cypress run --env failOnSnapshotDiff=false"
From c4df4adfe16fe62fba621ad4c3f32f859ea4dde4 Mon Sep 17 00:00:00 2001
From: Sciator <39964450+Sciator@users.noreply.github.com>
Date: Tue, 9 Mar 2021 16:09:00 +0100
Subject: [PATCH 11/11] test: basic tests
---
.circleci/config.yml | 25 +++++++++-
stories/cypress/integration/test.test.ts | 59 +++++++++++++++++++-----
stories/cypress/support/commands.ts | 1 +
3 files changed, 73 insertions(+), 12 deletions(-)
diff --git a/.circleci/config.yml b/.circleci/config.yml
index 0a134f37..7589e3c9 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -1,6 +1,6 @@
version: 2
jobs:
- build:
+ test:
docker:
- image: circleci/node:lts
working_directory: ~/repo
@@ -35,3 +35,26 @@ jobs:
# else \
# yarn run chromatic -- --auto-accept-changes
# fi
+ update-snapshots:
+ docker:
+ - image: circleci/node:lts
+ working_directory: ~/repo
+ steps:
+ - checkout
+ - restore_cache:
+ keys:
+ - v1-dependencies-{{ checksum "yarn.lock" }}
+ - run: yarn install --frozen-lockfile
+ - run: yarn --cwd stories cy:update
+
+
+workflows:
+ version: 2
+ test:
+ jobs:
+ - test
+ - update-snapshots:
+ type: approval
+ requires:
+ - test
+
diff --git a/stories/cypress/integration/test.test.ts b/stories/cypress/integration/test.test.ts
index 9dc626ea..2bcf818d 100644
--- a/stories/cypress/integration/test.test.ts
+++ b/stories/cypress/integration/test.test.ts
@@ -1,25 +1,62 @@
+
describe('testing test', () => {
- it.only('should fix geo data', () => {
- cy.visitTest('Geo', 'Circle Markers')
+ it('should make Gauge snapshot', () => {
+ cy.visitTest('Gauge', 'Gauge')
cy.inputKnobs('Fixed data', true, 'boolean')
})
- it('should make snapsot of band chart', () => {
- cy.visitTest('Band Chart', 'Static: groupBy applied')
- cy.inputKnobs('Time Format', 'HH:mm', 'select')
+ it('should make snapshot of gauge', () => {
+ cy.visitTest('Gauge', 'Gauge')
+ cy.inputKnobs('Fixed data', true, 'boolean')
+ cy.inputKnobs('Gauge Lines', 12, 'number')
+ cy.wait(4000)
+ cy.inputKnobs('Ticks between lines', 3, 'number')
+
+ cy.snapshotComponent('gauge-test-3-ticks-between-lines-12-gauge-lines')
+
+ cy.inputKnobs('Gauge Min', 10, 'number')
+
+ cy.inputKnobs('Prefix', 'haf ', 'text')
+ cy.wait(2000)
+
+ cy.snapshotComponent('gauge-test-Haf-prefix-10-gauge-min')
})
it('should make snapshot of gauge', () => {
cy.visitTest('Gauge', 'Gauge')
+ cy.inputKnobs('Fixed data', true, 'boolean')
+
+ cy.inputKnobs('Ticks between lines', 3, 'number')
- cy.snapshotComponent('gauge-test-1')
+ cy.snapshotComponent('gauge-test-3-ticks-between-lines')
+ cy.wait(2000)
- cy.inputKnobs('Decimal Places', 2, 'number')
+ cy.inputKnobs('Gauge Max', 23, 'number')
+ cy.inputKnobs('Suffix', 'HKS', 'text')
+ cy.wait(2000)
+ cy.inputKnobs('Suffix', 'halsper ', 'text')
- cy.snapshotComponent('gauge-test-2-decimal-places')
+ cy.snapshotComponent('gauge-test-suffix-prefix-type')
- cy.inputKnobs('Gauge Min', 20, 'number')
- cy.snapshotComponent('gauge-test-start-20')
})
-})
+
+ it('should make snapchot of gauge', () => {
+ cy.visitTest('Gauge', 'Gauge')
+ cy.inputKnobs('Fixed data', true, 'boolean')
+
+ cy.inputKnobs('Decimal Places', 1, 'number')
+ cy.wait(3000)
+
+ cy.inputKnobs('Gauge Lines', 1, 'number')
+ cy.inputKnobs('Ticks between lines', 39, 'number')
+
+ cy.inputKnobs('TickPrefix', 'kdfakdhj', 'text')
+ cy.snapshotComponent('gauge-test-tick-prefix')
+
+ cy.inputKnobs('TickPrefix', ' ', 'text')
+ cy.inputKnobs('TickSuffix', 'kdkdhj', 'text')
+ cy.snapshotComponent('gaure-test-ticksSuffix')
+ }
+ )
+})
\ No newline at end of file
diff --git a/stories/cypress/support/commands.ts b/stories/cypress/support/commands.ts
index 16cef53e..a92ae24f 100644
--- a/stories/cypress/support/commands.ts
+++ b/stories/cypress/support/commands.ts
@@ -69,6 +69,7 @@ export const snapshotComponent = (
export const inputKnobs: {
(label: string, value: string): void
+ (label: string, value: string, type: 'text'): void
(label: string, value: string, type: 'select'): void
(label: string, value: number, type: 'number'): void
(label: string, value: boolean, type: 'boolean'): void