7e673b5e37
This PR adds some e2e tests for the toolbar. Fixtures have been set up for the toolbar and style panel, and are fairly barebones at the moment. Eventually each menu should have a fixture associated with it, and all tests will use the class defined in the fixtures file. ### Change Type - [x] `tests` — Changes to any test code only[^2] ### Release Notes - Add e2e tests for the toolbar
37 lines
1.5 KiB
TypeScript
37 lines
1.5 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.locator('[data-testid="tool-lock"]')
|
|
this.moreToolsButton = this.page.locator('[data-testid="tools.more-button"]')
|
|
this.moreToolsPopover = this.page.locator('[data-testid="tools.more-content"]')
|
|
this.mobileStylesButton = this.page.locator('[data-testid="mobile-styles.button"]')
|
|
this.tools = {
|
|
select: this.page.locator('[data-testid="tools.select"]'),
|
|
draw: this.page.locator('[data-testid="tools.draw"]'),
|
|
arrow: this.page.locator('[data-testid="tools.arrow"]'),
|
|
cloud: this.page.locator('[data-testid="tools.cloud"]'),
|
|
eraser: this.page.locator('[data-testid="tools.eraser"]'),
|
|
}
|
|
this.popOverTools = {
|
|
popoverCloud: this.page.locator('[data-testid="tools.more.cloud"]'),
|
|
popoverFrame: this.page.locator('[data-testid="tools.more.frame"]'),
|
|
}
|
|
}
|
|
async clickTool(tool: Locator) {
|
|
await tool.click()
|
|
}
|
|
async isSelected(tool: Locator, isSelected: boolean) {
|
|
// pseudo elements aren't exposed to the DOM, but we can check the color as a proxy
|
|
const expectedColor = isSelected ? 'rgb(255, 255, 255)' : 'rgb(46, 46, 46)'
|
|
await expect(tool).toHaveCSS('color', expectedColor)
|
|
}
|
|
}
|