Revert e2e tests for proper ecommerce logic and the related code changes

Previously we would test the application's ecommerce logic, this was somewhat
brittle and required minor code changes in the application's code, given these
two flaws it seems like it can be better to just avoid this e2e testing altogether

This reverts commit 87d7eb8.
This reverts commit 8a812bd.
This reverts commit aebcaed.
This reverts commit 4232b73.

.github/workflows/playwright.yml

@@ -17,15 +17,6 @@ jobs:
         run: npm install -g pnpm && pnpm install
       - name: build all workers
         run: pnpm -r build:worker
-      - name: Generate .dev.vars file for vercel-commerce app
-        run: |
-          echo 'COMPANY_NAME = "Cloudflare"' >> ./examples/vercel-commerce/.dev.vars
-          echo 'TWITTER_CREATOR = "@Cloudflare"' >> ./examples/vercel-commerce/.dev.vars
-          echo 'TWITTER_SITE = "https://www.cloudflare.com/"' >> ./examples/vercel-commerce/.dev.vars
-          echo 'SITE_NAME = "My Store"' >> ./examples/vercel-commerce/.dev.vars
-          echo 'SHOPIFY_STORE_DOMAIN="https://graphql.myshopify.com"' >> ./examples/vercel-commerce/.dev.vars
-          echo 'SHOPIFY_STOREFRONT_ACCESS_TOKEN="${{ secrets.SHOPIFY_STOREFRONT_ACCESS_TOKEN }}"' >> ./examples/vercel-commerce/.dev.vars
-          echo 'SHOPIFY_REVALIDATION_SECRET=""' >> ./examples/vercel-commerce/.dev.vars
       - name: Install Playwright browsers
         run: pnpm run install-playwright
       - name: Run playwright tests

examples/vercel-commerce/e2e/base.spec.ts

@@ -1,8 +1,4 @@
 import { test, expect } from '@playwright/test';
-import dotenv from 'dotenv';
-import path from 'node:path';
-
-dotenv.config({ path: path.resolve(__dirname, '..', '.dev.vars') });
 
 test('the basic layout of the application works as expected', async ({ page }) => {
   await page.goto('/');
@@ -12,21 +8,3 @@ test('the basic layout of the application works as expected', async ({ page }) =
 
   await expect(page.getByRole('link', { name: 'Created by ▲ Vercel' })).toBeVisible();
 });
-
-test('the actual commerce functionality', async ({ page }) => {
-  test.skip(!process.env.SHOPIFY_STORE_DOMAIN, 'Populate the .dev.vars file to run the test');
-
-  await page.goto('/');
-
-  const hanraShirtLink = page.getByRole('link', { name: 'Hanra Shirt Hanra Shirt $108.' });
-
-  await hanraShirtLink.click();
-
-  await expect(page.getByRole('heading', { name: 'Hanra Shirt' })).toBeVisible();
-  await expect(page.getByText('SizeSML')).toBeVisible();
-
-  await page.getByPlaceholder('Search for products...').fill('non-existing-product');
-  await page.getByPlaceholder('Search for products...').press('Enter');
-
-  await expect(page.getByText('There are no products that match')).toBeVisible();
-});

examples/vercel-commerce/lib/shopify/index.ts

@@ -205,10 +205,6 @@ const reshapeProducts = (products: ShopifyProduct[]) => {
 };
 
 export async function createCart(): Promise<Cart> {
-  if (!process.env.SHOPIFY_STORE_DOMAIN) {
-    return {} as Cart;
-  }
-
   const res = await shopifyFetch<ShopifyCreateCartOperation>({
     query: createCartMutation,
     cache: 'no-store'
@@ -262,10 +258,6 @@ export async function updateCart(
 }
 
 export async function getCart(cartId: string | undefined): Promise<Cart | undefined> {
-  if (!process.env.SHOPIFY_STORE_DOMAIN) {
-    return undefined;
-  }
-
   if (!cartId) {
     return undefined;
   }
@@ -285,10 +277,6 @@ export async function getCart(cartId: string | undefined): Promise<Cart | undefi
 }
 
 export async function getCollection(handle: string): Promise<Collection | undefined> {
-  if (!process.env.SHOPIFY_STORE_DOMAIN) {
-    return undefined;
-  }
-
   const res = await shopifyFetch<ShopifyCollectionOperation>({
     query: getCollectionQuery,
     tags: [TAGS.collections],
@@ -309,10 +297,6 @@ export async function getCollectionProducts({
   reverse?: boolean;
   sortKey?: string;
 }): Promise<Product[]> {
-  if (!process.env.SHOPIFY_STORE_DOMAIN) {
-    return [];
-  }
-
   const res = await shopifyFetch<ShopifyCollectionProductsOperation>({
     query: getCollectionProductsQuery,
     tags: [TAGS.collections, TAGS.products],
@@ -332,10 +316,6 @@ export async function getCollectionProducts({
 }
 
 export async function getCollections(): Promise<Collection[]> {
-  if (!process.env.SHOPIFY_STORE_DOMAIN) {
-    return [];
-  }
-
   const res = await shopifyFetch<ShopifyCollectionsOperation>({
     query: getCollectionsQuery,
     tags: [TAGS.collections]
@@ -415,9 +395,6 @@ export async function getPages(): Promise<Page[]> {
 }
 
 export async function getProduct(handle: string): Promise<Product | undefined> {
-  if (!process.env.SHOPIFY_STORE_DOMAIN) {
-    return undefined;
-  }
   const res = await shopifyFetch<ShopifyProductOperation>({
     query: getProductQuery,
     tags: [TAGS.products],
@@ -450,9 +427,6 @@ export async function getProducts({
   reverse?: boolean;
   sortKey?: string;
 }): Promise<Product[]> {
-  if (!process.env.SHOPIFY_STORE_DOMAIN) {
-    return [];
-  }
   const res = await shopifyFetch<ShopifyProductsOperation>({
     query: getProductsQuery,
     tags: [TAGS.products],

examples/vercel-commerce/package.json

@@ -36,7 +36,6 @@
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "autoprefixer": "^10.4.19",
-    "dotenv": "catalog:",
     "postcss": "^8.4.39",
     "prettier": "3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.5",

examples/vercel-commerce/wrangler.toml

@@ -7,3 +7,12 @@ compatibility_flags = ["nodejs_compat_v2"]
 
 # Use the new Workers + Assets to host the static frontend files
 assets = { directory = ".worker-next/assets", binding = "ASSETS" }
+
+[vars]
+COMPANY_NAME="Vercel Inc."
+TWITTER_CREATOR="@vercel"
+TWITTER_SITE="https://nextjs.org/commerce"
+SITE_NAME="Next.js Commerce"
+SHOPIFY_REVALIDATION_SECRET=""
+SHOPIFY_STOREFRONT_ACCESS_TOKEN=""
+SHOPIFY_STORE_DOMAIN="[your-shopify-store-subdomain].myshopify.com"

pnpm-workspace.yaml

@@ -25,4 +25,3 @@ catalog:
   "typescript-eslint": ^8.7.0
   "eslint-plugin-unicorn": ^55.0.0
   "package-manager-detector": ^0.2.0
-  "dotenv": ^16.4.5