homebase-app: Integrate testing suite

[EightRice]

Have the tests perform on every merge / PR creation

[benefacto]

This is a priority immediately after my onboarding.

[benefacto]

Duplicate issue: https://github.com/dOrgTech/homebase-app/issues/702

Integrate the tests done by the upwork team, so that as we're doing new features and fixes we run them through a testing pipeline.

[benefacto]

Tests being referred to seem to be in this repository: https://github.com/W3DevTeam/TezosHomebaseTests Below is a good example of a GitHub action that could be run (might have to be adapted for Netlify).

name: Playwright Tests
on:
  deployment_status:
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    if: github.event.deployment_status.state == 'success'
    steps:
    - uses: actions/checkout@v3
    - uses: actions/setup-node@v3
      with:
        node-version: 18
    - name: Install dependencies
      run: npm ci
    - name: Install Playwright
      run: npx playwright install --with-deps
    - name: Run Playwright tests
      run: npx playwright test
      env:
        PLAYWRIGHT_TEST_BASE_URL: ${{ github.event.deployment_status.target_url }}

Playwright has good documentation to execute on this: https://playwright.dev/docs/ci-intro

[benefacto]

Sadly, Netlfiy does not currently send a deployment_status event: https://answers.netlify.com/t/can-netlify-deliver-deploy-event-to-github-api-after-successful-deployment/10905

[benefacto]

Current approach seems to be working but CSS class paths seem to be the cause of the current test failures (timeouts likely due to being unable to find the elements)

[benefacto]

It seems like the first test is now getting stuck when it's prompted to connect a wallet when it clicks the deploy button

[benefacto]

WIP pull request: https://github.com/dOrgTech/homebase-app/pull/740 New tests repository (fork) to make changes to: https://github.com/dOrgTech/homebase-app-tests

[benefacto]

@Man-Jain @EightRice @thenerdcat Were the tests intended to work without a wallet connection? I'm asking because it seems like a wallet was never setup for the tests and yet, when I'm debugging the first test case, it seems to be getting stuck at the wallet connection prompt: If wallet connection needs to be added, I'm happy to do so, I just wanted to check first since adding that may be somewhat time consuming.

[benefacto]

Andrei has custom deployment preview for hardcoded wallet which can be extended

[EightRice]

@benefacto This is the deploy preview with the hardcoded wallet: https://deploy-preview-629--tezos-homebase.netlify.app/

[benefacto]

This pull request reconfigured the codebase to be testable: https://github.com/dOrgTech/homebase-app/pull/629

[benefacto]

Will actually need to use a URL parameter to handle the test mode, maybe something like this: To maintain the test mode URL parameter across navigations in your React app, you can use one of the following approaches:

Approach 1: Higher-Order Component (HOC)

You can create a HOC that wraps your components and automatically appends the test mode parameter to any navigation links.

1. Create the HOC:

   import React from 'react';
   import { useLocation, useNavigate } from 'react-router-dom';
   
   const withTestMode = (WrappedComponent) => {
     return (props) => {
       const location = useLocation();
       const navigate = useNavigate();
       const testMode = new URLSearchParams(location.search).get('testMode');
   
       const handleNavigation = (path) => {
         navigate(`${path}${testMode ? `?testMode=${testMode}` : ''}`);
       };
   
       return <WrappedComponent {...props} navigate={handleNavigation} />;
     };
   };
   
   export default withTestMode;
   

2. Use the HOC:

   import withTestMode from './withTestMode';
   
   const MyComponent = ({ navigate }) => {
     // Use the `navigate` function passed by the HOC
     return (
       <button onClick={() => navigate('/next-page')}>Go to Next Page</button>
     );
   };
   
   export default withTestMode(MyComponent);
   

Approach 2: Custom Hook

Alternatively, you can create a custom hook to handle the navigation logic with the test mode parameter.

1. Create the Custom Hook:

   import { useLocation, useNavigate } from 'react-router-dom';
   
   const useTestModeNavigation = () => {
     const location = useLocation();
     const navigate = useNavigate();
     const testMode = new URLSearchParams(location.search).get('testMode');
   
     const navigateWithTestMode = (path) => {
       navigate(`${path}${testMode ? `?testMode=${testMode}` : ''}`);
     };
   
     return navigateWithTestMode;
   };
   
   export default useTestModeNavigation;
   

2. Use the Custom Hook:

   import useTestModeNavigation from './useTestModeNavigation';
   
   const MyComponent = () => {
     const navigateWithTestMode = useTestModeNavigation();
   
     return (
       <button onClick={() => navigateWithTestMode('/next-page')}>Go to Next Page</button>
     );
   };
   
   export default MyComponent;
   

In both approaches, the test mode parameter is preserved in the URL during navigation. This helps maintain a consistent application state based on the URL parameter, ensuring that the test mode remains active across different views and user interactions. Choose the approach that best fits your application architecture and coding style.

[benefacto]

Need access to LaunchDarkly as that's the feature flag system that's already setup: https://github.com/dOrgTech/homebase-app/blob/0938a65e51ed0d0f557b2acda9189473a2a8ebc6/src/services/config/hooks/featureFlags.ts#L1

[benefacto]

Magenta now has access and can grant me it

[benefacto]

What's remaining on this one is to setup a feature flag (LaunchDarkly) such that when it is passed, the app is considered to be in test mode (using the test wallet rather than the connected one), then this URL should be used by the GitHub action for testing purposes (possible that you might need a wait for Netlify action: https://github.com/JakePartusch/wait-for-netlify-action); possible that tests may need tweaks to use the latest UI