213 lines
6.5 KiB
JavaScript
213 lines
6.5 KiB
JavaScript
import { visitAndApproveStorage } from '../../support/ui-test-helper.js'
|
|
|
|
describe('UI - Zoom tool', function () {
|
|
beforeEach(() => {
|
|
visitAndApproveStorage()
|
|
})
|
|
|
|
it('should be able to open', function () {
|
|
cy.get('#tool-wrapper > input')
|
|
.click({ force: true })
|
|
cy.get('#zoom')
|
|
.shadow()
|
|
.find('#options-container')
|
|
.should('have.css', 'display', 'flex')
|
|
})
|
|
|
|
it('should be able to close', function () {
|
|
cy.get('#tool_select')
|
|
.click({ force: true })
|
|
.get('#zoom')
|
|
.shadow()
|
|
.find('#options-container')
|
|
.should('have.css', 'display', 'none')
|
|
})
|
|
|
|
it('should be able to input zoom level', function () {
|
|
cy.get('#canvasBackground')
|
|
.invoke('attr', 'width')
|
|
.then(width => {
|
|
cy.get('#zoom')
|
|
.shadow()
|
|
.find('input')
|
|
.type('200', { force: true })
|
|
cy.get('#tool_select')
|
|
.click({ force: true })
|
|
cy.get('#canvasBackground')
|
|
.invoke('attr', 'width')
|
|
.should('equal', (width * 2).toString())
|
|
})
|
|
})
|
|
|
|
it('should be able to increment zoom level', function () {
|
|
cy.get('#canvasBackground')
|
|
.invoke('attr', 'width')
|
|
.then(width => {
|
|
cy.get('#zoom')
|
|
.shadow()
|
|
.find('#arrow-up')
|
|
.click({ force: true })
|
|
cy.get('#canvasBackground')
|
|
.invoke('attr', 'width')
|
|
.should('equal', (width * 1.1).toString())
|
|
})
|
|
})
|
|
|
|
it('should be able to decrement zoom level', function () {
|
|
cy.get('#canvasBackground')
|
|
.invoke('attr', 'width')
|
|
.then(width => {
|
|
cy.get('#zoom')
|
|
.shadow()
|
|
.find('#arrow-down')
|
|
.click({ force: true })
|
|
cy.get('#canvasBackground')
|
|
.invoke('attr', 'width')
|
|
.should('equal', (width * 0.9).toString())
|
|
})
|
|
})
|
|
|
|
it('should be able to select from popup', function () {
|
|
cy.get('#canvasBackground')
|
|
.invoke('attr', 'width')
|
|
.then(width => {
|
|
cy.get('#zoom')
|
|
.click({ force: true })
|
|
.find('se-text')
|
|
.first()
|
|
.click({ force: true })
|
|
.invoke('attr', 'value')
|
|
.then(value => {
|
|
cy.get('#canvasBackground')
|
|
.invoke('attr', 'width')
|
|
.should('equal', (width * (value / 100)).toString())
|
|
.toString()
|
|
})
|
|
})
|
|
})
|
|
|
|
it('should be able to resize to fit the current selection', function () {
|
|
cy.get('#tool_path').click({ force: true })
|
|
cy.get('#svgcontent')
|
|
.trigger('mousedown', 50, 50, { force: true })
|
|
.trigger('mouseup', { force: true })
|
|
.trigger('mousemove', 100, 50, { force: true })
|
|
.trigger('mousedown', 100, 50, { force: true })
|
|
.trigger('mouseup', { force: true })
|
|
.trigger('mousemove', 75, 150, { force: true })
|
|
.trigger('mousedown', 75, 150, { force: true })
|
|
.trigger('mouseup', { force: true })
|
|
.trigger('mousemove', 0, 0, { force: true })
|
|
.trigger('mousedown', 0, 0, { force: true })
|
|
.trigger('mouseup', { force: true })
|
|
|
|
cy.get('#tool_select')
|
|
.click({ force: true })
|
|
.trigger('mousedown', 50, 50, { force: true })
|
|
.trigger('mousemove', 100, 50, { force: true })
|
|
.trigger('mouseup', { force: true })
|
|
|
|
cy.get('#canvasBackground')
|
|
.invoke('attr', 'width')
|
|
.then(width => {
|
|
cy.get('#zoom')
|
|
.click({ force: true })
|
|
.find("se-text[value='layer']")
|
|
.click({ force: true })
|
|
cy.get('#zoom')
|
|
.invoke('attr', 'value')
|
|
.then(value => {
|
|
cy.get('#canvasBackground')
|
|
.invoke('attr', 'width')
|
|
.should('not.equal', '100')
|
|
.toString()
|
|
})
|
|
})
|
|
})
|
|
|
|
it('should be able to resize to fit the canvas', function () {
|
|
cy.get('#canvasBackground')
|
|
.invoke('attr', 'width')
|
|
.then(width => {
|
|
cy.get('#zoom')
|
|
.click({ force: true })
|
|
.find("se-text[value='canvas']")
|
|
.click({ force: true })
|
|
cy.get('#zoom')
|
|
.invoke('attr', 'value')
|
|
.then(value => {
|
|
cy.get('#canvasBackground')
|
|
.invoke('attr', 'width')
|
|
.should('not.equal', '100')
|
|
.toString()
|
|
})
|
|
})
|
|
})
|
|
|
|
it('should be able to resize to fit the current layer', function () {
|
|
cy.get('#tool_path').click({ force: true })
|
|
cy.get('#svgcontent')
|
|
.trigger('mousedown', 50, 50, { force: true })
|
|
.trigger('mouseup', { force: true })
|
|
.trigger('mousemove', 100, 50, { force: true })
|
|
.trigger('mousedown', 100, 50, { force: true })
|
|
.trigger('mouseup', { force: true })
|
|
.trigger('mousemove', 75, 150, { force: true })
|
|
.trigger('mousedown', 75, 150, { force: true })
|
|
.trigger('mouseup', { force: true })
|
|
.trigger('mousemove', 0, 0, { force: true })
|
|
.trigger('mousedown', 0, 0, { force: true })
|
|
.trigger('mouseup', { force: true })
|
|
|
|
cy.get('#canvasBackground')
|
|
.invoke('attr', 'width')
|
|
.then(width => {
|
|
cy.get('#zoom')
|
|
.click({ force: true })
|
|
.find("se-text[value='layer']")
|
|
.click({ force: true })
|
|
cy.get('#zoom')
|
|
.invoke('attr', 'value')
|
|
.then(value => {
|
|
cy.get('#canvasBackground')
|
|
.invoke('attr', 'width')
|
|
.should('not.equal', '100')
|
|
.toString()
|
|
})
|
|
})
|
|
})
|
|
|
|
it('should be able to resize to fit the current content', function () {
|
|
cy.get('#tool_path').click({ force: true })
|
|
cy.get('#svgcontent')
|
|
.trigger('mousedown', 50, 50, { force: true })
|
|
.trigger('mouseup', { force: true })
|
|
.trigger('mousemove', 100, 50, { force: true })
|
|
.trigger('mousedown', 100, 50, { force: true })
|
|
.trigger('mouseup', { force: true })
|
|
.trigger('mousemove', 75, 150, { force: true })
|
|
.trigger('mousedown', 75, 150, { force: true })
|
|
.trigger('mouseup', { force: true })
|
|
.trigger('mousemove', 0, 0, { force: true })
|
|
.trigger('mousedown', 0, 0, { force: true })
|
|
.trigger('mouseup', { force: true })
|
|
|
|
cy.get('#canvasBackground')
|
|
.invoke('attr', 'width')
|
|
.then(width => {
|
|
cy.get('#zoom')
|
|
.click({ force: true })
|
|
.find("se-text[value='content']")
|
|
.click({ force: true })
|
|
cy.get('#zoom')
|
|
.invoke('attr', 'value')
|
|
.then(value => {
|
|
cy.get('#canvasBackground')
|
|
.invoke('attr', 'width')
|
|
.should('not.equal', '100')
|
|
.toString()
|
|
})
|
|
})
|
|
})
|
|
})
|