Functional Test: Desktop - Sidebar Navigation to Join Team

[gcardonag]

Is your feature request related to a problem? Please describe. As a PHLASK developer, I would like to have automated testing of navigating to the "Join Team" view in the sidebar so that this functionality works consistently throughout any future site development.

Describe the solution you'd like

1. Add a Cypress test that performs the following actions in cypress/e2e/desktop/menuNavigation.cy.js
   1. Click on the "Sidebar"/hamburger button on the top-left toolbar
   2. Click on the "Join the Team" option on the menu
   3. Confirm that the top header text in the sidebar shows "Join the team"

If necessary, add data-cy attributes to resources in order to allow Cypress to target them for clicking/writing/etc.

• For an example of how to target elements, see the the should successfully submit a water site for testing test in the cypress/e2e/desktop/crowdsourcing.cy.js file.
• For an example of how components are updated to support the example above, see line 27 of the src/components/AddResourceModal/ChooseResource.jsx file.

When opening a Pull Request for this story, make sure to include a video recording of the completed test to help reviewers.

• When you run tests locally, a video of the test should automatically be recorded in the cypress/videos folder.

Describe alternatives you've considered N/A

Additional context Add any other context or screenshots about the feature request here.

[mandyshri101]

@gcardonag: For part 1 I did try the code below code. I still need to work on the second part which seems to be crucial for me. Second part 2 seems to not very specific in terms of User story. What do you think ? Please advise otherwise. // TODO // Add expected fail cases

// For each resource type, test each filter permutation and confirm only the expected number of taps appear. describe('menu navigation', () => { beforeEach(() => { cy.visit('/'); // Load the sidebar

// Open the sidebar menu
cy.get('[data-cy=head-sidebar-button]').click();

});

it('should successfully show about us content', () => { // Click the about us sidebar button cy.get('[data-cy=sidebar-about-button]').click();

cy.get('[data-cy=about-header]').should('have.text', 'About PHLASK');

});

it('should successfully show the join team content', () => { cy.get('[data-cy=sidebar-join-team-button]').click();

cy.get('[data-cy=join-team-header]').should('have.text', 'Join the team');

});

it('should successfully show the contact form and send feedback', () => { // TODO // Make form submission send to a test destination for validation }); }); `