From d3c9a7302868dc0ac069a0679513f3caca62f575 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adamdbradley@users.noreply.github.com>
Date: Mon, 18 Jul 2022 17:16:10 -0500
Subject: [PATCH] test: qwik city menu/breadcrumb tests

---
 .../components/breadcrumbs/breadcrumbs.tsx    |   6 +-
 .../runtime/src/app/components/menu/menu.tsx  |   4 +-
 .../runtime/src/app/routes/blog/[...slug].tsx |  35 ++++--
 .../runtime/src/app/tests/auth.spec.ts        |   2 +-
 .../runtime/src/app/tests/menu.spec.ts        | 100 ++++++++++++++++++
 .../runtime/src/app/tests/page.spec.ts        |  36 +------
 6 files changed, 137 insertions(+), 46 deletions(-)
 create mode 100644 packages/qwik-city/runtime/src/app/tests/menu.spec.ts

diff --git a/packages/qwik-city/runtime/src/app/components/breadcrumbs/breadcrumbs.tsx b/packages/qwik-city/runtime/src/app/components/breadcrumbs/breadcrumbs.tsx
index 5390748f6ea..17ae67d2739 100644
--- a/packages/qwik-city/runtime/src/app/components/breadcrumbs/breadcrumbs.tsx
+++ b/packages/qwik-city/runtime/src/app/components/breadcrumbs/breadcrumbs.tsx
@@ -12,9 +12,9 @@ export const Breadcrumbs = component$(
     const breadcrumbs = createBreadcrumbs(menu, loc.pathname);
 
     return (
-      <Host class="breadcrumbs" data-test-breadcrumbs>
-        {breadcrumbs.map((b) => (
-          <span>{b.href ? <a href={b.href}>{b.text}</a> : b.text}</span>
+      <Host class="breadcrumbs">
+        {breadcrumbs.map((b, i) => (
+          <span data-test-breadcrumb={i}>{b.href ? <a href={b.href}>{b.text}</a> : b.text}</span>
         ))}
       </Host>
     );
diff --git a/packages/qwik-city/runtime/src/app/components/menu/menu.tsx b/packages/qwik-city/runtime/src/app/components/menu/menu.tsx
index 5ea9cd6a2d5..f05fecc8236 100644
--- a/packages/qwik-city/runtime/src/app/components/menu/menu.tsx
+++ b/packages/qwik-city/runtime/src/app/components/menu/menu.tsx
@@ -12,9 +12,9 @@ export const Menu = component$(
     return (
       <Host class="menu">
         {menu
-          ? menu.items?.map((item) => (
+          ? menu.items?.map((item, i) => (
               <>
-                <h5>{item.text}</h5>
+                <h5 data-test-menu-header={i}>{item.text}</h5>
                 <ul>
                   {item.items?.map((item) => (
                     <li>
diff --git a/packages/qwik-city/runtime/src/app/routes/blog/[...slug].tsx b/packages/qwik-city/runtime/src/app/routes/blog/[...slug].tsx
index 1ee617acac1..ed65264f0f7 100644
--- a/packages/qwik-city/runtime/src/app/routes/blog/[...slug].tsx
+++ b/packages/qwik-city/runtime/src/app/routes/blog/[...slug].tsx
@@ -1,17 +1,38 @@
-import { component$, Host } from '@builder.io/qwik';
-import { useLocation, DocumentHead } from '~qwik-city-runtime';
+import { component$, Host, Resource } from '@builder.io/qwik';
+import { useEndpoint, DocumentHead, EndpointHandler } from '~qwik-city-runtime';
 
 export default component$(() => {
-  const { pathname, params } = useLocation();
+  const resource = useEndpoint<EndpointData>();
 
   return (
     <Host>
-      <h1>Blog: {params.slug}</h1>
-      <p>Pathname: {pathname}</p>
+      <Resource
+        resource={resource}
+        onResolved={(blog) => (
+          <>
+            <h1>{blog.blogTitle}</h1>
+            <p>{blog.blogContent}</p>
+          </>
+        )}
+      />
     </Host>
   );
 });
 
-export const head: DocumentHead = ({ params }) => {
-  return { title: `Blog: ${params.slug}` };
+export const onGet: EndpointHandler<EndpointData> = async ({ params, request }) => {
+  return {
+    body: {
+      blogTitle: `Blog: ${params.slug}`,
+      blogContent: `${params.slug}, ${request.url}`,
+    },
+  };
 };
+
+export const head: DocumentHead<EndpointData> = ({ data }) => {
+  return { title: data?.blogTitle };
+};
+
+export interface EndpointData {
+  blogTitle: string;
+  blogContent: string;
+}
diff --git a/packages/qwik-city/runtime/src/app/tests/auth.spec.ts b/packages/qwik-city/runtime/src/app/tests/auth.spec.ts
index 1931a48feda..c4eaa33400b 100644
--- a/packages/qwik-city/runtime/src/app/tests/auth.spec.ts
+++ b/packages/qwik-city/runtime/src/app/tests/auth.spec.ts
@@ -1,5 +1,5 @@
 import { expect, test } from '@playwright/test';
-import { assertPage, getPage, linkNavigate, load } from './util';
+import { assertPage, getPage, linkNavigate, load } from './util.js';
 
 test('Qwik City Auth', async ({ context, javaScriptEnabled }) => {
   const ctx = await load(context, javaScriptEnabled, '/sign-in');
diff --git a/packages/qwik-city/runtime/src/app/tests/menu.spec.ts b/packages/qwik-city/runtime/src/app/tests/menu.spec.ts
new file mode 100644
index 00000000000..9129e98acaa
--- /dev/null
+++ b/packages/qwik-city/runtime/src/app/tests/menu.spec.ts
@@ -0,0 +1,100 @@
+import { expect, test } from '@playwright/test';
+import { assertPage, linkNavigate, load, locator } from './util.js';
+
+test('Qwik City Page', async ({ context, javaScriptEnabled }) => {
+  const ctx = await load(context, javaScriptEnabled, '/');
+
+  /***********  Docs: home  ***********/
+  await linkNavigate(ctx, '[data-test-link="docs-home"]');
+  await assertPage(ctx, {
+    pathname: '/docs',
+    title: 'Docs: Welcome! - Qwik',
+    layoutHierarchy: ['root', 'docs'],
+    h1: 'Welcome to the Docs!',
+    activeHeaderLink: 'Docs',
+  });
+
+  let menuHeader = locator(ctx, `[data-test-menu-header="0"]`);
+  expect(await menuHeader.innerText()).toBe('Introduction');
+
+  let breadcrumb0 = locator(ctx, `[data-test-breadcrumb="0"]`);
+  if (await breadcrumb0.isVisible()) {
+    expect(true, `Breadcrumb selector ${breadcrumb0} found`).toBe(false);
+  }
+
+  /***********  Docs: overview  ***********/
+  await linkNavigate(ctx, '[data-test-menu-link="/docs/overview"]');
+  await assertPage(ctx, {
+    pathname: '/docs/overview',
+    title: 'Docs: Overview - Qwik',
+    layoutHierarchy: ['root', 'docs'],
+    h1: 'Overview',
+    activeHeaderLink: 'Docs',
+  });
+
+  menuHeader = locator(ctx, `[data-test-menu-header="0"]`);
+  expect(await menuHeader.innerText()).toBe('Introduction');
+
+  breadcrumb0 = locator(ctx, `[data-test-breadcrumb="0"]`);
+  expect(await breadcrumb0.innerText()).toBe('Introduction');
+
+  let breadcrumb1 = locator(ctx, `[data-test-breadcrumb="1"]`);
+  expect(await breadcrumb1.innerText()).toBe('Overview');
+
+  /***********  Docs: getting-started  ***********/
+  await linkNavigate(ctx, '[data-test-menu-link="/docs/getting-started"]');
+  await assertPage(ctx, {
+    pathname: '/docs/getting-started',
+    title: 'Docs: Getting Started - Qwik',
+    layoutHierarchy: ['root', 'docs'],
+    h1: 'Getting Started',
+    activeHeaderLink: 'Docs',
+  });
+
+  menuHeader = locator(ctx, `[data-test-menu-header="0"]`);
+  expect(await menuHeader.innerText()).toBe('Introduction');
+
+  breadcrumb0 = locator(ctx, `[data-test-breadcrumb="0"]`);
+  expect(await breadcrumb0.innerText()).toBe('Introduction');
+
+  breadcrumb1 = locator(ctx, `[data-test-breadcrumb="1"]`);
+  expect(await breadcrumb1.innerText()).toBe('Getting Started');
+
+  /***********  Docs: components/basics  ***********/
+  await linkNavigate(ctx, '[data-test-menu-link="/docs/components/basics"]');
+  await assertPage(ctx, {
+    pathname: '/docs/components/basics',
+    title: 'Docs: components basics - Qwik',
+    layoutHierarchy: ['root', 'docs'],
+    h1: 'Docs: components basics',
+    activeHeaderLink: 'Docs',
+  });
+
+  menuHeader = locator(ctx, `[data-test-menu-header="0"]`);
+  expect(await menuHeader.innerText()).toBe('Introduction');
+
+  breadcrumb0 = locator(ctx, `[data-test-breadcrumb="0"]`);
+  expect(await breadcrumb0.innerText()).toBe('Components');
+
+  breadcrumb1 = locator(ctx, `[data-test-breadcrumb="1"]`);
+  expect(await breadcrumb1.innerText()).toBe('Basics');
+
+  /***********  Docs: components/listeners  ***********/
+  await linkNavigate(ctx, '[data-test-menu-link="/docs/components/listeners"]');
+  await assertPage(ctx, {
+    pathname: '/docs/components/listeners',
+    title: 'Docs: components listeners - Qwik',
+    layoutHierarchy: ['root', 'docs'],
+    h1: 'Docs: components listeners',
+    activeHeaderLink: 'Docs',
+  });
+
+  menuHeader = locator(ctx, `[data-test-menu-header="0"]`);
+  expect(await menuHeader.innerText()).toBe('Introduction');
+
+  breadcrumb0 = locator(ctx, `[data-test-breadcrumb="0"]`);
+  expect(await breadcrumb0.innerText()).toBe('Components');
+
+  breadcrumb1 = locator(ctx, `[data-test-breadcrumb="1"]`);
+  expect(await breadcrumb1.innerText()).toBe('Listeners');
+});
diff --git a/packages/qwik-city/runtime/src/app/tests/page.spec.ts b/packages/qwik-city/runtime/src/app/tests/page.spec.ts
index 9ae0cd7809d..1a6dc5514b8 100644
--- a/packages/qwik-city/runtime/src/app/tests/page.spec.ts
+++ b/packages/qwik-city/runtime/src/app/tests/page.spec.ts
@@ -1,5 +1,5 @@
 import { expect, test } from '@playwright/test';
-import { assertPage, linkNavigate, load, locator } from './util';
+import { assertPage, linkNavigate, load, locator } from './util.js';
 
 test('Qwik City Page', async ({ context, javaScriptEnabled }) => {
   const ctx = await load(context, javaScriptEnabled, '/');
@@ -27,7 +27,7 @@ test('Qwik City Page', async ({ context, javaScriptEnabled }) => {
   await linkNavigate(ctx, '[data-test-link="blog-resumability"]');
   await assertPage(ctx, {
     pathname: '/blog/what-is-resumability',
-    title: 'Qwik' /****** TODO *****/,
+    title: 'Blog: what-is-resumability - Qwik',
     layoutHierarchy: ['root', 'blog'],
     h1: 'Blog: what-is-resumability',
     activeHeaderLink: 'Blog',
@@ -37,7 +37,7 @@ test('Qwik City Page', async ({ context, javaScriptEnabled }) => {
   await linkNavigate(ctx, '[data-test-link="blog-serializing-props"]');
   await assertPage(ctx, {
     pathname: '/blog/serializing-props',
-    title: 'Qwik' /****** TODO *****/,
+    title: 'Blog: serializing-props - Qwik',
     layoutHierarchy: ['root', 'blog'],
     h1: 'Blog: serializing-props',
     activeHeaderLink: 'Blog',
@@ -63,36 +63,6 @@ test('Qwik City Page', async ({ context, javaScriptEnabled }) => {
     activeHeaderLink: 'Docs',
   });
 
-  /***********  Docs: getting-started  ***********/
-  await linkNavigate(ctx, '[data-test-menu-link="/docs/getting-started"]');
-  await assertPage(ctx, {
-    pathname: '/docs/getting-started',
-    title: 'Docs: Getting Started - Qwik',
-    layoutHierarchy: ['root', 'docs'],
-    h1: 'Getting Started',
-    activeHeaderLink: 'Docs',
-  });
-
-  /***********  Docs: components/basics  ***********/
-  await linkNavigate(ctx, '[data-test-menu-link="/docs/components/basics"]');
-  await assertPage(ctx, {
-    pathname: '/docs/components/basics',
-    title: 'Docs: components basics - Qwik',
-    layoutHierarchy: ['root', 'docs'],
-    h1: 'Docs: components basics',
-    activeHeaderLink: 'Docs',
-  });
-
-  /***********  Docs: components/listeners  ***********/
-  await linkNavigate(ctx, '[data-test-menu-link="/docs/components/listeners"]');
-  await assertPage(ctx, {
-    pathname: '/docs/components/listeners',
-    title: 'Docs: components listeners - Qwik',
-    layoutHierarchy: ['root', 'docs'],
-    h1: 'Docs: components listeners',
-    activeHeaderLink: 'Docs',
-  });
-
   /***********  Products: hat  ***********/
   await linkNavigate(ctx, '[data-test-link="products-hat"]');
   await assertPage(ctx, {