diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label (fluent-blue-light).png new file mode 100644 index 000000000000..3485f73067e9 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label (generic-light).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label (generic-light).png new file mode 100644 index 000000000000..cbfb8227c048 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label (material-blue-light).png new file mode 100644 index 000000000000..2439f3897a29 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=filled (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=filled (fluent-blue-light).png deleted file mode 100644 index 33cacecb125c..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=filled (fluent-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=filled (generic-light).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=filled (generic-light).png deleted file mode 100644 index 65ce0173ce9d..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=filled (generic-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=filled (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=filled (material-blue-light).png deleted file mode 100644 index d30d95a680dc..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=filled (material-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=outlined (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=outlined (fluent-blue-light).png deleted file mode 100644 index 1e368230b303..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=outlined (fluent-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=outlined (generic-light).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=outlined (generic-light).png deleted file mode 100644 index 8b02a107af12..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=outlined (generic-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=outlined (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=outlined (material-blue-light).png deleted file mode 100644 index 16daf126a826..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=outlined (material-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=underlined (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=underlined (fluent-blue-light).png deleted file mode 100644 index 5bcdd6cef2cb..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=underlined (fluent-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=underlined (generic-light).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=underlined (generic-light).png deleted file mode 100644 index 7e9d9e7ee88a..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=underlined (generic-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=underlined (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=underlined (material-blue-light).png deleted file mode 100644 index c0a4ffc0aa2f..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label with stylingMode=underlined (material-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container (fluent-blue-light).png new file mode 100644 index 000000000000..07b57846e343 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container (generic-light).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container (generic-light).png new file mode 100644 index 000000000000..e519263e1262 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container (material-blue-light).png new file mode 100644 index 000000000000..e91cc2adb6d3 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=false (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=false (fluent-blue-light).png deleted file mode 100644 index c45c6da8553e..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=false (fluent-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=false (fluent-blue-light-compact).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=false (fluent-blue-light-compact).png deleted file mode 100644 index 681015c06dbe..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=false (fluent-blue-light-compact).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=false (generic-light).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=false (generic-light).png deleted file mode 100644 index f4a168b1ddc3..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=false (generic-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=false (generic-light-compact).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=false (generic-light-compact).png deleted file mode 100644 index 78b02372152d..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=false (generic-light-compact).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=false (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=false (material-blue-light).png deleted file mode 100644 index f56213ea7a22..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=false (material-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=false (material-blue-light-compact).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=false (material-blue-light-compact).png deleted file mode 100644 index 13358386dd69..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=false (material-blue-light-compact).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=true (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=true (fluent-blue-light).png deleted file mode 100644 index 28b7f6aa11ab..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=true (fluent-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=true (fluent-blue-light-compact).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=true (fluent-blue-light-compact).png deleted file mode 100644 index ded11e005d47..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=true (fluent-blue-light-compact).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=true (generic-light).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=true (generic-light).png deleted file mode 100644 index ab18f226c79a..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=true (generic-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=true (generic-light-compact).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=true (generic-light-compact).png deleted file mode 100644 index 60366d21f61d..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=true (generic-light-compact).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=true (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=true (material-blue-light).png deleted file mode 100644 index 8f49512e429e..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=true (material-blue-light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=true (material-blue-light-compact).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=true (material-blue-light-compact).png deleted file mode 100644 index f581d5c9ef74..000000000000 Binary files a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container, isValid=true (material-blue-light-compact).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/label.ts b/e2e/testcafe-devextreme/tests/editors/numberBox/label.ts index 7f218cc74134..25fb5b7c58ce 100644 --- a/e2e/testcafe-devextreme/tests/editors/numberBox/label.ts +++ b/e2e/testcafe-devextreme/tests/editors/numberBox/label.ts @@ -1,93 +1,94 @@ -/* eslint-disable no-restricted-syntax */ +import type { Properties, NumberBoxPredefinedButton } from 'devextreme/ui/number_box.d'; +import type { EditorStyle, TextEditorButton } from 'devextreme/common'; import { createScreenshotsComparer } from 'devextreme-screenshot-comparer'; import Guid from 'devextreme/core/guid'; -import { testScreenshot } from '../../../helpers/themeUtils'; +import { isMaterial, testScreenshot } from '../../../helpers/themeUtils'; import url from '../../../helpers/getPageUrl'; import { createWidget } from '../../../helpers/createWidget'; import { - appendElementTo, removeStylesheetRulesFromPage, insertStylesheetRulesToPage, + appendElementTo, insertStylesheetRulesToPage, } from '../../../helpers/domUtils'; +import { safeSizeTest } from '../../../helpers/safeSizeTest'; const NUMBERBOX_CLASS = 'dx-numberbox'; -const stylingModes = ['outlined', 'underlined', 'filled']; +const stylingModes: EditorStyle[] = ['outlined', 'underlined', 'filled']; +const buttonsList: (TextEditorButton | NumberBoxPredefinedButton)[][] = [ + ['clear'], + [{ name: 'custom', location: 'after', options: { icon: 'home' } }, 'clear', 'spins'], + ['clear', { name: 'custom', location: 'after', options: { icon: 'home' } }, 'spins'], + ['clear', 'spins', { name: 'custom', location: 'after', options: { icon: 'home' } }], + [{ name: 'custom', location: 'before', options: { icon: 'home' } }, 'clear', 'spins'], +]; fixture.disablePageReloads`NumberBox_Label` .page(url(__dirname, '../../container.html')); -stylingModes.forEach((stylingMode) => { - test.meta({ unstable: true })(`Label for dxNumberBox stylingMode=${stylingMode}`, async (t) => { - const { takeScreenshot, compareResults } = createScreenshotsComparer(t); - - await testScreenshot(t, takeScreenshot, `NumberBox label with stylingMode=${stylingMode}.png`, { element: '#container' }); - - await t - .expect(compareResults.isValid()) - .ok(compareResults.errorMessages()); - }).before(async () => { - const componentOption = { +const createNumberBox = async (options?: Properties): Promise => { + const id = `${`dx${new Guid()}`}`; + + await appendElementTo('#container', 'div', id, {}); + await createWidget('dxNumberBox', { + value: Math.PI, + showClearButton: true, + showSpinButtons: true, + ...options, + }, `#${id}`); + + return id; +}; +safeSizeTest('Label for dxNumberBox', async (t) => { + const { takeScreenshot, compareResults } = createScreenshotsComparer(t); + + await testScreenshot(t, takeScreenshot, 'NumberBox label.png'); + + await t + .expect(compareResults.isValid()) + .ok(compareResults.errorMessages()); +}, [350, 450]).before(async () => { + await insertStylesheetRulesToPage('#container { display: flex; flex-direction: column; width: 300px; height: 400px; gap: 8px; }'); + if (isMaterial()) { + await insertStylesheetRulesToPage('#container .dx-widget, #container .dx-widget input { font-family: sans-serif; }'); + } + + // eslint-disable-next-line no-restricted-syntax + for (const stylingMode of stylingModes) { + const options = { + width: '100%', label: 'label text', stylingMode, }; - - await insertStylesheetRulesToPage('#container { box-sizing: border-box; width: 300px; height: 400px; padding: 8px; }'); - - await appendElementTo('#container', 'div', 'numberBox1', { }); - await appendElementTo('#container', 'div', 'numberBox2', { }); - - await createWidget('dxNumberBox', { - ...componentOption, + await createNumberBox({ + ...options, + // @ts-expect-error string instead of number value: 'text', - }, '#numberBox1'); - - await createWidget('dxNumberBox', { - ...componentOption, + }); + await createNumberBox({ + ...options, value: 123, - }, '#numberBox2'); - }); + }); + } }); -[true, false].forEach((isValid) => { - test(`NumberBox with buttons container, isValid=${isValid}`, async (t) => { - const { takeScreenshot, compareResults } = createScreenshotsComparer(t); - - await insertStylesheetRulesToPage(`#container { display: flex; flex-wrap: wrap; } .${NUMBERBOX_CLASS} { width: 220px; margin: 2px; }`); - - await testScreenshot(t, takeScreenshot, `NumberBox render with buttons container, isValid=${isValid}.png`, { shouldTestInCompact: true }); +test('NumberBox with buttons container', async (t) => { + const { takeScreenshot, compareResults } = createScreenshotsComparer(t); - await removeStylesheetRulesFromPage(); + await testScreenshot(t, takeScreenshot, 'NumberBox render with buttons container.png'); - await t - .expect(compareResults.isValid()) - .ok(compareResults.errorMessages()); - }).before(async () => { - for (const stylingMode of stylingModes) { - for (const buttons of [ - ['clear'], - ['clear', 'spins'], - [{ name: 'custom', location: 'after', options: { icon: 'home' } }, 'clear', 'spins'], - ['clear', { name: 'custom', location: 'after', options: { icon: 'home' } }, 'spins'], - ['clear', 'spins', { name: 'custom', location: 'after', options: { icon: 'home' } }], - [{ name: 'custom', location: 'before', options: { icon: 'home' } }, 'clear', 'spins'], - ['clear', { name: 'custom', location: 'before', options: { icon: 'home' } }, 'spins'], - ['clear', 'spins', { name: 'custom', location: 'before', options: { icon: 'home' } }], - ]) { - for (const rtlEnabled of [true, false]) { - const id = `${`dx${new Guid()}`}`; + await t + .expect(compareResults.isValid()) + .ok(compareResults.errorMessages()); +}).before(async () => { + await insertStylesheetRulesToPage(`#container { display: flex; flex-wrap: wrap; } .${NUMBERBOX_CLASS} { width: 220px; margin: 2px; }`); - await appendElementTo('#container', 'div', id, { }); - - await createWidget('dxNumberBox', { - value: Math.PI, - stylingMode, - rtlEnabled, - buttons, - showClearButton: true, - showSpinButtons: true, - isValid, - }, `#${id}`); - } - } + // eslint-disable-next-line no-restricted-syntax + for (const stylingMode of stylingModes) { + // eslint-disable-next-line no-restricted-syntax + for (const buttons of buttonsList) { + await createNumberBox({ stylingMode, buttons }); } - }); + + await createNumberBox({ stylingMode, rtlEnabled: true }); + await createNumberBox({ stylingMode, isValid: false }); + } });