HTML Тест холста с помощью шутника-кукловода (Javascript)

Question

У меня есть компонент подписи (React. js), который требует тестирования с помощью пакета автоматизации, который я создал с помощью Jest-Puppeteer. Компонент является элементом <canvas> HTML.

<canvas width="1316" height="500" style="width: 100%; touch-action: none;"></canvas>

Я обнаружил этот пакет npm: https://www.npmjs.com/package/jest-canvas-mock и другое решение для StackOverflow: HTML Тестирование модуля холста

Но мне было интересно, может ли кто-нибудь дать гораздо более полное объяснение того, как именно можно автоматизировать процесс с помощью тега <canvas>, а затем идеально отразить его с помощью Jest-Puppeteer, т.е. как это сделать ctx работа, это свойства и т. д. c.

Спасибо!

Answer 1

Поскольку вы упомянули, что используете свой холст в компоненте «подпись», то ctx, на который вы ссылаетесь, вероятно, CanvasRenderingContext2D.

Вы можете представить себе CanvasRenderingContext2D как робот рисования с сохранением состояния, который может рисовать на Canvas экземпляре, который его создал. Вы можете установить свойства робота, такие как цвет краски и ширина bru sh, а затем вызвать его методы, чтобы переместить его и нарисовать на Canvas, к которому он принадлежит.

Как и во всех браузерных API, Mozilla Сеть разработчиков, вероятно, является наилучшим справочным материалом для вас, поскольку у них есть «Как», а также «Список всего» и даже «X работает в браузере Y». Эта ссылка должна помочь вам начать!

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D