[#11][#12] Problems with "prioritizeSeoTags"

Author: birdofpreyru

__tests__/browser/MetaTags.tsx

@@ -0,0 +1,32 @@
+/** @jest-environment jsdom */
+
+import { renderClient } from '../../jest/browser-utils';
+
+import { Helmet, MetaTags } from '../../src';
+import { HELMET_ATTRIBUTE } from '../../src/constants';
+
+test('with "prioritizeSeoTags"', () => {
+  renderClient(
+    <>
+      <Helmet prioritizeSeoTags />
+      <MetaTags
+        description="Test description"
+        extraMetaTags={[{
+          content: 'extra meta tag content',
+          name: 'extra meta tag',
+        }]}
+        image="https://some.url.com/image.png"
+        siteName="Test web site"
+        socialDescription="Social description"
+        socialTitle="Social title"
+        title="Test Title"
+        url="https://some.url.com"
+      >
+        Abc
+      </MetaTags>
+    </>,
+  );
+
+  const tags = [...document.head.querySelectorAll(`[${HELMET_ATTRIBUTE}]`)];
+  expect(tags).toMatchSnapshot();
+});

__tests__/browser/__snapshots__/MetaTags.tsx.snap

@@ -0,0 +1,71 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`with "prioritizeSeoTags" 1`] = `
+[
+  <meta
+    content="Test description"
+    data-rh="true"
+    name="description"
+  />,
+  <meta
+    content="summary_large_image"
+    data-rh="true"
+    name="twitter:card"
+  />,
+  <meta
+    content="Social title"
+    data-rh="true"
+    name="twitter:title"
+  />,
+  <meta
+    content="Social description"
+    data-rh="true"
+    name="twitter:description"
+  />,
+  <meta
+    content="https://some.url.com/image.png"
+    data-rh="true"
+    name="twitter:image"
+  />,
+  <meta
+    content="@Test web site"
+    data-rh="true"
+    name="twitter:site"
+  />,
+  <meta
+    content="Social title"
+    data-rh="true"
+    name="og:title"
+  />,
+  <meta
+    content="https://some.url.com/image.png"
+    data-rh="true"
+    name="og:image"
+  />,
+  <meta
+    content="Social title"
+    data-rh="true"
+    name="og:image:alt"
+  />,
+  <meta
+    content="Social description"
+    data-rh="true"
+    name="og:description"
+  />,
+  <meta
+    content="Test web site"
+    data-rh="true"
+    name="og:sitename"
+  />,
+  <meta
+    content="https://some.url.com"
+    data-rh="true"
+    name="og:url"
+  />,
+  <meta
+    content="extra meta tag content"
+    data-rh="true"
+    name="extra meta tag"
+  />,
+]
+`;

src/client.ts

@@ -165,6 +165,7 @@ function updateTitle(
   updateAttributes(TAG_NAMES.TITLE, attributes);
 }
 
+// eslint-disable-next-line complexity
 export function commitTagChanges(
   newState: AggregatedState,
   firstRender: boolean,
@@ -178,6 +179,7 @@ export function commitTagChanges(
     meta,
     noscript,
     onChangeClientState,
+    priority,
     script,
     style,
     title,
@@ -190,10 +192,24 @@ export function commitTagChanges(
 
   const tagUpdates: TagUpdateList = {
     baseTag: updateTags(TAG_NAMES.BASE, base ? [base] : []),
-    linkTags: updateTags(TAG_NAMES.LINK, links ?? []),
-    metaTags: updateTags(TAG_NAMES.META, meta ?? []),
+
+    linkTags: updateTags(TAG_NAMES.LINK, [
+      ...priority?.links ?? [],
+      ...links ?? [],
+    ]),
+
+    metaTags: updateTags(TAG_NAMES.META, [
+      ...priority?.meta ?? [],
+      ...meta ?? [],
+    ]),
+
     noscriptTags: updateTags(TAG_NAMES.NOSCRIPT, noscript ?? []),
-    scriptTags: updateTags(TAG_NAMES.SCRIPT, script ?? []),
+
+    scriptTags: updateTags(TAG_NAMES.SCRIPT, [
+      ...priority?.script ?? [],
+      ...script ?? [],
+    ]),
+
     styleTags: updateTags(TAG_NAMES.STYLE, style ?? []),
   };