add full test

sarahschwartz · Apr 21, 2024 · 1543c1a · 1543c1a
1 parent 24641bb
commit 1543c1a
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 73 deletions.
diff --git a/docs/intro.md b/docs/intro.md
@@ -9,7 +9,7 @@ sidebar_position: 1
 Make a new folder called `project-folder`:
 
 <span
-id="create-project-foler"
+id="create-project-folder"
 data-name="runCommand"
 ></span>
 
@@ -21,7 +21,81 @@ mkdir project-folder
 
 Initialize a new React project.
 
+<span
+id="create-react-app"
+data-name="runCommand"
+data-command-folder="tests-output/project-folder"
+></span>
+
+```sh
+npx create-react-app my-app
+```
 
 ## Add a "Hello World" button
 
-Replace your file with the code below.
+Replace your `src/App.js` file with the code below:
+
+<span
+id="modify-app-file"
+data-name="writeToFile"
+data-filepath="tests-output/project-folder/my-app/src/App.js"
+></span>
+
+```js
+import { useState } from 'react';
+
+function App() {
+  const [showSecret, setShowSecret] = useState(false);
+  return (
+    <div>
+      <button onClick={() => setShowSecret(true)}>
+        Show Secret Text
+      </button>
+
+      {showSecret && <p>Hello World</p>}
+    </div>
+  );
+}
+
+export default App;
+```
+
+Now you have a React app that shows a secret message!
+
+## Testing the app
+
+To run the app locally, run the command below:
+
+<span
+id="run-app"
+data-name="runCommand"
+data-pre-command="pnpm pm2 start 'PORT=4000 BROWSER=none <COMMAND>' --name 'react-app' --cwd ./tests-output/project-folder/my-app"
+></span>
+
+```sh
+npm start
+```
+
+<span
+id="wait-until-loaded"
+data-name="wait"
+data-timeout="8000"
+></span>
+
+<span
+id="visit-app"
+data-name="goToUrl"
+data-url="http://localhost:4000/"
+></span>
+
+<span
+id="click-button"
+data-name="clickButtonFromTest"
+data-button-text="Show Secret Text"
+></span>
+
+<span
+id="click-button"
+data-name="findText"
+data-find-text="Hello World"
+></span>
diff --git a/playwright.config.ts b/playwright.config.ts
@@ -11,6 +11,10 @@ import { defineConfig, devices } from '@playwright/test';
  */
 export default defineConfig({
   testDir: './tests',
+  timeout: 60000 * 5,
+  expect: {
+    timeout: 8000,
+  },
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
@@ -25,6 +29,8 @@ export default defineConfig({
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
     // baseURL: 'http://127.0.0.1:3000',
+    ignoreHTTPSErrors: true,
+    baseURL: 'http://localhost:3000',
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
@@ -40,9 +46,9 @@ export default defineConfig({
   ],
 
   /* Run your local dev server before starting the tests */
-  // webServer: {
-  //   command: 'npm run start',
-  //   url: 'http://127.0.0.1:3000',
-  //   reuseExistingServer: !process.env.CI,
-  // },
+  webServer: {
+    command: 'pnpm start',
+    url: 'http://localhost:3000',
+    reuseExistingServer: !process.env.CI,
+  },
 });
diff --git a/tests/example.spec.ts b/tests/example.spec.ts
@@ -1,12 +1,11 @@
 import { test } from '@playwright/test';
-import { setupFolders, startServers, stopServers } from './utils/setup';
+import { setupFolders, stopServers } from './utils/setup';
 import { runTest } from './utils/runTest';
 
 test('has title', async ({ page, context }) => {
   // SETUP
   await context.grantPermissions(['clipboard-read', 'clipboard-write']);
   await setupFolders('project-folder');
-  await startServers(page);
 
   // TEST
   await runTest(page, 'http://localhost:3000/docs/intro');

diff --git a/tests/utils/button.ts b/tests/utils/button.ts
@@ -1,16 +1,8 @@
-import type { Page } from '@playwright/test';
+import { expect, type Page } from '@playwright/test';
 
-// export function getButtonByText(page: Page, selector: string | RegExp) {
-//   return page.locator('button').getByText(selector);
-// }
-
-// export async function clickByLocator(page: Page, locator: string) {
-//   await page.locator(locator).click();
-// }
-
-// export async function clickByLabel(page: Page, label: string) {
-//   await page.getByLabel(label, { exact: true }).click();
-// }
+export async function clickButtonByText(page: Page, selector: string | RegExp) {
+  await page.locator('button').getByText(selector).click();
+}
 
 export async function clickCopyButton(page: Page, id: string) {
   const buttonAriaLabel = 'Copy code to clipboard';
@@ -21,3 +13,8 @@ export async function clickCopyButton(page: Page, id: string) {
   return rawText;
 }
 
+export async function findText(page: Page, text: string) {
+  const element = page.getByText('Hello World');
+  console.log("ELEMENT:", element)
+  expect(element).toBeTruthy();
+}
diff --git a/tests/utils/runTest.ts b/tests/utils/runTest.ts
@@ -3,6 +3,8 @@ import type { Page } from '@playwright/test';
 import { runCommand } from './runCommand';
 import { getTestActions } from './getTestActions';
 import { visit } from './visit';
+import { writeToFile } from './files';
+import { findText, clickButtonByText } from './button';
 
 export async function runTest(
   page: Page,
@@ -28,44 +30,18 @@ export async function runTest(
       case 'goToUrl':
         await visit(page, step['data-url']);
         break;
-    //   case 'compareFiles':
-    //     await compareFiles(
-    //       step['data-test-path-name'],
-    //       step['data-ref-path-name']
-    //     );
-    //     break;
-    //   case 'compareToFile':
-    //     await compareToFile(page, step.id, step['data-filepath']);
-    //     break;
-    //   case 'writeToFile':
-    //     await writeToFile(page, step.id, step['data-filepath']);
-    //     break;
-    //   case 'modifyFile':
-    //     await modifyFile(
-    //       page,
-    //       step.id,
-    //       step['data-filepath'],
-    //       Number.parseInt(step['data-add-spaces-before']),
-    //       step['data-add-spaces-after'],
-    //       Number.parseInt(step['data-at-line']),
-    //       step['data-remove-lines'],
-    //       step['data-use-set-data']
-    //     );
-    //     break;
-    //   case 'clickByRole':
-    //     await page
-    //       .getByRole(step['data-role'], { name: step['data-element-name'] })
-    //       .click();
-    //     break;
-    //   case 'clickByTestId':
-    //     await page.getByTestId(step['data-testid']).click();
-    //     break;
-    //   case 'clickByLocator':
-    //     await clickByLocator(page, step['data-click-by-locator']);
-    //     break;
-    //   case 'clickByLabel':
-    //     await clickByLabel(page, step['data-click-by-label']);
-    //     break;
+      case 'wait':
+        await page.waitForTimeout(Number.parseInt(step['data-timeout']));
+        break;
+      case 'writeToFile':
+        await writeToFile(page, step.id, step['data-filepath']);
+        break;
+      case 'clickButtonFromTest':
+        await clickButtonByText(page, step['data-button-text']);
+        break;
+      case 'findText':
+        await findText(page, step['data-find-text']);
+        break;
       default:
         console.log('STEP NOT FOUND:', step);
     }

diff --git a/tests/utils/setup.ts b/tests/utils/setup.ts
@@ -1,25 +1,12 @@
 import { execSync } from 'child_process';
 import fs from 'fs';
-import type { Page } from '@playwright/test';
-
-const START_SERVER_COMMAND = "pnpm pm2 start npm --name 'docs-site' -- run start";
-const STOP_SERVERS = 'pnpm pm2 delete all';
-
-export async function startServers(page: Page) {
-  console.log('STARTING DEV SERVER');
-  const startOutput = execSync(START_SERVER_COMMAND, {
-    encoding: 'utf-8',
-  });
-  console.log('START SERVER OUTPUT:', startOutput);
-  await page.waitForTimeout(10000);
-  console.log('WAITED 10 SECONDS');
-}
 
 export function stopServers() {
   const isRunning = checkIfServersRunning();
   if (isRunning) {
     console.log('STOPPING SERVERS');
     // stop & delete pm2 servers
+    const STOP_SERVERS = 'pnpm pm2 delete all';
     execSync(STOP_SERVERS, {
       encoding: 'utf-8',
     });