From 32cff76d39f3f589ced32c9039eacb4c1ab9bc29 Mon Sep 17 00:00:00 2001
From: Leonardo Zizzamia <leonardo.zizzamia@gmail.com>
Date: Thu, 8 Feb 2024 13:56:57 -0800
Subject: [PATCH] tests

---
 .changeset/clever-maps-marry.md       |   1 +
 src/components/FrameMetadata.test.tsx | 108 ++++++++++++++++----------
 src/core/getFrameHtmlResponse.test.ts |  72 ++++++++++-------
 src/core/getFrameHtmlResponse.ts      |  22 +++---
 4 files changed, 118 insertions(+), 85 deletions(-)

diff --git a/.changeset/clever-maps-marry.md b/.changeset/clever-maps-marry.md
index ac80d87154..86d81046f0 100644
--- a/.changeset/clever-maps-marry.md
+++ b/.changeset/clever-maps-marry.md
@@ -3,3 +3,4 @@
 ---
 
 - **feat**: all `FrameMetadataType` parameters have been updated to use consistent lowerCamelCase. It's important to note that we are not deprecating the old method, at least for a few weeks, to allow time for migration to the new approach. By @zizzamia #106
+- **feat**: while there is no real issue in using either `property` or `name` as the standard for a metadata element, it is fair to respect the Open Graph specification, which originally uses `property`. By @zizzamia #106
diff --git a/src/components/FrameMetadata.test.tsx b/src/components/FrameMetadata.test.tsx
index 1a924fb338..bcd936479b 100644
--- a/src/components/FrameMetadata.test.tsx
+++ b/src/components/FrameMetadata.test.tsx
@@ -13,7 +13,7 @@ describe('FrameMetadata', () => {
   it('renders with image', () => {
     const meta = render(<FrameMetadata image="https://example.com/image.png" />);
     expect(
-      meta.container.querySelector('meta[name="fc:frame:image"]')?.getAttribute('content'),
+      meta.container.querySelector('meta[property="fc:frame:image"]')?.getAttribute('content'),
     ).toBe('https://example.com/image.png');
     expect(meta.container.querySelectorAll('meta').length).toBe(2);
   });
@@ -22,9 +22,9 @@ describe('FrameMetadata', () => {
     const meta = render(
       <FrameMetadata image="https://example.com/image.png" input={{ text: 'test' }} />,
     );
-    expect(meta.container.querySelector('meta[name="fc:frame:input:text"]')).not.toBeNull();
+    expect(meta.container.querySelector('meta[property="fc:frame:input:text"]')).not.toBeNull();
     expect(
-      meta.container.querySelector('meta[name="fc:frame:input:text"]')?.getAttribute('content'),
+      meta.container.querySelector('meta[property="fc:frame:input:text"]')?.getAttribute('content'),
     ).toBe('test');
     expect(meta.container.querySelectorAll('meta').length).toBe(3);
   });
@@ -37,20 +37,22 @@ describe('FrameMetadata', () => {
       />,
     );
     // Button 1
-    expect(meta.container.querySelector('meta[name="fc:frame:button:1"]')).not.toBeNull();
+    expect(meta.container.querySelector('meta[property="fc:frame:button:1"]')).not.toBeNull();
     expect(
-      meta.container.querySelector('meta[name="fc:frame:button:1"]')?.getAttribute('content'),
+      meta.container.querySelector('meta[property="fc:frame:button:1"]')?.getAttribute('content'),
     ).toBe('button1');
-    expect(meta.container.querySelector('meta[name="fc:frame:button:1:action"]')).toBeNull();
+    expect(meta.container.querySelector('meta[property="fc:frame:button:1:action"]')).toBeNull();
     // Button 2
-    expect(meta.container.querySelector('meta[name="fc:frame:button:2"]')).not.toBeNull();
+    expect(meta.container.querySelector('meta[property="fc:frame:button:2"]')).not.toBeNull();
     expect(
-      meta.container.querySelector('meta[name="fc:frame:button:2"]')?.getAttribute('content'),
+      meta.container.querySelector('meta[property="fc:frame:button:2"]')?.getAttribute('content'),
     ).toBe('button2');
-    expect(meta.container.querySelector('meta[name="fc:frame:button:2:action"]')).not.toBeNull();
+    expect(
+      meta.container.querySelector('meta[property="fc:frame:button:2:action"]'),
+    ).not.toBeNull();
     expect(
       meta.container
-        .querySelector('meta[name="fc:frame:button:2:action"]')
+        .querySelector('meta[property="fc:frame:button:2:action"]')
         ?.getAttribute('content'),
     ).toBe('post_redirect');
     // Length
@@ -70,54 +72,64 @@ describe('FrameMetadata', () => {
       />,
     );
     // Button 1
-    expect(meta.container.querySelector('meta[name="fc:frame:button:1"]')).not.toBeNull();
+    expect(meta.container.querySelector('meta[property="fc:frame:button:1"]')).not.toBeNull();
     expect(
-      meta.container.querySelector('meta[name="fc:frame:button:1"]')?.getAttribute('content'),
+      meta.container.querySelector('meta[property="fc:frame:button:1"]')?.getAttribute('content'),
     ).toBe('button1');
-    expect(meta.container.querySelector('meta[name="fc:frame:button:1:action"]')).toBeNull();
+    expect(meta.container.querySelector('meta[property="fc:frame:button:1:action"]')).toBeNull();
     // Button 2
-    expect(meta.container.querySelector('meta[name="fc:frame:button:2"]')).not.toBeNull();
+    expect(meta.container.querySelector('meta[property="fc:frame:button:2"]')).not.toBeNull();
     expect(
-      meta.container.querySelector('meta[name="fc:frame:button:2"]')?.getAttribute('content'),
+      meta.container.querySelector('meta[property="fc:frame:button:2"]')?.getAttribute('content'),
     ).toBe('button2');
-    expect(meta.container.querySelector('meta[name="fc:frame:button:2:action"]')).not.toBeNull();
+    expect(
+      meta.container.querySelector('meta[property="fc:frame:button:2:action"]'),
+    ).not.toBeNull();
     expect(
       meta.container
-        .querySelector('meta[name="fc:frame:button:2:action"]')
+        .querySelector('meta[property="fc:frame:button:2:action"]')
         ?.getAttribute('content'),
     ).toBe('post_redirect');
     // Button 3
-    expect(meta.container.querySelector('meta[name="fc:frame:button:3"]')).not.toBeNull();
+    expect(meta.container.querySelector('meta[property="fc:frame:button:3"]')).not.toBeNull();
     expect(
-      meta.container.querySelector('meta[name="fc:frame:button:3"]')?.getAttribute('content'),
+      meta.container.querySelector('meta[property="fc:frame:button:3"]')?.getAttribute('content'),
     ).toBe('button3');
-    expect(meta.container.querySelector('meta[name="fc:frame:button:3:action"]')).not.toBeNull();
+    expect(
+      meta.container.querySelector('meta[property="fc:frame:button:3:action"]'),
+    ).not.toBeNull();
     expect(
       meta.container
-        .querySelector('meta[name="fc:frame:button:3:action"]')
+        .querySelector('meta[property="fc:frame:button:3:action"]')
         ?.getAttribute('content'),
     ).toBe('mint');
-    expect(meta.container.querySelector('meta[name="fc:frame:button:3:target"]')).not.toBeNull();
+    expect(
+      meta.container.querySelector('meta[property="fc:frame:button:3:target"]'),
+    ).not.toBeNull();
     expect(
       meta.container
-        .querySelector('meta[name="fc:frame:button:3:target"]')
+        .querySelector('meta[property="fc:frame:button:3:target"]')
         ?.getAttribute('content'),
     ).toBe('https://zizzamia.xyz/api/frame/mint');
     // Button 4
-    expect(meta.container.querySelector('meta[name="fc:frame:button:4"]')).not.toBeNull();
+    expect(meta.container.querySelector('meta[property="fc:frame:button:4"]')).not.toBeNull();
     expect(
-      meta.container.querySelector('meta[name="fc:frame:button:4"]')?.getAttribute('content'),
+      meta.container.querySelector('meta[property="fc:frame:button:4"]')?.getAttribute('content'),
     ).toBe('button4');
-    expect(meta.container.querySelector('meta[name="fc:frame:button:4:action"]')).not.toBeNull();
+    expect(
+      meta.container.querySelector('meta[property="fc:frame:button:4:action"]'),
+    ).not.toBeNull();
     expect(
       meta.container
-        .querySelector('meta[name="fc:frame:button:4:action"]')
+        .querySelector('meta[property="fc:frame:button:4:action"]')
         ?.getAttribute('content'),
     ).toBe('link');
-    expect(meta.container.querySelector('meta[name="fc:frame:button:4:target"]')).not.toBeNull();
+    expect(
+      meta.container.querySelector('meta[property="fc:frame:button:4:target"]'),
+    ).not.toBeNull();
     expect(
       meta.container
-        .querySelector('meta[name="fc:frame:button:4:target"]')
+        .querySelector('meta[property="fc:frame:button:4:target"]')
         ?.getAttribute('content'),
     ).toBe('https://zizzamia.xyz/api/frame/link');
     // Length
@@ -128,9 +140,9 @@ describe('FrameMetadata', () => {
     const meta = render(
       <FrameMetadata image="https://example.com/image.png" post_url="https://example.com" />,
     );
-    expect(meta.container.querySelector('meta[name="fc:frame:post_url"]')).not.toBeNull();
+    expect(meta.container.querySelector('meta[property="fc:frame:post_url"]')).not.toBeNull();
     expect(
-      meta.container.querySelector('meta[name="fc:frame:post_url"]')?.getAttribute('content'),
+      meta.container.querySelector('meta[property="fc:frame:post_url"]')?.getAttribute('content'),
     ).toBe('https://example.com');
     expect(meta.container.querySelectorAll('meta').length).toBe(3);
   });
@@ -139,9 +151,11 @@ describe('FrameMetadata', () => {
     const meta = render(
       <FrameMetadata image="https://example.com/image.png" refresh_period={10} />,
     );
-    expect(meta.container.querySelector('meta[name="fc:frame:refresh_period"]')).not.toBeNull();
+    expect(meta.container.querySelector('meta[property="fc:frame:refresh_period"]')).not.toBeNull();
     expect(
-      meta.container.querySelector('meta[name="fc:frame:refresh_period"]')?.getAttribute('content'),
+      meta.container
+        .querySelector('meta[property="fc:frame:refresh_period"]')
+        ?.getAttribute('content'),
     ).toBe('10');
     expect(meta.container.querySelectorAll('meta').length).toBe(3);
   });
@@ -155,7 +169,7 @@ describe('FrameMetadata', () => {
     );
 
     expect(meta.container.querySelector('#wrapper')).not.toBeNull();
-    expect(meta.container.querySelector('meta[name="fc:frame:image"]')).not.toBeNull();
+    expect(meta.container.querySelector('meta[property="fc:frame:image"]')).not.toBeNull();
     expect(meta.container.querySelectorAll('meta').length).toBe(2);
   });
 
@@ -172,16 +186,20 @@ describe('FrameMetadata', () => {
         ]}
       />,
     );
-    expect(meta.container.querySelector('meta[name="fc:frame:button:1:action"]')).not.toBeNull();
+    expect(
+      meta.container.querySelector('meta[property="fc:frame:button:1:action"]'),
+    ).not.toBeNull();
     expect(
       meta.container
-        .querySelector('meta[name="fc:frame:button:1:action"]')
+        .querySelector('meta[property="fc:frame:button:1:action"]')
         ?.getAttribute('content'),
     ).toBe('mint');
-    expect(meta.container.querySelector('meta[name="fc:frame:button:1:target"]')).not.toBeNull();
+    expect(
+      meta.container.querySelector('meta[property="fc:frame:button:1:target"]'),
+    ).not.toBeNull();
     expect(
       meta.container
-        .querySelector('meta[name="fc:frame:button:1:target"]')
+        .querySelector('meta[property="fc:frame:button:1:target"]')
         ?.getAttribute('content'),
     ).toBe('https://zizzamia.xyz/api/frame/mint');
     expect(meta.container.querySelectorAll('meta').length).toBe(5);
@@ -200,16 +218,20 @@ describe('FrameMetadata', () => {
         ]}
       />,
     );
-    expect(meta.container.querySelector('meta[name="fc:frame:button:1:action"]')).not.toBeNull();
+    expect(
+      meta.container.querySelector('meta[property="fc:frame:button:1:action"]'),
+    ).not.toBeNull();
     expect(
       meta.container
-        .querySelector('meta[name="fc:frame:button:1:action"]')
+        .querySelector('meta[property="fc:frame:button:1:action"]')
         ?.getAttribute('content'),
     ).toBe('link');
-    expect(meta.container.querySelector('meta[name="fc:frame:button:1:target"]')).not.toBeNull();
+    expect(
+      meta.container.querySelector('meta[property="fc:frame:button:1:target"]'),
+    ).not.toBeNull();
     expect(
       meta.container
-        .querySelector('meta[name="fc:frame:button:1:target"]')
+        .querySelector('meta[property="fc:frame:button:1:target"]')
         ?.getAttribute('content'),
     ).toBe('https://zizzamia.xyz/api/frame/link');
     expect(meta.container.querySelectorAll('meta').length).toBe(5);
@@ -223,7 +245,7 @@ describe('FrameMetadata', () => {
         post_url="post_url"
       />,
     );
-    expect(meta.container.querySelector('meta[name="fc:frame:button:1:target"')).toBeNull();
+    expect(meta.container.querySelector('meta[property="fc:frame:button:1:target"')).toBeNull();
     expect(meta.container.querySelectorAll('meta').length).toBe(5);
   });
 });
diff --git a/src/core/getFrameHtmlResponse.test.ts b/src/core/getFrameHtmlResponse.test.ts
index 906d159fc4..86d61eec08 100644
--- a/src/core/getFrameHtmlResponse.test.ts
+++ b/src/core/getFrameHtmlResponse.test.ts
@@ -17,21 +17,25 @@ describe('getFrameHtmlResponse', () => {
       refresh_period: 10,
     });
 
-    expect(html).toBe(
-      '<!DOCTYPE html><html><head><meta property="fc:frame" content="vNext" />' +
-        '<meta property="fc:frame:image" content="https://example.com/image.png" />' +
-        '<meta property="fc:frame:input:text" content="Enter a message..." />' +
-        '<meta property="fc:frame:button:1" content="button1" />' +
-        '<meta property="fc:frame:button:1:action" content="post" />' +
-        '<meta property="fc:frame:button:2" content="button2" />' +
-        '<meta property="fc:frame:button:2:action" content="mint" />' +
-        '<meta property="fc:frame:button:2:target" content="https://example.com" />' +
-        '<meta property="fc:frame:button:3" content="button3" />' +
-        '<meta property="fc:frame:button:3:action" content="post_redirect" />' +
-        '<meta property="fc:frame:button:4" content="button4" />' +
-        '<meta property="fc:frame:post_url" content="https://example.com/api/frame" />' +
-        '<meta property="fc:frame:refresh_period" content="10" /></head></html>',
-    );
+    expect(html).toBe(`<!DOCTYPE html>
+<html>
+<head>
+  <meta property="fc:frame" content="vNext" />
+  <meta property="fc:frame:button:1" content="button1" />
+  <meta property="fc:frame:button:1:action" content="post" />
+  <meta property="fc:frame:button:2" content="button2" />
+  <meta property="fc:frame:button:2:action" content="mint" />
+  <meta property="fc:frame:button:2:target" content="https://example.com" />
+  <meta property="fc:frame:button:3" content="button3" />
+  <meta property="fc:frame:button:3:action" content="post_redirect" />
+  <meta property="fc:frame:button:4" content="button4" />
+  <meta property="fc:frame:image" content="https://example.com/image.png" />
+  <meta property="fc:frame:input:text" content="Enter a message..." />
+  <meta property="fc:frame:post_url" content="https://example.com/api/frame" />
+  <meta property="fc:frame:refresh_period" content="10" />
+
+</head>
+</html>`);
   });
 
   it('should return correct HTML with action mint', () => {
@@ -40,28 +44,36 @@ describe('getFrameHtmlResponse', () => {
       image: 'https://zizzamia.xyz/park-1.png',
     });
 
-    expect(html).toBe(
-      '<!DOCTYPE html><html><head><meta property="fc:frame" content="vNext" />' +
-        '<meta property="fc:frame:image" content="https://zizzamia.xyz/park-1.png" />' +
-        '<meta property="fc:frame:button:1" content="Mint" />' +
-        '<meta property="fc:frame:button:1:action" content="mint" />' +
-        '<meta property="fc:frame:button:1:target" content="https://zizzamia.xyz/api/frame/mint" /></head></html>',
-    );
+    expect(html).toBe(`<!DOCTYPE html>
+<html>
+<head>
+  <meta property="fc:frame" content="vNext" />
+  <meta property="fc:frame:button:1" content="Mint" />
+  <meta property="fc:frame:button:1:action" content="mint" />
+  <meta property="fc:frame:button:1:target" content="https://zizzamia.xyz/api/frame/mint" />
+  <meta property="fc:frame:image" content="https://zizzamia.xyz/park-1.png" />
+
+</head>
+</html>`);
   });
 
-  it('should return correct HTML with action linkt', () => {
+  it('should return correct HTML with action link', () => {
     const html = getFrameHtmlResponse({
       buttons: [{ label: 'Link', action: 'link', target: 'https://zizzamia.xyz/api/frame/link' }],
       image: 'https://zizzamia.xyz/park-1.png',
     });
 
-    expect(html).toBe(
-      '<!DOCTYPE html><html><head><meta property="fc:frame" content="vNext" />' +
-        '<meta property="fc:frame:image" content="https://zizzamia.xyz/park-1.png" />' +
-        '<meta property="fc:frame:button:1" content="Link" />' +
-        '<meta property="fc:frame:button:1:action" content="link" />' +
-        '<meta property="fc:frame:button:1:target" content="https://zizzamia.xyz/api/frame/link" /></head></html>',
-    );
+    expect(html).toBe(`<!DOCTYPE html>
+<html>
+<head>
+  <meta property="fc:frame" content="vNext" />
+  <meta property="fc:frame:button:1" content="Link" />
+  <meta property="fc:frame:button:1:action" content="link" />
+  <meta property="fc:frame:button:1:target" content="https://zizzamia.xyz/api/frame/link" />
+  <meta property="fc:frame:image" content="https://zizzamia.xyz/park-1.png" />
+
+</head>
+</html>`);
   });
 
   it('should handle no input', () => {
diff --git a/src/core/getFrameHtmlResponse.ts b/src/core/getFrameHtmlResponse.ts
index 1d36d67c37..ecf4b07e46 100644
--- a/src/core/getFrameHtmlResponse.ts
+++ b/src/core/getFrameHtmlResponse.ts
@@ -20,22 +20,24 @@ function getFrameHtmlResponse({
   refresh_period,
 }: FrameMetadataType): string {
   // Set the image metadata if it exists.
-  const imageHtml = image ? `<meta property="fc:frame:image" content="${image}" />` : '';
+  const imageHtml = image ? `  <meta property="fc:frame:image" content="${image}" />\n` : '';
 
   // Set the input metadata if it exists.
-  const inputHtml = input ? `<meta property="fc:frame:input:text" content="${input.text}" />` : '';
+  const inputHtml = input
+    ? `  <meta property="fc:frame:input:text" content="${input.text}" />\n`
+    : '';
 
   // Set the button metadata if it exists.
   let buttonsHtml = '';
   if (buttons) {
     buttonsHtml = buttons
       .map((button, index) => {
-        let buttonHtml = `<meta property="fc:frame:button:${index + 1}" content="${button.label}" />`;
+        let buttonHtml = `  <meta property="fc:frame:button:${index + 1}" content="${button.label}" />\n`;
         if (button.action) {
-          buttonHtml += `<meta property="fc:frame:button:${index + 1}:action" content="${button.action}" />`;
+          buttonHtml += `  <meta property="fc:frame:button:${index + 1}:action" content="${button.action}" />\n`;
         }
         if ((button.action == 'link' || button.action == 'mint') && button.target) {
-          buttonHtml += `<meta property="fc:frame:button:${index + 1}:target" content="${button.target}" />`;
+          buttonHtml += `  <meta property="fc:frame:button:${index + 1}:target" content="${button.target}" />\n`;
         }
         return buttonHtml;
       })
@@ -45,13 +47,13 @@ function getFrameHtmlResponse({
   // Set the post_url metadata if it exists.
   const postUrlToUse = postUrl || post_url;
   const postUrlHtml = postUrlToUse
-    ? `<meta property="fc:frame:post_url" content="${postUrlToUse}" />`
+    ? `  <meta property="fc:frame:post_url" content="${postUrlToUse}" />\n`
     : '';
 
   // Set the refresh_period metadata if it exists.
   const refreshPeriodToUse = refreshPeriod || refresh_period;
   const refreshPeriodHtml = refreshPeriodToUse
-    ? `<meta property="fc:frame:refresh_period" content="${refreshPeriodToUse.toString()}" />`
+    ? `  <meta property="fc:frame:refresh_period" content="${refreshPeriodToUse.toString()}" />\n`
     : '';
 
   // Return the HTML string containing all the metadata.
@@ -59,11 +61,7 @@ function getFrameHtmlResponse({
 <html>
 <head>
   <meta property="fc:frame" content="vNext" />
-  ${buttonsHtml}
-  ${imageHtml}
-  ${inputHtml}
-  ${postUrlHtml}
-  ${refreshPeriodHtml}
+${buttonsHtml}${imageHtml}${inputHtml}${postUrlHtml}${refreshPeriodHtml}
 </head>
 </html>`;