[Release] External resource links, E2E testing setup

README.md

@@ -12,6 +12,7 @@ Créer, conserver et maintenir un espace centralisé pour partager les apprentis
 
 # Quick links 🔗
 - [Overview](#overview)
+- [Infrastructure and Deployment](#infrastructure-and-deployment)
 - [Local Development](#local-development)
 - [Frequently Asked Questions](#frequently-asked-questions)
 
@@ -34,6 +35,9 @@ _Note: We are not actively using storybook right now, so this feature and corres
 Storybook is integrated in this app to make UI components easier to manage and to be explored. 
 To run storybook locally, simply type `npm run storybook` which makes it available at [http://localhost:3003/](http://localhost:3003/)
 
+# Infrastructure and Deployment
+Documentation on infrastructure and deployment can be found on [our ressources-terraform repository](https://github.com/cds-snc/resources-terraform/tree/main/infrastructure)
+
 # Local Development
 
 **Prerequisites**

app/components/PageContents.vue

@@ -3,7 +3,7 @@
 <template>
   <div
     v-if="hasHeadings"
-    class="border-y border-solid border-gray-300 sticky top-16 -mx-5 bg-white text-gray-800"
+    class="border-y border-solid border-gray-300 sticky top-16 -mx-5 bg-white text-gray-800 z-50"
     :class="{
       'shadow-xl': isShowPageContents,
       'rounded-b-2xl': isShowPageContents,

app/components/list-items/ExternalResourceListItem.vue

@@ -0,0 +1,57 @@
+<!-- Component View ================================================================================================-->
+
+<template>
+  <li>
+    <a
+      class="group h-36 flex p-5 rounded-3xl bg-gray-100 group cursor-pointer active:bg-indigo-600"
+      :href="externalResource.url"
+      target="_blank"
+    >
+      <div class="flex flex-col justify-between grow">
+        <h3 class="text-xl font-medium mb-2 group-active:text-indigo-50">
+          {{ externalResource.title }}
+        </h3>
+
+        <p>
+          <small
+            class="flex items-center text-sm text-gray-700 group-active:text-indigo-100"
+          >
+            {{ externalResource.resourceType }}
+            ⋅
+            {{ externalResource.source }}
+          </small>
+        </p>
+      </div>
+
+      <div class="flex-none w-14 text-end">
+        <font-awesome-icon
+          icon="arrow-right"
+          size="3x"
+          class="ml-1.5 text-gray-200 group-hover:text-cds-yellow -rotate-45 z-0 group-hover:translate-x-1 group-hover:-translate-y-1 duration-200"
+          role="img"
+          :aria-label="$t('external_link')"
+        >
+        </font-awesome-icon>
+      </div>
+    </a>
+  </li>
+</template>
+
+<!-- Component Logic ===============================================================================================-->
+
+<script lang="ts">
+import Vue from 'vue'
+import Component from 'vue-class-component'
+
+/* Props */
+const ExternalResourceListItemProps = Vue.extend({
+  props: {
+    externalResource: {
+      required: true,
+    },
+  },
+})
+
+@Component
+export default class ExternalResourceListItem extends ExternalResourceListItemProps {}
+</script>

app/cypress.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  e2e: {
+    // setupNodeEvents(on, config) {
+    //   // implement node event listeners here
+    // },
+    baseUrl: 'http://localhost:3000',
+  },
+})

app/cypress/e2e/homepage.cy.js

@@ -0,0 +1,11 @@
+context('Assertions', () => {
+  // beforeEach(() => {
+  //   cy.visit('http://localhost:3000') // change URL to match your dev URL
+  // })
+
+  describe('The Home Page', () => {
+    it('successfully loads', () => {
+      cy.visit('/') // change URL to match your dev URL
+    })
+  })
+})

app/cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }