Fix bugs associated with disabling nav bar buttons

The current path when the app first started is the
HTTP/2 page. The local `state`, however, does not
point to the same thing.

This commit ensures the initial `curPage` state in
`ProtocolSelect.tsx` is consistent with `currPath`
and the request fields and contents are updated
accordingly.

Tests are also updated to handle the disabling
feature

Author: nattiechan

src/client/components/navbar/ProtocolSelect.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 
 // Import actions so that the navbar can interact with the Redux store.
@@ -60,13 +60,15 @@ const SelectedButton = styled(CustomButton)`
   background-color: #58a4b0;
 `;
 
+const HTTP_NAME = 'HTTP/2';
+const HTTP_VALUE = 'rest';
 /**
  * name: The display name for the button.
  * route: The React Router route to redirect to on click (see MainContainer.tsx)
  * value: The value of the button used to update the Redux store.
  */
 const pages: page[] = [
-  { name: 'HTTP/2', route: '/', value: 'rest' },
+  { name: HTTP_NAME, route: '/', value: HTTP_VALUE },
   { name: 'GraphQL', route: '/graphql', value: 'graphQL' },
   { name: 'WebSocket', route: '/websocket', value: 'ws' },
 ];
@@ -102,6 +104,22 @@ function ProtocolSelect() {
   };
   const [curPage, setCurPage] = useState('');
 
