add new screenshot test

DevExpress · Dec 12, 2024 · d079812 · d079812
1 parent a6e68e7
commit d079812
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 15 deletions.
diff --git a/e2e/testcafe-devextreme/tests/navigation/contextMenu/common.ts b/e2e/testcafe-devextreme/tests/navigation/contextMenu/common.ts
@@ -21,15 +21,14 @@ test('ContextMenu items render', async (t) => {
 
   await t.click(contextMenu.items.nth(0));
 
-  const firstScreenshotName = 'ContextMenu items render.png';
-  const secondScreenshotName = 'ContextMenu selected focused item.png';
+  const screenshotName = 'ContextMenu items render.png';
 
   if (!isMaterialBased()) {
-    await testScreenshot(t, takeScreenshot, firstScreenshotName, { element: '#container', theme: 'generic.dark' });
-    await testScreenshot(t, takeScreenshot, firstScreenshotName, { element: '#container', theme: 'generic.contrast' });
+    await testScreenshot(t, takeScreenshot, screenshotName, { element: '#container', theme: 'generic.dark' });
+    await testScreenshot(t, takeScreenshot, screenshotName, { element: '#container', theme: 'generic.contrast' });
   }
 
-  await testScreenshot(t, takeScreenshot, firstScreenshotName, {
+  await testScreenshot(t, takeScreenshot, screenshotName, {
     element: '#container',
     shouldTestInCompact: true,
     compactCallBack: async () => {
@@ -42,28 +41,53 @@ test('ContextMenu items render', async (t) => {
   await t
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
+}).before(async () => {
+  await appendElementTo('#container', 'div', 'contextMenu');
+  await setAttribute('#container', 'class', 'dx-theme-generic-typography');
+  await setStyleAttribute(Selector('#container'), 'width: 300px; height: 200px;');
 
-  await t
-    .pressKey('down')
-    .pressKey('down');
+  await insertStylesheetRulesToPage('.custom-class { border: 2px solid green !important; }');
 
-  await testScreenshot(t, takeScreenshot, secondScreenshotName, {
-    element: '#container',
-  });
+  const menuItems = [
+    { text: 'remove', icon: 'remove', items: [{ text: 'item_1' }, { text: 'item_2' }] },
+    { text: 'user', icon: 'user' },
+    { text: 'coffee', icon: 'coffee' },
+  ] as Item[];
+
+  return createWidget('dxContextMenu', {
+    cssClass: 'custom-class',
+    items: menuItems,
+    target: 'body',
+    position: {
+      offset: '10 10',
+    },
+  }, '#contextMenu');
+});
+
+test('ContextMenu selected focused item', async (t) => {
+  const contextMenu = new ContextMenu('#contextMenu');
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  await contextMenu.show();
+
+  await t.pressKey('down');
+
+  const screenshotName = 'ContextMenu selected focused item.png';
+
+  await testScreenshot(t, takeScreenshot, screenshotName, { element: '#container' });
 
   await t
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
 }).before(async () => {
   await appendElementTo('#container', 'div', 'contextMenu');
-  await setAttribute('#container', 'class', 'dx-theme-generic-typography');
-  await setStyleAttribute(Selector('#container'), 'width: 300px; height: 200px;');
+  await setStyleAttribute(Selector('#container'), 'width: 150; height: 200px;');
 
   await insertStylesheetRulesToPage('.custom-class { border: 2px solid green !important; }');
 
   const menuItems = [
-    { text: 'remove', icon: 'remove', items: [{ text: 'item_1' }, { text: 'item_2' }] },
-    { text: 'user', icon: 'user', selected: true },
+    { text: 'remove', icon: 'remove', selected: true },
+    { text: 'user', icon: 'user' },
     { text: 'coffee', icon: 'coffee' },
   ] as Item[];
 

diff --git a/e2e/testcafe-devextreme/tests/navigation/menu/common.ts b/e2e/testcafe-devextreme/tests/navigation/menu/common.ts
@@ -87,6 +87,50 @@ test('Menu items render', async (t) => {
   return createWidget('dxMenu', { items: menuItems, cssClass: 'custom-class' }, '#menu');
 });
 
+test('Menu selected focused item', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  const menu = new Menu();
+
+  await t
+    .click(menu.getItem(0))
+    .pressKey('down');
+
+  await testScreenshot(t, takeScreenshot, 'Menu selected focused item.png', {
+    element: '#container',
+  });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await appendElementTo('#container', 'div', 'menu');
+  await setAttribute('#container', 'style', 'box-sizing: border-box; width: 200px; height: 200px; padding: 8px;');
+
+  await insertStylesheetRulesToPage('.custom-class { border: 2px solid green !important }');
+
+  const menuItems = [
+    {
+      text: 'remove',
+      icon: 'remove',
+      items: [
+        {
+          text: 'user',
+          icon: 'user',
+          selected: true,
+        },
+        {
+          text: 'save',
+          icon: 'save',
+        },
+      ],
+    },
+    { text: 'user', icon: 'user' },
+  ] as Item[];
+
+  return createWidget('dxMenu', { items: menuItems, cssClass: 'custom-class' }, '#menu');
+});
+
 safeSizeTest('Menu delimiter appearance when orientation is horizontal', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   const menu = new Menu();