chore: add test commands

.github/workflows/continuous-integration-storefront.yml

@@ -0,0 +1,75 @@
+name: Continuous Integration (Storefront)
+on:
+  pull_request:
+    types: ["opened", "edited", "reopened", "synchronize"]
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
+  cancel-in-progress: true
+
+jobs:
+  scanning:
+    name: GitGuardian scan
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0 # fetch all history so multiple commits can be scanned
+      - name: GitGuardian scan
+        uses: GitGuardian/[email protected]
+        with:
+          args: -v
+        env:
+          GITHUB_PUSH_BEFORE_SHA: ${{ github.event.before }}
+          GITHUB_PUSH_BASE_SHA: ${{ github.event.base }}
+          GITHUB_PULL_BASE_SHA: ${{ github.event.pull_request.base.sha }}
+          GITHUB_DEFAULT_BRANCH: ${{ github.event.repository.default_branch }}
+          GITGUARDIAN_API_KEY: ${{ secrets.GITGUARDIAN_API_KEY }}
+
+  run-ci:
+    name: Run CI
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node_version: ["18"]
+    permissions:
+      contents: read
+      id-token: write
+
+    steps:
+      - name: Expose github environment as shell variables
+        env:
+          SECRETS_CONTEXT: ${{ toJson(secrets) }}
+          VARS_CONTEXT: ${{ toJson(vars) }}
+        run: |
+          # https://docs.github.com/en/actions/using-workflows/workflow-commands-for-github-actions#setting-an-environment-variable
+          # https://docs.github.com/en/actions/using-workflows/workflow-commands-for-github-actions#multiline-strings
+          EOF=$(dd if=/dev/urandom bs=15 count=1 status=none | base64)
+          to_envs() { jq -r "to_entries[] | \"\(.key)<<$EOF\n\(.value)\n$EOF\n\""; }
+          echo "$SECRETS_CONTEXT" | to_envs >> $GITHUB_ENV
+      - name: Checkout code 🛎️
+        uses: actions/checkout@v3
+
+      - name: Setup node 🏗️
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node_version }}
+
+      - run: npm config set //registry.npmjs.org/:_authToken=${{ secrets.NPM_RELEASE_TOKEN }}
+
+      - name: Install dependencies
+        shell: bash
+        run: HUSKY=0 yarn --frozen-lockfile && cd packages/storefront && yarn --frozen-lockfile
+
+      - name: Build project
+        run: yarn build
+        working-directory: packages/storefront
+
+      - name: Run tests
+        run: yarn test
+        working-directory: packages/storefront
+
+      - name: Lint project
+        run: yarn lint
+        working-directory: packages/storefront

.gitignore

@@ -29,6 +29,7 @@ coverage
 
 # Nuxt generated files
 .nuxt
+.output
 
 # Next generated files
 .next

packages/storefront/package.json

