diff --git a/packages/cypress/src/integration/common.spec.ts b/packages/cypress/src/integration/common.spec.ts index 6fc4d65d1a..62df0f344d 100644 --- a/packages/cypress/src/integration/common.spec.ts +++ b/packages/cypress/src/integration/common.spec.ts @@ -32,6 +32,36 @@ describe('[Common]', () => { cy.url().should('include', '/how-to') }) + describe.only('[User feeback button]', () => { + it('[Desktop]', () => { + cy.visit('/how-to') + cy.get('[data-cy=feedback]').should('contain', 'Report a Problem') + cy.get('[data-cy=feedback]') + .should('have.attr', 'href') + .and('contain', '/how-to?sort=Newest') + + cy.visit('/map') + cy.get('[data-cy=feedback]') + .should('have.attr', 'href') + .and('contain', '/map') + }) + + it('[Mobile]', () => { + cy.viewport('iphone-6') + + cy.visit('/how-to') + cy.get('[data-cy=feedback]').should('contain', 'Problem?') + cy.get('[data-cy=feedback]') + .should('have.attr', 'href') + .and('contain', '/how-to?sort=Newest') + + cy.visit('/map') + cy.get('[data-cy=feedback]') + .should('have.attr', 'href') + .and('contain', '/map') + }) + }) + describe('[User Menu]', () => { it('[By Anonymous]', () => { cy.step('Login and Join buttons are available') diff --git a/src/pages/common/StickyButton.tsx b/src/pages/common/StickyButton.tsx index adca968050..205237f6bb 100644 --- a/src/pages/common/StickyButton.tsx +++ b/src/pages/common/StickyButton.tsx @@ -1,3 +1,5 @@ +import { useEffect, useState } from 'react' +import { useLocation } from 'react-router' import { Button, ExternalLink } from 'oa-components' import { Box, Text } from 'theme-ui' @@ -5,7 +7,14 @@ const FORM_URL = 'https://onearmy.retool.com/form/c48a8f5a-4f53-4c58-adda-ef4f3cd8dee1' export const StickyButton = () => { - const href = `${FORM_URL}#page=${window.location.href}` + const location = useLocation() + const [page, setPage] = useState(window.location.href) + + useEffect(() => { + setPage(window.location.href) + }, [location]) + + const href = `${FORM_URL}#page=${page}` return (