Chatbot followup test updates

package.json

@@ -1,6 +1,9 @@
 {
     "name": "ui-tests",
     "version": "0.0.1",
+    "exports": {
+        "./e2e-utils": "./tests/e2e/utils.ts"
+    },
     "description": "",
     "homepage": "https://github.com/Pometry/ui-tests",
     "bugs": {

tests/e2e/graph.spec.ts

@@ -1,4 +1,4 @@
-import { expect, Page } from '@playwright/test';
+import { expect } from '@playwright/test';
 import { test } from '../fixtures';
 import {
     changeTab,
@@ -8,6 +8,7 @@ import {
     doubleClickOnNode,
     dragSlider,
     fillInStyling,
+    fitView,
     getGraphState,
     navigateToGraphPageBySearch,
     navigateToSavedGraphBySavedGraphsTable,
@@ -16,13 +17,6 @@ import {
     waitForLayoutToFinish,
 } from './utils';
 
-async function fitView(page: Page) {
-    await page
-        .getByRole('button', { name: 'Fit all nodes within visible region' })
-        .click();
-    await waitForLayoutToFinish(page);
-}
-
 test('Close right hand side panel button and open again', async ({ page }) => {
     await page.goto('/graph/vanilla/event?initialNodes=%5B%5D');
 
@@ -521,6 +515,48 @@ test('Change colour and size of node by type', async ({ settingsPage }) => {
     await expect(state?.nodes.find((n) => n.id === 'Ben')?.size).toEqual(30);
 });
 
+test('Change colour only of individual node', async ({ settingsPage }) => {
+    await navigateToSavedGraphBySavedGraphsTable(
+        settingsPage,
+        'new_folder',
+        'persistent_filler',
+    );
+    await fitView(settingsPage);
+    await clickOnNode(settingsPage, 'Pedro');
+    await changeTab(settingsPage, 'Styling');
+    await fillInStyling(settingsPage, { colourValue: 'BD10E0' });
+    await settingsPage
+        .getByRole('button', { name: 'Save', exact: true })
+        .click();
+    await expect(settingsPage.getByText('Styling updated')).toBeVisible({
+        timeout: 5000,
+    });
+    const state = await getGraphState(settingsPage);
+    expect(state.nodes.find((n) => n.id === 'Pedro')?.colour).toEqual(
+        '#bd10e0',
+    );
+});
+
+test('Change size only of individual node', async ({ settingsPage }) => {
+    await navigateToSavedGraphBySavedGraphsTable(
+        settingsPage,
+        'new_folder',
+        'persistent_filler',
+    );
+    await fitView(settingsPage);
+    await clickOnNode(settingsPage, 'Pedro');
+    await changeTab(settingsPage, 'Styling');
+    await fillInStyling(settingsPage, { size: 30 });
+    await settingsPage
+        .getByRole('button', { name: 'Save', exact: true })
+        .click();
+    await expect(settingsPage.getByText('Styling updated')).toBeVisible({
+        timeout: 5000,
+    });
+    const state = await getGraphState(settingsPage);
+    expect(state.nodes.find((n) => n.id === 'Pedro')?.size).toEqual(30);
+});
+
 test('Preview colour and size by type changes', async ({ page }) => {
     await navigateToSavedGraphBySavedGraphsTable(
         page,
@@ -863,6 +899,7 @@ test('Comprehensive styling, selection, and highlighting', async ({
     test.setTimeout(60000);
     await navigateToSavedGraphBySavedGraphsTable(page, 'vanilla', 'persistent');
     await fitView(page);
+    await page.waitForTimeout(1000);
 
     // Save individual node styling for Pedro
     await clickOnNode(page, 'Pedro');