Feature/lib gh ci

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,23 @@
+<!-- Add link to JIRA eg: https://digital-vic.atlassian.net/browse/SDPAP- or GitHub Issue Number eg: #123  -->
+
+**Issue**:
+
+### What I did
+<!-- Summary of changes made in the Pull Request  -->
+- 
+- 
+
+### How to test
+<!-- Summary of how to test  -->
+- 
+- 
+
+### Checklist
+<!-- Go over all the following points, and put an `x` in all the boxes that apply. -->
+
+- [ ] I have read the [Ripple documentation](https://www.ripple.sdp.vic.gov.au/framework/) documentation around adding custom functionality.
+- [ ] I have added Cypress integration tests for new content types or components
+- [ ] I have added unit tests for helper functions
+- [ ] This PR requires changes to environment variables which need to be added in https://github.com/dpc-sdp/sdp-cmdb
+
+

.github/workflows/main.yml

@@ -1,18 +1,34 @@
-name: build and test
-
-on:
-  push:
-    branches: [ $default-branch ]
-  pull_request:
-    branches: [ $default-branch ]
-
+name: Build & Test
+on: [push]
 jobs:
-  build:
+  Build-test:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
           node-version: 18
-      - run: npm ci
+      - name: Install Dependencies
+        run: npm ci
+      - run: npm run build
       - run: npm run lint
+      - run: npm run test:unit
+
+  Integration:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Cypress run
+        uses: cypress-io/github-action@v5
+        env:
+          DEBUG: '@cypress/github-action'
+          NUXT_PUBLIC_TIDE_BASE_URL: 'https://develop.content.reference.sdp.vic.gov.au/'
+          NUXT_PUBLIC_TIDE_SITE: '8888'
+          NUXT_PUBLIC_API_URL: 'http://localhost:3001'
+          API_PORT: '3001'
+        with:
+          build: npm run build
+          start: npm start
+          wait-on: 'http://localhost:3000/api/tide/site?id=8888'
+

.gitignore

@@ -4,12 +4,16 @@ node_modules
 nuxt.d.ts
 .output
 .env
-package-lock.json
 framework
 dist
 .DS_Store
 coverage
 
+# Cypress
+cypress/downloads
+cypress/screenshots
+cypress/videos
+
 # Local History
 .history
 

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "endOfLine": "lf",
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "none",
+  "jsxSingleQuote": true
+}

components/TideDemoHeader.vue

@@ -0,0 +1,22 @@
+<template>
+  <RplHeroHeader
+    :behind-nav="true"
+    :breadcrumbs="hasBreadcrumbs"
+    :title="header.title"
+  >
+    <p class="rpl-type-p-large rpl-u-margin-b-4 rpl-u-margin-t-4">
+      {{ header.summary }}
+    </p>
+  </RplHeroHeader>
+</template>
+
+<script setup lang="ts">
+import type { TideDemoHeader } from '../types'
+
+interface Props {
+  header: TideDemoHeader
+  hasBreadcrumbs: boolean
+}
+
+defineProps<Props>()
+</script>

components/global/TideDemo.vue

@@ -0,0 +1,52 @@
+<template>
+  <TideBaseLayout
+    :site="site"
+    :page="page"
+    :site-section="page?.siteSection"
+    :page-title="page.title"
+    :page-language="page.lang"
+    :updated-date="page?.changed || page.created"
+    :show-content-rating="page?.showContentRating"
+  >
+    <template #aboveHeader>
+      <slot name="aboveHeader" />
+    </template>
+    <template #primaryNav>
+      <slot name="primaryNav" />
+    </template>
+    <template #breadcrumbs>
+      <slot name="breadcrumbs" />
+    </template>
+    <template #aboveBody="{ hasBreadcrumbs }">
+      <TideDemoHeader :header="{ title: page.title }" :has-breadcrumbs="hasBreadcrumbs" />
+    </template>
+    <template #body>
+      <h3 class="rpl-type-h3 rpl-u-margin-b-4 rpl-u-margin-t-4">
+        Overview
+      </h3>
+      <TideDynamicComponents
+        v-if="page.bodyComponents?.length > 0"
+        :components="page.bodyComponents"
+      />
+    </template>
+    <template #sidebar>
+      <slot name="sidebar" />
+    </template>
+    <template #footer>
+      <slot name="footer" />
+    </template>
+  </TideBaseLayout>
+</template>
+
+<script setup lang="ts">
+import { TideSiteData } from '@dpc-sdp/ripple-tide-api/types'
+import type { TideDemoPage } from '../../types'
+
+interface Props {
+  site: TideSiteData
+  page: TideDemoPage
+}
+
+defineProps<Props>()
+
+</script>

