test(remix): Add Shopify Hydrogen E2E test app.

Author: onurtemizkan

.github/workflows/build.yml

@@ -1058,6 +1058,7 @@ jobs:
             'react-router-6-use-routes',
             'react-router-5',
             'react-router-6',
+            'remix-hydrogen',
             'solid',
             'svelte-5',
             'sveltekit',

dev-packages/e2e-tests/test-applications/remix-hydrogen/.eslintignore

@@ -0,0 +1,5 @@
+build
+node_modules
+bin
+*.d.ts
+dist

dev-packages/e2e-tests/test-applications/remix-hydrogen/.gitignore

@@ -0,0 +1,8 @@
+node_modules
+/.cache
+/build
+/dist
+/public/build
+/.mf
+.env
+.shopify

dev-packages/e2e-tests/test-applications/remix-hydrogen/.npmrc

@@ -0,0 +1,2 @@
+@sentry:registry=http://127.0.0.1:4873
+@sentry-internal:registry=http://127.0.0.1:4873

dev-packages/e2e-tests/test-applications/remix-hydrogen/app/entry.client.tsx

@@ -0,0 +1,57 @@
+import { RemixBrowser, useLocation, useMatches } from '@remix-run/react';
+import * as Sentry from '@sentry/remix';
+import { StrictMode, startTransition } from 'react';
+import { useEffect } from 'react';
+import { hydrateRoot } from 'react-dom/client';
+
+Sentry.init({
+  dsn: window.ENV.SENTRY_DSN,
+  integrations: [
+    new Sentry.BrowserTracing({
+      routingInstrumentation: Sentry.remixRouterInstrumentation(useEffect, useLocation, useMatches),
+    }),
+    // Replay is only available in the client
+    new Sentry.Replay(),
+    new Sentry.BrowserProfilingIntegration(),
+  ],
+
+  // Set tracesSampleRate to 1.0 to capture 100%
+  // of transactions for performance monitoring.
+  // We recommend adjusting this value in production
+  tracesSampleRate: 1.0,
+
+  // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
+  tracePropagationTargets: ['localhost', /^https:\/\/yourserver\.io\/api/],
+
+  // Capture Replay for 10% of all sessions,
+  // plus for 100% of sessions with an error
+  replaysSessionSampleRate: 0.1,
+  replaysOnErrorSampleRate: 1.0,
+
+  // Capture all profiles
+  profilesSampleRate: 1.0,
+});
+
+Sentry.addEventProcessor(event => {
+  if (
+    event.type === 'transaction' &&
+    (event.contexts?.trace?.op === 'pageload' || event.contexts?.trace?.op === 'navigation')
+  ) {
+    const eventId = event.event_id;
+    if (eventId) {
+      window.recordedTransactions = window.recordedTransactions || [];
+      window.recordedTransactions.push(eventId);
+    }
+  }
+
+  return event;
+});
+
+startTransition(() => {
+  hydrateRoot(
+    document,
+    <StrictMode>
+      <RemixBrowser />
+    </StrictMode>,
+  );
+});

dev-packages/e2e-tests/test-applications/remix-hydrogen/app/entry.server.tsx

@@ -0,0 +1,51 @@
+import * as Sentry from '@sentry/remix';
+
+import { RemixServer } from '@remix-run/react';
+import { createContentSecurityPolicy } from '@shopify/hydrogen';
+import type { DataFunctionArgs, EntryContext } from '@shopify/remix-oxygen';
+import isbot from 'isbot';
+import { renderToReadableStream } from 'react-dom/server';
+
+export async function handleError(error: unknown, { request }: DataFunctionArgs): Promise<void> {
+  Sentry.captureRemixServerException(error, 'remix.server', request, true);
+}
+
+export default async function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext,
+) {
+  const { nonce, header, NonceProvider } = createContentSecurityPolicy();
+
+  const body = await renderToReadableStream(
+    <NonceProvider>
+      <RemixServer context={remixContext} url={request.url} />
+    </NonceProvider>,
+    {
+      nonce,
+      signal: request.signal,
+      onError(error) {
+        // eslint-disable-next-line no-console
+        console.error(error);
+        responseStatusCode = 500;
+      },
+    },
+  );
+
+  if (isbot(request.headers.get('user-agent'))) {
+    await body.allReady;
+  }
+
+  responseHeaders.set('Content-Type', 'text/html');
+  responseHeaders.set('Content-Security-Policy', header);
+
+  // Add the document policy header to enable JS profiling
+  // This is required for Sentry's profiling integration
+  responseHeaders.set('Document-Policy', 'js-profiling');
+
+  return new Response(body, {
+    headers: responseHeaders,
+    status: responseStatusCode,
+  });
+}

dev-packages/e2e-tests/test-applications/remix-hydrogen/app/lib/fragments.ts

