Feat: Add unit and e2e testing (#178)

* Feat: Add unit and e2e testing

---------

Co-authored-by: Frank <[email protected]>

.github/workflows/e2e.yml

@@ -0,0 +1,158 @@
+name: E2E Tests
+
+on:
+  schedule:
+    - cron: '0 0 * * *'
+  push:
+    branches:
+      - main
+
+env:
+  PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
+  PLAYWRIGHT_BROWSERS_PATH: 0
+  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+permissions:
+  id-token: write # This is required for requesting the JWT
+  contents: read # This is required for actions/checkout
+
+jobs:
+  check_next_version:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Get Latest Next Version
+        id: get_latest_version
+        run: |
+          latest_version=$(curl -s https://api.github.com/repos/vercel/next.js/releases/latest | jq -r '.tag_name')
+          echo "Latest version: $latest_version"
+          echo "LATEST_VERSION=$latest_version" >> $GITHUB_ENV
+          echo "LATEST_VERSION=$latest_version" >> $GITHUB_OUTPUT
+
+      - name: Restore Cache Previous Version
+        id: cache-previous
+        uses: actions/cache/restore@v3
+        with:
+          path: previous_version.txt
+          key: ${{ runner.os }}-previous-${{ steps.get_latest_version.outputs.LATEST_VERSION }}
+
+      - name: Compare Versions
+        id: compare_versions
+        run: |
+          latest_version=$LATEST_VERSION
+          if [ -f previous_version.txt ]; then
+            previous_version=$(cat previous_version.txt)
+            echo "pv: $previous_version"
+          else
+            previous_version=""
+          fi
+          
+          if [ "$latest_version" != "$previous_version" ]; then
+            echo "Versions are different. Continuing the pipeline."
+          else
+            echo "Versions are the same. Exiting with success."
+            echo "SKIP=true" >> $GITHUB_OUTPUT
+          fi
+
+    outputs:
+      skip: ${{ steps.compare_versions.outputs.SKIP }}
+      previousNextVersion: ${{ steps.get_latest_version.outputs.LATEST_VERSION }}
+      cacheKey: ${{ steps.cache-previous.outputs.cache-primary-key }}
+
+  e2e:
+    needs: check_next_version
+    if: needs.check_next_version.outputs.skip != 'true'
+    runs-on: ubuntu-latest
+    steps:
+
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@v2
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: us-east-1
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: Set up NodeJS v18
+        uses: actions/setup-node@v3
+        with:
+          cache: pnpm # cache pnpm store
+          node-version: 18.16.1
+
+      - name: Install packages
+        run: pnpm install
+
+      - name: Get Playwright version
+        id: playwright-version
+        run: echo "version=$(npm ls @playwright/test | grep @playwright | sed 's/.*@//' | sed 's/ .*//' )"
+
+      - name: Cache Playwright
+        uses: actions/cache@v3
+        id: playwright-cache
+        with:
+          path: "~/.cache/ms-playwright"
+          key: ${{ runner.os }}-playwright-${{ steps.playwright-version.outputs.version }}
+          restore-keys: |
+            ${{ runner.os }}-playwright-
+
+      - name: Install Playwright
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+        run: pnpm exec playwright install chromium --with-deps
+
+      # Cache turbo runs
+      - name: Cache Turbo
+        uses: actions/cache@v3
+        with:
+          path: .turbo
+          key: ${{ runner.os }}-turbo-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-turbo-
+
+      # Build all the packages
+      - name: Build
+        run: pnpm run build
+
+      # Deploy e2e stage
+      - name: Deploy NextjsSite
+        working-directory: examples/sst
+        run: npx sst deploy --stage e2e
+
+      # Load app urls from .sst/output.json file
+      - name: Set environments
+        working-directory: examples/sst
+        run: |
+          APP_ROUTER_URL=$(jq -r '.["e2e-example-AppRouter"].url' .sst/outputs.json)
+          echo "APP_ROUTER_URL=$APP_ROUTER_URL" >> $GITHUB_ENV
+          PAGES_ROUTER_URL=$(jq -r '.["e2e-example-PagesRouter"].url' .sst/outputs.json)
+          echo "PAGES_ROUTER_URL=$PAGES_ROUTER_URL" >> $GITHUB_ENV
+          APP_PAGES_ROUTER_URL=$(jq -r '.["e2e-example-AppPagesRouter"].url' .sst/outputs.json)
+          echo "APP_PAGES_ROUTER_URL=$APP_PAGES_ROUTER_URL" >> $GITHUB_ENV
+
+      - name: Run e2e Test
+        run: npm run e2e:test
+
+      - name: Archive
+        if: failure()
+        uses: actions/upload-artifact@v3
+        with:
+          name: sst
+          path: |
+            .sst/
+            .next/
+
+      - name: Store Latest Version
+        run: |
+          echo "${{ needs.check_next_version.outputs.previousNextVersion }}" > previous_version.txt
+      
+      - name: Cache Previous Version
+        uses: actions/cache/save@v3
+        with:
+          path: previous_version.txt
+          key: ${{ needs.check_next_version.outputs.cacheKey }}

.gitignore

@@ -15,4 +15,14 @@ docs/out/
 .DS_Store
 
 # typescript
-next-env.d.ts
+next-env.d.ts
+
+.turbo
+# Tests
+tests-unit/coverage
+test-results
+
+.sst/
+.sst.config*
+.next/
+.open-next/

.npmrc

@@ -1,2 +1,3 @@
 shared-workspace-lockfile = true
 auto-install-peers = true
+node-linker=hoisted

.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+  "files.exclude": {
+    "**/.turbo": true
+  },
+  "tailwindCSS.classAttributes": [
+    "class",
+    "className",
+    "tw"
+  ],
+}

docs/pages/_app.tsx

@@ -17,6 +17,7 @@ export default function App({ Component, pageProps }: AppProps) {
         }
       `}</style>
       <Layout>
+        {/* @ts-ignore */}
         <Component {...pageProps} />
       </Layout>
     </>

docs/tsconfig.json

@@ -8,8 +8,8 @@
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",

example/package.json

@@ -20,8 +20,8 @@
     "swr": "^1.0.1"
   },
   "devDependencies": {
-    "aws-cdk-lib": "2.84.0",
-    "constructs": "10.1.156",
-    "sst": "2.16.3"
+    "aws-cdk-lib": "2.91.0",
+    "constructs": "10.2.69",
+    "sst": "2.24.20"
   }
 }

examples/app-pages-router/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+.open-next
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/app-pages-router/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

examples/app-pages-router/app/albums/@modal/(.)[album]/[song]/page.tsx

@@ -0,0 +1,28 @@
+import { getSong } from "@example/shared/api";
+import Modal from "@example/shared/components/Modal";
+
+type Props = {
+  params: {
+    album: string;
+    song: string;
+  };
+};
+export default async function SongPage({ params }: Props) {
+  const song = await getSong(params.album, params.song);
+  return (
+    <Modal>
+      <h1>Modal</h1>
+      Album: {decodeURIComponent(params.album)}
+      <div className="absolute top-1/2 mt-10">
+        {/* <video width={1000} height={1000} autoPlay src={`https://youtube.com/watch?v=${params.song}`} /> */}
+        <iframe
+          width="560"
+          height="315"
+          title={params.song}
+          allowFullScreen
+          src={`https://youtube.com/embed/${song?.videoId}?autoplay=1`}
+        ></iframe>
+      </div>
+    </Modal>
+  );
+}

