Published
Edited
Sep 24, 2020
1 fork
Insert cell
md`# NetV@1 TestDoc: Initialization>node`
Insert cell
toc()
Insert cell
import { NetV, refresh, getPixelColor, error_color, success_color, warning_color, hex2rgba, rgba2hex, isHexColorSame, isNumberSame, generateAutoTestCaseDescription, generateE2ETestCaseDescription, detectZoom, isStringSameIgnoreQuotesCase, isSameForColorCompare } from "@jackieanxis/netv-js-v1-test-document"
Insert cell
import {toc} from "@nebrius/indented-toc"
Insert cell
md`## Default Node Radius`
Insert cell
md`${generateE2ETestCaseDescription(default_node_radius_normal)}`
Insert cell
default_node_radius_normal['container']
Insert cell
mutable default_node_radius_normal = {
let log = ''
let radius = 50
let width = 2 * radius
let height = 2 *radius
let expected = `Radius: ${radius}`
let container = DOM.element('div')
try {
refresh(container)
let netv = new NetV({
container: container,
width,
height,
node: {r: radius, strokeWidth: 0},
backgroundColor: hex2rgba('#eee')
})
netv.data({
nodes: [{id: '0', x: width / 2, y: height / 2}]
})
netv.draw()
} catch (e) {
log = e.toString()
}
return {
title: `Default Node Radius: ${radius}`,
container,
log,
expected,
isPassed: true, // need to be specified manually
testerReport: `Radius: 50`
}
}
Insert cell
md`${generateE2ETestCaseDescription(default_node_radius_0)}`
Insert cell
default_node_radius_0['container']
Insert cell
mutable default_node_radius_0 = {
let log = ''
let radius = 0
let width = 100
let height = 100
let expected = `Radius: ${radius}`
let container = DOM.element('div')
try {
refresh(container)
let netv = new NetV({
container: container,
width,
height,
node: { r: radius },
backgroundColor: hex2rgba('#eee')
})
netv.data({
nodes: [{id: '0', x: width / 2, y: height / 2}]
})
netv.draw()
} catch (e) {
log = e.toString()
}
return {
title: `Default Node Radius: ${radius}`,
container,
log,
expected,
isPassed: true, // need to be specified manually
testerReport: `Radius: 0`
}
}
Insert cell
md`${generateE2ETestCaseDescription(default_node_radius_negative)}`
Insert cell
default_node_radius_negative['container']
Insert cell
mutable default_node_radius_negative = {
let log = ''
let radius = -20
let width = 100
let height = 100
let expected = `RangeError: Cannot set property 'r' with ${radius}`
let container = DOM.element('div')
try {
refresh(container)
let netv = new NetV({
container: container,
width,
height,
node: {r: radius, strokeWidth: 5, strokeColor: {r: 1, g: 0, b: 0, a: 1}},
backgroundColor: hex2rgba('#eee')
})
netv.data({
nodes: [{id: '0', x: width / 2, y: height / 2}]
})
netv.draw()
} catch (e) {
log = e.toString()
}
return {
title: `Default Node Radius: ${radius}`,
container,
log,
expected,
isPassed: false, // need to be specified manually
testerReport: `No error logged out, log: '${log}'`
}
}
Insert cell
md`${generateE2ETestCaseDescription(default_node_radius_NaN)}`
Insert cell
default_node_radius_NaN['container']
Insert cell
mutable default_node_radius_NaN = {
let log = ''
let radius = NaN
let width = 100
let height = 100
let expected = `RangeError: Cannot set property 'r' with ${radius}`
let container = DOM.element('div')
try {
refresh(container)
let netv = new NetV({
container: container,
width,
height,
node: {r: radius, strokeWidth: 5, strokeColor: {r: 1, g: 0, b: 0, a: 1}},
backgroundColor: hex2rgba('#eee')
})
netv.data({
nodes: [{id: '0', x: width / 2, y: height / 2}]
})
netv.draw()
} catch (e) {
log = e.toString()
}
return {
title: `Default Node Radius: ${radius}`,
container,
log,
expected,
isPassed: false, // need to be specified manually
testerReport: `No error logged out, log: '${log}'`
}
}
Insert cell
md`${generateE2ETestCaseDescription(default_node_radius_unset)}`
Insert cell
default_node_radius_unset['container']
Insert cell
mutable default_node_radius_unset = {
let log = ''
let radius = 5
let width = 100
let height = 100
let expected = `Radius: ${ radius }`
let container = DOM.element('div')
try {
refresh(container)
let netv = new NetV({
container: container,
width,
height,
node: {strokeWidth: 5, strokeColor: {r: 1, g: 0, b: 0, a: 1}},
backgroundColor: hex2rgba('#eee')
})
netv.data({
nodes: [{id: '0', x: width / 2, y: height / 2}]
})
netv.draw()
} catch (e) {
log = e.toString()
}
return {
title: `Default Node Radius: unset`,
container,
log,
expected,
isPassed: true, // need to be specified manually
testerReport: `Radius: 5`
}
}
Insert cell
md`${generateE2ETestCaseDescription(default_node_radius_undefined)}`
Insert cell
default_node_radius_undefined['container']
Insert cell
mutable default_node_radius_undefined = {
let log = ''
let radius = undefined
let width = 100
let height = 100
let expected = `TypeError: Cannot set property 'r' with ${radius}`
let container = DOM.element('div')
try {
refresh(container)
let netv = new NetV({
container: container,
width,
height,
node: {r: radius, strokeWidth: 5, strokeColor: {r: 1, g: 0, b: 0, a: 1}},
backgroundColor: hex2rgba('#eee')
})
netv.data({
nodes: [{id: '0', x: width / 2, y: height / 2}]
})
netv.draw()
} catch (e) {
log = e.toString()
}
return {
title: `Default Node Radius: ${radius}`,
container,
log,
expected,
isPassed: false, // need to be specified manually
testerReport: `No error logged out, log: '${log}'`
}
}
Insert cell
md`${generateE2ETestCaseDescription(default_node_radius_null)}`
Insert cell
default_node_radius_null['container']
Insert cell
mutable default_node_radius_null = {
let log = ''
let radius = null
let width = 100
let height = 100
let expected = `TypeError: Cannot set property 'r' with ${radius}`
let container = DOM.element('div')
try {
refresh(container)
let netv = new NetV({
container: container,
width,
height,
node: {r: radius, strokeWidth: 5, strokeColor: {r: 1, g: 0, b: 0, a: 1}},
backgroundColor: hex2rgba('#eee')
})
netv.data({
nodes: [{id: '0', x: width / 2, y: height / 2}]
})
netv.draw()
} catch (e) {
log = e.toString()
}
return {
title: `Default Node Radius: ${radius}`,
container,
log,
expected,
isPassed: false, // need to be specified manually
testerReport: `No error logged out, log: '${log}'`
}
}
Insert cell
md`${generateE2ETestCaseDescription(default_node_radius_string)}`
Insert cell
default_node_radius_string['container']
Insert cell
mutable default_node_radius_string = {
let log = ''
let radius = 'xxx'
let width = 100
let height = 100
let expected = `TypeError: Cannot set property 'r' with '${radius}'`
let container = DOM.element('div')
try {
refresh(container)
let netv = new NetV({
container: container,
width,
height,
node: {r: radius, strokeWidth: 5, strokeColor: {r: 1, g: 0, b: 0, a: 1}},
backgroundColor: hex2rgba('#eee')
})
netv.data({
nodes: [{id: '0', x: width / 2, y: height / 2}]
})
netv.draw()
} catch (e) {
log = e.toString()
}
return {
title: `Default Node Radius: "${radius}"`,
container,
log,
expected,
isPassed: false, // need to be specified manually
testerReport: `No error logged out, log: '${log}'`
}
}
Insert cell
md`## Default Node Stroke Width`
Insert cell
md`${generateE2ETestCaseDescription(default_node_stroke_width_10)}`
Insert cell
default_node_stroke_width_10['container']
Insert cell
mutable default_node_stroke_width_10 = {
let log = ''
let radius = 10
let strokeWidth = 10
let width = 100
let height = 100
let expected = `Default Node strokeWidth: ${strokeWidth}`
let container = DOM.element('div')
try {
refresh(container)
let netv = new NetV({
container: container,
width,
height,
node: {r: radius, strokeWidth, strokeColor: {r: 1, g: 0, b: 0, a: 1}},
backgroundColor: hex2rgba('#eee')
})
netv.data({
nodes: [{id: '0', x: width / 2, y: height / 2}]
})
netv.draw()
} catch (e) {
log = e.toString()
}
return {
title: `Default Node strokeWidth: ${strokeWidth}`,
container,
log,
expected,
isPassed: true, // need to be specified manually
testerReport: `Default Node strokeWidth: 10`
}
}
Insert cell
md`${generateE2ETestCaseDescription(default_node_stroke_width_0)}`
Insert cell
default_node_stroke_width_0['container']
Insert cell
mutable default_node_stroke_width_0 = {
let log = ''
let radius = 10
let strokeWidth = 0
let width = 100
let height = 100
let expected = `Default Node strokeWidth: ${strokeWidth}`
let container = DOM.element('div')
try {
refresh(container)
let netv = new NetV({
container: container,
width,
height,
node: {r: radius, strokeWidth, strokeColor: {r: 1, g: 0, b: 0, a: 1}},
backgroundColor: hex2rgba('#eee')
})
netv.data({
nodes: [{id: '0', x: width / 2, y: height / 2}]
})
netv.draw()
} catch (e) {
log = e.toString()
}
return {
title: `Default Node strokeWidth: ${strokeWidth}`,
container,
log,
expected,
isPassed: true, // need to be specified manually
testerReport: `Default Node strokeWidth: 0`
}
}
Insert cell
md`${generateE2ETestCaseDescription(default_node_stroke_width_negative)}`
Insert cell
default_node_stroke_width_negative['container']
Insert cell
mutable default_node_stroke_width_negative = {
let log = ''
let radius = 20
let strokeWidth = -10
let width = 100
let height = 100
let expected = `RangeError: Cannot set property 'strokeWdith' with ${strokeWidth}`
let container = DOM.element('div')
try {
refresh(container)
let netv = new NetV({
container: container,
width,
height,
node: {r: radius, strokeWidth, strokeColor: {r: 1, g: 0, b: 0, a: 1}},
backgroundColor: hex2rgba('#eee')
})
netv.data({
nodes: [{id: '0', x: width / 2, y: height / 2}]
})
netv.draw()
} catch (e) {
log = e.toString()
}
return {
title: `Default Node strokeWidth: ${strokeWidth}`,
container,
log,
expected,
isPassed: false, // need to be specified manually
testerReport: `No error logged out, log: '${log}'`
}
}
Insert cell
md`${ generateE2ETestCaseDescription(default_node_stroke_width_NaN) }`
Insert cell
default_node_stroke_width_NaN['container']
Insert cell
mutable default_node_stroke_width_NaN = {
let log = ''
let radius = 20
let strokeWidth = NaN
let width = 100
let height = 100
let expected = `RangeError: Cannot set property 'strokeWdith' with ${strokeWidth}`
let container = DOM.element('div')
try {
refresh(container)
let netv = new NetV({
container: container,
width,
height,
node: {r: radius, strokeWidth, strokeColor: {r: 1, g: 0, b: 0, a: 1}},
backgroundColor: hex2rgba('#eee')
})
netv.data({
nodes: [{id: '0', x: width / 2, y: height / 2}]
})
netv.draw()
} catch (e) {
log = e.toString()
}
return {
title: `Default Node strokeWidth: ${strokeWidth}`,
container,
log,
expected,
isPassed: false, // need to be specified manually
testerReport: `No error logged out, log: '${log}'`
}
}
Insert cell
md`${ generateE2ETestCaseDescription(default_node_stroke_width_unset) }`
Insert cell
default_node_stroke_width_unset['container']
Insert cell
mutable default_node_stroke_width_unset = {
let log = ''
let radius = 20
let strokeWidth = 2
let width = 100
let height = 100
let expected = `Default Node strokeWidth: 2`
let container = DOM.element('div')
try {
refresh(container)
let netv = new NetV({
container: container,
width,
height,
node: {r: radius, strokeColor: {r: 1, g: 0, b: 0, a: 1}},
backgroundColor: hex2rgba('#eee')
})
netv.data({
nodes: [{id: '0', x: width / 2, y: height / 2}]
})
netv.draw()
} catch (e) {
log = e.toString()
}
return {
title: `Default Node strokeWidth: ${strokeWidth}`,
container,
log,
expected,
isPassed: true, // need to be specified manually
testerReport: `Default Node strokeWidth: 2`
}
}
Insert cell
md`${ generateE2ETestCaseDescription(default_node_stroke_width_undefined) }`
Insert cell
default_node_stroke_width_undefined['container']
Insert cell
mutable default_node_stroke_width_undefined = {
let log = ''
let radius = 20
let strokeWidth = undefined
let width = 100
let height = 100
let expected = `TypeError: Cannot set property 'strokeWdith' with ${strokeWidth}`
let container = DOM.element('div')
try {
refresh(container)
let netv = new NetV({
container: container,
width,
height,
node: {r: radius, strokeWidth, strokeColor: {r: 1, g: 0, b: 0, a: 1}},
backgroundColor: hex2rgba('#eee')
})
netv.data({
nodes: [{id: '0', x: width / 2, y: height / 2}]
})
netv.draw()
} catch (e) {
log = e.toString()
}
return {
title: `Default Node strokeWidth: ${strokeWidth}`,
container,
log,
expected,
isPassed: false, // need to be specified manually
testerReport: `No error logged out, log: '${log}'`
}
}
Insert cell
md`${ generateE2ETestCaseDescription(default_node_stroke_width_null) }`
Insert cell
default_node_stroke_width_null['container']
Insert cell
mutable default_node_stroke_width_null = {
let log = ''
let radius = 20
let strokeWidth = null
let width = 100
let height = 100
let expected = `TypeError: Cannot set property 'strokeWdith' with ${strokeWidth}`
let container = DOM.element('div')
try {
refresh(container)
let netv = new NetV({
container: container,
width,
height,
node: {r: radius, strokeWidth, strokeColor: {r: 1, g: 0, b: 0, a: 1}},
backgroundColor: hex2rgba('#eee')
})
netv.data({
nodes: [{id: '0', x: width / 2, y: height / 2}]
})
netv.draw()
} catch (e) {
log = e.toString()
}
return {
title: `Default Node strokeWidth: ${strokeWidth}`,
container,
log,
expected,
isPassed: false, // need to be specified manually
testerReport: `No error logged out, log: '${log}'`
}
}
Insert cell
md`${ generateE2ETestCaseDescription(default_node_stroke_width_string) }`
Insert cell
default_node_stroke_width_string['container']
Insert cell
mutable default_node_stroke_width_string = {
let log = ''
let radius = 20
let strokeWidth = 'xxx'
let width = 100
let height = 100
let expected = `TypeError: Cannot set property 'strokeWdith' with '${strokeWidth}'`
let container = DOM.element('div')
try {
refresh(container)
let netv = new NetV({
container: container,
width,
height,
node: {r: radius, strokeWidth, strokeColor: {r: 1, g: 0, b: 0, a: 1}},
backgroundColor: hex2rgba('#eee')
})
netv.data({
nodes: [{id: '0', x: width / 2, y: height / 2}]
})
netv.draw()
} catch (e) {
log = e.toString()
}
return {
title: `Default Node strokeWidth: "${strokeWidth}"`,
container,
log,
expected,
isPassed: false, // need to be specified manually
testerReport: `No error logged out, log: '${log}'`
}
}
Insert cell
md`## Default Node Fill`
Insert cell
md`${generateAutoTestCaseDescription(default_node_color_normal)}`
Insert cell
default_node_color_normal['container']
Insert cell
mutable default_node_color_normal = {
let log = ''
let isPassed = false
let container = DOM.element('div')
let fill = { r: 0.2, g: 0.4, b: 0.6, a: 0.8 }
let backgroundColor = {r: 0, g: 0, b: 0, a: 0}
let expected = rgba2hex({
a: fill.a,
r: fill.r * fill.a,
g: fill.g * fill.a,
b: fill.b * fill.a
})
let width = 100
let height = 100
let isSame = isSameForColorCompare
try {
refresh(container)
let netv = new NetV({
container,
width,
height,
node: {r: 10, fill, strokeWidth: 0},
backgroundColor
})
netv.data({
nodes: [{id: '0', x: width / 2, y: height / 2}]
})
netv.draw()
const canvas = container.querySelector('canvas')
const actualFill = getPixelColor(canvas, width / 2, height / 2)
log = rgba2hex(actualFill)
} catch (e) {
log = e.toString()
}
return {
title: `Default Node Fill: ${JSON.stringify( fill ).replace(/\"/g, '')}`,
container,
log,
expected,
isPassed: isSame(expected, log)
}
}
Insert cell
md`${generateAutoTestCaseDescription(default_node_color_r_negative)}`
Insert cell
default_node_color_r_negative['container']
Insert cell
mutable default_node_color_r_negative = {
let log = ''
let isPassed = false
let container = DOM.element('div')
let fill = { r: -0.2, g: 0.4, b: 0.6, a: 0.8 }
let backgroundColor = {r: 0, g: 0, b: 0, a: 0}
let expected = `RangeError: Cannot set property 'r' with ${fill.r}`
let width = 100
let height = 100
let isSame = isSameForColorCompare
try {
refresh(container)
let netv = new NetV({
container,
width,
height,
node: {r: 10, fill, strokeWidth: 0},
backgroundColor
})
netv.data({
nodes: [{id: '0', x: width / 2, y: height / 2}]
})
netv.draw()
const canvas = container.querySelector('canvas')
const actualFill = getPixelColor(canvas, width / 2, height / 2)
log = rgba2hex(actualFill)
} catch (e) {
log = e.toString()
}
return {
title: `Default Node Fill.r: ${fill.r}`,
container,
log,
expected,
isPassed: isSame(expected, log)
}
}
Insert cell
md`${generateAutoTestCaseDescription(default_node_color_b_3)}`
Insert cell
default_node_color_b_3['container']
Insert cell
mutable default_node_color_b_3 = {
let log = ''
let isPassed = false
let container = DOM.element('div')
let fill = { r: 0.2, g: 0.4, b: 3, a: 0.8 }
let backgroundColor = {r: 0, g: 0, b: 0, a: 0}
let expected = `RangeError: Cannot set property 'b' with ${fill.b}`
let width = 100
let height = 100
let isSame = isSameForColorCompare
try {
refresh(container)
let netv = new NetV({
container,
width,
height,
node: {r: 10, fill, strokeWidth: 0},
backgroundColor
})
netv.data({
nodes: [{id: '0', x: width / 2, y: height / 2}]
})
netv.draw()
const canvas = container.querySelector('canvas')
const actualFill = getPixelColor(canvas, width / 2, height / 2)
log = rgba2hex(actualFill)
} catch (e) {
log = e.toString()
}
return {
title: `Default Node Fill.b: ${fill.b}`,
container,
log,
expected,
isPassed: isSame(expected, log)
}
}
Insert cell
md`${generateAutoTestCaseDescription(default_node_color_g_undefined)}`
Insert cell
default_node_color_g_undefined['container']
Insert cell
mutable default_node_color_g_undefined = {
let log = ''
let isPassed = false
let container = DOM.element('div')
let fill = { r: 0.2, g: undefined, b: 0.6, a: 0.8 }
let backgroundColor = {r: 0, g: 0, b: 0, a: 0}
let expected = `TypeError: Cannot set property 'g' with ${fill.g}`
let width = 100
let height = 100
let isSame = isSameForColorCompare
try {
refresh(container)
let netv = new NetV({
container,
width,
height,
node: {r: 10, fill, strokeWidth: 0},
backgroundColor
})
netv.data({
nodes: [{id: '0', x: width / 2, y: height / 2}]
})
netv.draw()
const canvas = container.querySelector('canvas')
const actualFill = getPixelColor(canvas, width / 2, height / 2)
log = rgba2hex(actualFill)
} catch (e) {
log = e.toString()
}
return {
title: `Default Node Fill.g: undefined`,
container,
log,
expected,
isPassed: isSame(expected, log)
}
}
Insert cell
md`${generateAutoTestCaseDescription(default_node_color_b_null)}`
Insert cell
default_node_color_b_null['container']
Insert cell
mutable default_node_color_b_null = {
let log = ''
let isPassed = false
let container = DOM.element('div')
let fill = { r: 0.2, g: 0.4, b: null, a: 0.8 }
let backgroundColor = {r: 0, g: 0, b: 0, a: 0}
let expected = `RangeError: Cannot set property 'b' with ${fill.b}`
let width = 100
let height = 100
let isSame = isSameForColorCompare
try {
refresh(container)
let netv = new NetV({
container,
width,
height,
node: {r: 10, fill, strokeWidth: 0},
backgroundColor
})
netv.data({
nodes: [{id: '0', x: width / 2, y: height / 2}]
})
netv.draw()
const canvas = container.querySelector('canvas')
const actualFill = getPixelColor(canvas, width / 2, height / 2)
log = rgba2hex(actualFill)
} catch (e) {
log = e.toString()
}
return {
title: `Default Node Fill.b: ${fill.b}`,
container,
log,
expected,
isPassed: isSame(expected, log)
}
}
Insert cell
md`${generateAutoTestCaseDescription(default_node_color_a_NaN)}`
Insert cell
default_node_color_a_NaN['container']
Insert cell
mutable default_node_color_a_NaN = {
let log = ''
let isPassed = false
let container = DOM.element('div')
let fill = { r: 0.2, g: 0.4, b: 0.6, a: NaN }
let backgroundColor = {r: 0, g: 0, b: 0, a: 0}
let expected = `RangeError: Cannot set property 'a' with ${fill.a}`
let width = 100
let height = 100
let isSame = isSameForColorCompare
try {
refresh(container)
let netv = new NetV({
container,
width,
height,
node: {r: 10, fill, strokeWidth: 0},
backgroundColor
})
netv.data({
nodes: [{id: '0', x: width / 2, y: height / 2}]
})
netv.draw()
const canvas = container.querySelector('canvas')
const actualFill = getPixelColor(canvas, width / 2, height / 2)
log = rgba2hex(actualFill)
} catch (e) {
log = e.toString()
}
return {
title: `Default Node Fill.a: ${fill.a}`,
container,
log,
expected,
isPassed: isSame(expected, log)
}
}
Insert cell
md`${generateAutoTestCaseDescription(default_node_color_unset)}`
Insert cell
default_node_color_unset['container']
Insert cell
mutable default_node_color_unset = {
let log = ''
let isPassed = false
let container = DOM.element('div')
let fill = {r: 0.2, g: 0.6, b: 0.2, a: 0.8}
let backgroundColor = {r: 0, g: 0, b: 0, a: 0}
let expected = rgba2hex({
a: fill.a,
r: fill.r * fill.a,
g: fill.g * fill.a,
b: fill.b * fill.a
})
let width = 100
let height = 100
let isSame = isSameForColorCompare
try {
refresh(container)
let netv = new NetV({
container,
width,
height,
node: {r: 10, strokeWidth: 0},
backgroundColor
})
netv.data({
nodes: [{id: '0', x: width / 2, y: height / 2}]
})
netv.draw()
const canvas = container.querySelector('canvas')
const actualFill = getPixelColor(canvas, width / 2, height / 2)
log = rgba2hex(actualFill)
} catch (e) {
log = e.toString()
}
return {
title: `Default Node Fill: unset`,
container,
log,
expected,
isPassed: isSame(expected, log)
}
}
Insert cell
md`${generateAutoTestCaseDescription(default_node_color_undefined)}`
Insert cell
default_node_color_undefined['container']
Insert cell
mutable default_node_color_undefined = {
let log = ''
let isPassed = false
let container = DOM.element('div')
let fill = undefined
let backgroundColor = {r: 0, g: 0, b: 0, a: 0}
let expected = `TypeError: Cannot set property 'fill' with ${fill}`
let width = 100
let height = 100
let isSame = isSameForColorCompare
try {
refresh(container)
let netv = new NetV({
container,
width,
height,
node: {r: 10, fill, strokeWidth: 0},
backgroundColor
})
netv.data({
nodes: [{id: '0', x: width / 2, y: height / 2}]
})
netv.draw()
const canvas = container.querySelector('canvas')
const actualFill = getPixelColor(canvas, width / 2, height / 2)
log = rgba2hex(actualFill)
} catch (e) {
log = e.toString()
}
return {
title: `Default Node Fill: ${fill}`,
container,
log,
expected,
isPassed: isSame(expected, log)
}
}
Insert cell
md`${generateAutoTestCaseDescription(default_node_color_null)}`
Insert cell
default_node_color_null['container']
Insert cell
mutable default_node_color_null = {
let log = ''
let isPassed = false
let container = DOM.element('div')
let fill = null
let backgroundColor = {r: 0, g: 0, b: 0, a: 0}
let expected = `TypeError: Cannot set property 'fill' with ${ fill }`
let width = 100
let height = 100
let isSame = isSameForColorCompare
try {
refresh(container)
let netv = new NetV({
container,
width,
height,
node: {r: 10, fill, strokeWidth: 0},
backgroundColor
})
netv.data({
nodes: [{id: '0', x: width / 2, y: height / 2}]
})
netv.draw()
const canvas = container.querySelector('canvas')
const actualFill = getPixelColor(canvas, width / 2, height / 2)
log = rgba2hex(actualFill)
} catch (e) {
log = e.toString()
}
return {
title: `Default Node Fill: ${fill}`,
container,
log,
expected,
isPassed: isSame(expected, log)
}
}
Insert cell
md`${generateAutoTestCaseDescription(default_node_color_r_unset)}`
Insert cell
default_node_color_r_unset['container']
Insert cell
mutable default_node_color_r_unset = {
let log = ''
let isPassed = false
let container = DOM.element('div')
let fill = { b: 0.2, g: 0.4, a: 0.8 }
let backgroundColor = {r: 0, g: 0, b: 0, a: 0}
let default_r = 0.2
let expected = rgba2hex({
a: fill.a,
r: default_r * fill.a,
g: fill.g * fill.a,
b: fill.b * fill.a
})
let width = 100
let height = 100
let isSame = isSameForColorCompare
try {
refresh(container)
let netv = new NetV({
container,
width,
height,
node: {r: 10, fill, strokeWidth: 0},
backgroundColor
})
netv.data({
nodes: [{id: '0', x: width / 2, y: height / 2}]
})
netv.draw()
const canvas = container.querySelector('canvas')
const actualFill = getPixelColor(canvas, width / 2, height / 2)
log = rgba2hex(actualFill)
} catch (e) {
log = e.toString()
}
return {
title: `Default Node Fill.r: unset`,
container,
log,
expected,
isPassed: isSame(expected, log)
}
}
Insert cell
md`${generateAutoTestCaseDescription(default_node_color_a_undefined)}`
Insert cell
default_node_color_a_undefined['container']
Insert cell
mutable default_node_color_a_undefined = {
let log = ''
let isPassed = false
let container = DOM.element('div')
let fill = { r: 0.6, b: 0.2, g: 0.4 }
let backgroundColor = {r: 0, g: 0, b: 0, a: 0}
let default_a = 0.8
let expected = rgba2hex({
a: default_a,
r: fill.r * default_a,
g: fill.g * default_a,
b: fill.b * default_a
})
let width = 100
let height = 100
let isSame = isSameForColorCompare
try {
refresh(container)
let netv = new NetV({
container,
width,
height,
node: {r: 10, fill, strokeWidth: 0},
backgroundColor
})
netv.data({
nodes: [{id: '0', x: width / 2, y: height / 2}]
})
netv.draw()
const canvas = container.querySelector('canvas')
const actualFill = getPixelColor(canvas, width / 2, height / 2)
log = rgba2hex(actualFill)
} catch (e) {
log = e.toString()
}
return {
title: `Default Node Fill.a: unset`,
container,
log,
expected,
isPassed: isSame(expected, log)
}
}
Insert cell
md`${generateAutoTestCaseDescription(default_node_color_string)}`
Insert cell
default_node_color_string['container']
Insert cell
mutable default_node_color_string = {
let log = ''
let isPassed = false
let container = DOM.element('div')
let fill = `{ r: 0.6, b: 0.2, g: 0.4, a: 1 }`
let backgroundColor = {r: 0, g: 0, b: 0, a: 0}
let default_a = 0.8
let expected = `TypeError: Cannot set property 'fill' with '${ fill }'`
let width = 100
let height = 100
let isSame = isSameForColorCompare
try {
refresh(container)
let netv = new NetV({
container,
width,
height,
node: {r: 10, fill, strokeWidth: 0},
backgroundColor
})
netv.data({
nodes: [{id: '0', x: width / 2, y: height / 2}]
})
netv.draw()
const canvas = container.querySelector('canvas')
const actualFill = getPixelColor(canvas, width / 2, height / 2)
log = rgba2hex(actualFill)
} catch (e) {
log = e.toString()
}
return {
title: `Default Node Fill: '${fill}'`,
container,
log,
expected,
isPassed: isSame(expected, log)
}
}
Insert cell
md`${generateAutoTestCaseDescription(default_node_color_r_string)}`
Insert cell
default_node_color_r_string['container']
Insert cell
mutable default_node_color_r_string = {
let log = ''
let isPassed = false
let container = DOM.element('div')
let fill = { r: 'r', b: 0.2, g: 0.4, a: 1 }
let backgroundColor = {r: 0, g: 0, b: 0, a: 0}
let default_a = 0.8
let expected = `TypeError: Cannot set property 'r' with '${fill.r}'`
let width = 100
let height = 100
let isSame = isSameForColorCompare
try {
refresh(container)
let netv = new NetV({
container,
width,
height,
node: {r: 10, fill, strokeWidth: 0},
backgroundColor
})
netv.data({
nodes: [{id: '0', x: width / 2, y: height / 2}]
})
netv.draw()
const canvas = container.querySelector('canvas')
const actualFill = getPixelColor(canvas, width / 2, height / 2)
log = rgba2hex(actualFill)
} catch (e) {
log = e.toString()
}
return {
title: `Default Node Fill.r: 'r'`,
container,
log,
expected,
isPassed: isSame(expected, log)
}
}
Insert cell
md`## Default Node StrokeColor`
Insert cell
md`${generateAutoTestCaseDescription(default_node_strokeColor_normal)}`
Insert cell
default_node_strokeColor_normal['container']
Insert cell
mutable default_node_strokeColor_normal = {
let log = ''
let isPassed = false
let container = DOM.element('div')
let strokeColor = { r: 0.2, g: 0.4, b: 0.6, a: 0.8 }
let backgroundColor = {r: 0, g: 0, b: 0, a: 0}
let expected = rgba2hex({
a: strokeColor.a,
r: strokeColor.r * strokeColor.a,
g: strokeColor.g * strokeColor.a,
b: strokeColor.b * strokeColor.a
})
let width = 100
let height = 100
let r = 20
let strokeWidth = 10
let isSame = isSameForColorCompare
try {
refresh(container)
let netv = new NetV({
container,
width,
height,
node: {r, strokeColor, strokeWidth},
backgroundColor
})
netv.data({
nodes: [{id: '0', x: width / 2, y: height / 2}]
})
netv.draw()
const canvas = container.querySelector('canvas')
const actualColor = getPixelColor(canvas, width / 2 - r, height / 2)
log = rgba2hex(actualColor)
} catch (e) {
log = e.toString()
}
return {
title: `Default Node StrokeColor: ${JSON.stringify( strokeColor ).replace(/\"/g, '')}`,
container,
log,
expected,
isPassed: isSame(expected, log)
}
}
Insert cell
md`${generateAutoTestCaseDescription(default_node_strokeColor_r_negative)}`
Insert cell
default_node_strokeColor_r_negative['container']
Insert cell
mutable default_node_strokeColor_r_negative = {
let log = ''
let isPassed = false
let container = DOM.element('div')
let strokeColor = { r: -0.2, g: 0.4, b: 0.6, a: 0.8 }
let backgroundColor = {r: 0, g: 0, b: 0, a: 0}
let expected = `RangeError: Cannot set property 'r' with ${strokeColor.r}`
let width = 100
let height = 100
let r = 20
let strokeWidth = 10
let isSame = isSameForColorCompare
try {
refresh(container)
let netv = new NetV({
container,
width,
height,
node: {r, strokeColor, strokeWidth},
backgroundColor
})
netv.data({
nodes: [{id: '0', x: width / 2, y: height / 2}]
})
netv.draw()
const canvas = container.querySelector('canvas')
const actualColor = getPixelColor(canvas, width / 2 - r, height / 2)
log = rgba2hex(actualColor)
} catch (e) {
log = e.toString()
}
return {
title: `Default Node StrokeColor.r: ${strokeColor.r}`,
container,
log,
expected,
isPassed: isSame(expected, log)
}
}
Insert cell
md`${generateAutoTestCaseDescription(default_node_strokeColor_b_3)}`
Insert cell
default_node_strokeColor_b_3['container']
Insert cell
mutable default_node_strokeColor_b_3 = {
let log = ''
let isPassed = false
let container = DOM.element('div')
let strokeColor = { r: 0.2, g: 0.4, b: 3, a: 0.8 }
let backgroundColor = {r: 0, g: 0, b: 0, a: 0}
let expected = `RangeError: Cannot set property 'b' with ${strokeColor.b}`
let width = 100
let height = 100
let r = 20
let strokeWidth = 10
let isSame = isSameForColorCompare
try {
refresh(container)
let netv = new NetV({
container,
width,
height,
node: {r, strokeColor, strokeWidth},
backgroundColor
})
netv.data({
nodes: [{id: '0', x: width / 2, y: height / 2}]
})
netv.draw()
const canvas = container.querySelector('canvas')
const actualColor = getPixelColor(canvas, width / 2 - r, height / 2)
log = rgba2hex(actualColor)
} catch (e) {
log = e.toString()
}
return {
title: `Default Node StrokeColor.b: ${strokeColor.b}`,
container,
log,
expected,
isPassed: isSame(expected, log)
}
}
Insert cell
md`${generateAutoTestCaseDescription(default_node_strokeColor_g_undefined)}`
Insert cell
default_node_strokeColor_g_undefined['container']
Insert cell
mutable default_node_strokeColor_g_undefined = {
let log = ''
let isPassed = false
let container = DOM.element('div')
let strokeColor = { r: 0.2, g: undefined, b: 0.6, a: 0.8 }
let backgroundColor = {r: 0, g: 0, b: 0, a: 0}
let expected = `TypeError: Cannot set property 'g' with ${strokeColor.g}`
let width = 100
let height = 100
let r = 20
let strokeWidth = 10
let isSame = isSameForColorCompare
try {
refresh(container)
let netv = new NetV({
container,
width,
height,
node: {r, strokeColor, strokeWidth},
backgroundColor
})
netv.data({
nodes: [{id: '0', x: width / 2, y: height / 2}]
})
netv.draw()
const canvas = container.querySelector('canvas')
const actualColor = getPixelColor(canvas, width / 2 - r, height / 2)
log = rgba2hex(actualColor)
} catch (e) {
log = e.toString()
}
return {
title: `Default Node StrokeColor.g: undefined`,
container,
log,
expected,
isPassed: isSame(expected, log)
}
}
Insert cell
md`${generateAutoTestCaseDescription(default_node_strokeColor_b_null)}`
Insert cell
default_node_strokeColor_b_null['container']
Insert cell
mutable default_node_strokeColor_b_null = {
let log = ''
let isPassed = false
let container = DOM.element('div')
let strokeColor = { r: 0.2, g: 0.4, b: null, a: 0.8 }
let backgroundColor = {r: 0, g: 0, b: 0, a: 0}
let expected = `TypeError: Cannot set property 'b' with ${strokeColor.b}`
let width = 100
let height = 100
let r = 20
let strokeWidth = 10
let isSame = isSameForColorCompare
try {
refresh(container)
let netv = new NetV({
container,
width,
height,
node: {r, strokeColor, strokeWidth},
backgroundColor
})
netv.data({
nodes: [{id: '0', x: width / 2, y: height / 2}]
})
netv.draw()
const canvas = container.querySelector('canvas')
const actualColor = getPixelColor(canvas, width / 2 - r, height / 2)
log = rgba2hex(actualColor)
} catch (e) {
log = e.toString()
}
return {
title: `Default Node StrokeColor.b: ${strokeColor.b}`,
container,
log,
expected,
isPassed: isSame(expected, log)
}
}
Insert cell
md`${generateAutoTestCaseDescription(default_node_strokeColor_a_NaN)}`
Insert cell
default_node_strokeColor_a_NaN['container']
Insert cell
mutable default_node_strokeColor_a_NaN = {
let log = ''
let isPassed = false
let container = DOM.element('div')
let strokeColor = { r: 0.2, g: 0.4, b: 0.6, a: NaN }
let backgroundColor = {r: 0, g: 0, b: 0, a: 0}
let expected = `RangeError: Cannot set property 'a' with ${strokeColor.a}`
let width = 100
let height = 100
let r = 20
let strokeWidth = 10
let isSame = isSameForColorCompare
try {
refresh(container)
let netv = new NetV({
container,
width,
height,
node: {r, strokeColor, strokeWidth},
backgroundColor
})
netv.data({
nodes: [{id: '0', x: width / 2, y: height / 2}]
})
netv.draw()
const canvas = container.querySelector('canvas')
const actualColor = getPixelColor(canvas, width / 2 - r, height / 2)
log = rgba2hex(actualColor)
} catch (e) {
log = e.toString()
}
return {
title: `Default Node StrokeColor.a: ${strokeColor.a}`,
container,
log,
expected,
isPassed: isSame(expected, log)
}
}
Insert cell
md`${generateAutoTestCaseDescription(default_node_strokeColor_unset)}`
Insert cell
default_node_strokeColor_unset['container']
Insert cell
mutable default_node_strokeColor_unset = {
let log = ''
let isPassed = false
let container = DOM.element('div')
let strokeColor = {r: 0.9, g: 0.9, b: 0.9, a: 0.6}
let backgroundColor = {r: 0, g: 0, b: 0, a: 0}
let expected = rgba2hex({
a: strokeColor.a,
r: strokeColor.r * strokeColor.a,
g: strokeColor.g * strokeColor.a,
b: strokeColor.b * strokeColor.a
})
let width = 100
let height = 100
let r = 20
let strokeWidth = 10
let isSame = isSameForColorCompare
try {
refresh(container)
let netv = new NetV({
container,
width,
height,
node: {r, strokeColor, strokeWidth},
backgroundColor
})
netv.data({
nodes: [{id: '0', x: width / 2, y: height / 2}]
})
netv.draw()
const canvas = container.querySelector('canvas')
const actualColor = getPixelColor(canvas, width / 2 - r, height / 2)
log = rgba2hex(actualColor)
} catch (e) {
log = e.toString()
}
return {
title: `Default Node StrokeColor: unset`,
container,
log,
expected,
isPassed: isSame(expected, log)
}
}
Insert cell
md`${generateAutoTestCaseDescription(default_node_strokeColor_undefined)}`
Insert cell
default_node_strokeColor_undefined['container']
Insert cell
mutable default_node_strokeColor_undefined = {
let log = ''
let isPassed = false
let container = DOM.element('div')
let strokeColor = undefined
let backgroundColor = {r: 0, g: 0, b: 0, a: 0}
let expected = `TypeError: Cannot set property 'strokeColor' with ${strokeColor}`
let width = 100
let height = 100
let r = 20
let strokeWidth = 10
let isSame = isSameForColorCompare
try {
refresh(container)
let netv = new NetV({
container,
width,
height,
node: {r, strokeColor, strokeWidth},
backgroundColor
})
netv.data({
nodes: [{id: '0', x: width / 2, y: height / 2}]
})
netv.draw()
const canvas = container.querySelector('canvas')
const actualColor = getPixelColor(canvas, width / 2 - r, height / 2)
log = rgba2hex(actualColor)
} catch (e) {
log = e.toString()
}
return {
title: `Default Node StrokeColor: ${strokeColor}`,
container,
log,
expected,
isPassed: isSame(expected, log)
}
}
Insert cell
md`${generateAutoTestCaseDescription(default_node_strokeColor_null)}`
Insert cell
default_node_strokeColor_null['container']
Insert cell
mutable default_node_strokeColor_null = {
let log = ''
let isPassed = false
let container = DOM.element('div')
let strokeColor = null
let backgroundColor = {r: 0, g: 0, b: 0, a: 0}
let expected = `TypeError: Cannot set property 'strokeColor' with ${ strokeColor }`
let width = 100
let height = 100
let r = 20
let strokeWidth = 10
let isSame = isSameForColorCompare
try {
refresh(container)
let netv = new NetV({
container,
width,
height,
node: {r, strokeColor, strokeWidth},
backgroundColor
})
netv.data({
nodes: [{id: '0', x: width / 2, y: height / 2}]
})
netv.draw()
const canvas = container.querySelector('canvas')
const actualColor = getPixelColor(canvas, width / 2 - r, height / 2)
log = rgba2hex(actualColor)
} catch (e) {
log = e.toString()
}
return {
title: `Default Node StrokeColor: ${ strokeColor }`,
container,
log,
expected,
isPassed: isSame(expected, log)
}
}
Insert cell
md`${generateAutoTestCaseDescription(default_node_strokeColor_r_unset)}`
Insert cell
default_node_strokeColor_r_unset['container']
Insert cell
mutable default_node_strokeColor_r_unset = {
let log = ''
let isPassed = false
let container = DOM.element('div')
let strokeColor = { b: 0.2, g: 0.4, a: 0.8 }
let backgroundColor = {r: 0, g: 0, b: 0, a: 0}
let default_r = 0.9
let expected = rgba2hex({
a: strokeColor.a,
r: default_r * strokeColor.a,
g: strokeColor.g * strokeColor.a,
b: strokeColor.b * strokeColor.a
})
let width = 100
let height = 100
let r = 20
let strokeWidth = 10
let isSame = isSameForColorCompare
try {
refresh(container)
let netv = new NetV({
container,
width,
height,
node: {r, strokeColor, strokeWidth},
backgroundColor
})
netv.data({
nodes: [{id: '0', x: width / 2, y: height / 2}]
})
netv.draw()
const canvas = container.querySelector('canvas')
const actualColor = getPixelColor(canvas, width / 2 - r, height / 2)
log = rgba2hex(actualColor)
} catch (e) {
log = e.toString()
}
return {
title: `Default Node StrokeColor.r: unset`,
container,
log,
expected,
isPassed: isSame(expected, log)
}
}
Insert cell
md`${generateAutoTestCaseDescription(default_node_strokeColor_a_unset)}`
Insert cell
default_node_strokeColor_a_unset['container']
Insert cell
mutable default_node_strokeColor_a_unset = {
let log = ''
let isPassed = false
let container = DOM.element('div')
let strokeColor = { r: 0.6, b: 0.2, g: 0.4 }
let backgroundColor = {r: 0, g: 0, b: 0, a: 0}
let default_a = 0.6
let expected = rgba2hex({
a: default_a,
r: strokeColor.r * default_a,
g: strokeColor.g * default_a,
b: strokeColor.b * default_a
})
let width = 100
let height = 100
let r = 20
let strokeWidth = 10
let isSame = isSameForColorCompare
try {
refresh(container)
let netv = new NetV({
container,
width,
height,
node: {r, strokeColor, strokeWidth},
backgroundColor
})
netv.data({
nodes: [{id: '0', x: width / 2, y: height / 2}]
})
netv.draw()
const canvas = container.querySelector('canvas')
const actualColor = getPixelColor(canvas, width / 2 - r, height / 2)
log = rgba2hex(actualColor)
} catch (e) {
log = e.toString()
}
return {
title: `Default Node StrokeColor.a: unset`,
container,
log,
expected,
isPassed: isSame(expected, log)
}
}
Insert cell
md`${generateAutoTestCaseDescription(default_node_strokeColor_string)}`
Insert cell
default_node_strokeColor_string['container']
Insert cell
mutable default_node_strokeColor_string = {
let log = ''
let isPassed = false
let container = DOM.element('div')
let strokeColor = `{ r: 0.6, b: 0.2, g: 0.4, a: 1 }`
let backgroundColor = {r: 0, g: 0, b: 0, a: 0}
let expected = `TypeError: Cannot set property 'strokeColor' with '${strokeColor}'`
let width = 100
let height = 100
let r = 20
let strokeWidth = 10
let isSame = isSameForColorCompare
try {
refresh(container)
let netv = new NetV({
container,
width,
height,
node: {r, strokeColor, strokeWidth},
backgroundColor
})
netv.data({
nodes: [{id: '0', x: width / 2, y: height / 2}]
})
netv.draw()
const canvas = container.querySelector('canvas')
const actualColor = getPixelColor(canvas, width / 2 - r, height / 2)
log = rgba2hex(actualColor)
} catch (e) {
log = e.toString()
}
return {
title: `Default Node StrokeColor: '${ strokeColor }'`,
container,
log,
expected,
isPassed: isSame(expected, log)
}
}
Insert cell
md`${generateAutoTestCaseDescription(default_node_strokeColor_r_string)}`
Insert cell
default_node_strokeColor_r_string['container']
Insert cell
mutable default_node_strokeColor_r_string = {
let log = ''
let isPassed = false
let container = DOM.element('div')
let strokeColor = { r: 'r', b: 0.2, g: 0.4, a: 1 }
let backgroundColor = {r: 0, g: 0, b: 0, a: 0}
let expected = `TypeError: Cannot set property 'r' with '${strokeColor.r}'`
let width = 100
let height = 100
let r = 20
let strokeWidth = 10
let isSame = isSameForColorCompare
try {
refresh(container)
let netv = new NetV({
container,
width,
height,
node: {r, strokeColor, strokeWidth},
backgroundColor
})
netv.data({
nodes: [{id: '0', x: width / 2, y: height / 2}]
})
netv.draw()
const canvas = container.querySelector('canvas')
const actualColor = getPixelColor(canvas, width / 2 - r, height / 2)
log = rgba2hex(actualColor)
} catch (e) {
log = e.toString()
}
return {
title: `Default Node StrokeColor.r: 'r'`,
container,
log,
expected,
isPassed: isSame(expected, log)
}
}
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more