+  useEffect(() => {
+    const currentPage: page | undefined = [...pages, ...experimentalPages].find(
+      ({ route }) => route === currPath
+    );
+    if (!currentPage) {
+      console.warn(
+        `Current page path cannot be found. Default to ${HTTP_NAME}`
+      );
+      onProtocolSelect(HTTP_VALUE);
+      setCurPage(HTTP_NAME);
+    } else {
+      onProtocolSelect(currentPage.value);
+      setCurPage(currentPage.name);
+    }
+  }, []);
+
   const handleClick = (value: string, name: string): void => {
     onProtocolSelect(value);
     setCurPage(name);

test/subSuites/graphqlTest.js

@@ -77,9 +77,15 @@ module.exports = () => {
 
       beforeEach(() => (num = 0));
 
-      afterEach(
-        async () => await page.locator('button >> text=Clear Workspace').click()
-      );
+      afterEach(async () => {
+        await page.locator('button >> text=Clear Workspace').click();
+        // Any button in the nav bar that is selected is disabled
+        // And hard refreshing the page in a test environment is not entirely robust
+        // since the app can take a bit to load. In that case,
+        // we work around the limitation by clicking another feature and return to HTTP/2
+        await page.locator('button>> text=HTTP/2').click();
+        await page.locator('button>> text=GraphQL').click();
+      });
 
       it('it should be able to introspect the schema (PUBLIC API)', async () => {
         try {
@@ -283,6 +289,10 @@ module.exports = () => {
             }, 500);
           });
 
+          // Purely a workaround to ensure `fillAndSendRequest()` can select `MUTATION` correctly
+          await page.locator('button#graphql-method').click();
+          await page.locator(`div[id^="composer"] >> a >> text=QUERY`).click();
+
           // SEND ADDITIONAL MUTATION AFTER UNSUBSCRIBED FROM SERVER
           const query3 =
             'mutation {post(url: "www.moreexamples.com" description: "Fake site") {description}}';
@@ -349,19 +359,26 @@ module.exports = () => {
         await page.waitForLoadState(`domcontentloaded`);
       });
 
-      beforeEach(() => (num = 0));
+      beforeEach(async () => {
+        num = 0;
+      });
 
-      afterEach(
-        async () => await page.locator('button >> text=Clear Workspace').click()
-      );
+      afterEach(async () => {
+        await page.locator('button >> text=Clear Workspace').click();
+        // Any button in the nav bar that is selected is disabled
+        // And hard refreshing the page in a test environment is not entirely robust
+        // since the app can take a bit to load. In that case,
+        // we work around the limitation by clicking another feature and return to HTTP/2
+        await page.locator('button>> text=HTTP/2').click();
+        await page.locator('button>> text=GraphQL').click();
+      });
 
       // limiting the amount of time required to simulate the load test
-      const loadTestDuration = 3;
+      const stressTestDuration = 3;
 
-      it('Load test run button is disabled with no request in workspace window', async () => {
+      it('Stress test run button is disabled with no request in workspace window', async () => {
         try {
-          await page.locator('button>> text=GraphQL').click();
-          await page.locator('span >> text=Load Test').click();
+          await page.locator('span >> text=View Stress Test').click();
           const runButton = page.locator('button>> text=Run');
           pwTest.expect(runButton).toBeDisabled();
         } catch (err) {
@@ -376,25 +393,25 @@ module.exports = () => {
           const query = 'subscription {newLink {id description url}}';
           await fillGQLRequest(page, url, method, query);
           await page.locator('button >> text=Add to Workspace').click();
-          await page.locator('span >> text=Load Test').click();
+          await page.locator('span >> text=View Stress Test').click();
           const runButton = page.locator('button>> text=Run');
           pwTest.expect(runButton).toBeDisabled();
         } catch (err) {
           console.error(err);
         }
       });
 
-      it('Successful load test with `QUERY`', async () => {
+      it('Successful stress test with `QUERY`', async () => {
         try {
           const method = 'QUERY';
           const url = 'http://localhost:4000/graphql';
           const query = 'query {feed {descriptions}}';
           await fillGQLRequest(page, url, method, query);
           await page.locator('button >> text=Add to Workspace').click();
-          await page.locator('span >> text=Load Test').click();
+          await page.locator('span >> text=View Stress Test').click();
           await page
             .locator('[placeholder="Duration"]')
-            .fill(loadTestDuration.toString());
+            .fill(stressTestDuration.toString());
           await page.locator('button>> text=Run').click();
 
           // The load test takes a minimum of 4 seconds to execute

test/subSuites/httpTest.js

@@ -17,7 +17,11 @@ const chaiHttp = require('chai-http');
 chai.use(chaiHttp);
 const path = require('path');
 const fs = require('fs');
-const { fillRestRequest, addAndSend } = require('./testHelper');
+const {
+  isButtonDisabled,
+  fillRestRequest,
+  addAndSend,
+} = require('./testHelper');
 
 let electronApp,
   page,
@@ -252,7 +256,7 @@ module.exports = () => {
       });
     });
 
-    describe('HTTP/S load testing', () => {
+    describe('HTTP/S stress testing', () => {
       before(async () => {
         page = electronApp.windows()[0]; // In case there is more than one window
         await page.waitForLoadState(`domcontentloaded`);
@@ -266,17 +270,20 @@ module.exports = () => {
 
       beforeEach(() => (num = 0));
 
-      afterEach(
-        async () => await page.locator('button >> text=Clear Workspace').click()
-      );
+      afterEach(async () => {
+        await page.locator('span >> text=Hide Stress Test').click();
+        await page.locator('button >> text=Clear Workspace').click();
+      });
 
-      // limiting the amount of time required to simulate the load test
-      const loadTestDuration = 3;
+      // limiting the amount of time required to simulate the stress test
+      const stressTestDuration = 3;
 
-      it('Load test run button is disabled with no request in workspace window', async () => {
+      it('Stress test run button is disabled with no request in workspace window', async () => {
         try {
-          await page.locator('button>> text=HTTP/2').click();
-          await page.locator('span >> text=Load Test').click();
+          const httpPath = 'button>> text=HTTP/2';
+          if (!isButtonDisabled(page, httpPath))
+            await page.locator(httpPath).click();
+          await page.locator('span >> text=View Stress Test').click();
           const runButton = page.locator('button>> text=Run');
           pwTest.expect(runButton).toBeDisabled();
         } catch (err) {
@@ -292,27 +299,27 @@ module.exports = () => {
             '{"title": "HarryPotter", "author": "JK Rowling", "pages": 500}';
           await fillRestRequest(page, url, method, body);
           await page.locator('button >> text=Add to Workspace').click();
-          await page.locator('span >> text=Load Test').click();
+          await page.locator('span >> text=View Stress Test').click();
           const runButton = page.locator('button>> text=Run');
           pwTest.expect(runButton).toBeDisabled();
         } catch (err) {
           console.error(err);
         }
       });
 
-      it('Successful load test with `GET` request', async () => {
+      it('Successful stress test with `GET` request', async () => {
         try {
           const url = 'http://localhost:3004/book';
           const method = 'GET';
           await fillRestRequest(page, url, method);
           await page.locator('button >> text=Add to Workspace').click();
-          await page.locator('span >> text=Load Test').click();
+          await page.locator('span >> text=View Stress Test').click();
           await page
             .locator('[placeholder="Duration"]')
-            .fill(loadTestDuration.toString());
+            .fill(stressTestDuration.toString());
           await page.locator('button>> text=Run').click();
 
-          // The load test takes a minimum of 4 seconds to execute
+          // The stress test takes a minimum of 4 seconds to execute
           await new Promise((resolve) => {
             setTimeout(async () => {
               try {

test/subSuites/reqInputTests.js

@@ -146,7 +146,12 @@ module.exports = () => {
     });
 
     describe('HTTP/2 URL input successful', () => {
+      // Any button in the nav bar that is selected is disabled
+      // And hard refreshing the page in a test environment is not entirely robust
+      // since the app can take a bit to load. In that case,
+      // we work around the limitation by clicking another feature and return to HTTP/2
       before(async () => {
+        await page.locator('button>> text=GraphQL').click();
         await page.locator('button>> text=HTTP/2').click();
       });
 

test/subSuites/testHelper.js

@@ -4,6 +4,12 @@
  * for E2E testing.
  */
 
+const isButtonDisabled = async (page, path) => {
+  const button = await page.locator(path);
+  const isDisabled = await button.getAttribute('disabled');
+  return isDisabled !== null;
+};
+
 const fillRestRequest = async (
   page,
   url,
@@ -14,7 +20,9 @@ const fillRestRequest = async (
 ) => {
   try {
     // Make sure HTTP2 method is selected
-    await page.locator('button>> text=HTTP/2').click();
+    const httpPath = 'button>> text=HTTP/2';
+    if (!(await isButtonDisabled(page, httpPath)))
+      await page.locator(httpPath).click();
 
     // click and select METHOD if it isn't GET
     if (method !== 'GET') {
@@ -81,7 +89,9 @@ const fillGQLBasicInfo = async (
 ) => {
   try {
     // click and check GRAPHQL
-    await page.locator('button>> text=GraphQL').click();
+    const gqlPath = 'button>> text=GraphQL';
+    if (!(await isButtonDisabled(page, gqlPath)))
+      await page.locator(gqlPath).click();
 
     // click and select METHOD if it isn't QUERY
     if (method !== 'QUERY') {
@@ -186,6 +196,7 @@ const clearAndFillTestScriptArea = async (page, script) => {
 };
 
 module.exports = {
+  isButtonDisabled,
   fillRestRequest,
   fillGQLBasicInfo,
   fillGQLRequest,