Skip to content

Commit 0e55cbc

Browse files
grdsdevgeorgRusanovgeorgiy.rusanov
authored
test: add integration tests for next js (#1459)
* test: add integration tests for next js * use npm * install playwright * test: fixing the pipeline (#1464) * try to create a structure for the tests * separate jobs for different tests * ci fix --------- Co-authored-by: georgiy.rusanov <[email protected]> * remove playwright test results from git * remove packageManager from package.json file --------- Co-authored-by: georgRusanov <[email protected]> Co-authored-by: georgiy.rusanov <[email protected]>
1 parent d38413b commit 0e55cbc

27 files changed

+8259
-52
lines changed

‎.github/workflows/ci.yml

Lines changed: 71 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -20,80 +20,114 @@ on:
2020

2121
jobs:
2222
test:
23-
name: Test / OS ${{ matrix.os }} / Node ${{ matrix.node }}
23+
name: Unit + Type Check / Node.js ${{ matrix.node }}
24+
runs-on: ubuntu-latest
2425
strategy:
2526
matrix:
26-
os: [ubuntu-latest]
27-
node: ['20']
28-
29-
runs-on: ${{ matrix.os }}
30-
27+
node: [20]
3128
steps:
3229
- uses: actions/checkout@v4
33-
34-
- name: Set up Node
35-
uses: actions/setup-node@v4
30+
- uses: actions/setup-node@v4
3631
with:
3732
node-version: ${{ matrix.node }}
3833

39-
- name: Run tests
40-
run: |
41-
npm clean-install
42-
npm run test:coverage
34+
- run: npm clean-install
35+
36+
- name: Type Check
37+
run: npm run test:types
38+
39+
- name: Run Unit Tests + Coverage
40+
run: npm run test:coverage
4341

4442
- name: Upload coverage results to Coveralls
4543
uses: coverallsapp/github-action@master
4644
with:
4745
github-token: ${{ secrets.GITHUB_TOKEN }}
4846
path-to-lcov: ./test/coverage/lcov.info
4947

50-
integration:
51-
name: Integration / OS ${{ matrix.os }} / Node ${{ matrix.node }} / Deno ${{ matrix.deno }}
48+
deno-tests:
49+
name: Deno Tests / ${{ matrix.deno }}
50+
runs-on: ubuntu-latest
5251
strategy:
5352
matrix:
54-
os: [ubuntu-latest]
55-
node: ['20']
5653
deno: ['1.x', '2.x']
57-
58-
runs-on: ${{ matrix.os }}
59-
6054
steps:
6155
- uses: actions/checkout@v4
62-
63-
- name: Set up Node
64-
uses: actions/setup-node@v4
65-
with:
66-
node-version: ${{ matrix.node }}
67-
6856
- uses: denoland/setup-deno@v2
6957
with:
7058
deno-version: ${{ matrix.deno }}
71-
72-
- name: Setup Supabase
73-
uses: supabase/setup-cli@v1
59+
- uses: supabase/setup-cli@v1
7460
with:
7561
version: latest
7662

7763
- name: Start Supabase
78-
run: |
79-
supabase start
64+
run: supabase start
8065

81-
- name: Build
66+
- name: Run Deno Tests
8267
run: |
8368
npm clean-install
8469
npm run build
70+
cd test/deno
71+
npm install
72+
npm test || npm test
8573
86-
- name: Run tests
74+
- name: Run integration and browser tests on Deno 2.x only
8775
if: ${{ matrix.deno == '2.x' }}
8876
run: |
8977
npm run test:integration || npm run test:integration
9078
npm run test:integration:browser
9179
92-
- name: Run Deno tests
80+
- name: Stop Supabase
81+
run: supabase stop
82+
83+
node-integration:
84+
name: Node Integration
85+
runs-on: ubuntu-latest
86+
steps:
87+
- uses: actions/checkout@v4
88+
- uses: actions/setup-node@v4
89+
with:
90+
node-version: 20
91+
- uses: supabase/setup-cli@v1
92+
with:
93+
version: latest
94+
95+
- name: Start Supabase
96+
run: supabase start
97+
98+
- name: Run integration tests
9399
run: |
94-
cd test/deno
95-
npm test || npm test
100+
npm clean-install
101+
npm run build
102+
npm run test:integration || npm run test:integration
96103
97104
- name: Stop Supabase
105+
run: supabase stop
106+
107+
next-integration:
108+
name: Next.js Integration
109+
runs-on: ubuntu-latest
110+
steps:
111+
- uses: actions/checkout@v4
112+
- uses: actions/setup-node@v4
113+
with:
114+
node-version: 20
115+
- uses: supabase/setup-cli@v1
116+
with:
117+
version: latest
118+
119+
- name: Start Supabase
120+
run: supabase start
121+
122+
- name: Install Playwright browsers and dependencies
123+
run: npx playwright install --with-deps
124+
125+
- name: Run integration tests
98126
run: |
99-
supabase stop
127+
cd test/integration/next
128+
npm install
129+
npx playwright install
130+
npm run test
131+
132+
- name: Stop Supabase
133+
run: supabase stop

‎package.json

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,13 +31,12 @@
3131
"test": "run-s test:types test:run",
3232
"test:all": "run-s test:types test:run test:integration test:integration:browser",
3333
"test:run": "jest --runInBand --detectOpenHandles",
34+
"test:unit": "jest --runInBand --detectOpenHandles test/unit",
3435
"test:coverage": "jest --runInBand --coverage --testPathIgnorePatterns=\"test/integration.*|test/deno.*\"",
3536
"test:integration": "jest --runInBand --detectOpenHandles test/integration.test.ts",
3637
"test:integration:browser": "deno test --allow-all test/integration.browser.test.ts",
37-
"test:db": "cd infra/db && docker-compose down && docker-compose up -d && sleep 5",
3838
"test:watch": "jest --watch --verbose false --silent false",
39-
"test:clean": "cd infra/db && docker-compose down",
40-
"test:types": "run-s build:module && tsd --files test/*.test-d.ts",
39+
"test:types": "run-s build:module && tsd --files test/types/*.test-d.ts",
4140
"docs": "typedoc --entryPoints src/index.ts --out docs/v2 --includes src/**/*.ts",
4241
"docs:json": "typedoc --entryPoints src/index.ts --includes src/**/*.ts --json docs/v2/spec.json --excludeExternals",
4342
"serve:coverage": "npm run test:coverage && serve test/coverage"

‎test/integration/next/.env.example

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# Update these with your Supabase details from your project settings > API
2+
# https://app.supabase.com/project/_/settings/api
3+
NEXT_PUBLIC_SUPABASE_URL=your-project-url
4+
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

‎test/integration/next/.gitignore

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.*
7+
.yarn/*
8+
!.yarn/patches
9+
!.yarn/plugins
10+
!.yarn/releases
11+
!.yarn/versions
12+
13+
# testing
14+
/coverage
15+
16+
# next.js
17+
/.next/
18+
/out/
19+
20+
# production
21+
/build
22+
23+
# misc
24+
.DS_Store
25+
*.pem
26+
27+
# debug
28+
npm-debug.log*
29+
yarn-debug.log*
30+
yarn-error.log*
31+
.pnpm-debug.log*
32+
33+
# env files (can opt-in for committing if needed)
34+
.env*.local
35+
.env
36+
37+
# vercel
38+
.vercel
39+
40+
# typescript
41+
*.tsbuildinfo
42+
next-env.d.ts
43+
44+
# playwright
45+
playwright-report
46+
test-results

‎test/integration/next/README.md

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<a href="https://demo-nextjs-with-supabase.vercel.app/">
2+
<img alt="Next.js and Supabase Starter Kit - the fastest way to build apps with Next.js and Supabase" src="https://demo-nextjs-with-supabase.vercel.app/opengraph-image.png">
3+
<h1 align="center">Next.js and Supabase Starter Kit</h1>
4+
</a>
5+
6+
<p align="center">
7+
The fastest way to build apps with Next.js and Supabase
8+
</p>
9+
10+
<p align="center">
11+
<a href="#features"><strong>Features</strong></a> ·
12+
<a href="#demo"><strong>Demo</strong></a> ·
13+
<a href="#deploy-to-vercel"><strong>Deploy to Vercel</strong></a> ·
14+
<a href="#clone-and-run-locally"><strong>Clone and run locally</strong></a> ·
15+
<a href="#feedback-and-issues"><strong>Feedback and issues</strong></a>
16+
<a href="#more-supabase-examples"><strong>More Examples</strong></a>
17+
</p>
18+
<br/>
19+
20+
## Features
21+
22+
- Works across the entire [Next.js](https://nextjs.org) stack
23+
- App Router
24+
- Pages Router
25+
- Middleware
26+
- Client
27+
- Server
28+
- It just works!
29+
- supabase-ssr. A package to configure Supabase Auth to use cookies
30+
- Password-based authentication block installed via the [Supabase UI Library](https://supabase.com/ui/docs/nextjs/password-based-auth)
31+
- Styling with [Tailwind CSS](https://tailwindcss.com)
32+
- Components with [shadcn/ui](https://ui.shadcn.com/)
33+
- Optional deployment with [Supabase Vercel Integration and Vercel deploy](#deploy-your-own)
34+
- Environment variables automatically assigned to Vercel project
35+
36+
## Demo
37+
38+
You can view a fully working demo at [demo-nextjs-with-supabase.vercel.app](https://demo-nextjs-with-supabase.vercel.app/).
39+
40+
## Deploy to Vercel
41+
42+
Vercel deployment will guide you through creating a Supabase account and project.
43+
44+
After installation of the Supabase integration, all relevant environment variables will be assigned to the project so the deployment is fully functioning.
45+
46+
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fwith-supabase&project-name=nextjs-with-supabase&repository-name=nextjs-with-supabase&demo-title=nextjs-with-supabase&demo-description=This+starter+configures+Supabase+Auth+to+use+cookies%2C+making+the+user%27s+session+available+throughout+the+entire+Next.js+app+-+Client+Components%2C+Server+Components%2C+Route+Handlers%2C+Server+Actions+and+Middleware.&demo-url=https%3A%2F%2Fdemo-nextjs-with-supabase.vercel.app%2F&external-id=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fwith-supabase&demo-image=https%3A%2F%2Fdemo-nextjs-with-supabase.vercel.app%2Fopengraph-image.png)
47+
48+
The above will also clone the Starter kit to your GitHub, you can clone that locally and develop locally.
49+
50+
If you wish to just develop locally and not deploy to Vercel, [follow the steps below](#clone-and-run-locally).
51+
52+
## Clone and run locally
53+
54+
1. You'll first need a Supabase project which can be made [via the Supabase dashboard](https://database.new)
55+
56+
2. Create a Next.js app using the Supabase Starter template npx command
57+
58+
```bash
59+
npx create-next-app --example with-supabase with-supabase-app
60+
```
61+
62+
```bash
63+
yarn create next-app --example with-supabase with-supabase-app
64+
```
65+
66+
```bash
67+
pnpm create next-app --example with-supabase with-supabase-app
68+
```
69+
70+
3. Use `cd` to change into the app's directory
71+
72+
```bash
73+
cd with-supabase-app
74+
```
75+
76+
4. Rename `.env.example` to `.env.local` and update the following:
77+
78+
```
79+
NEXT_PUBLIC_SUPABASE_URL=[INSERT SUPABASE PROJECT URL]
80+
NEXT_PUBLIC_SUPABASE_ANON_KEY=[INSERT SUPABASE PROJECT API ANON KEY]
81+
```
82+
83+
Both `NEXT_PUBLIC_SUPABASE_URL` and `NEXT_PUBLIC_SUPABASE_ANON_KEY` can be found in [your Supabase project's API settings](https://supabase.com/dashboard/project/_?showConnect=true)
84+
85+
5. You can now run the Next.js local development server:
86+
87+
```bash
88+
npm run dev
89+
```
90+
91+
The starter kit should now be running on [localhost:3000](http://localhost:3000/).
92+
93+
6. This template comes with the default shadcn/ui style initialized. If you instead want other ui.shadcn styles, delete `components.json` and [re-install shadcn/ui](https://ui.shadcn.com/docs/installation/next)
94+
95+
> Check out [the docs for Local Development](https://supabase.com/docs/guides/getting-started/local-development) to also run Supabase locally.
96+
97+
## Feedback and issues
98+
99+
Please file feedback and issues over on the [Supabase GitHub org](https://github.com/supabase/supabase/issues/new/choose).
100+
101+
## More Supabase examples
102+
103+
- [Next.js Subscription Payments Starter](https://github.com/vercel/nextjs-subscription-payments)
104+
- [Cookie-based Auth and the Next.js 13 App Router (free course)](https://youtube.com/playlist?list=PL5S4mPUpp4OtMhpnp93EFSo42iQ40XjbF)
105+
- [Supabase Auth and the Next.js App Router](https://github.com/supabase/supabase/tree/master/examples/auth/nextjs)

‎test/integration/next/app/page.tsx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
'use client'
2+
3+
import { useEffect, useState } from 'react'
4+
import { createClient } from '@/lib/supabase/client'
5+
6+
export default function Home() {
7+
const supabase = createClient()
8+
const [realtimeStatus, setRealtimeStatus] = useState<string | null>(null)
9+
const channel = supabase.channel('realtime:public:test')
10+
11+
useEffect(() => {
12+
channel.subscribe((status) => setRealtimeStatus(status))
13+
14+
return () => {
15+
channel.unsubscribe()
16+
}
17+
}, [])
18+
19+
return <div data-testid="realtime_status">{realtimeStatus}</div>
20+
}

‎test/integration/next/components.json

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema.json",
3+
"style": "new-york",
4+
"rsc": true,
5+
"tsx": true,
6+
"tailwind": {
7+
"config": "",
8+
"css": "app/globals.css",
9+
"baseColor": "neutral",
10+
"cssVariables": true,
11+
"prefix": ""
12+
},
13+
"aliases": {
14+
"components": "@/components",
15+
"utils": "@/lib/utils",
16+
"ui": "@/components/ui",
17+
"lib": "@/lib",
18+
"hooks": "@/hooks"
19+
},
20+
"iconLibrary": "lucide"
21+
}

‎test/integration/next/eslint.config.mjs

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { dirname } from 'path'
2+
import { fileURLToPath } from 'url'
3+
import { FlatCompat } from '@eslint/eslintrc'
4+
5+
const __filename = fileURLToPath(import.meta.url)
6+
const __dirname = dirname(__filename)
7+
8+
const compat = new FlatCompat({
9+
baseDirectory: __dirname,
10+
})
11+
12+
const eslintConfig = [...compat.extends('next/core-web-vitals', 'next/typescript')]
13+
14+
export default eslintConfig

‎test/integration/next/lib/supabase/client.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { createBrowserClient } from '@supabase/ssr'
2+
3+
export function createClient() {
4+
return createBrowserClient(
5+
process.env.NEXT_PUBLIC_SUPABASE_URL || 'http://127.0.0.1:54321',
6+
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY ||
7+
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0'
8+
)
9+
}

0 commit comments

Comments
 (0)