@@ -1,6 +1,22 @@
 {
   "name": "root-storefront",
   "private": true,
+  "scripts": {
+    "build": "yarn build:next && yarn build:nuxt",
+    "build:next": "cd packages/next && yarn build",
+    "build:nuxt": "cd packages/nuxt && yarn build",
+    "lint": "yarn lint:next && yarn lint:nuxt",
+    "lint:next": "cd packages/next && yarn lint",
+    "lint:nuxt": "cd packages/nuxt && yarn lint",
+    "test": "yarn test:next && yarn test:nuxt",
+    "test:next": "cd packages/next && yarn test",
+    "test:nuxt": "cd packages/nuxt && yarn test"
+  },
+  "devDependencies": {
+    "@vue-storefront/api-extractor-config": "^0.0.4",
+    "@vue-storefront/eslint-config-integrations": "^0.0.19",
+    "@vue-storefront/integrations-tsconfig": "^0.0.4"
+  },
   "workspaces": {
     "packages": [
       "packages/**/*"

packages/storefront/packages/next/__tests__/apps/app-router/app/csr/page.tsx

@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-unresolved, import/extensions
 import { ClientComponentUsingSdk } from "./ClientComponent";
 
 export default function ClientSidePage() {

packages/storefront/packages/next/__tests__/apps/app-router/app/layout.tsx

@@ -1,10 +1,21 @@
 import { ReactNode } from "react";
+// eslint-disable-next-line import/extensions, import/no-unresolved
 import { Providers } from "./providers";
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en">
       <body>
+        <nav>
+          <ul>
+            <li>
+              <a href="/ssr">SSR Page</a>
+            </li>
+            <li>
+              <a href="/csr">CSR Page</a>
+            </li>
+          </ul>
+        </nav>
         <Providers>{children}</Providers>
       </body>
     </html>

packages/storefront/packages/next/__tests__/apps/app-router/app/page.tsx

@@ -0,0 +1,7 @@
+export default async function Home() {
+  return (
+    <main>
+      <h1>Home Page</h1>
+    </main>
+  );
+}

packages/storefront/packages/next/__tests__/apps/app-router/hooks/index.ts

@@ -1,3 +1,5 @@
-import { createSdkContext } from "../sdk.config";
+// eslint-disable-next-line import/no-unresolved
+import { createSdkContext } from "@vue-storefront/next/client";
+import { getSdk } from "../sdk.config";
 
-export const [SdkProvider, useSdk] = createSdkContext();
+export const [SdkProvider, useSdk] = createSdkContext(getSdk() as any);

packages/storefront/packages/next/__tests__/apps/app-router/next.config.js

@@ -1,6 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  transpilePackages: ["@storefront/shared"],
+  // With swcMinify set to true, the build will fail because of some transpilation error, probably an issue on Next.js side
+  swcMinify: true,
 };
 
 module.exports = nextConfig;

packages/storefront/packages/next/__tests__/apps/app-router/sdk.config.ts

@@ -7,7 +7,7 @@ const options: CreateSdkOptions = {
   },
 };
 
-export const { getSdk, createSdkContext } = createSdk(
+export const { getSdk } = createSdk(
   options,
   ({ buildModule, middlewareUrl, getRequestHeaders }) => ({
     example: buildModule(exampleSdkModule, {

packages/storefront/packages/next/__tests__/apps/pages-router/hooks/index.ts

@@ -1,3 +1,5 @@
-import { createSdkContext } from "../sdk.config";
+/* eslint-disable import/no-unresolved */
+import { createSdkContext } from "@vue-storefront/next/client";
+import { getSdk } from "../sdk.config";
 
-export const [SdkProvider, useSdk] = createSdkContext();
+export const [SdkProvider, useSdk] = createSdkContext(getSdk());

packages/storefront/packages/next/__tests__/apps/pages-router/pages/_app.tsx

@@ -4,6 +4,16 @@ import { SdkProvider } from "../hooks";
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <SdkProvider>
+      <nav>
+        <ul>
+          <li>
+            <a href="/ssr">SSR Page</a>
+          </li>
+          <li>
+            <a href="/csr">CSR Page</a>
+          </li>
+        </ul>
+      </nav>
       <Component {...pageProps} />
     </SdkProvider>
   );

packages/storefront/packages/next/__tests__/apps/pages-router/pages/index.tsx

@@ -0,0 +1,7 @@
+export default function Home() {
+  return (
+    <main>
+      <h1>Home Page</h1>
+    </main>
+  );
+}

packages/storefront/packages/next/__tests__/apps/pages-router/sdk.config.ts

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-unresolved */
 /* eslint-disable import/no-relative-packages */
 import { exampleSdkModule } from "@storefront/shared";
 import { CreateSdkOptions, createSdk } from "@vue-storefront/next";
@@ -8,7 +9,7 @@ const options: CreateSdkOptions = {
   },
 };
 
-export const { getSdk, createSdkContext } = createSdk(
+export const { getSdk } = createSdk(
   options,
   ({ buildModule, middlewareUrl, getRequestHeaders }) => ({
     example: buildModule(exampleSdkModule, {

packages/storefront/packages/next/package.json

@@ -2,23 +2,50 @@
   "name": "@vue-storefront/next",
   "license": "MIT",
   "version": "0.0.1",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./client": {
+      "import": "./dist/client.js",
+      "require": "./dist/client.js",
+      "types": "./dist/client.d.ts"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/index.d.ts"
+      ],
+      "client": [
+        "dist/client.d.ts"
+      ]
+    }
+  },
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "tsup src/index.ts --dts-resolve",
+    "build": "tsup && yarn build:app-router && yarn build:pages-router",
+    "build:app-router": "cd __tests__/apps/app-router && yarn build",
+    "build:pages-router": "cd __tests__/apps/pages-router && yarn build",
+    "dev:app-router": "cd __tests__/apps/app-router && yarn dev",
+    "dev:pages-router": "cd __tests__/apps/pages-router && yarn dev",
+    "dev:middleware": "cd ../shared/src/__tests__/middleware && yarn dev",
     "lint": "eslint . --ext .ts",
-    "test:unit": "vitest",
-    "test:e2e": "cypress run"
+    "test:app-router": "start-server-and-test dev:middleware localhost:4000/test_integration/success dev:app-router localhost:3000 \"yarn test:e2e\"",
+    "test:pages-router": "start-server-and-test dev:middleware localhost:4000/test_integration/success dev:pages-router localhost:3000 \"yarn test:e2e\"",
+    "test": "yarn test:app-router && yarn test:pages-router",
+    "test:e2e": "cd ../shared/ && yarn test:e2e",
+    "test:unit": "vitest run"
   },
   "devDependencies": {
     "@types/react": "^18.2.31",
     "@types/react-dom": "^18.2.14",
-    "cypress": "^13.6.1",
     "react-dom": "^18.2.0",
+    "start-server-and-test": "^2.0.3",
     "tsup": "8.0.1",
     "vitest": "^0.34.6"
   },
@@ -30,13 +57,5 @@
   "engines": {
     "npm": ">=8.0.0",
     "node": ">=18.0.0"
-  },
-  "tsup": {
-    "clean": true,
-    "target": "es2019",
-    "format": [
-      "cjs",
-      "esm"
-    ]
   }
 }

packages/storefront/packages/next/src/client.ts

@@ -0,0 +1,3 @@
+"use client";
+
+export * from "./sdk/client";

packages/storefront/packages/next/src/sdk/helpers/SdkContext.tsx → packages/storefront/packages/next/src/sdk/client.tsx

@@ -2,14 +2,12 @@
 
 "use client";
 
-import { initSDK } from "@vue-storefront/sdk";
+import { SDKApi } from "@vue-storefront/sdk";
 import Script from "next/script";
 import React, { createContext, useContext } from "react";
-import { SdkProviderProps } from "../types";
+import { SdkProviderProps } from "./types";
 
-export function createSdkContext<TSdk extends ReturnType<typeof initSDK>>(
-  sdk: TSdk
-) {
+export function createSdkContext<TSdk extends SDKApi<any>>(sdk: TSdk) {
   const SdkContext = createContext<TSdk>(sdk);
 
   function SdkProvider({ children }: SdkProviderProps) {

packages/storefront/packages/next/src/sdk/helpers/index.ts

@@ -1,3 +1,2 @@
 // eslint-disable-next-line import/extensions, import/no-unresolved
-export * from "./SdkContext";
 export * from "./resolveDynamicContext";

packages/storefront/packages/next/src/sdk/index.tsx

@@ -1,9 +1,9 @@
-import { buildModule, initSDK } from "@vue-storefront/sdk";
 import {
   composeMiddlewareUrl,
   type CreateSdkOptions,
 } from "@storefront/shared";
-import { createSdkContext, resolveDynamicContext } from "./helpers";
+import { buildModule, initSDK } from "@vue-storefront/sdk";
+import { resolveDynamicContext } from "./helpers";
 import { Config, CreateSdkReturn, GetSdkContext } from "./types";
 
 export type { CreateSdkOptions } from "@storefront/shared";
@@ -67,6 +67,5 @@ export function createSdk<TConfig extends Record<string, any>>(
 
   return {
     getSdk,
-    createSdkContext: () => createSdkContext(getSdk()),
   };
 }

packages/storefront/packages/next/src/sdk/types.ts

@@ -77,23 +77,4 @@ export interface CreateSdkReturn<TConfig extends Record<string, any>> {
    * ```
    */
   getSdk: (dynamicContext?: GetSdkContext) => SDKApi<TConfig>;
-
-  /**
-   * Creates a new SDK context. This function is dedicated for the client-side usage.
-   *
-   * @example
-   * Create a new SDK context somewhere in your application. It may be the `hooks/sdk.ts` file.
-   *
-   * ```tsx
-   * import { createSdkContext } from "../../sdk.config";
-   *
-   * export const [SdkProvider, useSdk] = createSdkContext();
-   * ```
-   * Then use the `SdkProvider` in the root component of your application.
-   * For Pages Router it would be the `pages/_app.tsx` file,
-   * and for the App Router it would be the `app/layout.tsx` file.
-   * Finally you can use the `useSdk` in any client component of your application.
-   * @returns [SdkProvider, useSdk] - The SDK provider and the `useSdk` hook.
-   */
-  createSdkContext: () => CreateSdkContextReturn<TConfig>;
 }

packages/storefront/packages/next/tsup.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: {
+    index: "src/index.ts",
+    client: "src/client.ts",
+  },
+  target: "es2015",
+  format: ["cjs", "esm"],
+  dts: true,
+});

packages/storefront/packages/nuxt/__tests__/app/app.vue

@@ -1,5 +1,15 @@
 <template>
   <div>
+    <nav>
+      <ul>
+        <li>
+          <a href="/ssr">SSR Page</a>
+        </li>
+        <li>
+          <a href="/csr">CSR Page</a>
+        </li>
+      </ul>
+    </nav>
     <NuxtPage />
   </div>
 </template>

packages/storefront/packages/nuxt/__tests__/app/package.json

@@ -1,8 +1,10 @@
 {
   "private": true,
   "name": "@vue-storefront/nuxt-tests-app",
+  "version": "0.0.1",
   "type": "module",
   "scripts": {
+    "build": "nuxt build",
     "dev": "nuxt dev",
     "postinstall": "nuxt prepare"
   },

packages/storefront/packages/nuxt/__tests__/app/pages/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <h1>Home Page</h1>
+</template>