This minor version bump now has some major snapshot support but is backwards compatible.
Changes:
static
CanvasRenderingContext2D
method: #.__getEvents(ctx)
CanvasRenderingContext2D
state machine logs an _event
static
CanvasRenderingContext2D
method: #.__getPath(ctx)
_path
item and can be accessed via __getPath(ctx)
beginPath()
empties the _path
static
CanvasRenderingContext2D
method: #.__getDrawCalls(ctx)
_drawCall
item and can be accessed via __getDrawCall(ctx)
types/index.d.ts
file for tooling types (in jest environment)createLinearGradient
now accepts stringscreateRadialGradient
now accepts stringsglobalAlpha
now accepts null
per Number
coercion_path
and _events
to Path2D
Just publish a stable version.
The Version 2.0.0-beta.1 of jest-canvas-mock
is a complete overhaul of the mocking strategy entirely. Originally, the canvas.getCanvas('2d')
method would return a single object that contained a set of methods without any property definitions. This caused problems for people who wanted to use jest
to test and verify instanceof
checks.
Now the following expectation works as expected.
const ctx = document.createElement('canvas').getContext('2d');
expect(ctx).toBeInstanceOf(CanvasRenderingContext2D);
When each CanvasRenderingContext2D
object is created, all the methods are properly mocked with the jest.fn()
method, and bound to the instance. It's still possible to verify that a function was called on the context. The main difference now is that the methods actually perform runtime checks on the passed parameters.
The following example demonstrates that canvas methods can be called, and parameters are verified.
const PI_2 = Math.PI * 2;
// create a circle at 0,0 with radius 100
ctx.arc(0, 0, 100, 0, PI_2);
expect(ctx.arc).toBeCalledWith(0, 0, 100, 0, PI_2);
// negative radius values throw DOMException errors
expect(() => ctx.arc(0, 0, -10, 0, PI_2)).toThrow(DOMExpection);
Another really big change is that the mocking strategy now attempts to conform to the html living specification. In order to do this, two packages were added as dependencies so that css colors and fonts can be more properly parsed. This is not perfect, and any problems with the color parser or font parser should be reported in the Issues tab.
This change comes with overhauled ctx.save()
and ctx.restore()
functions. These function calls work almost entirely as intended. For instance, ctx.save()
actually pushes all the current property values to a stack, and this operation is undone when ctx.restore()
is called. Take the following snippet of code as an example.
// create a context
const ctx = document.createElement('canvas').getContext('2d');
// save the current state of the canvas
ctx.save();
// set some color and font values
ctx.fillStyle = 'blue';
ctx.font = '12pt Times New Roman';
// now the fillStyle property parses the color
expect(ctx.fillStyle).toBe('#00F');
// font parsing also works as intended
expect(ctx.font).toBe('16px "Times New Roman"');
// restore the previously saved state
ctx.restore():
// the fillStyle was restored to default
expect(ctx.fillStyle).toBe('#000');
// the font was restored too
expect(ctx.font).toBe('10px sans-serif');
For all these reasons, the jest-canvas-mock
package was bumped a major version to 2.0.0
.
direction
fillStyle
filter
font
globalAlpha
globalCompositeOperation
imageSmoothingEnabled
imageSmoothingQuality
lineCap
lineDashOffset
lineDash
(via getLineDash()
/ setLineDash()
)lineJoin
lineWidth
miterLimit
shadowBlur
shadowColor
shadowOffsetX
shadowOffsetY
stack
strokeStyle
textAlign
textBaseline
transform
(via setTransform
etc.)constructor
binds the following functions
setLineDash
getLineDash
setTransform
getTransform
getImageData
save
restore
createPattern
createRadialGradient
addHitRegion
arc
arcTo
beginPath
clip
closePath
scale
stroke
clearHitRegions
clearRect
fillRect
strokeRect
rect
resetTransform
translate
moveTo
lineTo
bezierCurveTo
createLinearGradient
ellipse
measureText
rotate
drawImage
drawFocusIfNeeded
isPointInPath
isPointInStroke
putImageData
strokeText
fillText
quadraticCurveTo
removeHitRegion
fill
transform
scrollPathIntoView
createImageData
addHitRegion
path
or id
parameter is set, throws DOMException
otherwisefillRule
if set, throws TypeError
if invalidarc
TypeError
if arguments.length < 5
DOMException(IndexSizeError)
if values are finite, but radius is negativearcTo
TypeError
if arguments.length < 5
DOMException(IndexSizeError)
if values are finite, but radius is negativebeginPath
(empty noOp stub)
bezierCurveTo
TypeError
if arguments.length < 6
canvas
HTMLCanvasElement
clearHitRegions
(empty noOp stub)clearRect
TypeError
if arguments.length < 4
clip
fillRule
is provided, throws TypeErorr
if FillRule
is invalidpath
is provided, throws TypeError
if path is not instanceof
Path2D
closePath
(added noOp stub)createImageData
TypeError
if arguments.length === 1
and parameter is not instanceof
ImageData
TypeError
if arguments.length >= 2
and width
is not finiteTypeError
if arguments.length >= 2
and height
is not finiteImageData
createLinearGradient
TypeError
if arguments.length < 4
TypeError
if x0
is not finiteTypeError
if y0
is not finiteTypeError
if x1
is not finiteTypeError
if y1
is not finiteCanvasGradient
createPattern
TypeError
if image is not supported in jest-canvas-mock
TypeError
if arguments.length < 4
DOMException('SyntaxError')
if image is detachedCanvasPattern
if image is HTMLImageElement
, ImageBitmap
, HTMLVideoElement
, HTMLCanvasElement
createRadialGradient
TypeError
if arguments.length < 4
TypeError
if x0
is not finiteTypeError
if y0
is not finiteTypeError
if r0
is not finiteTypeError
if x1
is not finiteTypeError
if y1
is not finiteTypeError
if r1
is not finiteDOMException('DataError')
if r0
is negativeDOMException('DataError')
if r1
is negativecurrentTransform
value instanceof DOMMatrix
DOMMatrix
with current transform valuesdirection
drawFocusIfNeeded
TypeError
if arguments.length === 0
TypeError
if arguments.length === 2
and path
is not instanceof Path2D
TypeError
if element
is not instanceof Element
TypeError
if image is not supported by jest-canvas-mock
ellipse
TypeError
if arguments.length < 7
DOMException('IndexSizeError')
if radiusX
is negative and all parameters are finiteDOMException('IndexSizeError')
if radiusY
is negative and all parameters are finitefill
TypeError
if fillRule
is not valid FillRule
TypeError
if path
is not instanceof Path2D
fillRect
TypeError
if arguments.length < 4
fillStyle
fillStyle
stack value if it's a valid css color, a CanvasGradient
or a CanvasPattern
fillStyle
stack valuefillText
TypeError
if arguments.length < 3
filter
filter
stack value if it's a stringfilter
stack valuefont
font
stack value if it's a valid fontfont
stack valuegetImageData
ImageData
with the same size as the parent canvas
getLineDash
lineDash
stack valuesetLineDash
TypeError
if lineDash
value is not a valid sequencelineDash
stack valuelineDash
length is oddgetTransform
transform
stack value in the form of a DOMMatrix
globalAlpha
globalAlpha
stack value if value
finite and between the inclusive range [0 .. 1]
globalAlpha
stack valueglobalCompositeOperation
globalCompositeOperation
stack value if value
is a valid GlobalCompositeOperation valueglobalCompositeOperation
stack valueimageSmoothingEnabled
imageSmoothingEnabled
stack value to value
coerced to a booleanimageSmoothingEnabled
stack valueimageSmoothingQuality
imageSmoothingQuality
stack value if value is a valid ImageSmoothingQuality valueimageSmoothingQuality
stack valueisPointInPath
TypeError
if arguments.length < 2
TypeError
if provided fillRule
is not a valid FillRule
isPointInPath()
operationisPointInStroke
TypeError
if arguments.length < 2
lineCap
lineCap
stack value if value is a valid LineCap
lineCap
stack valuelineDashOffset
lineDashOffset
stack value if value is finitelineDashOffset
stack valuelineJoin
lineJoin
stack value if value is a valid LineJoin
lineJoin
stack valuelineTo
TypeError
if arguments.length < 2
lineWidth
lineWidth
stack value if value is finite and greater than 0lineWidth
stack valuemeasureText
TypeError
if arguments.length < 1
TextMetrics
objectmiterLimit
miterLimit
stack value if value is finite and greater than 0miterLimit
stack valuemoveTo
TypeError
if arguments.length < 2
putImageData
TypeError
if arguments.length
is not valid arityTypeError
if data
is not instanceof ImageData
quadraticCurveTo
TypeError
if arguments.length < 4
rect
TypeError
if arguments.length < 4
removeHitRegion
TypeError
if arguments.length < 1
resetTransform
transform
stack value to the 2d identity matrixrestore
rotate
TypeError
if arguments.length < 1
transform
stack value if angle
is finitesave
scale
TypeError
if arguments.length < 2
transform
stack value if the x
and y
values are finitescrollPathIntoView
(empty noOp stub)setTransform
arguments.length === 0
sets the current transform
stack value to the 2d identity matrixarguments.length == 1
TypeError
if value is not instanceof DOMMatrix
transform
stack value to the provided matrixTypeError
if arguments.length < 6
Number()
transform
stack value if the provided values are all finiteshadowBlur
shadowBlur
stack value if value is finite and greater than 0shadowBlur
stack valueshadowColor
shadowColor
stack value if value is a valid css colorshadowColor
stack valueshadowOffsetX
shadowOffsetX
stack value if value is finiteshadowOffsetX
stack valueshadowOffsetY
shadowOffsetY
stack value if value is finiteshadowOffsetY
stack valuestroke
TypeError
if path
is not instanceof Path2D
strokeRect
TypeError
if arguments.length < 4
strokeStyle
fillStyle
stack value if it's a valid css color, a CanvasGradient
or a CanvasPattern
fillStyle
stack valuestrokeText
TypeError
if arguments.length < 3
textAlign
textAlign
stack value if value is a valid TextAlign
valuetextAlign
stack valuetextBaseline
textBaseline
stack value if value is a valid TextBaseline
valuetextBaseline
stack valuetransform
TypeError
if arguments.length < 6
Number()
transform
stack value if every parameter is finitetranslate
TypeError
if arguments.length < 2
transform
stack value if every parameter is finiteinstanceof
checksaddColorStop
addColorStop
IndexSizeError
DOMException
if resulting offset is not finiteSyntaxError
when color cannot be parsedinstanceof
checkssetTransform
setTransform
TypeError
if argument.length > 1 and parameter is not an objectDOMMatrix
implementationinstanceof
checksconstructor
length === 16
length === 6
matrix.isIdentity
true
if matrix is an identity matrixa-f
is2D
true
if matrix was constructed as a 2d matrixm11-m44
computed propertiesNumber()
coercion in settersinstanceof
checksclose
close
drawImage
function calls to failinstanceof
checkswidth
, height
and data
propertiesconstructor
TypeError
if width is not finiteTypeError
if width is 0
TypeError
if height is not finiteTypeError
if height is 0
Uint8ClampedArray
of width * height * 4
sizeinstanceof
checksCanvasRenderingContext2D
for convenienceclosePath
implemented from CanvasRenderingContext2D
moveTo
implemented from CanvasRenderingContext2D
lineTo
implemented from CanvasRenderingContext2D
bezierCurveTo
implemented from CanvasRenderingContext2D
quadraticCurveTo
implemented from CanvasRenderingContext2D
arc
implemented from CanvasRenderingContext2D
arcTo
implemented from CanvasRenderingContext2D
ellipse
implemented from CanvasRenderingContext2D
rect
implemented from CanvasRenderingContext2D
addPath
TypeError
if arguments.length < 1
TypeError
if provided path
is not instanceof
Path2D
instanceof
checkswidth
actualBoundingBoxLeft
actualBoundingBoxRight
fontBoundingBoxAscent
fontBoundingBoxDescent
actualBoundingBoxAscent
actualBoundingBoxDescent
emHeightAscent
emHeightDescent
hangingBaseline
alphabeticBaseline
ideographicBaseline
constructor
text
parameterwidth
property to text.length