Add selenium test for Echo popup (#316)

.github/workflows/test.yml

@@ -26,7 +26,7 @@ jobs:
           - npm-test
           - composer-test
           # - qunit
-          # - selenium
+          - selenium
           # - api-testing
 
     runs-on: ubuntu-latest
@@ -145,7 +145,8 @@ jobs:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: ${{ runner.os }}-yarn-
-      - run: yarn
+      # Use npm as Quibble is not compatible with yarn.
+      - run: npm install
       - name: Main Test
         run: |
           cd /home/runner

.gitignore

@@ -1,5 +1,9 @@
+tests/selenium/log
+
 # npm dependencies
 /node_modules/
+# We use yarn instead of npm
+package-lock.json
 
 # composer dependencies
 /vendor/

package.json

@@ -5,18 +5,27 @@
     "lint": "npm run lint:prettier --silent && npm run lint:i18n --silent",
     "lint:prettier": "prettier . --check",
     "lint:i18n": "banana-checker --requireLowerCase=0 i18n/",
-    "fix": "prettier . --write"
+    "fix": "prettier . --write",
+    "selenium-daily": "npm run selenium-test",
+    "selenium-test": "wdio tests/selenium/wdio.conf.js"
   },
   "dependencies": {
     "@femiwiki/ooui-femiwiki-theme": "https://github.com/femiwiki/OOUIFemiwikiTheme.git#main",
     "xeicon": "^2.3.3"
   },
   "devDependencies": {
     "@prettier/plugin-xml": "^1.0.2",
+    "@wdio/cli": "7.4.6",
+    "@wdio/dot-reporter": "7.4.2",
+    "@wdio/junit-reporter": "7.4.2",
+    "@wdio/local-runner": "7.4.6",
+    "@wdio/mocha-framework": "7.4.6",
+    "@wdio/sync": "7.4.6",
     "@types/jquery": "^3.5.6",
     "@types/node-fetch": "^2.5.12",
     "grunt-banana-checker": "^0.9.0",
     "prettier": "^2.4.1",
-    "typescript": "4.4.3"
+    "typescript": "4.4.3",
+    "wdio-mediawiki": "1.1.1"
   }
 }

tests/selenium/.eslintrc.json

@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "extends": ["wikimedia/selenium"]
+}

tests/selenium/pageobjects/echo.page.js

@@ -0,0 +1,12 @@
+'use strict';
+const Page = require('wdio-mediawiki/Page');
+
+class EchoPage extends Page {
+  get notifications() {
+    return $('#pt-notifications-all');
+  }
+  get popup() {
+    return $('.oo-ui-labelElement-label');
+  }
+}
+module.exports = new EchoPage();

tests/selenium/pageobjects/femiwiki.page.js

@@ -0,0 +1,9 @@
+'use strict';
+const Page = require('wdio-mediawiki/Page');
+
+class FemiwikiPage extends Page {
+  get gnbMenu() {
+    return $('#fw-menu-toggle');
+  }
+}
+module.exports = new FemiwikiPage();

tests/selenium/specs/echo.js

@@ -0,0 +1,36 @@
+'use strict';
+
+const Api = require('wdio-mediawiki/Api');
+const Femiwiki = require('../pageobjects/femiwiki.page');
+const EchoPage = require('../pageobjects/echo.page');
+const Util = require('wdio-mediawiki/Util');
+const assert = require('assert');
+const UserLoginPage = require('wdio-mediawiki/LoginPage');
+const UserPreferences = require('../userpreferences');
+const BlankPage = require('wdio-mediawiki/BlankPage');
+describe('flyout for notifications appears when clicked @daily', function () {
+  let bot;
+
+  before(async () => {
+    bot = await Api.bot();
+  });
+
+  it('checks for OOUI icon replacement @daily', function () {
+    // Prepares accounts
+    const username = Util.getTestString('User-');
+    const password = Util.getTestString();
+    browser.call(async () => {
+      await Api.createAccount(bot, username, password);
+    });
+
+    UserLoginPage.login(username, password);
+    UserPreferences.enableFemiwiki();
+    // Refresh after changing the preference
+    BlankPage.open();
+    Femiwiki.gnbMenu.click();
+    EchoPage.notifications.waitForDisplayed();
+    EchoPage.notifications.click();
+    EchoPage.popup.waitForDisplayed();
+    assert(EchoPage.popup.isExisting());
+  });
+});

tests/selenium/userpreferences.js

@@ -0,0 +1,25 @@
+'use strict';
+
+const BlankPage = require('wdio-mediawiki/BlankPage');
+const Util = require('wdio-mediawiki/Util');
+
+class UserPreferences {
+  setPreferences(preferences) {
+    BlankPage.open();
+    Util.waitForModuleState('mediawiki.base');
+
+    return browser.execute(function (prefs) {
+      return mw.loader.using('mediawiki.api').then(function () {
+        return new mw.Api().saveOptions(prefs);
+      });
+    }, preferences);
+  }
+
+  enableFemiwiki() {
+    this.setPreferences({
+      skin: 'femiwiki',
+    });
+  }
+}
+
+module.exports = new UserPreferences();

tests/selenium/wdio.conf.js

@@ -0,0 +1,12 @@
+'use strict';
+
+const { config } = require('wdio-mediawiki/wdio-defaults.conf.js');
+
+exports.config = {
+  ...config,
+  // Override, or add to, the setting from wdio-mediawiki.
+  // Learn more at https://webdriver.io/docs/configurationfile/
+  //
+  // Example:
+  // logLevel: 'info',
+};

tsconfig.json

@@ -1,5 +1,10 @@
 {
-  "exclude": ["vendor", "resources/ooui", "resources/skins.femiwiki.share*"],
+  "exclude": [
+    "vendor",
+    "resources/ooui",
+    "resources/skins.femiwiki.share*",
+    "tests"
+  ],
   "compilerOptions": {
     "resolveJsonModule": true,
     "esModuleInterop": true,