diff --git a/apps/demos/Demos/SelectBox/GroupedItems/Angular/app/app.component.css b/apps/demos/Demos/SelectBox/GroupedItems/Angular/app/app.component.css index 61138f2a6bf1..7038173143d2 100644 --- a/apps/demos/Demos/SelectBox/GroupedItems/Angular/app/app.component.css +++ b/apps/demos/Demos/SelectBox/GroupedItems/Angular/app/app.component.css @@ -1,5 +1,9 @@ ::ng-deep .custom-icon .icon { - font-size: 17px; color: #f05b41; - margin-right: 2px; +} + +::ng-deep .custom-icon { + display: flex; + align-items: center; + gap: 4px; } diff --git a/apps/demos/Demos/SelectBox/GroupedItems/React/styles.css b/apps/demos/Demos/SelectBox/GroupedItems/React/styles.css index 437d26328ad2..63ce2320c355 100644 --- a/apps/demos/Demos/SelectBox/GroupedItems/React/styles.css +++ b/apps/demos/Demos/SelectBox/GroupedItems/React/styles.css @@ -1,5 +1,9 @@ .custom-icon .icon { - font-size: 17px; color: #f05b41; - margin-right: 2px; +} + +.custom-icon { + display: flex; + align-items: center; + gap: 4px; } diff --git a/apps/demos/Demos/SelectBox/GroupedItems/ReactJs/styles.css b/apps/demos/Demos/SelectBox/GroupedItems/ReactJs/styles.css index 437d26328ad2..63ce2320c355 100644 --- a/apps/demos/Demos/SelectBox/GroupedItems/ReactJs/styles.css +++ b/apps/demos/Demos/SelectBox/GroupedItems/ReactJs/styles.css @@ -1,5 +1,9 @@ .custom-icon .icon { - font-size: 17px; color: #f05b41; - margin-right: 2px; +} + +.custom-icon { + display: flex; + align-items: center; + gap: 4px; } diff --git a/apps/demos/Demos/SelectBox/GroupedItems/Vue/Group.vue b/apps/demos/Demos/SelectBox/GroupedItems/Vue/Group.vue index 66496ebe1912..bd738f14b7e1 100644 --- a/apps/demos/Demos/SelectBox/GroupedItems/Vue/Group.vue +++ b/apps/demos/Demos/SelectBox/GroupedItems/Vue/Group.vue @@ -13,8 +13,12 @@ withDefaults(defineProps<{ diff --git a/apps/demos/Demos/SelectBox/GroupedItems/jQuery/styles.css b/apps/demos/Demos/SelectBox/GroupedItems/jQuery/styles.css index 437d26328ad2..63ce2320c355 100644 --- a/apps/demos/Demos/SelectBox/GroupedItems/jQuery/styles.css +++ b/apps/demos/Demos/SelectBox/GroupedItems/jQuery/styles.css @@ -1,5 +1,9 @@ .custom-icon .icon { - font-size: 17px; color: #f05b41; - margin-right: 2px; +} + +.custom-icon { + display: flex; + align-items: center; + gap: 4px; } diff --git a/apps/demos/Demos/TagBox/GroupedItems/Angular/app/app.component.css b/apps/demos/Demos/TagBox/GroupedItems/Angular/app/app.component.css index 035fc75aaef9..01e5b0b3bd12 100644 --- a/apps/demos/Demos/TagBox/GroupedItems/Angular/app/app.component.css +++ b/apps/demos/Demos/TagBox/GroupedItems/Angular/app/app.component.css @@ -1,7 +1,11 @@ ::ng-deep .custom-icon .icon { - font-size: 17px; color: #f05b41; - margin-right: 2px; +} + +::ng-deep .custom-icon { + display: flex; + align-items: center; + gap: 4px; } ::ng-deep .dx-field { diff --git a/apps/demos/Demos/TagBox/GroupedItems/React/styles.css b/apps/demos/Demos/TagBox/GroupedItems/React/styles.css index 37568462f9fb..f997c92f251f 100644 --- a/apps/demos/Demos/TagBox/GroupedItems/React/styles.css +++ b/apps/demos/Demos/TagBox/GroupedItems/React/styles.css @@ -1,7 +1,11 @@ .custom-icon .icon { - font-size: 17px; color: #f05b41; - margin-right: 2px; +} + +.custom-icon { + display: flex; + align-items: center; + gap: 4px; } .dx-field { diff --git a/apps/demos/Demos/TagBox/GroupedItems/ReactJs/styles.css b/apps/demos/Demos/TagBox/GroupedItems/ReactJs/styles.css index 37568462f9fb..f997c92f251f 100644 --- a/apps/demos/Demos/TagBox/GroupedItems/ReactJs/styles.css +++ b/apps/demos/Demos/TagBox/GroupedItems/ReactJs/styles.css @@ -1,7 +1,11 @@ .custom-icon .icon { - font-size: 17px; color: #f05b41; - margin-right: 2px; +} + +.custom-icon { + display: flex; + align-items: center; + gap: 4px; } .dx-field { diff --git a/apps/demos/Demos/TagBox/GroupedItems/Vue/Group.vue b/apps/demos/Demos/TagBox/GroupedItems/Vue/Group.vue index 66496ebe1912..bd738f14b7e1 100644 --- a/apps/demos/Demos/TagBox/GroupedItems/Vue/Group.vue +++ b/apps/demos/Demos/TagBox/GroupedItems/Vue/Group.vue @@ -13,8 +13,12 @@ withDefaults(defineProps<{ diff --git a/apps/demos/Demos/TagBox/GroupedItems/jQuery/styles.css b/apps/demos/Demos/TagBox/GroupedItems/jQuery/styles.css index 37568462f9fb..f997c92f251f 100644 --- a/apps/demos/Demos/TagBox/GroupedItems/jQuery/styles.css +++ b/apps/demos/Demos/TagBox/GroupedItems/jQuery/styles.css @@ -1,7 +1,11 @@ .custom-icon .icon { - font-size: 17px; color: #f05b41; - margin-right: 2px; +} + +.custom-icon { + display: flex; + align-items: center; + gap: 4px; } .dx-field { diff --git a/apps/demos/testing/widgets/selectbox/GroupedItems.test.js b/apps/demos/testing/widgets/selectbox/GroupedItems.test.js new file mode 100644 index 000000000000..a8f2fc26beda --- /dev/null +++ b/apps/demos/testing/widgets/selectbox/GroupedItems.test.js @@ -0,0 +1,47 @@ +import { createScreenshotsComparer } from 'devextreme-screenshot-comparer'; +import { Selector as $ } from 'testcafe'; +import { runManualTest } from '../../../utils/visual-tests/matrix-test-helper'; +import { testScreenshot } from '../../../utils/visual-tests/helpers/theme-utils'; + +fixture('SelectBox.GroupedItems') + .page('http://localhost:8080/') + .before(async (ctx) => { + ctx.initialWindowSize = [900, 600]; + }); + +runManualTest('SelectBox', 'GroupedItems', ['jQuery', 'React', 'Vue', 'Angular'], (test) => { + test('GroupedItems', async (t) => { + const SELECT_BOX_CLASS = 'dx-selectbox'; + const { takeScreenshot, compareResults } = createScreenshotsComparer(t); + + await t + .click($(`.${SELECT_BOX_CLASS}`).nth(0)) + .wait(200); + + await testScreenshot(t, takeScreenshot, 'selectbox_groupeditems_first_opened.png'); + + await t + .click($(`.${SELECT_BOX_CLASS}`).nth(0)) + .wait(200); + + await t + .click($(`.${SELECT_BOX_CLASS}`).nth(1)) + .wait(200); + + await testScreenshot(t, takeScreenshot, 'selectbox_groupeditems_second_opened.png'); + + await t + .click($(`.${SELECT_BOX_CLASS}`).nth(1)) + .wait(200); + + await t + .click($(`.${SELECT_BOX_CLASS}`).nth(2)) + .wait(200); + + await testScreenshot(t, takeScreenshot, 'selectbox_groupeditems_third_opened.png'); + + await t + .expect(compareResults.isValid()) + .ok(compareResults.errorMessages()); + }); +}); diff --git a/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_first_opened (fluent.blue.light).png b/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_first_opened (fluent.blue.light).png new file mode 100644 index 000000000000..2744d9ef4c4b Binary files /dev/null and b/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_first_opened (fluent.blue.light).png differ diff --git a/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_first_opened (material.blue.light).png b/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_first_opened (material.blue.light).png new file mode 100644 index 000000000000..3dc3ec5ef727 Binary files /dev/null and b/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_first_opened (material.blue.light).png differ diff --git a/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_first_opened.png b/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_first_opened.png new file mode 100644 index 000000000000..2795e515cfd6 Binary files /dev/null and b/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_first_opened.png differ diff --git a/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_second_opened (fluent.blue.light).png b/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_second_opened (fluent.blue.light).png new file mode 100644 index 000000000000..fc86112f8270 Binary files /dev/null and b/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_second_opened (fluent.blue.light).png differ diff --git a/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_second_opened (material.blue.light).png b/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_second_opened (material.blue.light).png new file mode 100644 index 000000000000..2af7b026eb5e Binary files /dev/null and b/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_second_opened (material.blue.light).png differ diff --git a/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_second_opened.png b/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_second_opened.png new file mode 100644 index 000000000000..485dffc0fda7 Binary files /dev/null and b/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_second_opened.png differ diff --git a/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_third_opened (fluent.blue.light).png b/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_third_opened (fluent.blue.light).png new file mode 100644 index 000000000000..a164d2a9b3ae Binary files /dev/null and b/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_third_opened (fluent.blue.light).png differ diff --git a/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_third_opened (material.blue.light).png b/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_third_opened (material.blue.light).png new file mode 100644 index 000000000000..c19fd5d976f9 Binary files /dev/null and b/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_third_opened (material.blue.light).png differ diff --git a/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_third_opened.png b/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_third_opened.png new file mode 100644 index 000000000000..207ebdac4531 Binary files /dev/null and b/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_third_opened.png differ diff --git a/apps/demos/testing/widgets/tagbox/GroupedItems.test.js b/apps/demos/testing/widgets/tagbox/GroupedItems.test.js new file mode 100644 index 000000000000..c1109ab435ee --- /dev/null +++ b/apps/demos/testing/widgets/tagbox/GroupedItems.test.js @@ -0,0 +1,43 @@ +import { createScreenshotsComparer } from 'devextreme-screenshot-comparer'; +import { runManualTest } from '../../../utils/visual-tests/matrix-test-helper'; +import { testScreenshot } from '../../../utils/visual-tests/helpers/theme-utils'; + +fixture('TagBox.GroupedItems') + .page('http://localhost:8080/') + .before(async (ctx) => { + ctx.initialWindowSize = [900, 600]; + }); + +runManualTest('TagBox', 'GroupedItems', ['jQuery', 'React', 'Vue', 'Angular'], (test) => { + test('GroupedItems', async (t) => { + const { takeScreenshot, compareResults } = createScreenshotsComparer(t); + + await t + .pressKey('tab') + .pressKey('alt+down'); + + await testScreenshot(t, takeScreenshot, 'tagbox_groupeditems_first_opened.png'); + + await t + .pressKey('esc') + + await t + .pressKey('tab') + .pressKey('alt+down'); + + await testScreenshot(t, takeScreenshot, 'tagbox_groupeditems_second_opened.png'); + + await t + .pressKey('esc') + + await t + .pressKey('tab') + .pressKey('alt+down'); + + await testScreenshot(t, takeScreenshot, 'tagbox_groupeditems_third_opened.png'); + + await t + .expect(compareResults.isValid()) + .ok(compareResults.errorMessages()); + }); +}); diff --git a/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_first_opened (fluent.blue.light).png b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_first_opened (fluent.blue.light).png new file mode 100644 index 000000000000..e2f8c00ebfb6 Binary files /dev/null and b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_first_opened (fluent.blue.light).png differ diff --git a/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_first_opened (material.blue.light).png b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_first_opened (material.blue.light).png new file mode 100644 index 000000000000..45c22f3680d4 Binary files /dev/null and b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_first_opened (material.blue.light).png differ diff --git a/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_first_opened.png b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_first_opened.png new file mode 100644 index 000000000000..470a876c8d81 Binary files /dev/null and b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_first_opened.png differ diff --git a/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_second_opened (fluent.blue.light).png b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_second_opened (fluent.blue.light).png new file mode 100644 index 000000000000..5de81bbb86cc Binary files /dev/null and b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_second_opened (fluent.blue.light).png differ diff --git a/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_second_opened (material.blue.light).png b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_second_opened (material.blue.light).png new file mode 100644 index 000000000000..686a775fdcdd Binary files /dev/null and b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_second_opened (material.blue.light).png differ diff --git a/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_second_opened.png b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_second_opened.png new file mode 100644 index 000000000000..5d70be663736 Binary files /dev/null and b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_second_opened.png differ diff --git a/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_third_opened (fluent.blue.light).png b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_third_opened (fluent.blue.light).png new file mode 100644 index 000000000000..3865ae3e51ec Binary files /dev/null and b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_third_opened (fluent.blue.light).png differ diff --git a/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_third_opened (material.blue.light).png b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_third_opened (material.blue.light).png new file mode 100644 index 000000000000..130534e91cda Binary files /dev/null and b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_third_opened (material.blue.light).png differ diff --git a/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_third_opened.png b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_third_opened.png new file mode 100644 index 000000000000..dc11796e37e0 Binary files /dev/null and b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_third_opened.png differ