@@ -0,0 +1,174 @@
+// NOTE: https://shopify.dev/docs/api/storefront/latest/queries/cart
+export const CART_QUERY_FRAGMENT = `#graphql
+  fragment Money on MoneyV2 {
+    currencyCode
+    amount
+  }
+  fragment CartLine on CartLine {
+    id
+    quantity
+    attributes {
+      key
+      value
+    }
+    cost {
+      totalAmount {
+        ...Money
+      }
+      amountPerQuantity {
+        ...Money
+      }
+      compareAtAmountPerQuantity {
+        ...Money
+      }
+    }
+    merchandise {
+      ... on ProductVariant {
+        id
+        availableForSale
+        compareAtPrice {
+          ...Money
+        }
+        price {
+          ...Money
+        }
+        requiresShipping
+        title
+        image {
+          id
+          url
+          altText
+          width
+          height
+
+        }
+        product {
+          handle
+          title
+          id
+          vendor
+        }
+        selectedOptions {
+          name
+          value
+        }
+      }
+    }
+  }
+  fragment CartApiQuery on Cart {
+    updatedAt
+    id
+    checkoutUrl
+    totalQuantity
+    buyerIdentity {
+      countryCode
+      customer {
+        id
+        email
+        firstName
+        lastName
+        displayName
+      }
+      email
+      phone
+    }
+    lines(first: $numCartLines) {
+      nodes {
+        ...CartLine
+      }
+    }
+    cost {
+      subtotalAmount {
+        ...Money
+      }
+      totalAmount {
+        ...Money
+      }
+      totalDutyAmount {
+        ...Money
+      }
+      totalTaxAmount {
+        ...Money
+      }
+    }
+    note
+    attributes {
+      key
+      value
+    }
+    discountCodes {
+      code
+      applicable
+    }
+  }
+` as const;
+
+const MENU_FRAGMENT = `#graphql
+  fragment MenuItem on MenuItem {
+    id
+    resourceId
+    tags
+    title
+    type
+    url
+  }
+  fragment ChildMenuItem on MenuItem {
+    ...MenuItem
+  }
+  fragment ParentMenuItem on MenuItem {
+    ...MenuItem
+    items {
+      ...ChildMenuItem
+    }
+  }
+  fragment Menu on Menu {
+    id
+    items {
+      ...ParentMenuItem
+    }
+  }
+` as const;
+
+export const HEADER_QUERY = `#graphql
+  fragment Shop on Shop {
+    id
+    name
+    description
+    primaryDomain {
+      url
+    }
+    brand {
+      logo {
+        image {
+          url
+        }
+      }
+    }
+  }
+  query Header(
+    $country: CountryCode
+    $headerMenuHandle: String!
+    $language: LanguageCode
+  ) @inContext(language: $language, country: $country) {
+    shop {
+      ...Shop
+    }
+    menu(handle: $headerMenuHandle) {
+      ...Menu
+    }
+  }
+  ${MENU_FRAGMENT}
+` as const;
+
+export const FOOTER_QUERY = `#graphql
+  query Footer(
+    $country: CountryCode
+    $footerMenuHandle: String!
+    $language: LanguageCode
+  ) @inContext(language: $language, country: $country) {
+    menu(handle: $footerMenuHandle) {
+      ...Menu
+    }
+  }
+  ${MENU_FRAGMENT}
+` as const;

dev-packages/e2e-tests/test-applications/remix-hydrogen/app/lib/search.ts

@@ -0,0 +1,25 @@
+import type {
+  PredictiveArticleFragment,
+  PredictiveCollectionFragment,
+  PredictivePageFragment,
+  PredictiveProductFragment,
+  PredictiveQueryFragment,
+  SearchProductFragment,
+} from 'storefrontapi.generated';
+
+export function applyTrackingParams(
+  resource:
+    | PredictiveQueryFragment
+    | SearchProductFragment
+    | PredictiveProductFragment
+    | PredictiveCollectionFragment
+    | PredictiveArticleFragment
+    | PredictivePageFragment,
+  params?: string,
+) {
+  if (params) {
+    return resource?.trackingParameters ? `?${params}&${resource.trackingParameters}` : `?${params}`;
+  } else {
+    return resource?.trackingParameters ? `?${resource.trackingParameters}` : '';
+  }
+}

dev-packages/e2e-tests/test-applications/remix-hydrogen/app/lib/session.ts

@@ -0,0 +1,61 @@
+import type { HydrogenSession } from '@shopify/hydrogen';
+import { type Session, type SessionStorage, createCookieSessionStorage } from '@shopify/remix-oxygen';
+
+/**
+ * This is a custom session implementation for your Hydrogen shop.
+ * Feel free to customize it to your needs, add helper methods, or
+ * swap out the cookie-based implementation with something else!
+ */
+export class AppSession implements HydrogenSession {
+  #sessionStorage;
+  #session;
+
+  constructor(sessionStorage: SessionStorage, session: Session) {
+    this.#sessionStorage = sessionStorage;
+    this.#session = session;
+  }
+
+  static async init(request: Request, secrets: string[]) {
+    const storage = createCookieSessionStorage({
+      cookie: {
+        name: 'session',
+        httpOnly: true,
+        path: '/',
+        sameSite: 'lax',
+        secrets,
+      },
+    });
+
+    const session = await storage.getSession(request.headers.get('Cookie')).catch(() => storage.getSession());
+
+    return new this(storage, session);
+  }
+
+  get has() {
+    return this.#session.has;
+  }
+
+  get get() {
+    return this.#session.get;
+  }
+
+  get flash() {
+    return this.#session.flash;
+  }
+
+  get unset() {
+    return this.#session.unset;
+  }
+
+  get set() {
+    return this.#session.set;
+  }
+
+  destroy() {
+    return this.#sessionStorage.destroySession(this.#session);
+  }
+
+  commit() {
+    return this.#sessionStorage.commitSession(this.#session);
+  }
+}