PMM-12847 Grafana 10 Product tour automation

tests/helper/grafana_helper.js

@@ -34,6 +34,31 @@ class Grafana extends Helper {
     Playwright.haveRequestHeaders({ Authorization: `Basic ${basicAuthEncoded}` });
   }
 
+  async enableProductTour() {
+    const { Playwright } = this.helpers;
+
+    await Playwright.page.route('**/v1/user', async (route, request) => {
+      if (request.method() === 'GET') {
+        await route.fulfill({
+          status: 200,
+          body: JSON.stringify({
+            user_id: 1,
+            product_tour_completed: false,
+            alerting_tour_completed: false,
+          }),
+        });
+      } else {
+        await route.continue();
+      }
+    });
+  }
+
+  async stopMockingProductTourApi() {
+    const { Playwright } = this.helpers;
+
+    await Playwright.page.unroute('**/v1/user');
+  }
+
   async unAuthorize() {
     const { Playwright } = this.helpers;
     const { browserContext } = Playwright;

tests/pages/components/productTourComponent.js

@@ -0,0 +1,30 @@
+const { I } = inject();
+
+class ProductTourComponent {
+  constructor() {
+    this.productTourModal = locate('//h2[text()="Welcome to Percona Monitoring and Management (PMM)"]//ancestor::div[@role="dialog"]');
+    this.skipButton = this.productTourModal.find('//span[text()="Skip"]');
+    this.laterButton = this.productTourModal.find('//span[text()="Check later"]');
+    this.closeButton = this.productTourModal.find('//button[@aria-label="Close"]');
+    this.startTourButton = this.productTourModal.find('//span[text()="Start tour"]');
+    this.nextStepButton = locate('//button[@aria-label="Next step"]');
+    this.tourStepHeader = (headerText) => locate(`//div[@class="pmm-tour"]//strong[text()="${headerText}"]`);
+    this.productTourCategories = ['Dashboards', 'PMM Dashboards', 'PMM Query Analytics', 'Explore', 'Alerting', 'Advisors', 'Backup', 'PMM Configuration Panel', 'Administration'];
+    this.tourDoneButton = locate('//button//span[text()="Done"]');
+  }
+
+  async verifyProductTourSteps() {
+    for await (const [index, headerText] of this.productTourCategories.entries()) {
+      await I.waitForElement(this.tourStepHeader(headerText), 10);
+
+      if (index + 1 === this.productTourCategories.length) {
+        await I.click(this.tourDoneButton);
+      } else {
+        await I.click(this.nextStepButton);
+      }
+    }
+  }
+}
+
+module.exports = new ProductTourComponent();
+module.exports.ProductTourDialog = ProductTourComponent;

tests/pages/homePage.js

@@ -1,6 +1,7 @@
 const { I, dashboardPage } = inject();
 const assert = require('assert');
 const moment = require('moment');
+const productTourModal = require('./components/productTourComponent');
 
 module.exports = {
   // insert your locators and methods here
@@ -9,6 +10,9 @@ module.exports = {
   landingUrl: 'graph/d/pmm-home/home-dashboard?orgId=1&refresh=1m',
   genericOauthUrl: 'graph/login/generic_oauth',
   requestEnd: '/v1/Updates/Check',
+  elements: {
+    pageContent: locate('//div[@id="pageContent"]'),
+  },
   fields: {
     systemsUnderMonitoringCount:
       locate('.panel-content span').inside('[aria-label="Monitored Nodes panel"]'),
@@ -86,6 +90,8 @@ module.exports = {
   isAmiUpgrade: process.env.AMI_UPGRADE_TESTING_INSTANCE === 'true' || process.env.OVF_UPGRADE_TESTING_INSTANCE === 'true',
   pmmServerName: process.env.VM_NAME ? process.env.VM_NAME : 'pmm-server',
 
+  productTour: productTourModal,
+
   async open() {
     I.amOnPage(this.url);
     I.waitForElement(this.fields.dashboardHeaderLocator, 60);

tests/product-tour/productTour_test.js

@@ -0,0 +1,45 @@
+Feature('Pmm Product tour tests');
+
+Before(async ({ I }) => {
+  await I.stopMockingProductTourApi();
+  await I.Authorize();
+  await I.sendGetRequest('v1/user', { Authorization: `Basic ${await I.getAuth()}` });
+});
+
+Scenario('PMM-T1879 Verify that product tour dialog is displayed after check later button pressed. @grafana-pr', async ({ I, homePage }) => {
+  await I.amOnPage('');
+  await I.waitForElement(homePage.productTour.laterButton);
+  await I.click(homePage.productTour.laterButton);
+  await I.refreshPage();
+  await I.waitForElement(homePage.productTour.productTourModal, 10);
+});
+
+Scenario('PMM-T1880 Verify that product tour dialog is displayed after closing @grafana-pr', async ({ I, homePage }) => {
+  await I.amOnPage('');
+  await I.waitForElement(homePage.productTour.closeButton);
+  await I.click(homePage.productTour.closeButton);
+  await I.refreshPage();
+  await I.waitForElement(homePage.productTour.productTourModal, 10);
+});
+
+Scenario('PMM-T1881 Verify that product tour dialog contains all the components. @grafana-pr', async ({ I, homePage }) => {
+  await I.amOnPage('');
+  await I.waitForElement(homePage.productTour.startTourButton);
+  await I.click(homePage.productTour.startTourButton);
+  await homePage.productTour.verifyProductTourSteps();
+  await I.waitForDetached(homePage.productTour.productTourModal);
+});
+
+Scenario('PMM-T1882 Verify that product tour dialog is not displayed after skipping @grafana-pr', async ({ I, homePage }) => {
+  await I.enableProductTour();
+  await I.amOnPage('');
+
+  await I.waitForElement(homePage.productTour.skipButton);
+  await I.click(homePage.productTour.skipButton);
+  await I.stopMockingProductTourApi();
+
+  await I.refreshPage();
+
+  await I.waitForElement(homePage.elements.pageContent);
+  await I.waitForDetached(homePage.productTour.productTourModal, 10);
+});