examples/app-pages-router/app/albums/@modal/(.)[album]/page.tsx

@@ -0,0 +1,10 @@
+import Modal from "@example/shared/components/Modal";
+
+type Props = {
+  params: {
+    artist: string;
+  };
+};
+export default function ArtistPage({ params }: Props) {
+  return <Modal>Artists {params.artist}</Modal>;
+}

examples/app-pages-router/app/albums/@modal/default.tsx

@@ -0,0 +1,3 @@
+export default function Default() {
+  return null;
+}

examples/app-pages-router/app/albums/[album]/[song]/page.tsx

@@ -0,0 +1,24 @@
+import { getSong } from "@example/shared/api";
+
+type Props = {
+  params: {
+    album: string;
+    song: string;
+  };
+};
+export default async function Song({ params }: Props) {
+  const song = await getSong(params.album, params.song);
+
+  return (
+    <div>
+      <h1>Not Modal</h1>
+      {decodeURIComponent(params.album)}
+      <iframe
+        width="560"
+        height="315"
+        allowFullScreen
+        src={`https://youtube.com/embed/${song?.videoId}?autoplay=1`}
+      ></iframe>
+    </div>
+  );
+}

examples/app-pages-router/app/albums/[album]/page.tsx

@@ -0,0 +1,3 @@
+export default function ArtistPage() {
+  return <div>Artist</div>;
+}

examples/app-pages-router/app/albums/layout.tsx

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+
+export default function Layout({
+  children,
+  modal,
+}: {
+  children: ReactNode;
+  modal: ReactNode;
+}) {
+  return (
+    <div>
+      {children}
+      {modal}
+    </div>
+  );
+}

examples/app-pages-router/app/albums/page.tsx

@@ -0,0 +1,13 @@
+import { getAlbums } from "@example/shared/api";
+import Album from "@example/shared/components/Album";
+
+export default async function AlbumPage() {
+  const albums = await getAlbums();
+  return (
+    <div>
+      {albums.map((album) => (
+        <Album album={album} />
+      ))}
+    </div>
+  );
+}