Skip to content

Commit 07bddc0

Browse files
OrKoNDevtools-frontend LUCI CQ
OrKoN
authored and
Devtools-frontend LUCI CQ
committed
Migrate font-editor_test.ts to e2e_non_hosted
Fixed: 416405494 Change-Id: I2e53612cc8db8ba4d59baba889334fc5590d9946 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6696128 Commit-Queue: Alex Rudenko <[email protected]> Reviewed-by: Liviu Rau <[email protected]>
1 parent 0feda9b commit 07bddc0

File tree

6 files changed

+136
-112
lines changed

6 files changed

+136
-112
lines changed

‎test/e2e/helpers/elements-helpers.ts‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -754,21 +754,23 @@ export const shiftClickColorSwatch = async (
754754
undefined, devToolsPage);
755755
};
756756

757-
export const getElementStyleFontEditorButton = async () => {
758-
const section = await waitFor(ELEMENT_STYLE_SECTION_SELECTOR);
759-
const result = await $(FONT_EDITOR_SELECTOR, section);
760-
await expectVeEvents([veImpressionsUnder(
761-
'Panel: elements > Pane: styles > Section: style-properties', [veImpression('Action', 'font-editor')])]);
757+
export const getElementStyleFontEditorButton = async (devToolsPage = getBrowserAndPagesWrappers().devToolsPage) => {
758+
const section = await devToolsPage.waitFor(ELEMENT_STYLE_SECTION_SELECTOR);
759+
const result = await devToolsPage.$(FONT_EDITOR_SELECTOR, section);
760+
await expectVeEvents(
761+
[veImpressionsUnder(
762+
'Panel: elements > Pane: styles > Section: style-properties', [veImpression('Action', 'font-editor')])],
763+
undefined, devToolsPage);
762764
return result;
763765
};
764766

765-
export const getFontEditorButtons = async () => {
766-
const buttons = await $$(FONT_EDITOR_SELECTOR);
767+
export const getFontEditorButtons = async (devToolsPage = getBrowserAndPagesWrappers().devToolsPage) => {
768+
const buttons = await devToolsPage.$$(FONT_EDITOR_SELECTOR);
767769
return buttons;
768770
};
769771

770-
export const getHiddenFontEditorButtons = async () => {
771-
const buttons = await $$(HIDDEN_FONT_EDITOR_SELECTOR);
772+
export const getHiddenFontEditorButtons = async (devToolsPage = getBrowserAndPagesWrappers().devToolsPage) => {
773+
const buttons = await devToolsPage.$$(HIDDEN_FONT_EDITOR_SELECTOR);
772774
return buttons;
773775
};
774776

‎test/e2e/inline_editor/BUILD.gn‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,7 @@
55
import("../../../scripts/build/typescript/typescript.gni")
66

77
node_ts_library("inline_editor") {
8-
sources = [
9-
"color-swatch_test.ts",
10-
"font-editor_test.ts",
11-
]
8+
sources = [ "color-swatch_test.ts" ]
129

1310
deps = [
1411
"../../shared",

‎test/e2e/inline_editor/font-editor_test.ts‎

Lines changed: 0 additions & 99 deletions
This file was deleted.

‎test/e2e_non_hosted/BUILD.gn‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ node_ts_library("tests") {
2424
"coverage",
2525
"css_overview",
2626
"elements",
27+
"inline_editor",
2728
"inspector",
2829
"issues",
2930
"layers",

‎test/e2e_non_hosted/inline_editor/BUILD.gn‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# Copyright 2025 The Chromium Authors. All rights reserved.
2+
# Use of this source code is governed by a BSD-style license that can be
3+
# found in the LICENSE file.
4+
5+
import("../../../scripts/build/typescript/typescript.gni")
6+
7+
ts_e2e_library("inline_editor") {
8+
sources = [ "font-editor_test.ts" ]
9+
deps = [
10+
"../../e2e/helpers",
11+
"../shared",
12+
]
13+
}

‎test/e2e_non_hosted/inline_editor/font-editor_test.ts‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
// Copyright 2025 The Chromium Authors. All rights reserved.
2+
// Use of this source code is governed by a BSD-style license that can be
3+
// found in the LICENSE file.
4+
5+
import {assert} from 'chai';
6+
7+
import {
8+
clickNthChildOfSelectedElementNode,
9+
getElementStyleFontEditorButton,
10+
getFontEditorButtons,
11+
getHiddenFontEditorButtons,
12+
waitForContentOfSelectedElementsNode,
13+
waitForCSSPropertyValue,
14+
} from '../../e2e/helpers/elements-helpers.js';
15+
import type {DevToolsPage} from '../shared/frontend-helper.js';
16+
import type {InspectedPage} from '../shared/target-helper.js';
17+
18+
async function goToTestPageAndSelectTestElement(
19+
inspectedPage: InspectedPage, devToolsPage: DevToolsPage, path = 'inline_editor/fontEditor.html') {
20+
await inspectedPage.goToResource(path);
21+
// Wait for the body to be selected
22+
await waitForContentOfSelectedElementsNode('<body>\u200B', devToolsPage);
23+
// Select the first child of the body, which is the div with the test styles
24+
await clickNthChildOfSelectedElementNode(1, devToolsPage);
25+
}
26+
27+
async function openFontEditorForInlineStyle(devToolsPage: DevToolsPage) {
28+
const fontEditorButton = await getElementStyleFontEditorButton(devToolsPage);
29+
if (!fontEditorButton) {
30+
throw new Error('Missing font editor button in the element style section');
31+
}
32+
await fontEditorButton.click();
33+
await devToolsPage.waitFor('.font-selector-section');
34+
}
35+
36+
describe('The font editor', function() {
37+
setup({
38+
enabledDevToolsExperiments: ['font-editor'],
39+
});
40+
41+
async function setupFontEditorTest(inspectedPage: InspectedPage, devToolsPage: DevToolsPage) {
42+
await goToTestPageAndSelectTestElement(inspectedPage, devToolsPage);
43+
await waitForCSSPropertyValue('#inspected', 'color', 'red', undefined, devToolsPage);
44+
}
45+
46+
it('icon is displayed for sections containing font properties', async ({devToolsPage, inspectedPage}) => {
47+
await setupFontEditorTest(inspectedPage, devToolsPage);
48+
const fontEditorButtons = await getFontEditorButtons(devToolsPage);
49+
const hiddenFontEditorButtons = await getHiddenFontEditorButtons(devToolsPage);
50+
assert.lengthOf(fontEditorButtons, 5);
51+
assert.lengthOf(hiddenFontEditorButtons, 2);
52+
});
53+
54+
it('opens when button is clicked', async ({devToolsPage, inspectedPage}) => {
55+
await setupFontEditorTest(inspectedPage, devToolsPage);
56+
await openFontEditorForInlineStyle(devToolsPage);
57+
});
58+
59+
it('is properly applying font family changes to the style section', async ({devToolsPage, inspectedPage}) => {
60+
await setupFontEditorTest(inspectedPage, devToolsPage);
61+
await openFontEditorForInlineStyle(devToolsPage);
62+
const fontFamilySelector = await devToolsPage.waitFor('[aria-label="Font Family"]');
63+
await fontFamilySelector.focus();
64+
await devToolsPage.typeText('a');
65+
await waitForCSSPropertyValue('element.style', 'font-family', 'Arial', undefined, devToolsPage);
66+
});
67+
68+
it('is properly applying slider input changes to the style section', async ({devToolsPage, inspectedPage}) => {
69+
await setupFontEditorTest(inspectedPage, devToolsPage);
70+
await openFontEditorForInlineStyle(devToolsPage);
71+
const fontSizeSliderInput = await devToolsPage.waitFor('[aria-label="font-size Slider Input"]');
72+
await fontSizeSliderInput.focus();
73+
await devToolsPage.pressKey('ArrowRight');
74+
await waitForCSSPropertyValue('element.style', 'font-size', '11px', undefined, devToolsPage);
75+
});
76+
77+
it('is properly applying text input changes to the style section', async ({devToolsPage, inspectedPage}) => {
78+
await setupFontEditorTest(inspectedPage, devToolsPage);
79+
await openFontEditorForInlineStyle(devToolsPage);
80+
const fontSizeTextInput = await devToolsPage.waitFor('[aria-label="font-size Text Input"]');
81+
await fontSizeTextInput.focus();
82+
await devToolsPage.pressKey('ArrowUp');
83+
await waitForCSSPropertyValue('element.style', 'font-size', '11px', undefined, devToolsPage);
84+
});
85+
86+
it('is properly applying selector key values to the style section', async ({devToolsPage, inspectedPage}) => {
87+
await setupFontEditorTest(inspectedPage, devToolsPage);
88+
await openFontEditorForInlineStyle(devToolsPage);
89+
const fontWeightSelectorInput = await devToolsPage.waitFor('[aria-label="font-weight Key Value Selector"]');
90+
await fontWeightSelectorInput.focus();
91+
await devToolsPage.typeText('i');
92+
await waitForCSSPropertyValue('element.style', 'font-weight', 'inherit', undefined, devToolsPage);
93+
});
94+
95+
it('is properly converting units and applying changes to the styles section',
96+
async ({devToolsPage, inspectedPage}) => {
97+
await setupFontEditorTest(inspectedPage, devToolsPage);
98+
await openFontEditorForInlineStyle(devToolsPage);
99+
const fontSizeUnitInput = await devToolsPage.waitFor('[aria-label="font-size Unit Input"]');
100+
await fontSizeUnitInput.focus();
101+
await devToolsPage.typeText('e');
102+
await waitForCSSPropertyValue('element.style', 'font-size', '0.6em', undefined, devToolsPage);
103+
});
104+
105+
it('computed font list is being generated correctly', async ({devToolsPage, inspectedPage}) => {
106+
await setupFontEditorTest(inspectedPage, devToolsPage);
107+
await openFontEditorForInlineStyle(devToolsPage);
108+
await devToolsPage.waitFor('[value="testFont"]');
109+
});
110+
});

0 commit comments

Comments
 (0)