Display previews

jest-preprocess.js

@@ -0,0 +1,3 @@
+module.exports = require('babel-jest').createTransformer({
+  presets: ['babel-preset-gatsby', '@emotion/babel-preset-css-prop'],
+});

jest.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  transform: {
+    '^.+\\.js$': '<rootDir>/jest-preprocess.js',
+  },
+  testPathIgnorePatterns: ['node_modules', '\\.cache/'],
+  globals: {
+    __PATH_PREFIX__: '',
+  },
+  transformIgnorePatterns: ['node_modules/(?!(gatsby||gatsby-plugin-mdx)/)'],
+  setupFiles: ['<rootDir>/loadershim.js'],
+  setupFilesAfterEnv: ['<rootDir>/setup-test-env.js'],
+  moduleNameMapper: {
+    '^@reach/router(.*)': '<rootDir>/node_modules/@gatsbyjs/reach-router$1',
+    '^gatsby-page-utils/(.*)$': `gatsby-page-utils/dist/$1`,
+  },
+};

loadershim.js

@@ -0,0 +1,3 @@
+global.___loader = {
+  enqueue: jest.fn(),
+}

package.json

@@ -53,16 +53,19 @@
     "use-query-params": "^1.2.2"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.17.12",
+    "@emotion/jest": "^11.9.1",
     "@newrelic/eslint-plugin-newrelic": "^0.3.1",
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/commit-analyzer": "^9.0.2",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/github": "^8.0.4",
     "@semantic-release/release-notes-generator": "^10.0.3",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.2.0",
+    "@testing-library/react-hooks": "^8.0.0",
     "babel-jest": "^26.0.1",
     "babel-preset-gatsby": "^1.0.0",
-    "jest": "^28.1.0",
+    "jest": "^26.4.0",
     "prettier": "2.2.1"
   }
 }

setup-test-env.js

@@ -0,0 +1,12 @@
+/* global expect */
+import { createSerializer, matchers } from '@emotion/jest';
+import * as emotion from '@emotion/react';
+import '@testing-library/jest-dom';
+
+expect.extend(matchers);
+expect.addSnapshotSerializer(createSerializer(emotion));
+
+global.ResizeObserver = class ResizeObserver {
+  observe = jest.fn();
+  disconnect = jest.fn();
+};

src/data/constants.js

@@ -139,3 +139,6 @@ export const GITHUB_API_BASE_URL =
 
 export const GITHUB_API_PULL_URL =
   'https://api.github.com/repos/newrelic/newrelic-quickstarts/pulls';
+
+export const QUICKSTART_REPO_URL =
+  'https://github.com/newrelic/newrelic-quickstarts/tree/main/quickstarts';

src/hooks/useLocalhostQuickstart.js

@@ -1,11 +1,11 @@
 import { useEffect, useState } from 'react';
 
 import { getQuickstartFilesFromLocal } from '../utils/preview/fetchHelpers';
