First copied test from meta-test

remix-run · Aug 16, 2023 · 94317de · 94317de
1 parent a68ea55
commit 94317de
Show file tree

Hide file tree

Showing 5 changed files with 443 additions and 131 deletions.
diff --git a/.gitignore b/.gitignore
@@ -13,7 +13,7 @@ tsconfig.tsbuildinfo
 /fixtures/test
 /fixtures/my-remix-app
 /fixtures/deno-app
-/playwright-report
+/integration/playwright-report
 /test-results
 /uploads
 

diff --git a/integration/meta-test.ts b/integration/meta-test.ts
@@ -178,14 +178,6 @@ test.describe("meta", () => {
     appFixture.close();
   });
 
-  test("no meta export renders meta from nearest route meta in the tree", async ({
-    page,
-  }) => {
-    let app = new PlaywrightFixture(appFixture, page);
-    await app.goto("/no-meta-export");
-    expect(await app.getHtml('meta[name="description"]')).toBeTruthy();
-  });
-
   test("empty meta array does not render a tag", async ({ page }) => {
     let app = new PlaywrightFixture(appFixture, page);
     await app.goto("/empty-meta-function");

diff --git a/packages/remix-react/__tests__/integration/meta-test.tsx b/packages/remix-react/__tests__/integration/meta-test.tsx
@@ -0,0 +1,322 @@
+import * as React from "react";
+import { json } from "@remix-run/server-runtime";
+import { Meta, Outlet } from "@remix-run/react";
+import { unstable_createRemixStub } from "@remix-run/testing";
+import { act, prettyDOM, render } from "@testing-library/react";
+
+const getHtml = (c: HTMLElement) =>
+  prettyDOM(c, undefined, { highlight: false });
+
+describe("meta", () => {
+  it("no meta export renders meta from nearest route meta in the tree", () => {
+    let RemixStub = unstable_createRemixStub([
+      {
+        id: "root",
+        path: "",
+        meta: ({ data }) => [
+          { name: "description", content: data.description },
+          { title: data.title },
+        ],
+        Component() {
+          return (
+            <>
+              <Meta />
+              <Outlet />
+            </>
+          );
+        },
+        children: [
+          {
+            index: true,
+            Component() {
+              return <div>Parent meta here!</div>;
+            },
+          },
+        ],
+      },
+    ]);
+
+    let { container } = render(
+      <RemixStub
+        hydrationData={{
+          loaderData: {
+            root: {
+              description: "This is a meta page",
+              title: "Meta Page",
+            },
+          },
+        }}
+      />
+    );
+
+    expect(getHtml(container)).toMatchInlineSnapshot(`
+      "<div>
+        <meta
+          content=\\"This is a meta page\\"
+          name=\\"description\\"
+        />
+        <title>
+          Meta Page
+        </title>
+        <div>
+          Parent meta here!
+        </div>
+      </div>"
+    `);
+  });
+});
+
+//   test.beforeAll(async () => {
+//     fixture = await createFixture({
+//       config: {
+//         ignoredRouteFiles: ["**/.*"],
+//       },
+//       files: {
+//         "app/root.tsx": js`
+//           import { json } from "@remix-run/node";
+//           import { Meta, Links, Outlet, Scripts } from "@remix-run/react";
+
+//           export const loader = async () =>
+//             json({
+//               description: "This is a meta page",
+//               title: "Meta Page",
+//             });
+
+//           export const meta = ({ data }) => [
+//             { charSet: "utf-8" },
+//             { name: "description", content: data.description },
+//             { property: "og:image", content: "https://picsum.photos/200/200" },
+//             { property: "og:type", content: data.contentType }, // undefined
+//             { title: data.title },
+//           ];
+
+//           export default function Root() {
+//             return (
+//               <html lang="en">
+//                 <head>
+//                   <Meta />
+//                   <Links />
+//                 </head>
+//                 <body>
+//                   <Outlet />
+//                   <Scripts />
+//                 </body>
+//               </html>
+//             );
+//           }
+//         `,
+
+//         "app/routes/_index.tsx": js`
+//           export const meta = ({ data, matches }) =>
+//             matches.flatMap((match) => match.meta);
+
+//           export default function Index() {
+//             return <div>This is the index file</div>;
+//           }
+//         `,
+
+//         "app/routes/no-meta-export.tsx": js`
+//           export default function NoMetaExport() {
+//             return <div>Parent meta here!</div>;
+//           }
+//         `,
+
+//         "app/routes/empty-meta-function.tsx": js`
+//           export const meta = () => [];
+//           export default function EmptyMetaFunction() {
+//             return <div>No meta here!</div>;
+//           }
+//         `,
+
+//         "app/routes/authors.$authorId.tsx": js`
+//           import { json } from "@remix-run/node";
+
+//           export async function loader({ params }) {
+//             return json({
+//               author: {
+//                 id: params.authorId,
+//                 name: "Sonny Day",
+//                 address: {
+//                   streetAddress: "123 Sunset Cliffs Blvd",
+//                   city: "San Diego",
+//                   state: "CA",
+//                   zip: "92107",
+//                 },
+//                 emails: [
+//                   "[email protected]",
+//                   "[email protected]",
+//                 ],
+//               },
+//             });
+//           }
+
+//           export function meta({ data }) {
+//             let { author } = data;
+//             return [
+//               { title: data.name + " Profile" },
+//               {
+//                 tagName: "link",
+//                 rel: "canonical",
+//                 href: "https://website.com/authors/" + author.id,
+//               },
+//               {
+//                 "script:ld+json": {
+//                   "@context": "http://schema.org",
+//                   "@type": "Person",
+//                   "name": author.name,
+//                   "address": {
+//                     "@type": "PostalAddress",
+//                     "streetAddress": author.address.streetAddress,
+//                     "addressLocality": author.address.city,
+//                     "addressRegion": author.address.state,
+//                     "postalCode": author.address.zip,
+//                   },
+//                   "email": author.emails,
+//                 },
+//               },
+//             ];
+//           }
+//           export default function AuthorBio() {
+//             return <div>Bio here!</div>;
+//           }
+//         `,
+
+//         "app/routes/music.tsx": js`
+//           export function meta({ data, matches }) {
+//             let rootModule = matches.find(match => match.id === "root");
+//             let rootCharSet = rootModule.meta.find(meta => meta.charSet);
+//             return [
+//               rootCharSet,
+//               { title: "What's My Age Again?" },
+//               { property: "og:type", content: "music.song" },
+//               { property: "music:musician", content: "https://www.blink182.com/" },
+//               { property: "music:duration", content: 182 },
+//             ];
+//           }
+
+//           export default function Music() {
+//             return <h1>Music</h1>;
+//           }
+//         `,
+
+//         "app/routes/error.tsx": js`
+//           import { Link, useRouteError } from '@remix-run/react'
+
+//           export function loader() {
+//             throw new Error('lol oops')
+//           }
+
+//           export const meta = (args) => {
+//             return [{ title: args.error ? "Oops!" : "Home"}]
+//           }
+
+//           export default function Error() {
+//             return <h1>Error</h1>
+//           }
+
+//           export function ErrorBoundary() {
+//             return <h1>Error boundary</h1>
+//           }
+//         `,
+//       },
+//     });
+//     appFixture = await createAppFixture(fixture);
+//   });
+
+//   test.afterAll(() => {
+//     appFixture.close();
+//   });
+
+//   test("no meta export renders meta from nearest route meta in the tree", async ({
+//     page,
+//   }) => {
+//     let app = new PlaywrightFixture(appFixture, page);
+//     await app.goto("/no-meta-export");
+//     expect(await app.getHtml('meta[name="description"]')).toBeTruthy();
+//   });
+
+//   test("empty meta array does not render a tag", async ({ page }) => {
+//     let app = new PlaywrightFixture(appFixture, page);
+//     await app.goto("/empty-meta-function");
+//     await expect(app.getHtml("title")).rejects.toThrowError(
+//       'No element matches selector "title"'
+//     );
+//   });
+
+//   test("meta from `matches` renders meta tags", async ({ page }) => {
+//     let app = new PlaywrightFixture(appFixture, page);
+//     await app.goto("/music");
+//     expect(await app.getHtml('meta[charset="utf-8"]')).toBeTruthy();
+//   });
+
+//   test("{ charSet } adds a <meta charset='utf-8' />", async ({ page }) => {
+//     let app = new PlaywrightFixture(appFixture, page);
+//     await app.goto("/");
+//     expect(await app.getHtml('meta[charset="utf-8"]')).toBeTruthy();
+//   });
+
+//   test("{ title } adds a <title />", async ({ page }) => {
+//     let app = new PlaywrightFixture(appFixture, page);
+//     await app.goto("/");
+//     expect(await app.getHtml("title")).toBeTruthy();
+//   });
+
+//   test("{ property: 'og:*', content: '*' } adds a <meta property='og:*' />", async ({
+//     page,
+//   }) => {
+//     let app = new PlaywrightFixture(appFixture, page);
+//     await app.goto("/");
+//     expect(await app.getHtml('meta[property="og:image"]')).toBeTruthy();
+//   });
+
+//   test("{ 'script:ld+json': {} } adds a <script type='application/ld+json' />", async ({
+//     page,
+//   }) => {
+//     let app = new PlaywrightFixture(appFixture, page);
+//     await app.goto("/authors/1");
+//     let scriptTag = await app.getHtml('script[type="application/ld+json"]');
+//     let scriptContents = scriptTag
+//       .replace('<script type="application/ld+json">', "")
+//       .replace("</script>", "")
+//       .trim();
+
+//     expect(JSON.parse(scriptContents)).toEqual({
+//       "@context": "http://schema.org",
+//       "@type": "Person",
+//       name: "Sonny Day",
+//       address: {
+//         "@type": "PostalAddress",
+//         streetAddress: "123 Sunset Cliffs Blvd",
+//         addressLocality: "San Diego",
+//         addressRegion: "CA",
+//         postalCode: "92107",
+//       },
+//       email: ["[email protected]", "[email protected]"],
+//     });
+//   });
+
+//   test("{ tagName: 'link' } adds a <link />", async ({ page }) => {
+//     let app = new PlaywrightFixture(appFixture, page);
+//     await app.goto("/authors/1");
+//     expect(await app.getHtml('link[rel="canonical"]')).toBeTruthy();
+//   });
+
+//   test("loader errors are passed to meta", async ({ page }) => {
+//     let restoreErrors = hideErrors();
+
+//     new PlaywrightFixture(appFixture, page);
+//     let response = await fixture.requestDocument("/error");
+//     expect(await response.text()).toMatch("<title>Oops!</title>");
+
+//     restoreErrors();
+//   });
+// });
+
+// function hideErrors() {
+//   let oldConsoleError: any;
+//   oldConsoleError = console.error;
+//   console.error = () => {};
+//   return () => {
+//     console.error = oldConsoleError;
+//   };
+// }