import React, { useEffect } from 'react'
import BrowserOnly from '@docusaurus/BrowserOnly'
const parseCLIARGS = `graph TD
STARTWDIO(Execute wdio or wdio run)-->
PARSECLIARGS[Parse CLI args]
PARSECLIARGS-->HELPSWITCH["wdio command --help"]-->
COMMANDINCLUDED{"Command<br>included?"}
COMMANDINCLUDED-->|Yes|PRINTCMDHELP[Print command help text]
COMMANDINCLUDED-->|No|PRINTWDIOHELP[Print wdio help]
PARSECLIARGS-->CONFIGCMD[config]-->
RUNCONFIG[Run config<br>command code]
PARSECLIARGS-->REPL[repl]-->
RUNREPL[Run repl<br>command code]
PARSECLIARGS-->INSTALL[install]-->
RUNINSTALL[Run install code]
PARSECLIARGS-->RUN[run]-->
LAUNCHRUNNER[Launch test runner]
`
const runRepl = `graph TD
CALLRUN("Launch test runner by calling the @wdio/cli:index run()")-->
LAUNCHTESTRUNNER2[Test runner is launched]-->
CALLRUNCMDHANDLER("Call @wdio/cli/commands:run launcher()")-->
INSTANTIATELAUNCHER["Creates @wdio/cli:launcher instance<br>1) Set log level<br>2) Worker count equals number<br>of specs * caps array length<br>3)Create a new runnner instance<br>using @wdio/utils:initializePlugin<br>4. Create CLI Interface instance.<br>5. Setup interface job:start,<br>job:end event listeners"]-->
CALLLAUNCHERINSTANCERUN["@wdio/cli:launcher run()"]-->
INITLAUNCHERINSTANCE["Create instance of all services<br>listed in the config services property."] -->
INIT["Call the runner initialize() method"]-->
RUNPRETSTTASKS["Run pre-test tasks for runner plugins"]-->
CONFIGONPREPAREHOOK["wdio.conf.js onPrepare hook"]-->
SERVICESONPREPAREHOOK["Run the services onPrepare hook<br>e.g. start selenium server."]-->
RUNMODE("Call @wdio/cli:launcher runMode()")-->
RUNMODEPROMISERESOLVED{"runMode() promise resolve?"}
RUNMODEPROMISERESOLVED-->|No|SCHEDULE["In @wdio/cli:launcher runMode()<br>create a spec execution schedule."]-->
RUNSPECS["Start test execution by calling<br>@wdio/cli:launcher runSpecs()."]-->
CREATEWORKERS["Create a new test instance (worker process) by<br>calling @wdio/cli:launcher runSpecs().<br> <br>Call @wdio/cli:launcher startInstance()<br>to create a new worker instance.<br> <br>See Create Worker Process and Test<br>Execution flowcharts for<br>more information on this process."]-->
ISNUMBERINSTANCESSPECSZERO{"Is number of worker<br>processes less than<br> config maxInstances?"}
ISNUMBERINSTANCESSPECSZERO-->|Yes|CREATEWORKERS
ISNUMBERINSTANCESSPECSZERO-->|No|SCHEDULELOOP["When number of running instances and<br>number of specs is zero, exit runSpecs()."]-->ENDRUNMODE
RUNMODEPROMISERESOLVED-->|Yes|ENDRUNMODE["Pass control back to<br>@wdio/cli:launcher run()."]-->
ONCOMPLETEHOOKS[Run service and config onComplete hooks.]-->
INTERFACEFINALISE["Call @wdio/cli interface.js finalise() method. This method prints the test results<br>and summary using data from the repoter packages."]-->
EXIT(Shutdown runner, end test process.)
`
const installConfig = `graph TD
INSTALLCOMMAND[install]-->
TYPENAMESUPPORTED{Is type and name<br>supported?}
TYPENAMESUPPORTED-->|No|ERROR[Throw error message]
TYPENAMESUPPORTED-->|Yes|INSTALLPACKAGE[Install package]
INSTALLPACKAGE-->ADDSERVICEREPORTER[Add services and<br>reporters to wdio.conf.js]
CONFIGCOMMAND[config]-->
EXECUTEWIZARD[Execute setup wizard]-->
QUESTIONNAIRE[Run questionaire, store<br>answers package variables.]-->
SYNCMODE{executionMode<br> is sync?}
SYNCMODE-->|Yes|INSTALLWDIOSYNC["Install<br>@wdio/sync"]
INSTALLWDIOSYNC-->YARNCHECK["If --yarn, Install packages using<br>yarn, otherwise use npm"]
SYNCMODE-->|No|ASYNCMODE["Do not install<br>@wdio/sync"]
YARNCHECK-->CREATEWDIOCONFIG["Create wdio.conf.js"]
ASYNCMODE-->YARNCHECK
REPLCOMMAND[repl]-->
CREATESESSION[Create a new Webdriver session<br>using webdriverio remote]-->
ADDGLOBALS["Add browser, $, and $$<br>to global scope"]-->
LOADREPL[Load the REPL by calling the<br>WebdriverIO debug command]-->
EXITREPL[Exit when REPL closed]
`
const startTestInstance = `graph TD
STARTINSTANCE("@wdio/cli:launcher startInstance()")-->
CALLRUNNERRUNMETHOD["Call @wdio/local-runner:index.js run()<br>return @wdio/local-runner:worker instance"]-->
ADDLISTENERS["Add message, error, exit event<br>listeners to worker instance."]-->
CALLPOSTMESSAGE["Call @wdio/local-runner:worker postMessage().<br>If an instance is not created, call startProcess()<br>and fork a child process."]-->
FORKCHILDPROCESS["@wdio/local-runner:worker startProcess() forks a<br>child process using the child_process fork() method."]-->
CREATERUNNERINSTANCE["The args passed to child_process fork execute the code in the<br>@wdio/local-runner run.js.This action creates a new instance<br>of @wdio/runner index.js. "]-->
ADDHANDLERS["Add message, error and exit listeners to the forked process.<br>These listeners will process commands."]-->
RUNWDIORUNNERINDEXJS["@wdio/local-runner postMessage() instructs the child process to<br>run the code @wdio/runner index.js."]-->
POSTMESSAGE["@wdio/local-runner postMessage() sends child process a message that<br>contains the capability id,'run' command, config file, CLI args,<br>capabilties, config details about automation backend, number of retries.<br>When the child process receives this message, all services, reports and<br>services are setup. The tests are them executed."]-->
CONTROLPASSEDTORUNNERINDEXJS["Control passed to @wdio/runner:index"]-->
TESTINITCOMPLETE("All services, reports and services are setup. The tests are them executed.<br>See Test Execution flow chart for more information.")
`
const setupTest = `graph TD
START("@wdio/runner:index called from<br>child process via a run message.")-->
EXECUTERUN["@wdio/runner:index run()"]-->
SETUPREPORTER["Initialise BaseReporter object which creates a new<br>@wdio/runner reporter instance.All reporters listed<br>in the wdio.conf.js reporters property are initialized."]-->
INITTESTFRAMEWORK["Test framework from the wdio.conf. js property is<br>initialized usingthe @wdio/utils initializePlugin method.<br> <br>Supported frameworks include @wdio/mocha-framework,<br>@wdio/cucumber-framework and @wdio/jasmine-framework."]-->
INITSERVICES["Initialise services"]-->
RUNEFORESESSIONHOOK[Run wdio.conf.js beforeSession hook.]-->
INITSESSION["Call @wdio/runner:index _initSession.<br>@wdio/runner:utils initializeInstance<br>calls webdriverio:index.js remote()."]-->
ISPROTOCOLWEBDRIVER{"Is protocol<br>webdriver?"}
ISPROTOCOLWEBDRIVER-->|Yes|WEBDRIVER
ISPROTOCOLWEBDRIVER-->|No|DEVTOOLS
WEBDRIVER["Call webdriver:index newSession<br>1. Start Webdriver session.<br>2. Get protocol commands.<br>3. Create webdriver monad with<br>protocol arguments.<br>4. Return monad session<br>instance to caller."]-->RUNNERRUN
DEVTOOLS["Create puppeteer instance.<br>Return session instance to caller."]-->RUNNERRUN
RUNNERRUN["Store instance in<br>global browser variable."]-->
SETWATCHMODEFLAG["Set watch mode flag"]-->
INITCOMPLETE[Initialisation successful, send runner:start message to reporter.]-->
KICKOFFTESTS["Kick off tests in framework by calling the framework's run<br>method, e.g. @wdio/mocha-framework:index run()."]-->
WAITFORTESTTOFINISH[Wait for test to finish. If watch mode keep session open.]-->
SENDRESULTS[Send results to reporter instance<br>for processing.]-->
INTERFACE["@wdio/cli:interface printSummary() called<br>Test results printed to terminal"]-->
KILLWORKERSESSION[Kill worker session.]
`
const graphData = `
graph LR
START("Start wdio in the CLI<br> @wdio/cli index / run.js")-->
LAUNCHER["@wdio/cli launcher.js"]-->
LOCALRUNNER["@wdio/local-runner"]-->
RUNNER["@wdio/runner"]
LISTOFSERVICES["Any package that ends with -service<br>@wdio/appium-service<br>@wdio/applitools-service<br>@wdio/browserstack-service<br>wdio-lambdatest-service<br>@wdio/lighthouse-service<br>@wdio/firefox-profile-service<br>@wdio/sauce-service<br>@wdio/selenium-standalone-service<br>@wdio/static-server-service<br>@wdio/testingbot-service<br>wdio-chromedriver-service<br>wdio-intercept-service<br>wdio-zafira-listener-service<br>wdio-reportportal-service<br>wdio-docker-service"]-->
LAUNCHER
LISTOFSERVICES-->LOCALRUNNER
LISTOFSERVICES-->RUNNER
REPORTER["Any package that ends with -reporter<br>@wdio/allure-reporter<br>@wdio/concise-reporter<br>@wdio/dot-reporter<br>@wdio/junit-reporter<br>@wdio/reporter<br>@wdio/spec-reporter<br>@wdio/sumologic-reporter<br>@wdio/json-reporter<br>wdio-reportportal-reporter<br>wdio-video-reporter<br>@rpii/wdio-html-reporter<br>wdio-mochawesome-reporter<br>wdio-timeline-reporter<br>wdio-cucumberjs-json-reporter"]-->RUNNER
FRAMEWORK["Any package that ends with -framework<br>@wdio/jasmine-framework<br>@wdio/mocha-framework<br>@wdio/cucumber-framework<br>"]-->
RUNNER
WEBDRIVER["webdriverio<br>webdriver"]-->
RUNNER
GLOBAL["GLOBALS<br>@wdio/sync<br>@wdio/config<br>@wdio/logger<br>@wdio/utils"]
`
export function CreateFlowcharts({ id }) {
useEffect(() => {
let _id = 'graph TD'
const idToIdMapping = {
createlocalworkerprocess: startTestInstance,
testexecution: setupTest,
highleveloverview: graphData,
}
if (idToIdMapping[id]) {
_id = idToIdMapping[id]
}
setTimeout(() => {
createFlowChart(_id)
}, 25)
}, [id])
return (
<BrowserOnly>
{() => {
return (
<div>
{id === 'wdiocommands' && (
<div>
<div className='flowcharttogglemenu'>
<a className='flowcharttogglelink' onClick={() => createFlowChart(parseCLIARGS)}>
Parse CLI args
</a>
<span>|</span>
<a className='flowcharttogglelink' onClick={() => createFlowChart(runRepl)}>
run command
</a>
<span>|</span>
<a className='flowcharttogglelink' onClick={() => createFlowChart(installConfig)}>
repl, install, and config commands
</a>
</div>
</div>
)}
<div id='flowChartGraphDivContainer'></div>
</div>
)
}}
</BrowserOnly>
)
}
