Wait for animations on home-page.test.js

[hhcoxatucsd]

home-page.test.js is failing on the checking to make sure the link actually works bit because page.click() works by clicking where the a.team-link.hover-underline is. However, now that there are animations, it seems it's clicking while the animations are still going. Which leads to click on the Fortune cookie card. As a quick fix, I literally just made the tests wait 7 seconds before starting. A real solution would wait for the animations to finish, but I don't know how to do that.

See commit 96aa6d3545ec0e2103018dcf8ce39811e93c06e9 and commit b24b052acc198f47e7177486dd22a2bc1bce5859.

The following documentation on page.click() is also helpful for understanding what's happening:

(method) Page.click(selector: string, options?: Readonly<ClickOptions> | undefined): Promise<void>
This method fetches an element with selector, scrolls it into view if needed, and then uses Page.mouse to click in the center of the element. If there's no element matching selector, the method throws an error.

@remarks
Bear in mind that if click() triggers a navigation event and there's a separate page.waitForNavigation() promise to be resolved, you may end up with a race condition that yields unexpected results. The correct pattern for click and wait for navigation is the following:

const [response] = await Promise.all([
page.waitForNavigation(waitOptions),
page.click(selector, clickOptions),
]);