a774ac673a
Some checks failed
Deploy analytics worker / Deploy analytics worker to ${{ (github.ref == 'refs/heads/production' && 'production') || (github.ref == 'refs/heads/main' && 'staging') || 'preview' }} (push) Failing after 1s
i18n upload strings / Upload latest strings (push) Failing after 1s
Deploy bemo / Deploy bemo to ${{ (github.ref == 'refs/heads/bemo-production' && 'production') || (github.ref == 'refs/heads/main' && 'staging') || 'preview' }} (push) Failing after 1s
Deploy grafana resources / ${{ github.event_name == 'push' && 'Deploy grafana resources' || 'Validate grafana resources (dry run)' }} (push) Failing after 0s
End to end tests (dotcom) / Check for relevant changes (push) Failing after 0s
End to end tests (examples) / Check for relevant changes (push) Failing after 0s
End to end tests (mermaid readability) / Check for relevant changes (push) Failing after 1s
End to end tests (perf) / Check for relevant changes (push) Failing after 0s
Publish editor extensions / Publish editor extensions (push) Failing after 1s
Publish SDK packages / Remove the publish-packages label (push) Has been skipped
Checks / Tests & checks (push) Has been cancelled
Checks / Build all projects (push) Has been cancelled
Deploy templates / Deploy templates (push) Has been cancelled
End to end tests (dotcom) / End to end tests (dotcom) (push) Has been cancelled
End to end tests (mermaid readability) / End to end tests (mermaid readability) (push) Has been cancelled
End to end tests (perf) / End to end tests (perf) (push) Has been cancelled
Deploy .com / Deploy dotcom to ${{ (github.ref == 'refs/heads/production' && 'production') || (github.ref == 'refs/heads/main' && 'staging') || 'preview' }} (push) Has been cancelled
End to end tests (examples) / End to end tests (examples) (push) Has been cancelled
Publish SDK packages / Publish SDK packages (push) Has been cancelled
Publish SDK packages / Tell user released version (push) Has been cancelled
Publish SDK packages / Publishes code templates to separate repositories (push) Has been cancelled
Publish SDK packages / Deploys the template demos with the new SDK version (push) Has been cancelled
89 lines
3.1 KiB
TypeScript
89 lines
3.1 KiB
TypeScript
import { Locator, Page, expect } from '@playwright/test'
|
|
|
|
export class StylePanel {
|
|
readonly stylesArray: string[]
|
|
readonly colors: { [key: string]: Locator }
|
|
readonly fill: { [key: string]: Locator }
|
|
readonly fillExtra: Locator
|
|
readonly dash: { [key: string]: Locator }
|
|
readonly size: { [key: string]: Locator }
|
|
readonly font: { [key: string]: Locator }
|
|
readonly align: { [key: string]: Locator }
|
|
|
|
constructor(public readonly page: Page) {
|
|
this.page = page
|
|
this.stylesArray = [
|
|
'style.color',
|
|
'style.opacity',
|
|
'style.fill',
|
|
'style.dash',
|
|
'style.size',
|
|
'style.font',
|
|
'style.align',
|
|
]
|
|
this.colors = {
|
|
black: this.page.getByTestId('style.color.black'),
|
|
grey: this.page.getByTestId('style.color.grey'),
|
|
lightViolet: this.page.getByTestId('style.color.light-violet'),
|
|
violet: this.page.getByTestId('style.color.violet'),
|
|
blue: this.page.getByTestId('style.color.blue'),
|
|
lightBlue: this.page.getByTestId('style.color.light-blue'),
|
|
yellow: this.page.getByTestId('style.color.yellow'),
|
|
orange: this.page.getByTestId('style.color.orange'),
|
|
green: this.page.getByTestId('style.color.green'),
|
|
lightGreen: this.page.getByTestId('style.color.light-green'),
|
|
lightRed: this.page.getByTestId('style.color.light-red'),
|
|
red: this.page.getByTestId('style.color.red'),
|
|
}
|
|
this.fill = {
|
|
none: this.page.getByTestId('style.fill.none'),
|
|
semi: this.page.getByTestId('style.fill.semi'),
|
|
solid: this.page.getByTestId('style.fill.solid'),
|
|
}
|
|
this.fillExtra = this.page.getByTestId('style.fill-extra')
|
|
this.dash = {
|
|
draw: this.page.getByTestId('style.dash.draw'),
|
|
dashed: this.page.getByTestId('style.dash.dashed'),
|
|
dotted: this.page.getByTestId('style.dash.dotted'),
|
|
solid: this.page.getByTestId('style.dash.solid'),
|
|
}
|
|
this.size = {
|
|
s: this.page.getByTestId('style.size.s'),
|
|
m: this.page.getByTestId('style.size.m'),
|
|
l: this.page.getByTestId('style.size.l'),
|
|
xl: this.page.getByTestId('style.size.xl'),
|
|
}
|
|
this.font = {
|
|
draw: this.page.getByTestId('style.font.draw'),
|
|
sans: this.page.getByTestId('style.font.sans'),
|
|
serif: this.page.getByTestId('style.font.serif'),
|
|
mono: this.page.getByTestId('style.font.mono'),
|
|
}
|
|
|
|
this.align = {
|
|
start: this.page.getByTestId('style.align.start'),
|
|
middle: this.page.getByTestId('style.align.middle'),
|
|
end: this.page.getByTestId('style.align.end'),
|
|
}
|
|
}
|
|
async getAfterElementStyle(style: Locator, property: string) {
|
|
const getStyle = (element: Element, property: string) =>
|
|
window.getComputedStyle(element, '::after').getPropertyValue(property)
|
|
return await style.evaluate(getStyle, property)
|
|
}
|
|
|
|
async isActive(style: Locator) {
|
|
const backgroundColor = await this.getAfterElementStyle(style, 'background-color')
|
|
return expect(backgroundColor).toBe('rgba(0, 0, 0, 0.055)')
|
|
}
|
|
|
|
async isInactive(style: Locator) {
|
|
const backgroundColor = await this.getAfterElementStyle(style, 'background-color')
|
|
// The color is different on mobile
|
|
return expect(['rgba(0, 0, 0, 0.043)', 'rgba(0, 0, 0, 0)']).toContain(backgroundColor)
|
|
}
|
|
getElement() {
|
|
return this.page.getByTestId('style.panel')
|
|
}
|
|
}
|