fcf97958e8
This PR adds E2E tests for the style panel. It checks that: - the style panel opens and closes as expected on mobile - the style panel button is disabled for the eraser tool on mobile - selecting a style hints the button - changing a style changes the appearance of the shape - It also moves a test from the toolbar tests that checks the correct styles are exposed for the right tools fixes tld-2222 - [x] `tests` — Changes to any test code only[^2] ### Release Notes - Add style panel E2E tests --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
43 lines
1.6 KiB
TypeScript
43 lines
1.6 KiB
TypeScript
import { Locator, Page, expect } from '@playwright/test'
|
|
|
|
export class Toolbar {
|
|
readonly toolLock: Locator
|
|
readonly moreToolsButton: Locator
|
|
readonly moreToolsPopover: Locator
|
|
readonly mobileStylesButton: Locator
|
|
readonly tools: { [key: string]: Locator }
|
|
readonly popOverTools: { [key: string]: Locator }
|
|
|
|
constructor(public readonly page: Page) {
|
|
this.page = page
|
|
this.toolLock = this.page.getByTestId('tool-lock')
|
|
this.moreToolsButton = this.page.getByTestId('tools.more-button')
|
|
this.moreToolsPopover = this.page.getByTestId('tools.more-content')
|
|
this.mobileStylesButton = this.page.getByTestId('mobile-styles.button')
|
|
this.tools = {
|
|
select: this.page.getByTestId('tools.select'),
|
|
draw: this.page.getByTestId('tools.draw'),
|
|
arrow: this.page.getByTestId('tools.arrow'),
|
|
cloud: this.page.getByTestId('tools.cloud'),
|
|
eraser: this.page.getByTestId('tools.eraser'),
|
|
rectangle: this.page.getByTestId('tools.rectangle'),
|
|
}
|
|
this.popOverTools = {
|
|
popoverCloud: this.page.getByTestId('tools.more.cloud'),
|
|
popoverFrame: this.page.getByTestId('tools.more.frame'),
|
|
popoverRectangle: this.page.getByTestId('tools.more.rectangle'),
|
|
}
|
|
}
|
|
async clickTool(tool: Locator) {
|
|
await tool.click()
|
|
}
|
|
async isSelected(tool: Locator) {
|
|
// pseudo elements aren't exposed to the DOM, but we can check the color as a proxy
|
|
const expectedColor = 'rgb(255, 255, 255)'
|
|
await expect(tool).toHaveCSS('color', expectedColor)
|
|
}
|
|
async isNotSelected(tool: Locator) {
|
|
const expectedColor = 'rgb(46, 46, 46)'
|
|
await expect(tool).toHaveCSS('color', expectedColor)
|
|
}
|
|
}
|