cypress.config.ts

@@ -0,0 +1,41 @@
+import 'dotenv/config'
+import { defineConfig } from 'cypress'
+import cucumberPreprocessor from '@badeball/cypress-cucumber-preprocessor'
+import cucumberPreprocessorEsBuild from '@badeball/cypress-cucumber-preprocessor/esbuild'
+import * as createBundlerDefault from '@bahmutov/cypress-esbuild-preprocessor'
+import apiMocking from './cypress/support/mockttp'
+const testFolder = './cypress'
+const { addCucumberPreprocessorPlugin } = cucumberPreprocessor
+
+export default defineConfig({
+  env: {
+    searchIndex: process.env.NUXT_PUBLIC_TIDE_APP_SEARCH_ENGINE_NAME
+  },
+  e2e: {
+    baseUrl: 'http://localhost:3000',
+    specPattern: '**/*.{feature,feature.ts}',
+    supportFile: `${testFolder}/support/index.ts`,
+    supportFolder: testFolder,
+    downloadsFolder: `${testFolder}/downloads`,
+    fixturesFolder: `${testFolder}/fixtures`,
+    videosFolder: `${testFolder}/videos`,
+    screenshotsFolder: `${testFolder}/screenshots`,
+    async setupNodeEvents (
+      on: Cypress.PluginEvents,
+      config: Cypress.PluginConfigOptions
+    ): Promise<Cypress.PluginConfigOptions> {
+      await addCucumberPreprocessorPlugin(on, config)
+      const createBundler = createBundlerDefault.default
+      on(
+        'file:preprocessor',
+        createBundler({
+          plugins: [cucumberPreprocessorEsBuild.createEsbuildPlugin(config)]
+        })
+      )
+      on('task', { ...apiMocking })
+
+      return config
+    }
+  },
+  blockHosts: ['*youtube.com', '*doubleclick.net']
+})

cypress/e2e/demo/demo.feature

@@ -0,0 +1,12 @@
+Feature: Demo test
+
+  Example test - update as required or delete.
+
+  Background:
+    Given the endpoint "/api/tide/page" with query "?path=/test-content-type&site=8888" returns fixture "/demo/demo" with status 200
+    And the endpoint "/api/tide/site" with query "?id=8888" returns fixture "/site/reference" with status 200
+    When I visit the page "/test-content-type"
+
+  @mockserver
+  Scenario: On load
+    Then the title should be "Demo page"

cypress/fixtures/demo/demo.json

@@ -0,0 +1,38 @@
+{
+  "title": "Demo page",
+  "changed": "2023-06-26T13:00:03+00:00",
+  "created": "2023-05-29T05:00:04+00:00",
+  "type": "demo",
+  "nid": "fd6a7e29-8afa-467f-9a17-7d2572c6e7ea",
+  "sidebar": {},
+  "status": null,
+  "topicTags": [],
+  "siteSection": null,
+  "showContentRating": true,
+  "header": {
+    "title": "Demo page",
+    "summary": "Nulla ultricies dignissim leo, posuere vestibulum erat cursus vitae"
+  },
+  "bodyComponents": [
+    {
+      "uuid": "a99aa287-7fac-430b-864e-3a1b044460b1",
+      "component": "TideLandingPageContent",
+      "id": "969",
+      "internalAnchors": [
+        {
+          "text": "Content Anchor 1",
+          "id": "content-anchor-1",
+          "type": "h2"
+        },
+        {
+          "text": "Content Anchor 2",
+          "id": "content-anchor-2",
+          "type": "h3"
+        }
+      ],
+      "props": {
+        "html": "<p>Here is <em>some</em> sample <strong>rich</strong> text content</p>"
+      }
+    }
+  ]
+}