chore: add tests for dynamic open graph tags

apps/studio-next/jest.config.ts

@@ -0,0 +1,24 @@
+import type { Config } from 'jest';
+import nextJest from 'next/jest.js';
+
+const createJestConfig = nextJest();
+const config: Config = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  transform: {
+    '^.+\\.(ts|tsx)?$': 'ts-jest',
+    '^.+\\.yml$': 'jest-transform-yaml',
+    '^.+\\.yaml$': 'jest-transform-yaml',
+  },
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1',
+  },
+};
+
+const asyncConfig = createJestConfig(config);
+
+module.exports = async () => {
+  const config = await asyncConfig();
+  config.transformIgnorePatterns = ['node_modules/.pnpm/(?!@asyncapi/react-component|monaco-editor)/'];
+  return config;
+}

apps/studio-next/package.json

@@ -6,6 +6,7 @@
     "dev": "next dev -p 3001",
     "build": "next build",
     "start": "next start",
+    "test:unit": "jest",
     "lint": "echo 'No linting configured'"
   },
   "dependencies": {
@@ -16,33 +17,39 @@
     "@asyncapi/protobuf-schema-parser": "^3.2.8",
     "@asyncapi/react-component": "^1.2.2",
     "@asyncapi/specs": "^6.5.4",
+    "@codemirror/view": "^6.26.3",
     "@ebay/nice-modal-react": "^1.2.10",
     "@headlessui/react": "^1.7.4",
     "@hookstate/core": "^4.0.0-rc21",
     "@monaco-editor/react": "^4.4.6",
-    "@tippyjs/react": "^4.2.6",
-    "js-base64": "^3.7.3",
-    "js-file-download": "^0.4.12",
-    "js-yaml": "^4.1.0",
-    "monaco-editor": "0.34.1",
-    "monaco-yaml": "4.0.2",
-    "react-hot-toast": "2.4.0",
-    "react-icons": "^4.6.0",
-    "reactflow": "^11.2.0",
     "@stoplight/yaml": "^4.3.0",
-    "@codemirror/view": "^6.26.3",
+    "@testing-library/dom": "^10.4.0",
+    "@tippyjs/react": "^4.2.6",
     "@types/node": "20.4.6",
     "@types/react": "18.2.18",
     "@types/react-dom": "18.2.7",
     "autoprefixer": "10.4.14",
+    "axios": "^1.7.4",
+    "cheerio": "^1.0.0",
     "codemirror": "^6.0.1",
     "eslint-config-next": "13.4.12",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "js-base64": "^3.7.3",
+    "js-file-download": "^0.4.12",
+    "js-yaml": "^4.1.0",
+    "monaco-editor": "0.34.1",
+    "monaco-yaml": "4.0.2",
     "next": "14.2.3",
     "postcss": "8.4.31",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-hot-toast": "2.4.0",
+    "react-icons": "^4.6.0",
+    "reactflow": "^11.2.0",
     "tailwindcss": "3.3.3",
     "tippy.js": "^6.3.7",
+    "ts-jest": "^29.2.5",
     "typescript": "5.1.6",
     "zustand": "^4.5.2"
   },
@@ -62,7 +69,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^29.2.3",
+    "@types/jest": "^29.5.12",
     "@types/js-yaml": "^4.0.5",
     "@types/json-schema": "^7.0.11",
     "@types/node": "^18.11.9",
@@ -76,6 +83,9 @@
     "eslint-plugin-security": "^1.5.0",
     "eslint-plugin-sonarjs": "^0.16.0",
     "https-browserify": "^1.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-transform-yaml": "^1.1.2",
     "markdown-toc": "^1.2.0",
     "path-browserify": "^1.0.1",
     "postcss": "^8.4.31",

apps/studio-next/src/helpers/tests/fetchogtags.ts

@@ -0,0 +1,26 @@
+import axios from 'axios';
+import * as cheerio from 'cheerio';
+
+export async function fetchOpenGraphTags(url: string, userAgent: string) {
+    try {
+        const { data } = await axios.get(url, {
+            headers: {
+                'User-Agent': userAgent
+            }
+        });
+        console.log("the data is", data)
+        const $ = cheerio.load(data);
+        const ogTags: { [key: string]: string } = {};
+
+        $('meta').each((_, element) => {
+            const property = $(element).attr('property');
+            if (property && property.startsWith('og:')) {
+                ogTags[property] = $(element).attr('content') || '';
+            }
+        });
+
+        return ogTags;
+    } catch (error) {
+        console.error(error);
+    }
+}

apps/studio-next/src/helpers/tests/og.test.ts

