When invoking a method from a component, the test passes locally but fails in Github Actions

[simon-chen-1]

I'm setting up e2e tests in Continuous Integration for my Angular & NestJS app and I ran into an issue. When a user clicks a button, it invokes the getSummary method. This getSummary method calls the summarize method from a service with 2 arguments: user and the evaluated result of another method, getNodes (which returns an array of strings).

getSummary(): void {
        this.request.summarize(this.user, this.getNodes()).pipe(takeUntil(this._unsubscribeAll)).subscribe((summary: string) => {
            this.summary = summary;
        });
}

The goal of the test is to see if the summary gets updated after invoking this getSummary method. When I run it locally, it passes. However, when I run it in Github Actions, it fails and indicates that the summary is undefined.

I decided to pass in a dummy array in place of the getNodes method (so it ended up looking like this: this.request.summarize(this.user, ['one', 'two', 'three'])...) and then the test started passing on Github Actions. So this makes me think that invoking the getNodes method is taking too long when running it in Github Actions. The getNodes method itself also invokes another method - getNodesToSend. This method will recursively call itself depending on certain situations. The fact that it recursively calls itself makes me think that Cypress doesn't wait for all of these recursive calls to complete.

getNodes(): string[] {
        const nodesToSend = [];
        this.treeControl.dataNodes.forEach((node) => {
			if (this.checklistSelection.isSelected(node) && !node.expandable) {
				const nodesToAdd = [];
				nodesToSend.push(this.getNodesToSend(node, nodesToAdd));
			}
		});	

        this.cd.detectChanges();
        return nodesToSend;
} 

getNodesToSend(node, retval): string[] {
        const parentNode = this.getParentNode(node);

        if (parentNode) {
            retval.unshift(node.item);
            return this.getNodesToSend(parentNode, retval);
        } else {
            retval.unshift(node.item);
            return retval;
        }
}

getParentNode(node: TodoItemFlatNode): TodoItemFlatNode | null {
        const currentLevel = this.getLevel(node);

        if (currentLevel < 1) {
            return null;
        }

        const startIndex = this.treeControl.dataNodes.indexOf(node) - 1;

        for (let i = startIndex; i >= 0; i--) {
            const currentNode = this.treeControl.dataNodes[i];

            if (this.getLevel(currentNode) < currentLevel) {
                return currentNode;
            }
        }
        return null;
}

What have I tried:

• Increasing Cypress default command timeout in cypress.config.ts
• Using cy.wait(60000) after clicking the button which kicks off the process of invoking these methods

Is there a way to get Cypress to wait for the getSummary call to complete before making the assertion?

I'm currently using Cypress version 12.6.0 and version Angular version 14.0.0