|
| 1 | +import { createScreenshotsComparer } from 'devextreme-screenshot-comparer'; |
| 2 | +import { ButtonType } from 'devextreme/common'; |
| 3 | +import { Selector } from 'testcafe'; |
| 4 | +import { testScreenshot } from '../../../helpers/themeUtils'; |
| 5 | +import { |
| 6 | + addCaptionTo, |
| 7 | + appendElementTo, |
| 8 | + setAttribute, |
| 9 | + setClassAttribute, |
| 10 | +} from '../../../helpers/domUtils'; |
| 11 | +import { createWidget } from '../../../helpers/createWidget'; |
| 12 | +import url from '../../../helpers/getPageUrl'; |
| 13 | + |
| 14 | +fixture.disablePageReloads`Button` |
| 15 | + .page(url(__dirname, '../../container.html')); |
| 16 | + |
| 17 | +['text', 'outlined', 'contained'].forEach((stylingMode) => { |
| 18 | + const testName = `Buttons, stylingMode=${stylingMode}`; |
| 19 | + test(testName, async (t) => { |
| 20 | + const { takeScreenshot, compareResults } = createScreenshotsComparer(t); |
| 21 | + |
| 22 | + await testScreenshot(t, takeScreenshot, `${testName}.png`, { |
| 23 | + element: '#container', |
| 24 | + }); |
| 25 | + |
| 26 | + await t |
| 27 | + .expect(compareResults.isValid()) |
| 28 | + .ok(compareResults.errorMessages()); |
| 29 | + }).before(async () => { |
| 30 | + const typedButtons = ['danger', 'default', 'normal', 'success'].map((type: ButtonType) => ({ |
| 31 | + type, |
| 32 | + text: `${type[0].toUpperCase()}${type.slice(1)}`, |
| 33 | + })); |
| 34 | + const iconButtons = [ |
| 35 | + { icon: 'find', text: 'Find' }, |
| 36 | + { icon: 'find' }, |
| 37 | + { |
| 38 | + icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24" fill="currentColor"> |
| 39 | + <path d="M11.8834 3.00673L12 3C12.5128 3 12.9355 3.38604 12.9933 3.88338L13 4V11H20C20.5128 11 20.9355 11.386 20.9933 11.8834L21 12C21 12.5128 20.614 12.9355 20.1166 12.9933L20 13H13V20C13 20.5128 12.614 20.9355 12.1166 20.9933L12 21C11.4872 21 11.0645 20.614 11.0067 20.1166L11 20V13H4C3.48716 13 3.06449 12.614 3.00673 12.1166L3 12C3 11.4872 3.38604 11.0645 3.88338 11.0067L4 11H11V4C11 3.48716 11.386 3.06449 11.8834 3.00673L12 3L11.8834 3.00673Z"/> |
| 40 | + </svg>`, |
| 41 | + }, |
| 42 | + ]; |
| 43 | + const buttons = [ |
| 44 | + ...typedButtons, |
| 45 | + ...iconButtons, |
| 46 | + ]; |
| 47 | + |
| 48 | + await setAttribute('#container', 'class', 'dx-theme-generic-typography'); |
| 49 | + await setAttribute('#container', 'style', 'width: fit-content; padding: 8px;'); |
| 50 | + |
| 51 | + const states = ['default', 'focused', 'hover', 'active', 'selected', 'disabled']; |
| 52 | + |
| 53 | + // eslint-disable-next-line no-restricted-syntax |
| 54 | + for (const state of states) { |
| 55 | + await appendElementTo('#container', 'div', `mode${state}`, {}); |
| 56 | + await setAttribute(`#mode${state}`, 'style', 'display: flex; gap: 8px; margin-bottom: 16px;'); |
| 57 | + await addCaptionTo(`#mode${state}`, state); |
| 58 | + |
| 59 | + await Promise.all(buttons.map( |
| 60 | + (_, index) => appendElementTo(`#mode${state}`, 'div', `button-${state}-${index}`, {}), |
| 61 | + )); |
| 62 | + |
| 63 | + await Promise.all(buttons.map( |
| 64 | + (defaultConfig, index) => createWidget('dxButton', { |
| 65 | + ...defaultConfig, |
| 66 | + stylingMode, |
| 67 | + disabled: state === 'disabled', |
| 68 | + }, `#button-${state}-${index}`), |
| 69 | + )); |
| 70 | + |
| 71 | + if (state !== 'default' && state !== 'disabled') { |
| 72 | + await Promise.all( |
| 73 | + buttons.map((_, index) => setClassAttribute(Selector(`#button-${state}-${index}`), `dx-state-${state}`)), |
| 74 | + ); |
| 75 | + } |
| 76 | + } |
| 77 | + }); |
| 78 | +}); |
| 79 | + |
| 80 | +test('Button in rtl modes', async (t) => { |
| 81 | + const { takeScreenshot, compareResults } = createScreenshotsComparer(t); |
| 82 | + |
| 83 | + await testScreenshot(t, takeScreenshot, 'Button in rtl modes.png', { |
| 84 | + element: '#container', |
| 85 | + }); |
| 86 | + |
| 87 | + await t |
| 88 | + .expect(compareResults.isValid()) |
| 89 | + .ok(compareResults.errorMessages()); |
| 90 | +}).before(async () => { |
| 91 | + await setAttribute('#container', 'style', 'width: fit-content; padding: 8px; display: grid; grid-template-columns: repeat(3, auto); grid-gap: 16px;'); |
| 92 | + |
| 93 | + const buttons = [ |
| 94 | + { icon: 'find', text: 'Button text' }, |
| 95 | + { icon: 'find', text: 'Long button text' }, |
| 96 | + { icon: 'find', text: 'Long button text', width: 150 }, |
| 97 | + { icon: 'find', text: 'Button text', rtlEnabled: true }, |
| 98 | + { icon: 'find', text: 'Long button text', rtlEnabled: true }, |
| 99 | + { |
| 100 | + icon: 'find', text: 'Long button text', width: 150, rtlEnabled: true, |
| 101 | + }, |
| 102 | + ]; |
| 103 | + |
| 104 | + await Promise.all(buttons.map( |
| 105 | + (_, index) => appendElementTo('#container', 'div', `button-${index}`, {}), |
| 106 | + )); |
| 107 | + |
| 108 | + await Promise.all(buttons.map( |
| 109 | + (config, index) => createWidget('dxButton', { |
| 110 | + ...config, |
| 111 | + }, `#button-${index}`), |
| 112 | + )); |
| 113 | +}); |
0 commit comments