@@ -0,0 +1,60 @@
+import { fetchOpenGraphTags } from './fetchogtags';
+
+// list of sample crawlers to test with
+const facebookCrawler = 'facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)';
+const XCrawler = 'Twitterbot/1.0';
+const SlackCrawler = 'Slackbot-LinkExpanding 1.0 (+https://api.slack.com/robots)';
+
+// Testing with base64 query param
+const base64url = "https://studio-studio-next.vercel.app/?base64=YXN5bmNhcGk6IDMuMC4wCmluZm86CiAgdGl0bGU6IEFjY291bnQgU2VydmljZQogIHZlcnNpb246IDEuMC4wCiAgZGVzY3JpcHRpb246IFRoaXMgc2VydmljZSBpcyBpbiBjaGFyZ2Ugb2YgcHJvY2Vzc2luZyB1c2VyIHNpZ251cHMKY2hhbm5lbHM6CiAgdXNlclNpZ25lZHVwOgogICAgYWRkcmVzczogdXNlci9zaWduZWR1cAogICAgbWVzc2FnZXM6CiAgICAgIFVzZXJTaWduZWRVcDoKICAgICAgICAkcmVmOiAnIy9jb21wb25lbnRzL21lc3NhZ2VzL1VzZXJTaWduZWRVcCcKb3BlcmF0aW9uczoKICBzZW5kVXNlclNpZ25lZHVwOgogICAgYWN0aW9uOiBzZW5kCiAgICBjaGFubmVsOgogICAgICAkcmVmOiAnIy9jaGFubmVscy91c2VyU2lnbmVkdXAnCiAgICBtZXNzYWdlczoKICAgICAgLSAkcmVmOiAnIy9jaGFubmVscy91c2VyU2lnbmVkdXAvbWVzc2FnZXMvVXNlclNpZ25lZFVwJwpjb21wb25lbnRzOgogIG1lc3NhZ2VzOgogICAgVXNlclNpZ25lZFVwOgogICAgICBwYXlsb2FkOgogICAgICAgIHR5cGU6IG9iamVjdAogICAgICAgIHByb3BlcnRpZXM6CiAgICAgICAgICBkaXNwbGF5TmFtZToKICAgICAgICAgICAgdHlwZTogc3RyaW5nCiAgICAgICAgICAgIGRlc2NyaXB0aW9uOiBOYW1lIG9mIHRoZSB1c2VyCiAgICAgICAgICBlbWFpbDoKICAgICAgICAgICAgdHlwZTogc3RyaW5nCiAgICAgICAgICAgIGZvcm1hdDogZW1haWwKICAgICAgICAgICAgZGVzY3JpcHRpb246IEVtYWlsIG9mIHRoZSB1c2Vy";
+const accountServiceTags = {
+    "og:title": 'Account Service',
+    "og:description": 'This service is in charge of processing user signups',
+    "og:image": 'https://ogp-studio.vercel.app/api/og?title=Account+Service&description=This+service+is+in+charge+of+processing+user+signups&numChannels=1&numOperations=1&numMessages=1'
+}
+
+describe('Testing the document with base64 query parameter for various open graph crawlers', () => {
+    jest.setTimeout(30000);
+
+    test('Test Open Graph tags for Facebook', async () => {
+        const openGraphTags = await fetchOpenGraphTags(base64url, facebookCrawler);
+        expect(openGraphTags).toEqual(accountServiceTags);
+    });
+
+    test('Test Open Graph tags for X', async () => {
+        const openGraphTags = await fetchOpenGraphTags(base64url, XCrawler);
+        expect(openGraphTags).toEqual(accountServiceTags);
+    });
+
+    test('Test Open Graph tags for Slack', async () => {
+        const openGraphTags = await fetchOpenGraphTags(base64url, SlackCrawler);
+        expect(openGraphTags).toEqual(accountServiceTags);
+    });
+})
+
+// Testing with url query param
+const externalDocUrl = 'https://studio-studio-next.vercel.app/?url=https://raw.githubusercontent.com/asyncapi/spec/master/examples/mercure-asyncapi.yml';
+const mercurHubTags = {
+    "og:title": 'Mercure Hub Example',
+    "og:description": 'This example demonstrates how to define a Mercure hub.',
+    "og:image": 'https://ogp-studio.vercel.app/api/og?title=Mercure+Hub+Example&description=This+example+demonstrates+how+to+define+a+Mercure+hub.&numServers=1&numChannels=1&numOperations=2&numMessages=1'
+}
+
+describe('Testing the document with url query parameter for various open graph crawlers', () => {
+    jest.setTimeout(30000);
+
+    test('Test Open Graph tags for Facebook', async () => {
+        const openGraphTags = await fetchOpenGraphTags(externalDocUrl, facebookCrawler);
+        expect(openGraphTags).toEqual(mercurHubTags);
+    });
+
+    test('Test Open Graph tags for X', async () => {
+        const openGraphTags = await fetchOpenGraphTags(externalDocUrl, XCrawler);
+        expect(openGraphTags).toEqual(mercurHubTags);
+    });
+
+    test('Test Open Graph tags for Slack', async () => {
+        const openGraphTags = await fetchOpenGraphTags(externalDocUrl, SlackCrawler);
+        expect(openGraphTags).toEqual(mercurHubTags);
+    });
+})

apps/studio-next/tsconfig.json

@@ -12,7 +12,7 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
@@ -21,8 +21,9 @@
     ],
     "paths": {
       "@/*": ["./src/*", "./public/*"]
-    }
+    },
+    "baseUrl": "."
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/services/tests/**/*.ts", "src/helpers/tests/**/*.ts"],
   "exclude": ["node_modules"]
 }