hackgvl · oliviasculley · Oct 16, 2023 · Oct 16, 2023 · Oct 16, 2023
diff --git a/cypress.config.ts b/cypress.config.ts
@@ -5,4 +5,11 @@ export default defineConfig({
     specPattern: "cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}",
     baseUrl: "http://localhost:4173/open-map-data-multi-layers-demo/",
   },
+
+  component: {
+    devServer: {
+      framework: "vue",
+      bundler: "vite",
+    },
+  },
 });
diff --git a/cypress/components/ContributionBanner.cy.ts b/cypress/components/ContributionBanner.cy.ts
@@ -0,0 +1,13 @@
+import { setActivePinia, createPinia } from "pinia";
+
+import ContributionBanner from "../../src/components/ContributionBanner.vue";
+
+describe("<ContributionBanner />", () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  it("Renders", () => {
+    cy.mount(ContributionBanner);
+  });
+});
diff --git a/cypress/components/ContributionButton.cy.ts b/cypress/components/ContributionButton.cy.ts
@@ -0,0 +1,8 @@
+import ContributionButton from "../../src/components/ContributionButton.vue";
+
+describe("<ContributionButton />", () => {
+  it("Renders", () => {
+    // see: https://on.cypress.io/mounting-vue
+    cy.mount(ContributionButton);
+  });
+});
diff --git a/cypress/components/tsconfig.json b/cypress/components/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "include": ["./**/*", "../support/**/*"],
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress", "node"]
+  }
+}
diff --git a/cypress/e2e/contribution-banner.cy.ts b/cypress/e2e/contribution-banner.cy.ts
@@ -9,36 +9,36 @@ describe("Contribution Banner", () => {
     cy.visit(url);
 
     cy.contains("We're Open Source!");
-    cy.contains("Click here to contribute")
+    cy.contains("Learn how to contribute")
       .should("have.attr", "href")
       .and("match", /https:\/\/data.openupstate.org\/map-layers/);
   };
 
   const bannerCanBeClosed = (url: string) => {
     cy.visit(url);
 
-    cy.contains("Click here to contribute");
+    cy.contains("Learn how to contribute");
 
     closeBanner();
 
     // Banner should no longer be visible.
-    cy.get("Click here to contribute").should("not.exist");
+    cy.get("Learn how to contribute").should("not.exist");
   };
 
   const bannerRemainsClosedAfterRefresh = (url: string) => {
     cy.visit(url);
 
-    cy.contains("Click here to contribute");
+    cy.contains("Learn how to contribute");
 
     closeBanner();
 
-    cy.get("Click here to contribute").should("not.exist");
+    cy.get("Learn how to contribute").should("not.exist");
 
     // Refresh the page
     cy.reload();
 
     // Banner should still not be visible.
-    cy.get("Click here to contribute").should("not.exist");
+    cy.get("Learn how to contribute").should("not.exist");
   };
 
   describe("Map Page", () => {

diff --git a/cypress/e2e/map.cy.ts b/cypress/e2e/map.cy.ts
@@ -97,19 +97,12 @@ describe("Map", () => {
   });
 
   describe("Attribution Control", () => {
-    it("Attribution control displays the proper message and link", () => {
+    it("Attribution control displays the proper message", () => {
       loadMap("/");
 
       cy.get(".leaflet-control-attribution").contains(
-        "Brought to you by HackGreenville Labs. Click here to contribute!",
+        "Brought to you by HackGreenville Labs.",
       );
-
-      // Get contribution link and ensure that the URL is as expected
-      cy.get(
-        ".leaflet-control-container > div.leaflet-bottom.leaflet-right > div > a:nth-child(2)",
-      )
-        .should("have.attr", "href")
-        .and("match", /https:\/\/data.openupstate.org\/contribute/);
     });
   });
 
@@ -127,7 +120,7 @@ describe("Map", () => {
       cy.get("[title='Maintainers']").trigger("mouseover");
 
       // Contribution button appears
-      cy.contains("Click here to learn how to contribute!")
+      cy.contains("Learn how to contribute!")
         .parent()
         .should("have.attr", "href")
         .and("match", /https:\/\/data.openupstate.org\/map-layers/);

diff --git a/cypress/support/component-index.html b/cypress/support/component-index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>
diff --git a/cypress/support/component.ts b/cypress/support/component.ts
@@ -0,0 +1,42 @@
+// ***********************************************************
+// This example support/component.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import "./commands";
+
+// Import Tailwind Styles
+import "@/assets/style.css";
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+import { mount } from "cypress/vue";
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount;
+    }
+  }
+}
+
+Cypress.Commands.add("mount", mount);
+
+// Example use:
+// cy.mount(MyComponent)
diff --git a/index.html b/index.html
@@ -7,7 +7,7 @@
     <title>Greenville OpenMapData</title>
   </head>
   <body class="bg-slate-900 text-slate-300 h-screen w-screen m-0 p-0">
-    <div id="app" class="h-screen w-screen"></div>
+    <div id="app" class="h-screen w-screen" />
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/src/App.vue b/src/App.vue
@@ -3,6 +3,7 @@ import { useRouter, RouterLink, RouterView } from "vue-router";
 import { useMapStore } from "./stores/map";
 import { useUIStore } from "./stores/ui";
 import ContributionBanner from "./components/ContributionBanner.vue";
+import ContributionButton from "./components/ContributionButton.vue";
 
 const mapStore = useMapStore();
 const uiStore = useUIStore();
@@ -27,20 +28,28 @@ function mapLink() {
 </script>
 
 <template>
-  <div class="h-full w-full pb-12">
+  <div class="h-[calc(100%-3.5rem)] w-full">
     <Transition name="fade">
-      <ContributionBanner v-if="uiStore.showContributionBanner" />
+      <ContributionBanner
+        class="h-[24px]"
+        v-if="uiStore.showContributionBanner"
+      />
     </Transition>
-    <RouterView />
+    <div
+      :class="uiStore.showContributionBanner ? 'h-[calc(100%-24px)]' : 'h-full'"
+    >
+      <RouterView />
+    </div>
   </div>
 
   <header
-    class="fixed bg-gray-800 bottom-0 left-0 right-0 h-12 px-4 py-2 items-stretch"
+    class="fixed bg-gray-800 bottom-0 left-0 right-0 h-14 px-4 py-2 items-stretch"
   >
     <nav
       class="flex justify-between items-center text-xl space-x-4 mx-4 md:mx-8 lg:mx-16"
     >
       <RouterLink class="link" :to="mapLink()">Map</RouterLink>
+      <ContributionButton />
       <RouterLink class="link" to="/about">About</RouterLink>
     </nav>
   </header>

diff --git a/src/components/ContributionBanner.vue b/src/components/ContributionBanner.vue
@@ -25,7 +25,7 @@ const uiStore = useUIStore();
           href="https://data.openupstate.org/map-layers"
           target="_blank"
         >
-          Click here to contribute
+          Learn how to contribute
           <span aria-hidden="true">→</span>
         </a>
       </p>

diff --git a/src/components/ContributionButton.vue b/src/components/ContributionButton.vue
@@ -6,9 +6,9 @@
   >
     <button
       type="button"
-      class="text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2"
+      class="mt-1 text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800 font-medium rounded-lg text-sm px-2 py-1 sm:px-5 sm:py-2 text-center"
     >
-      Click here to learn how to contribute!
+      Learn how to contribute!
     </button>
   </a>
 </template>
diff --git a/src/components/MainMap.vue b/src/components/MainMap.vue
@@ -229,13 +229,13 @@ function toTitleCase(string: string) {
     >
       <l-control-attribution
         position="bottomright"
-        prefix="Brought to you by <a href='https://hackgreenville.com/'>HackGreenville Labs</a>. <a href='https://data.openupstate.org/contribute'>Click here to contribute</a>!"
+        prefix="Brought to you by <a href='https://hackgreenville.com/' target='_blank'>HackGreenville Labs</a>."
       />
       <l-tile-layer
         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         layer-type="base"
         name="OpenStreetMap"
-        attribution="© <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors"
+        attribution="© <a href='https://www.openstreetmap.org/copyright' target='_blank'>OpenStreetMap</a> contributors"
       />
       <MaintainersViewerControl
         v-if="

diff --git a/src/components/MaintainersViewerControl.vue b/src/components/MaintainersViewerControl.vue
@@ -30,7 +30,9 @@ const showMaintainers = ref(false);
       <h1 class="text-slate-950 text-lg sm:text-xl font-bold py-2">
         Maintainers of Active Layers
       </h1>
-      <ContributionButton />
+      <div class="mb-2">
+        <ContributionButton />
+      </div>
       <div
         class="mb-2"
         v-for="(maintainerInfo, name) in mapStore.maintainersOfActiveLayers"

diff --git a/src/views/MapView.vue b/src/views/MapView.vue
@@ -4,6 +4,6 @@ import MainMap from "../components/MainMap.vue";
 
 <template>
   <Suspense>
-    <MainMap class="fixed" />
+    <MainMap />
   </Suspense>
 </template>