Qol 7331 reset feedback form.js (#265)

* QOL-7331 - Feedback on reset() function in feedback-form.js

* QOL-7331 - Feedback on reset() function in feedback-form.js

* QOL-7328 Page content is hidden on mobile view

* fixed nested dropdown expand issue

* added gh-pages deployment option for testing changes

* reverted the content hiding

* reverted the content hiding

* updated tests and included header small screen test

* updated circle ci config file

.circleci/config.yml

@@ -40,7 +40,11 @@ jobs:
             pip --version
             sudo pip install awscli
 
-      - run: npx jest
+      - run:
+          name: Test
+          command: |
+            npx jest
+            mkdir test-results
 
       - store_artifacts:
           path: ./test-results/junit

e2e/__tests__/components.js → e2e/__tests__/components-test.js

@@ -4,11 +4,10 @@ let browser;
 let page;
 
 beforeAll(async () => {
-  browser = await puppeteer.launch({headless: false, args: ['--no-sandbox', '--disable-setuid-sandbox']});
+  browser = await puppeteer.launch({headless: true, args: ['--no-sandbox', '--disable-setuid-sandbox']});
   page = await browser.newPage();
   await page.setViewport({ width: ct.BT_XL, height: ct.WH });
   await page.goto(`${ct.APP_URL}/docs/components.html`, { waitUntil: 'networkidle0' });
-  await page.addScriptTag({url: 'https://code.jquery.com/jquery-3.2.1.min.js'});
 });
 
 describe('SWE Components testing', () => {
@@ -18,7 +17,7 @@ describe('SWE Components testing', () => {
     expect(searchInput).toBeTruthy();
     //facebook widget exist
     const getFbAttr = await page.evaluate('document.querySelector(".fb_iframe_widget").getElementsByTagName("iframe")[0].getAttribute("src")');
-    expect(getFbAttr).toMatch(/https:\/\/www.facebook.com/);
+    expect(getFbAttr).toMatch(/facebook.com/);
   });
 
   test('Carousel is working as expected', async () => {

e2e/__tests__/funnelback-search-test.js

@@ -4,11 +4,10 @@ let browser;
 let page;
 
 beforeAll(async () => {
-  browser = await puppeteer.launch({headless: false, args: ['--no-sandbox', '--disable-setuid-sandbox']});
+  browser = await puppeteer.launch({headless: true, args: ['--no-sandbox', '--disable-setuid-sandbox']});
   page = await browser.newPage();
   await page.setViewport({ width: ct.BT_XL, height: ct.WH });
   await page.goto(`${ct.APP_URL}/docs/components.html`, { waitUntil: 'networkidle0' });
-  await page.addScriptTag({url: 'https://code.jquery.com/jquery-3.2.1.min.js'});
 });
 
 describe('SWE Header testing', () => {
@@ -21,15 +20,6 @@ describe('SWE Header testing', () => {
     await page.waitFor(ct.WT);
     const element = await page.$('.qg-search-concierge-content li button');
     const text = await page.evaluate(element => element.textContent, element);
-    const result = await page.evaluate(() => {
-      try {
-        var table = $("title").html();
-        return table;
-      } catch (e) {
-        return e.message;
-      }
-    });
-    console.log(result);
     expect(text).toMatch(/jobs/);
   });
 

e2e/__tests__/header-sm-screen-test.js

@@ -0,0 +1,38 @@
+const puppeteer = require('puppeteer');
+const ct = require('../config/constants');
+
+let browser;
+let page;
+beforeAll(async () => {
+  browser = await puppeteer.launch({headless: true, args: ['--no-sandbox', '--disable-setuid-sandbox']});
+  page = await browser.newPage();
+  await page.setViewport({ width: ct.BT_SM, height: ct.WH });
+  await page.goto(`${ct.APP_URL}/docs/components.html`, { waitUntil: 'networkidle0' });
+});
+
+describe('Header on small screen devices', () => {
+  test('Should display the menu on clicking the menu icon', async () => {
+    // main menu
+    expect(await page.evaluate("document.querySelector('#qg-site-nav').getAttribute('class')")).not.toMatch(/collapse show/);
+    (await page.$('#qg-show-menu')).click();
+    await page.waitFor(ct.WT);
+    expect(await page.evaluate("document.querySelector('#qg-site-nav').getAttribute('class')")).toMatch(/collapse show/);
+
+    // nested menu
+    expect(await page.evaluate("document.querySelector('.mega-menu').getAttribute('class')")).not.toMatch(/dropdown-menu mega-menu show/);
+    (await page.$('#qgPrimaryNavForQueenslanders')).click();
+    await page.waitFor(ct.WT);
+    expect(await page.evaluate("document.querySelector('.mega-menu').getAttribute('class')")).toMatch(/dropdown-menu mega-menu show/);
+  }, ct.TO);
+
+  test('Should display the search on clicking search icon', async () => {
+    expect(await page.evaluate("document.querySelector('#qg-global-search-form').getAttribute('class')")).not.toMatch(/qg-search-form qg-global-web-autocomplete collapse/);
+    (await page.$('#qg-show-search')).click();
+    await page.waitFor(ct.WT);
+    expect(await page.evaluate("document.querySelector('#qg-global-search-form').getAttribute('class')")).toMatch(/qg-search-form qg-global-web-autocomplete collapse/);
+  }, ct.TO);
+
+  afterAll(async () => {
+    await browser.close();
+  });
+});

gulp/gh-pages.js

@@ -0,0 +1,12 @@
+const ghpages = require('gulp/gh-pages');
+const replace = require('replace-in-file');
+
+replace.sync({
+  files: 'release/docs/**/*.html',
+  from: /\/\/static/g,
+  to: '//test-static',
+});
+
+ghpages.publish('release/docs', function (err) {
+  console.log(err);
+});

gulpfile.babel.js

@@ -1,7 +1,4 @@
 'use strict';
-// init env variables
-require('dotenv').config();
-
 // Core
 const gulp = require('gulp');
 const path = require('path');

package.json

@@ -19,6 +19,7 @@
     "postrelease": "gulp clean-redundant-release",
     "start": "npm run build && gulp watch",
     "watch": "gulp watch",
+    "gh-pages": "export NODE_ENV=prod && npm run release && node gulp/gh-pages.js",
     "publish-npm": "export NODE_ENV=prod && npm run release && gulp wt-clean && gulp wt-clone && gulp wt-sync && gulp wt-updateVersion && gulp wt-npm && gulp wt-add && gulp wt-commit && gulp wt-tag && gulp wt-push",
     "create-swe-release": "export NODE_ENV=prod && gulp swe-add && gulp swe-tag && gulp swe-commit && gulp swe-push",
     "publish-cdn": "export NODE_ENV=prod && npm run release && gulp cdn-clean && gulp cdn-clone && gulp cdn-transfer && gulp cdn-add && gulp cdn-commit && gulp cdn-push",
@@ -52,6 +53,7 @@
     "extract-text-webpack-plugin": "^2.1.0",
     "file-loader": "^2.0.0",
     "font-awesome": "^4.7.0",
+    "gh-pages": "^3.1.0",
     "git-hooks": "^1.1.8",
     "gulp": "^4.0.2",
     "gulp-add-src": "^1.0.0",
@@ -92,6 +94,7 @@
     "npm": "^5.6.0",
     "puppeteer": "^1.20.0",
     "regenerator-runtime": "^0.13.5",
+    "replace-in-file": "^6.1.0",
     "run-sequence": "^1.1.5",
     "sass-loader": "^6.0.5",
     "string-replace-loader": "^2.3.0",
@@ -105,17 +108,13 @@
   "dependencies": {
     "@babel/runtime": "^7.10.5",
     "bootstrap": "^4.1.3",
-    "bootstrap-accessibility-plugin": "^1.0.2",
     "breakpoint-sass": "^2.7.0",
     "chromium": "^2.1.1",
-    "dotenv": "^4.0.0",
     "jquery": "^3.3.1",
     "jquery-ui-bundle": "^1.12.1-migrate",
     "lato-webfont": "^2.15.1",
-    "node-bourbon": "^4.2.8",
     "nodep-date-input-polyfill": "^5.2.0",
     "responsive-toolkit": "^2.6.3",
-    "stickyfill": "^1.1.1-strict",
-    "yarn": "^1.22.0"
+    "stickyfill": "^1.1.1-strict"
   }
 }

src/assets/_project/_blocks/components/qg-header.js

@@ -7,11 +7,14 @@ $(function () {
   stickyfill.add($('.sticky')[0]);
 
   // Mobile menu & Search events to prevent both of them opening at the same time
+  var $qgContent = $('#qg-content');
+  var $qgNav = $('.qg-navigation');
   $('.qg-show-menu, .qg-show-search').on('click', function () {
-    if (!$('#qg-content').is(':hidden')) {
-      $('#qg-content').hide();
+    var otherMenu = $(this).hasClass('qg-show-menu') ? $('#qg-global-search-form') : $qgNav;
+    if (!$qgContent.is(':hidden') || !otherMenu.is(':hidden')) {
+      $qgContent.hide();
     } else {
-      $('#qg-content').show();
+      $qgContent.show();
     }
     if ($(this).attr('aria-expanded') === 'false') {
       $('body').addClass('header-active');
@@ -24,12 +27,12 @@ $(function () {
       setTimeout(() => {
         $('.qg-search-form .input-group input[type=text]').focus();
       }, 300);
-      $('.qg-navigation').collapse('hide');
+      $qgNav.collapse('hide');
     }
   });
   function reorderContent () {
     if (window.innerHeight < 991) {
-      $('#qg-content').show();
+      $qgContent.show();
     }
   }
   function reorderTabbing () {

src/assets/_project/_blocks/layout/footer/feedback-form.js

@@ -1,17 +1,14 @@
-// unload event resets the feedback form to the initial state
-function reset () {
-  var checkedRadioBtns = document.querySelectorAll('#qg-page-feedback-form input[type="radio"]:checked');
-  var textFields = document.querySelector('#qg-page-feedback-form #comments');
-  if (textFields.value) {
-    textFields.value = '';
-  }
-  checkedRadioBtns.forEach(element => {
-    console.log(element);
-    if (element.checked) { element.checked = false; }
+// load event resets the feedback form to the initial state
+function resetForm () {
+  $('#qg-page-feedback-form :input:not(:checkbox):not(:button):not(:radio):not(:submit)').each(function () {
+    $(this).val('');
+  });
+  $('#qg-page-feedback-form :input:checkbox, :input:radio').each(function (element) {
+    $(this).prop('checked', false);
   });
 }
 window.addEventListener('load', function (event) {
-  reset();
+  resetForm();
 }, false);
 
 $('.no-js').removeClass('no-js');

src/assets/_project/_blocks/layout/header/_header-structure.scss

@@ -33,6 +33,12 @@
       pointer-events: none;
     }
   }
+
+  .qg-site-header{
+    top: 0;
+    flex-wrap: nowrap;
+  }
+
   .qg-site-header-top {
     padding: 30px 50px;
   }