-//import { parseQuickstartFiles } from '../utils/preview/parseHelpers';
+import { parseRawQuickstartFiles } from '../utils/preview/parseHelpers';
 import { navigate } from 'gatsby';
 
 const useLocalhostQuickstart = (location) => {
-  const [quickstart, setQuickstart] = useState([]);
+  const [quickstart, setQuickstart] = useState();
 
   useEffect(() => {
     const urlParams = new URLSearchParams(location.search);
@@ -21,15 +21,14 @@ const useLocalhostQuickstart = (location) => {
       try {
         rawFileContent = await getQuickstartFilesFromLocal(port);
       } catch (err) {
+        console.log(err.message);
+        console.log('Please make sure your local preview server is running.')
         navigate('/');
         return;
       }
-      /**
-       * TODO: Uncomment these lines and delete setQuickstart(rawFileContent) once parsing is complete
-       */
-      //const quickstart = await parseQuickstartFiles(rawFileContent);
-      //setQuickstart(quickstart);
-      setQuickstart(rawFileContent);
+
+      const quickstart = await parseRawQuickstartFiles(rawFileContent);
+      setQuickstart(quickstart);
     };
 
     fetchFiles();
@@ -38,4 +37,4 @@ const useLocalhostQuickstart = (location) => {
   return quickstart;
 };
 
-export default useLocalhostQuickstart;
+export default useLocalhostQuickstart;

src/hooks/usePullRequestQuickstart.js

@@ -1,11 +1,11 @@
 import { useEffect, useState } from 'react';
 
 import { getQuickstartFilesFromPR } from '../utils/preview/fetchHelpers';
-import { parseQuickstartFilesFromPR } from '../utils/preview/parseHelpers';
+import { parseRawQuickstartFiles } from '../utils/preview/parseHelpers';
 import { navigate } from 'gatsby';
 
 const usePullRequestQuickstart = (location) => {
-  const [quickstart, setQuickstart] = useState([]);
+  const [quickstart, setQuickstart] = useState();
 
   useEffect(() => {
     // grab query parameters to determine if it is a local preview or
@@ -32,7 +32,7 @@ const usePullRequestQuickstart = (location) => {
           quickstartPath
         );
 
-        const parsedQuickstart = parseQuickstartFilesFromPR(rawFileContent);
+        const parsedQuickstart = parseRawQuickstartFiles(rawFileContent);
 
         setQuickstart(parsedQuickstart);
       } catch (error) {

src/pages/preview.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
+import QuickstartDetails from '../templates/QuickstartDetails.js';
+import { Spinner } from '@newrelic/gatsby-theme-newrelic';
 import usePullRequestQuickstart from '../hooks/usePullRequestQuickstart';
 import useLocalhostQuickstart from '../hooks/useLocalhostQuickstart';
 
@@ -14,8 +15,9 @@ const PreviewPage = ({ location }) => {
     contentFiles = usePullRequestQuickstart(location);
   }
 
-  console.log('Parsed quickstart content:', contentFiles);
-  return <span>oh hai</span>;
+  const data = { quickstarts: contentFiles };
+
+  return !contentFiles ? <Spinner /> : <QuickstartDetails data={data} location={location} />;
 };
 
 PreviewPage.propTypes = {

src/utils/__tests__/parseHelpers.test.js

@@ -1,5 +1,5 @@
-const parseHelpers = require('../preview/parseHelpers');
-const {
+import * as parseHelpers from '../preview/parseHelpers';
+import {
   expectedConfigOutput,
   missingConfigOutput,
   configContentMissingFields,
@@ -12,9 +12,7 @@ const {
   installPlansOutput,
   documentationInput,
   documentationOutput,
-} = require('../mock_data/content');
-
-console.log(baseFiles);
+} from '../mock_data/content';
 
 describe('parseHelpers', () => {
   afterEach(() => {

src/utils/mock_data/content.js

@@ -1,15 +1,15 @@
-const installPlansContent = `
+export const installPlansContent = `
 installPlans:
   - guided-install
 `;
 
-const configContent = `
+export const configContent = `
 id: generic-quickstart-id-1
 slug: quickstart-slug
 description: example description 
 summary: example summary 
 icon: logo.png
-level: New Relic 
+level: NEW_RELIC
 authors:
   - New Relic
 title: Generic Quickstart
@@ -20,12 +20,12 @@ keywords:
 ${installPlansContent}
 `;
 
-const configContentMissingFields = `
+export const configContentMissingFields = `
 id: generic-quickstart-id-1
 slug: quickstart-slug
 description: example description 
 icon: logo.png
-level: New Relic 
+level: NEW_RELIC 
 authors:
   - New Relic
 keywords:
@@ -35,19 +35,19 @@ keywords:
 ${installPlansContent}
 `;
 
-const dashboardContent = {
+export const dashboardContent = {
   name: 'mock dashboard name',
   description: 'mock dashboard description',
 };
 
-const missingConfigOutput = {
+export const missingConfigOutput = {
   title: 'Generic Quickstart',
   summary: 'example summary',
 };
 
-const installPlansInput = ['guided-install'];
+export const installPlansInput = ['guided-install'];
 
-const documentationInput = [
+export const documentationInput = [
   {
     name: 'Kamon installation docs',
     description:
@@ -57,7 +57,7 @@ const documentationInput = [
   },
 ];
 
-const documentationOutput = [
+export const documentationOutput = [
   {
     name: 'Kamon installation docs',
     description:
@@ -67,22 +67,22 @@ const documentationOutput = [
   },
 ];
 
-const installPlansOutput = [
+export const installPlansOutput = [
   {
     name: '',
     id: 'guided-install',
   },
 ];
 
-const expectedConfigOutput = {
+export const expectedConfigOutput = {
   title: 'Generic Quickstart',
   name: 'quickstart-slug',
   description: 'example description',
   packUrl:
     'https://github.com/newrelic/newrelic-quickstarts/tree/main/quickstarts/mock_quickstart_1',
 
   id: 'generic-quickstart-id-1',
-  level: 'New Relic',
+  level: 'NEW_RELIC',
   logoUrl: 'fake/path/to/logo.png',
   summary: 'example summary',
   keywords: ['os', 'operating system'],
@@ -92,7 +92,7 @@ const expectedConfigOutput = {
   installPlans: installPlansOutput,
 };
 
-const baseFiles = (content) => [
+export const baseFiles = (content) => [
   {
     type: 'yaml',
     filePath: 'mock_quickstart_1/config.yml',
@@ -107,7 +107,7 @@ const baseFiles = (content) => [
   },
 ];
 
-const dashboardFiles = (content) => [
+export const dashboardFiles = (content) => [
   {
     type: 'json',
     filePath:
@@ -131,7 +131,7 @@ const dashboardFiles = (content) => [
   },
 ];
 
-const expectedDashboardOutput = [
+export const expectedDashboardOutput = [
   {
     name: 'mock dashboard name',
     description: 'mock dashboard description',
@@ -141,19 +141,3 @@ const expectedDashboardOutput = [
     ],
   },
 ];
-
-module.exports = {
-  installPlansContent,
-  configContent,
-  configContentMissingFields,
-  dashboardContent,
-  expectedConfigOutput,
-  missingConfigOutput,
-  baseFiles,
-  dashboardFiles,
-  expectedDashboardOutput,
-  installPlansInput,
-  installPlansOutput,
-  documentationInput,
-  documentationOutput,
-};