Fix for e2e Tests

Signed-off-by: Mike Lischke <mike@lischke-online.de>

Author: mike-lischke

playwright.config.ts

@@ -15,6 +15,7 @@ export default defineConfig({
         trace: "on-first-retry",
         screenshot: "only-on-failure",
         video: "retain-on-failure",
+        storageState: "tests/e2e/storage-state.json",
     },
     webServer: {
         command: process.env.CI ? "npm run serve:e2e" : "npm run build && npm run serve:e2e",

src/ui/TutorialWizard.tsx

@@ -47,7 +47,9 @@ export class TutorialWizard extends Component<ITutorialWizardProps, ITutorialWiz
     }
 
     public override componentDidUpdate(_prevProps: ITutorialWizardProps, prevState: ITutorialWizardState): void {
-        if (prevState.currentStep !== this.state.currentStep) {
+        const { currentStep } = this.state;
+
+        if (prevState.currentStep !== currentStep) {
             this.syncObserver();
         }
     }
@@ -78,8 +80,10 @@ export class TutorialWizard extends Component<ITutorialWizardProps, ITutorialWiz
     }
 
     public open(): void {
+        const { onStepChange } = this.props;
+
         this.setState({ currentStep: 0 }, () => {
-            this.props.onStepChange?.(0);
+            onStepChange?.(0);
             this.portalRef.current?.open({
                 backgroundOpacity: 0,
                 closeOnEscape: true,
@@ -94,23 +98,25 @@ export class TutorialWizard extends Component<ITutorialWizardProps, ITutorialWiz
     }
 
     private cleanupObserver(): void {
+        const { targetRect } = this.state;
+
         this.resizeObserver?.disconnect();
         this.resizeObserver = undefined;
         this.observedElement = undefined;
-        if (this.state.targetRect) {
+        if (targetRect) {
             this.setState({ targetRect: undefined });
         }
     }
 
     private syncObserver(): void {
         const { steps } = this.props;
-        const { currentStep } = this.state;
+        const { currentStep, targetRect } = this.state;
         const step = steps[currentStep];
 
         if (!step.targetSelector) {
             this.resizeObserver?.disconnect();
             this.observedElement = undefined;
-            if (this.state.targetRect) {
+            if (targetRect) {
                 this.setState({ targetRect: undefined });
             }
 

tests/e2e/storage-state.json

@@ -0,0 +1,14 @@
+{
+    "cookies": [],
+    "origins": [
+        {
+            "origin": "http://127.0.0.1:4173",
+            "localStorage": [
+                {
+                    "name": "asb-ui-settings",
+                    "value": "{\"tutorialEnabled\":false}"
+                }
+            ]
+        }
+    ]
+}