Update screenMode and add device arg in testing

.github/workflows/test.yml

@@ -66,6 +66,9 @@ jobs:
           { project: 'vue', page: 'analytics-sales-report' },
           { project: 'vue', page: 'analytics-geography' },
         ]
+        device: [
+          { name: 'iphone6/7/8'}
+        ]
     runs-on: ubuntu-latest
     timeout-minutes: 30
 
@@ -103,7 +106,7 @@ jobs:
       run: npm run start-apps -- --project ${{ matrix.ARGS.project }} --theme ${{ matrix.theme.name }}
       working-directory: packages/testing
 
-    - name: Run tests
+    - name: Run tests desktop
       run: |
         all_args="--project ${{ matrix.ARGS.project }} --page ${{ matrix.ARGS.page }} --quarantineMode true  --theme ${{ matrix.theme.name }}"
         echo "$all_args"
@@ -114,6 +117,17 @@ jobs:
         npm run test-testcafe -- $all_args
       working-directory: packages/testing
 
+    - name: Run tests mobile
+      run: |
+        all_args="--project ${{ matrix.ARGS.project }} --page ${{ matrix.ARGS.page }} --quarantineMode true  --theme ${{ matrix.theme.name }} --device ${{ matrix.device.name }}"
+        echo "$all_args"
+        export TESTCAFE_DASHBOARD_LAYOUT_TESTING_ENABLED=true
+        export TESTCAFE_DASHBOARD_DEVEXTREME_TOKEN=eyJwcm9qZWN0SWQiOiI5ZjRlMTJjMC1kNmExLTQxZDEtYmE1OS0wZTI3OTE1N2QxZDAiLCJ0b2tlblNlY3JldCI6InQwQXh6bzFMczBDVE81VU95bzc2dkF2eE05Ym9pQ3JxajRCQUtyWm5la0EzYlp3SENOR3RoamFaWkhoa0xvRnJZM1lvV0ZlbEt2S2JyYjFkbEs5UFVoMmlGaG9aVlprdTU1NXhZWmhGQkQ0eWtBZENJWkJvdU9ZV1hDWlRkVi9sQUFxMVNlMkFtRkg5UkRXTTlTcEk0WmVOSkEwZnYwNUlDN3Q3UXFmZ3o2VUdYVDNvZDJHQ2RqclVKYnZrZ2ZmNjdRb3RNaXZuTG1CSmM4REdLelhhbmhobzMzVzE5U1Axd1NSNGR6d3ZWdHp2dGV2em5Da0cwR0dSc3Z3OWdQS214UHpFUGsreTJtMjlSZm92dGtuNGZtb0prRng1RzBSZ2o2WnhPSXBrUDZOMVZyWWhuTk9lc1VEQmVobzB1VGFjTlNwZFE0N2FVZCsydmM3Q3Y0QmtZQT09In0=
+        export TESTCAFE_DASHBOARD_DEVEXTREME_URL=https://devextreme.resolve.sh
+        export TESTCAFE_DASHBOARD_BUILD_ID=${{ github.run_id }}-${{ github.run_number }}-${{ github.run_attempt }}
+        npm run test-testcafe  -- $all_args
+      working-directory: packages/testing
+
     - name: Copy screenshots artifacts
       if: ${{ failure() }}
       uses: actions/upload-artifact@v3

packages/testing/config.js

@@ -9,11 +9,4 @@ export const packages = [{
   port: 8080,
 }];
 
-export const fakeScreenSize = [900, 900];
-
-export const screenModes = [
-  [1280, 800],
-  [400, 800],
-];
-
 export const timeoutSecond = 10000;

packages/testing/runner.js

@@ -27,7 +27,7 @@ createTestCafe('localhost', 1437, 1438)
     testCafe = tc;
 
     const runner = testCafe.createRunner()
