cleaned up file comments, fixed test, deleted console.logs, removed u…

…nused folders, fixed package.json

__tests__/client/components/pages/testCreator.test.js

@@ -35,7 +35,7 @@ describe('TestCreator Test', () => {
         a: true,
         href: '/',
       })}`).toBe(`cy.xpath('//a[@data-test="sidenav-home"]/div[2]/span[1]').click();
-      cy.location('pathname').should('eq','/');`);
+      cy.location('pathname').should("contains",'/');`);
     });
     it('should generate Cypress test for assertion', () => {
       expect(`${switchCase({
@@ -50,7 +50,7 @@ describe('TestCreator Test', () => {
         },
         URL: 'http://localhost:3000/signin',
         a: false,
-      })}`).toBe(`cy.xpath(\'//a[@data-test="sidenav-user-settings"]/div[2]/span[1]\').should(\'exist\');cy.xpath(\'//a[@data-test="sidenav-user-settings"]/div[2]/span[1]\').should(\'have.html\',"My Account").and(\'be.visible\');cy.xpath(\'//a[@data-test="sidenav-user-settings"]/div[2]/span[1]\').should(\'have.attr\', \'MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock\');`);
+      })}`).toBe(`cy.xpath('//a[@data-test="sidenav-user-settings"]/div[2]/span[1]').should('exist');cy.xpath('//a[@data-test="sidenav-user-settings"]/div[2]/span[1]').should('have.html',"My Account").and('be.visible');cy.xpath('//a[@data-test="sidenav-user-settings"]/div[2]/span[1]').should('have.class', 'MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock');`);
     });
   });
   describe('Integration test for describeCreator', () => {
@@ -102,7 +102,7 @@ describe('TestCreator Test', () => {
       ],
     };
     it('This will take our describe obj from panel.js and return the final cypress code. It will pass through describeCreator -> itCreator -> actionCreator -> switchCase', () => {
-      expect(`${describeCreator(describeObj)}`).toContain(`//Trydent is cool
+      expect(`${describeCreator(describeObj)}`).toContain(`    //Trydent is cool
     describe('', () => {
       beforeEach(() => {
         cy.visit('http://localhost:3000/')

client/components/App.tsx

@@ -7,10 +7,7 @@ import CodeBlock from './pages/CodeBlock';
 
 // MASTER REPO-IMPORTS LIST
 // repo-imports necessary to prevent bundling errors.
-// ###TODO - remove imports that are not used in any other file
-// --- --- --- --- --- --- --- --- ---
 import { describeCreator } from '../utils/testCreator';
-// ./client/utils/types folder
 import { Describe, itObject, EventObj } from '../utils/types/types';
 
 /**

client/components/pages/CodeBlock.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'; // ###TODO: useEffect is never used. Remove it?
+import React, { useState, useEffect } from 'react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import prettier from 'prettier/standalone';
@@ -55,7 +55,7 @@ const CodeBlock: React.FC = () => {
     const handleMessageEvent = (event: MessageEvent) => {
       if (event.data.type === 'GENERATED_CODE') {
         const inputText = event.data.code;
-        console.log(inputText);
+        // console.log(inputText);
         const formatted = prettierFormat(inputText);
         setFormattedText(formatted);
       }

client/components/pages/WelcomePage.tsx

@@ -46,9 +46,6 @@ const WelcomePage: React.FC = () => {
           <li>Once you are ready, "Start Test"</li>
           <li>Trydent won't start recording until you ask, so click 'Start Recording' on the next page when you're ready</li>
         </ol>
-        {/* <p>Remember, `describe` breaks your test suite into components. </p>
-        <p>`it` statements further break down `describe` tests into smaller individual tests</p> */}
-
       </details>
     </div>
   );

client/package.json

@@ -8,7 +8,7 @@
     "start": "vite",
     "build": "vite build && tsc",
     "build:watch": "vite build --watch",
-    "serve": "vite preview",
+    "serve": "vite preview"
   },
   "dependencies": {
     "prettier": "^2.8.8",

client/utils/inputLogger.ts

@@ -75,7 +75,6 @@ function inputEventListener(event: Event, callback: any): void {
       console.log(`User interaction with element: ${xPath}, Event type: click`);
       callback({ xPath, eventType });
       break;
-    // case 'input':
     case 'change':
       inputValue = (event.target as HTMLInputElement).value;
       console.log(`User interaction with element: ${xPath}, Event type: input, Input value: ${inputValue}`);

client/utils/testCreator.ts

@@ -48,11 +48,8 @@ function switchCase(event: EventObj): string {
  * @returns {string} Full cypress test suite to be sent to user
  */
 export function describeCreator(obj: Describe): string {
-  // destructuring the 'describe' object
   const { URL, description, writeUp, itStatements } = obj;
   let resultStr;
-  //create line for 'describe' statement in which we call the itCreator?
-  // ###TO-DO: push 'it' statement down to itCreator
   return (resultStr = `
     //${writeUp}
     describe('${description}', () => {
@@ -70,7 +67,6 @@ export function describeCreator(obj: Describe): string {
  * @param {string} URL - URL of the page to be tested.
  * @returns {string} - Concatenated string of 'it' statements.
  */
-// ###TO-DO: Fully convert to TypeScript
 function itCreator(itStatementsArr: itObject[], URL: string): string {
   // Initialize empty array to push formatted 'it' statements into
   const formattedItStatments = [];
@@ -111,5 +107,4 @@ function actionCreator(eObj: itObject, URL: string): string {
   return resultText;
 }
 
-export default {switchCase, describeCreator};
-
+export default {switchCase, describeCreator};

extension/background.js

@@ -25,7 +25,6 @@ chrome.runtime.onConnect.addListener((connection) => {
    * @param {Object} message - The message object
    */
   const devToolsListener = function (message) {
-    // console.log('we are in background.js');
 
     chrome.scripting.executeScript({
       target: { tabId: message.tabId },
@@ -40,7 +39,6 @@ chrome.runtime.onConnect.addListener((connection) => {
    * @listens chrome.tab.onActivated
    */
   chrome.tabs.onActivated.addListener(() => {
-    // console.log('changed to tab: ', tabId);
     chrome.scripting.executeScript({
       target: { tabId: message.tabId },
       files: [message.scriptToInject],
@@ -64,30 +62,8 @@ chrome.runtime.onConnect.addListener((connection) => {
  * @param {Object} message - The message object
  */
 chrome.runtime.onMessage.addListener((message) => {
-  // Check event and proceed message accordingly
-  switch (message.action) {
-    case 'click':
-      // console.log('Clicked, message: ', message);
-      break;
-    case 'focus':
-      // console.log('Focused, message: ', message);
-      break;
-    case 'blur':
-      // console.log('Blurred, message: ', message);
-      break;
-    case 'change':
-      // console.log('Changed, message: ', message);
-      break;
-    case 'keydown':
-      // console.log('keydown, message: ', message);
-      break;
-    default:
-      // console.log('Unknown event, message: ', message);
-  }
   if (devToolsConnection) {
     devToolsConnection.postMessage(message);
-  } else {
-    // console.error('devToolsConnection is not established yet');
   }
 });
 

extension/bundles/components/pages/CodeBlock.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from 'react'; // ###TODO: useEffect is never used. Remove it?
+import { useState, useEffect } from 'react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import prettier from 'prettier/standalone';

extension/bundles/utils/testCreator.js

@@ -45,11 +45,8 @@ function switchCase(event) {
  * @returns {string} Full cypress test suite to be sent to user
  */
 export function describeCreator(obj) {
-    // destructuring the 'describe' object
     const { URL, description, writeUp, itStatements } = obj;
     let resultStr;
-    //create line for 'describe' statement in which we call the itCreator?
-    // ###TO-DO: push 'it' statement down to itCreator
     return (resultStr = `
     //${writeUp}
     describe('${description}', () => {
@@ -67,7 +64,6 @@ export function describeCreator(obj) {
  * @param {string} URL - URL of the page to be tested.
  * @returns {string} - Concatenated string of 'it' statements.
  */
-// ###TO-DO: Fully convert to TypeScript
 function itCreator(itStatementsArr, URL) {
     // Initialize empty array to push formatted 'it' statements into
     const formattedItStatments = [];

extension/content-script.js

@@ -86,7 +86,6 @@ function inputEventListener(event, callback) {
       //
     case 'readystatechange':
       initialValue = 'N/A';
-      console.log('RSC');
       callback({ XPath: '', eventType });
       break;
     case 'focus':
@@ -142,15 +141,10 @@ function inputEventListener(event, callback) {
 // Store the current window's URL
 const URL = window.location.href;
 
-// console.log('DOM fully loaded and parsed');
-
 // Add event listeners for 'click', 'focus', 'blur', and 'change' events
 ['click', 'focus', 'blur', 'change', 'keydown', 'keyup', 'mouseover', 'readystatechange'].forEach((action) => {
   document.addEventListener(action, (event) => {
     // Call the inputEventListener for each event
-    // console.log('action: ', action);
-    // console.log('event: ', event);
-    // setTimeout(console.log('action: ', action), 1000);
     inputEventListener(event, (recordedEvent) => {
       const { xPath, eventType, inputValue } = recordedEvent;
       // Send the xPath as a message to the window

extension/panel.js

@@ -31,9 +31,7 @@ chrome.runtime.onMessage.addListener((message) => {
   if (message.a === true) message.action = 'navigate';
   if (isRecording === true) {
     // Add the message to the event array
-    console.log(message)
     eventArr.push(message);
-    console.log('This is our updated events array: ', eventArr);
 
     // Input history querys the DOM for the classname and returns an HTMLCollection which is type array
     // In order to append to the DOM from here, we have to treat it as an array and appropriate methods against it
@@ -68,7 +66,6 @@ window.addEventListener('stopRecording', (e) => {
   // This allows CodeBlock.tsx to easily catch the message
   (async function() {
     let generatedCode = await describeCreatorImport();
-//     console.log("Generated code: ", generatedCode);
     window.postMessage({ type: 'GENERATED_CODE', code: generatedCode })
   })();
 });
@@ -80,7 +77,6 @@ window.addEventListener('stopRecording', (e) => {
  */
 async function describeCreatorImport() {
   const { describeCreator } = await import("./bundles/utils/testCreator.js");
-  console.log(describeObj)
   return describeCreator(describeObj);
 }