HtmlEditor: Add screenshot, a11y tests for AI toolbar item and AIDialog (DevExpress#29871)

Co-authored-by: marker dao ® <[email protected]>
Co-authored-by: Ruslan Farkhutdinov <[email protected]>

Author: 3 people

apps/demos/testing/etalons/HtmlEditor-AITextEditing.png

@@ -1,9 +1,13 @@
 import { Properties } from 'devextreme/ui/html_editor.d';
+import HtmlEditor from 'devextreme-testcafe-models/htmlEditor';
 import { Selector } from 'testcafe';
 import url from '../../../helpers/getPageUrl';
 import { defaultSelector, testAccessibility, Configuration } from '../../../helpers/accessibility/test';
 import { Options } from '../../../helpers/generateOptionMatrix';
 
+const MENU_ITEM_CLASS = 'dx-menu-item';
+const SUBMENU_CLASS = 'dx-submenu';
+
 fixture.disablePageReloads`Accessibility`
   .page(url(__dirname, '../../container.html'));
 
@@ -42,3 +46,38 @@ const configuration: Configuration = {
 };
 
 testAccessibility(configuration);
+
+const aiOptions: Options<Properties> = {
+  value: [markup],
+  focusStateEnabled: [true],
+  toolbar: [{ items: ['ai'] }],
+  aiIntegration: [
+    ({} as any),
+    { changeStyle() {} },
+    { changeStyle(_, { onComplete }) { onComplete?.('Result'); } },
+    { changeStyle(_, { onError }) { onError?.('Error' as any); } },
+  ],
+};
+
+const aiCreated = async (t: TestController): Promise<void> => {
+  const htmlEditor = new HtmlEditor('#container');
+
+  await t.click(Selector(defaultSelector));
+
+  await t
+    .click(htmlEditor.toolbar.getItemByName('ai'))
+    .click(Selector(`.${SUBMENU_CLASS} .${MENU_ITEM_CLASS}`).nth(4));
+
+  await t
+    .click(Selector(`.${SUBMENU_CLASS} .${MENU_ITEM_CLASS}`).nth(4)
+      .find(`.${SUBMENU_CLASS} .${MENU_ITEM_CLASS}`).nth(0));
+};
+
+const aiConfiguration: Configuration = {
+  component: 'dxHtmlEditor',
+  a11yCheckConfig,
+  options: aiOptions,
+  created: aiCreated,
+};
+
+testAccessibility(aiConfiguration);

e2e/testcafe-devextreme/tests/accessibility/common/htmlEditor.ts

@@ -1,10 +1,14 @@
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import HtmlEditor from 'devextreme-testcafe-models/htmlEditor';
 import { Selector } from 'testcafe';
 import { createWidget } from '../../helpers/createWidget';
 import url from '../../helpers/getPageUrl';
 import { testScreenshot } from '../../helpers/themeUtils';
 import { appendElementTo, setStyleAttribute } from '../../helpers/domUtils';
 
+const MENU_ITEM_CLASS = 'dx-menu-item';
+const SUBMENU_CLASS = 'dx-submenu';
+
 fixture.disablePageReloads`HtmlEditor`
   .page(url(__dirname, '../container.html'));
 
@@ -50,3 +54,29 @@ fixture.disablePageReloads`HtmlEditor`
     }, '#editorWithToolbar');
   });
 });
+
+test('AI toolbar item', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const htmlEditor = new HtmlEditor('#container');
+
+  await testScreenshot(t, takeScreenshot, 'htmleditor-ai-toolbar-item.png', { element: '#container' });
+
+  await t
+    .click(htmlEditor.toolbar.getItemByName('ai'))
+    .click(Selector(`.${SUBMENU_CLASS}`).find(`.${MENU_ITEM_CLASS}`).nth(5));
+
+  await testScreenshot(t, takeScreenshot, 'htmleditor-ai-toolbar-item-expanded.png', { element: '#container' });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await createWidget('dxHtmlEditor', {
+    height: 500,
+    width: 350,
+    aiIntegration: {},
+    toolbar: {
+      items: ['ai'],
+    },
+  });
+});