Merge pull request #530 from NASA-IMPACT/feature/issue-525

update feedback form with correct link

docs/README-testing.md

@@ -0,0 +1,5 @@
+# Testing this application
+
+## End to End tests (with Playwright)
+
+To test the application end to end, we recomend creating a production build locally with `yarn build` and serving the production bundle with `yarn serve -p 8888`. After your application is running you can start up the end to end tests with ` npx playwright test` (to run all end to end test) or `npx playwright test my-test.spec.ts` for a specific test.

gatsby-browser.js

@@ -6,25 +6,12 @@
  * Note: There is an equivalent hook in Gatsby’s SSR API. It is recommended to use both APIs together.
  */
 
-import React from "react"
-import PropTypes from "prop-types"
-
 import "@fontsource/titillium-web"
 
-import FBMProvider from "./src/components/fbm-provider"
-
 export const shouldUpdateScroll = ({ routerProps: { location } }) => {
   if (location.hash) {
     return false
   }
 
   return true
 }
-
-export const wrapRootElement = ({ element }) => {
-  return <FBMProvider>{element}</FBMProvider>
-}
-
-wrapRootElement.propTypes = {
-  element: PropTypes.element,
-}

gatsby-node.js

@@ -26,6 +26,8 @@ exports.createSchemaCustomization = ({ actions }) => {
        significant_events: [significant_event] @link
        websites: [website] @link
        logo: image @link
+       bounds: String
+       spatial_bounds: String
      }
      type collection_period implements Node {
        dois: [doi] @link

playwright/e2e/campaign.spec.ts

@@ -11,6 +11,7 @@ test.describe('Campaign', () => {
     });
 
     test('provides information on the campaign', async () => {
+
         await expect(page.locator('[data-cy=campaign-hero] h1')).toBeVisible();
         await expect(page.locator('[data-cy=campaign-hero-header]')).toHaveCount(1);
 

playwright/e2e/explore.spec.ts

@@ -44,7 +44,7 @@ test.describe("Explore", () => {
       expect(await tabs[0].textContent()).toContain("Campaigns")
       expect(
         await tabs[0].evaluate(tab => window.getComputedStyle(tab).fontWeight)
-      ).not.toBe("700")
+      ).toBe("700")
       expect(await tabs[1].textContent()).toContain("Platforms")
       expect(
         await tabs[1].evaluate(tab => window.getComputedStyle(tab).fontWeight)
@@ -156,7 +156,7 @@ test.describe("Explore", () => {
       expect(await tabs[1].textContent()).toContain("Platforms")
       expect(
         await tabs[1].evaluate(tab => window.getComputedStyle(tab).fontWeight)
-      ).not.toBe("700")
+      ).toBe("700")
       expect(await tabs[2].textContent()).toContain("Instruments")
       expect(
         await tabs[2].evaluate(tab => window.getComputedStyle(tab).fontWeight)
@@ -242,7 +242,7 @@ test.describe("Explore", () => {
       expect(await tabs[2].textContent()).toContain("Instruments")
       expect(
         await tabs[2].evaluate(tab => window.getComputedStyle(tab).fontWeight)
-      ).not.toBe("700")
+      ).toBe("700")
 
       // check only the first element for tools, instruments, and card
       await expect(

playwright/playwright.config.ts

@@ -36,8 +36,8 @@ const config: PlaywrightTestConfig = {
     /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
     actionTimeout: 0,
     /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: 'http://localhost:8888/casei',
-
+    baseURL: "http://localhost:8888/casei",
+    video: "retain-on-failure",
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: "on-first-retry",
   },

src/components/__tests__/__snapshots__/footer.test.js.snap

@@ -111,9 +111,38 @@ exports[`Footer renders correctly 1`] = `
         </li>
         <li>
           <a
+            className="external-link___StyledA-sc-3ezy1s-0 bJKxHr"
+            data-cy="api documentation-link"
             href="https://nasa-impact.github.io/admg-backend/documentation/api_doc.html"
+            rel="noopener noreferrer"
+            target="_blank"
           >
-            API Documentation
+            <svg
+              height="16"
+              role="img"
+              version="1.1"
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                External Link
+              </title>
+              <rect
+                fill="none"
+                height="16"
+                width="16"
+              />
+              <path
+                d="M3,5h4V3H1v12h12V9h-2v4H3V5z M16,8V0L8,0v2h4.587L6.294,8.294l1.413,1.413L14,3.413V8H16z"
+                fill="#aac9ff"
+              />
+            </svg>
+            <span
+              className="external-link___StyledSpan-sc-3ezy1s-1 bAOjPw"
+            >
+              API Documentation
+            </span>
           </a>
         </li>
       </ul>

src/components/explore/explore-layout.js

@@ -1,28 +1,22 @@
 import React from "react"
 import PropTypes from "prop-types"
 import VisuallyHidden from "@reach/visually-hidden"
-import { useLocation } from "@reach/router"
 
 import Layout, { PageBody } from "../layout"
 import SEO from "../seo"
 import ExploreMenu from "./explore-menu"
 
-export default function ExploreLayout({ filteredCount, children }) {
-  const location = useLocation()
-
-  // pathname is "/explore/:selectedCategory"
-  const selectedCategory = location.pathname.split("/")[2]
-
+export default function ExploreLayout({ category, filteredCount, children }) {
   return (
     <Layout>
       <SEO title="Explore" lang="en" />
       <PageBody id="explore">
         <VisuallyHidden>
-          <h1 data-cy={`h1-${selectedCategory}`}>Explore {selectedCategory}</h1>
+          <h1 data-cy={`h1-${category}`}>Explore {category}</h1>
         </VisuallyHidden>
 
         <ExploreMenu
-          selectedCategory={selectedCategory}
+          selectedCategory={category}
           filteredCount={{
             campaigns: filteredCount?.["campaigns"],
             platforms: filteredCount?.["platforms"],
@@ -48,4 +42,5 @@ ExploreLayout.propTypes = {
     PropTypes.arrayOf(PropTypes.node),
     PropTypes.node,
   ]).isRequired,
+  category: PropTypes.string.isRequired,
 }