-      .browsers('chrome:headless')
+      .browsers(args.device ? `chrome:headless:emulation:device=${args.device}` : 'chrome:headless')
       .reporter(reporters)
       .src([
         `tests/${args.page}.test.js`,
@@ -41,6 +41,8 @@ createTestCafe('localhost', 1437, 1438)
     env.project = args.project;
     env.port = currentPackage.port;
     env.theme = args.theme;
+    env.screenMode = args.device ? 'mobile' : 'desktop';
+    env.device = args.device || '';
 
     return runner.run({
       quarantineMode: args.quarantineMode === 'true',

packages/testing/tests/analytics-dashboard.test.js

@@ -2,41 +2,37 @@
 /* eslint-disable no-undef */
 import { Selector, RequestLogger } from 'testcafe';
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
-import {
-  getPostfix, toggleCommonConfiguration, forceResizeRecalculation,
-} from './utils';
-import { screenModes, timeoutSecond } from '../config.js';
+import { getPostfix, toggleCommonConfiguration } from './utils';
+import { timeoutSecond } from '../config.js';
 
 const project = process.env.project;
+const screenMode = process.env.screenMode;
 const BASE_URL = `http://localhost:${process.env.port}/#/analytics-dashboard`;
 const requestLogger = RequestLogger();
 
 fixture`Analytics Dashboard`;
 
-const checkScreenMode = async (t, screenMode) => {
-  if (screenMode[0] === 400) {
+const checkScreenMode = async (t) => {
+  if (screenMode === 'mobile') {
     await t.click('.view-wrapper .dx-icon-overflow');
   }
 };
 [false, true].forEach((embedded) => {
-  screenModes.forEach((screenMode) => {
-    test(`Analytics Dashboard (${project}, embed=${embedded}, ${screenMode[0]})`, async (t) => {
-      const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  test(`Analytics Dashboard (${project}, embed=${embedded}, ${screenMode})`, async (t) => {
+    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
-      await toggleCommonConfiguration(t, BASE_URL, embedded, () => {},
-        screenMode, timeoutSecond, false, requestLogger);
-      await forceResizeRecalculation(t, screenMode);
+    await toggleCommonConfiguration(t, BASE_URL, embedded, () => { },
+      timeoutSecond, requestLogger);
 
-      await t.expect(Selector('body.dx-device-generic').count).eql(1);
-      await takeScreenshot(`analytics-dashboard-all${getPostfix(embedded, screenMode)}`, 'body');
-      await checkScreenMode(t, screenMode);
-      await t.click(Selector('.dx-tabs .dx-item').nth(3));
-      await t.wait(timeoutSecond);
-      await takeScreenshot(`analytics-dashboard-year${getPostfix(embedded, screenMode)}`, 'body');
+    await t.expect(Selector(`body.dx-device-${screenMode}`).count).eql(1);
+    await takeScreenshot(`analytics-dashboard-all${getPostfix(embedded)}`, 'body');
+    await checkScreenMode(t);
+    await t.click(Selector('.dx-tabs .dx-item').nth(3));
+    await t.wait(timeoutSecond);
+    await takeScreenshot(`analytics-dashboard-year${getPostfix(embedded)}`, 'body');
 
-      await t
-        .expect(compareResults.isValid())
-        .ok(compareResults.errorMessages());
-    }).requestHooks(requestLogger);
-  });
+    await t
+      .expect(compareResults.isValid())
+      .ok(compareResults.errorMessages());
+  }).requestHooks(requestLogger);
 });

packages/testing/tests/analytics-geography.test.js

@@ -2,42 +2,38 @@
 /* eslint-disable no-undef */
 import { Selector, RequestLogger } from 'testcafe';
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
-import {
-  getPostfix, toggleCommonConfiguration, forceResizeRecalculation,
-} from './utils';
-import { screenModes, timeoutSecond } from '../config.js';
+import { getPostfix, toggleCommonConfiguration } from './utils';
+import { timeoutSecond } from '../config.js';
 
 const project = process.env.project;
+const screenMode = process.env.screenMode;
 const BASE_URL = `http://localhost:${process.env.port}/#/analytics-geography`;
 const requestLogger = RequestLogger();
 
 fixture`Analytics Geography`;
 
-const checkScreenMode = async (t, screenMode) => {
-  if (screenMode[0] === 400) {
+const checkScreenMode = async (t) => {
+  if (screenMode === 'mobile') {
     await t.click('.view-wrapper .dx-icon-overflow');
   }
 };
 
 [false, true].forEach((embedded) => {
-  screenModes.forEach((screenMode) => {
-    test(`Analytics Geography (${project}, embed=${embedded}, ${screenMode[0]})`, async (t) => {
-      const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  test(`Analytics Geography (${project}, embed=${embedded}, ${screenMode})`, async (t) => {
+    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
-      await toggleCommonConfiguration(t, BASE_URL, embedded, () => {},
-        screenMode, timeoutSecond, false, requestLogger);
-      await forceResizeRecalculation(t, screenMode);
+    await toggleCommonConfiguration(t, BASE_URL, embedded, () => { },
+      timeoutSecond, requestLogger);
 
-      await t.expect(Selector('body.dx-device-generic').count).eql(1);
-      await takeScreenshot(`analytics-geography-all${getPostfix(embedded, screenMode)}`, 'body');
-      await checkScreenMode(t, screenMode);
-      await t.click(Selector('.dx-tabs .dx-item').nth(3));
-      await t.wait(timeoutSecond);
-      await takeScreenshot(`analytics-geography-year${getPostfix(embedded, screenMode)}`, 'body');
+    await t.expect(Selector(`body.dx-device-${screenMode}`).count).eql(1);
+    await takeScreenshot(`analytics-geography-all${getPostfix(embedded)}`, 'body');
+    await checkScreenMode(t);
+    await t.click(Selector('.dx-tabs .dx-item').nth(3));
+    await t.wait(timeoutSecond);
+    await takeScreenshot(`analytics-geography-year${getPostfix(embedded)}`, 'body');
 
-      await t
-        .expect(compareResults.isValid())
-        .ok(compareResults.errorMessages());
-    }).requestHooks(requestLogger);
-  });
+    await t
+      .expect(compareResults.isValid())
+      .ok(compareResults.errorMessages());
+  }).requestHooks(requestLogger);
 });

packages/testing/tests/analytics-sales-report.test.js

@@ -2,52 +2,48 @@
 /* eslint-disable no-undef */
 import { Selector, RequestLogger } from 'testcafe';
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
-import {
-  forceResizeRecalculation, getPostfix, toggleCommonConfiguration,
-} from './utils';
-import { screenModes, timeoutSecond } from '../config.js';
+import { getPostfix, toggleCommonConfiguration } from './utils';
+import { timeoutSecond } from '../config.js';
 
 const project = process.env.project;
+const screenMode = process.env.screenMode;
 const BASE_URL = `http://localhost:${process.env.port}/#/analytics-sales-report`;
 const requestLogger = RequestLogger();
 
 fixture`Analytics Sales Report`;
 
 [false, true].forEach((embedded) => {
-  screenModes.forEach((screenMode) => {
-    test(`Analytics Sales Report (${project}, embed=${embedded}, ${screenMode[0]})`, async (t) => {
-      const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
-      await toggleCommonConfiguration(t, BASE_URL, embedded, () => { },
-        screenMode, timeoutSecond, false, requestLogger);
-      await forceResizeRecalculation(t, screenMode);
-      await t.expect(Selector('body.dx-device-generic').count).eql(1);
-      await takeScreenshot(`analytics-sales-report-month${getPostfix(embedded, screenMode)}`, 'body');
-
-      const isPeriodSelectorBoxVisible = screenModes[0] === screenMode;
-      if (isPeriodSelectorBoxVisible) {
-        await t.click(Selector('.sales-filter .dx-dropdownbutton'));
-
-        await t.click(Selector('.dx-dropdownbutton-popup-wrapper .dx-list .dx-list-item').nth(0));
-        await t.wait(timeoutSecond);
-        await takeScreenshot(`analytics-sales-report-day${getPostfix(embedded, screenMode)}`, 'body');
-      }
-
-      await t.drag(Selector('.slider').nth(1), -100, 0, { offsetX: 10, offsetY: 10 });
-      await t.drag(Selector('.slider').nth(0), 100, 0, { offsetX: 10, offsetY: 10 });
+  test(`Analytics Sales Report (${project}, embed=${embedded}, ${screenMode})`, async (t) => {
+    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+    await toggleCommonConfiguration(t, BASE_URL, embedded, () => { },
+      timeoutSecond, requestLogger);
+    await t.expect(Selector(`body.dx-device-${screenMode}`).count).eql(1);
+    await takeScreenshot(`analytics-sales-report-month${getPostfix(embedded)}`, 'body');
+
+    const isPeriodSelectorBoxVisible = screenMode === 'desktop';
+    if (isPeriodSelectorBoxVisible) {
+      await t.click(Selector('.sales-filter .dx-dropdownbutton'));
+
+      await t.click(Selector('.dx-dropdownbutton-popup-wrapper .dx-list .dx-list-item').nth(0));
       await t.wait(timeoutSecond);
+      await takeScreenshot(`analytics-sales-report-day${getPostfix(embedded)}`, 'body');
+    }
 
-      if (isPeriodSelectorBoxVisible) {
-        await takeScreenshot(`analytics-sales-report-day-range${getPostfix(embedded, screenMode)}`, 'body');
-        await t.click(Selector('.sales-filter .dx-dropdownbutton'));
-        await t.click(Selector('.dx-dropdownbutton-popup-wrapper .dx-list .dx-list-item').nth(1));
-        await t.wait(timeoutSecond);
-      }
+    await t.drag(Selector('.slider').nth(1), -100, 0, { offsetX: 10, offsetY: 10 });
+    await t.drag(Selector('.slider').nth(0), 100, 0, { offsetX: 10, offsetY: 10 });
+    await t.wait(timeoutSecond);
 
-      await takeScreenshot(`analytics-sales-report-month-range${getPostfix(embedded, screenMode)}`, 'body');
+    if (isPeriodSelectorBoxVisible) {
+      await takeScreenshot(`analytics-sales-report-day-range${getPostfix(embedded)}`, 'body');
+      await t.click(Selector('.sales-filter .dx-dropdownbutton'));
+      await t.click(Selector('.dx-dropdownbutton-popup-wrapper .dx-list .dx-list-item').nth(1));
+      await t.wait(timeoutSecond);
+    }
+
+    await takeScreenshot(`analytics-sales-report-month-range${getPostfix(embedded)}`, 'body');
 
-      await t
-        .expect(compareResults.isValid())
-        .ok(compareResults.errorMessages());
-    }).requestHooks(requestLogger);
-  });
+    await t
+      .expect(compareResults.isValid())
+      .ok(compareResults.errorMessages());
+  }).requestHooks(requestLogger);
 });

packages/testing/tests/crm-contact-details.test.js

@@ -4,16 +4,17 @@
 import { Selector } from 'testcafe';
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import { getPostfix, toggleCommonConfiguration } from './utils';
-import { screenModes, timeoutSecond } from '../config.js';
+import { timeoutSecond } from '../config.js';
 
 const project = process.env.project;
+const screenMode = process.env.screenMode;
 const BASE_URL = `http://localhost:${process.env.port}/#/crm-contact-details`;
 
 fixture`Contact Details`;
 
-const setEmbedded = async (t, embed, screenMode) => {
+const setEmbedded = async (t, embed) => {
   if (embed) {
-    if (screenMode[0] === 400) {
+    if (screenMode === 'mobile') {
       await t.click('.view-wrapper .toolbar-details .dx-icon-overflow');
       await t.click(Selector('.dx-popup-content .dx-button[aria-label=Refresh]'));
     } else {
@@ -23,59 +24,57 @@ const setEmbedded = async (t, embed, screenMode) => {
 };
 
 [false, true].forEach((embedded) => {
-  screenModes.forEach((screenMode) => {
-    test(`Crm contact details (${project}, embed=${embedded}, ${screenMode[0]})`, async (t) => {
-      const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  test(`Crm contact details (${project}, embed=${embedded}, ${screenMode})`, async (t) => {
+    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
-      // eslint-disable-next-line max-len
-      await toggleCommonConfiguration(t, BASE_URL, embedded, setEmbedded, screenMode, timeoutSecond, true);
+    // eslint-disable-next-line max-len
+    await toggleCommonConfiguration(t, BASE_URL, embedded, setEmbedded, timeoutSecond);
 
-      await t.click(Selector('.dx-drawer-content'));
-      await t.expect(Selector('.content .dx-toolbar-label').withText('Sammy Hill').exists).ok();
-      await takeScreenshot(`crm-contact-details${getPostfix(embedded, screenMode)}`, 'body');
+    await t.click(Selector('.dx-drawer-content'));
+    await t.expect(Selector('.content .dx-toolbar-label').withText('Sammy Hill').exists).ok();
+    await takeScreenshot(`crm-contact-details${getPostfix(embedded)}`, 'body');
 
-      await t
-        .expect(compareResults.isValid())
-        .ok(compareResults.errorMessages());
-    });
+    await t
+      .expect(compareResults.isValid())
+      .ok(compareResults.errorMessages());
+  });
 
-    test(`Crm contact details Form (${project}, embed=${embedded}, ${screenMode[0]})`, async (t) => {
-      const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  test(`Crm contact details Form (${project}, embed=${embedded}, ${screenMode})`, async (t) => {
+    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
-      // eslint-disable-next-line max-len
-      await toggleCommonConfiguration(t, BASE_URL, embedded, setEmbedded, screenMode, timeoutSecond);
+    // eslint-disable-next-line max-len
+    await toggleCommonConfiguration(t, BASE_URL, embedded, setEmbedded, timeoutSecond);
 
-      const form = Selector('.dx-form');
+    const form = Selector('.dx-form');
 
-      await takeScreenshot(`crm-form-readonly${getPostfix(embedded, screenMode)}`, form);
-      await t.click(Selector('.dx-button[aria-label=Edit]'));
-      await takeScreenshot(`crm-form-edit${getPostfix(embedded, screenMode)}`, form);
+    await takeScreenshot(`crm-form-readonly${getPostfix(embedded)}`, form);
+    await t.click(Selector('.dx-button[aria-label=Edit]'));
+    await takeScreenshot(`crm-form-edit${getPostfix(embedded)}`, form);
 
-      await t
-        .expect(compareResults.isValid())
-        .ok(compareResults.errorMessages());
-    });
+    await t
+      .expect(compareResults.isValid())
+      .ok(compareResults.errorMessages());
+  });
 
-    test(`Crm contact details tabpanel (${project}, embed=${embedded}, ${screenMode[0]})`, async (t) => {
-      const nameTabs = ['Tasks', 'Activities', 'Opportunities', 'Notes', 'Messages'];
-      if (screenMode[0] === 400) return;
-      const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  test(`Crm contact details tabpanel (${project}, embed=${embedded}, ${screenMode})`, async (t) => {
+    const nameTabs = ['Tasks', 'Activities', 'Opportunities', 'Notes', 'Messages'];
+    if (screenMode === 400) return;
+    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
-      // eslint-disable-next-line max-len
-      await toggleCommonConfiguration(t, BASE_URL, embedded, setEmbedded, screenMode, timeoutSecond);
+    // eslint-disable-next-line max-len
+    await toggleCommonConfiguration(t, BASE_URL, embedded, setEmbedded, timeoutSecond);
 
-      const tabs = Selector('.content .dx-tabpanel-tabs .dx-tab-text');
+    const tabs = Selector('.content .dx-tabpanel-tabs .dx-tab-text');
 
-      for (let i = 0; i < nameTabs.count; i += 1) {
-        await t.click(tabs.withText(nameTabs[i]));
-        const tabPanel = Selector('.content .dx-tabpanel-container .dx-item[role=tabpanel].dx-item-selected');
+    for (let i = 0; i < nameTabs.count; i += 1) {
+      await t.click(tabs.withText(nameTabs[i]));
+      const tabPanel = Selector('.content .dx-tabpanel-container .dx-item[role=tabpanel].dx-item-selected');
 
-        await takeScreenshot(`crm-form-tab-${nameTabs[i]}${getPostfix(embedded, screenMode)}`, tabPanel);
-      }
+      await takeScreenshot(`crm-form-tab-${nameTabs[i]}${getPostfix(embedded)}`, tabPanel);
+    }
 
-      await t
-        .expect(compareResults.isValid())
-        .ok(compareResults.errorMessages());
-    });
+    await t
+      .expect(compareResults.isValid())
+      .ok(compareResults.errorMessages());
   });
 });