add recordings for artillery

packages/tasks-common/tasks-common.client.js

@@ -55,7 +55,7 @@ const App = () => {
         <div style={{ display: 'flex' }}>
           <button className="add-task" onClick={onAddClick} style={{ margin: 4 }}>Add task</button>
           <button className="remove-task" onClick={onRemoveClick} style={{ margin: 4 }}>Remove task</button>
-          <button className="remove-all-tasks" onClick={onRemoveAllClick} style={{ margin: 4 }}>Remove all task</button>
+          <button className="remove-all-tasks" onClick={onRemoveAllClick} style={{ margin: 4 }}>Remove all tasks</button>
         </div>
         {reactive ? <AppReactive tasks={tasks} setTasks={setTasks} /> : <AppNonReactive tasks={tasks} setTasks={setTasks} fetchTasks={fetchTasks} />}
       </div>

playwright.config.ts

@@ -11,6 +11,7 @@ import { defineConfig, devices } from '@playwright/test';
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
+  timeout: 260_000,
   testDir: './tests',
   /* Run tests in files in parallel */
   fullyParallel: true,
@@ -38,15 +39,15 @@ export default defineConfig({
       use: { ...devices['Desktop Chrome'] },
     },
 
-    {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
-    },
-
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
-    },
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
+    //
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
 
     /* Test against mobile viewports. */
     // {

tests/non-reactive.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test';
+import { addAndRemoveTasks } from './test-helpers';
+
+const taskCount = parseFloat(process.env.TASK_COUNT || 500);
+
+test('non-reactive', async ({ page }) => {
+  await addAndRemoveTasks({ page, reactive: false, taskCount});
+});

tests/reactive.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test';
+import { addAndRemoveTasks } from './test-helpers';
+
+const taskCount = parseFloat(process.env.TASK_COUNT || 500);
+
+test('reactive', async ({ page }) => {
+  await addAndRemoveTasks({ page, reactive: true, taskCount });
+});

tests/test-helpers.js

@@ -0,0 +1,22 @@
+export const addAndRemoveTasks = async ({ page, reactive, taskCount }) => {
+  await page.goto('http://localhost:3000/');
+  await page.getByLabel(reactive ? 'Reactive' : 'No Reactive', { exact: true }).check();
+
+  await page.getByRole('button', { name: 'Remove all tasks' }).click();
+
+  const tasks = Array.from({ length: taskCount });
+  let addedNum = 1;
+  for await (const _addTask of tasks) {
+    await page.getByRole('button', { name: 'Add task' }).click();
+    await page.waitForSelector(`text="New Task ${addedNum}"`, { state: 'visible' });
+    addedNum += 1;
+  }
+  let removedNum = 1;
+  for await (const _removeTask of tasks) {
+    await page.getByRole('button', { name: 'Remove task' }).click();
+    await page.waitForSelector(`text="New Task ${removedNum}"`, { state: 'detached' });
+    removedNum += 1;
+  }
+
+  await page.getByRole('button', { name: 'Remove all tasks' }).click();
+};