Merge pull request #15694 from supabase/feat-add-edge-unit-tests-to-docs

feat: add edge unit tests to the docs

apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts

@@ -760,6 +760,7 @@ export const functions: NavMenuConstant = {
           name: 'Connecting directly to Postgres',
           url: '/guides/functions/connect-to-postgres',
         },
+        { name: 'Testing your Edge Functions', url: '/guides/functions/unit-test' },
         { name: 'Troubleshooting', url: '/guides/functions/troubleshooting' },
       ],
     },

apps/docs/pages/guides/functions/quickstart.mdx

@@ -199,7 +199,8 @@ For use-cases which require low-latency we recommend [Edge Functions](/docs/guid
 
 ## Organizing your Edge Functions
 
-We recommend developing “fat functions”. This means that you should develop few large functions, rather than many small functions. One common pattern when developing Functions is that you need to share code between two or more Functions. To do this, you can store any shared code in a folder prefixed with an underscore (`_`). We recommend this folder structure:
+We recommend developing “fat functions”. This means that you should develop few large functions, rather than many small functions. One common pattern when developing Functions is that you need to share code between two or more Functions. To do this, you can store any shared code in a folder prefixed with an underscore (`_`). We also recommend a separate folder for [Unit Tests](/docs/guides/functions/unit-test) including the name of the function followed by a `-test` suffix.
+We recommend this folder structure:
 
 ```bash
 └── supabase
@@ -212,7 +213,10 @@ We recommend developing “fat functions”. This means that you should develop
     │   ├── function-one # Use hyphens to name functions.
     │   │   └── index.ts
     │   └── function-two
-    │       └── index.ts
+    │   │   └── index.ts
+    │   └── tests
+    │       └── function-one-test.ts
+    │       └── function-two-test.ts
     ├── migrations
     └── config.toml
 ```

apps/docs/pages/guides/functions/unit-test.mdx

@@ -0,0 +1,140 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+  id: 'unit-test',
+  title: 'Testing your Edge Functions',
+  description: 'Writing Unit Tests for Edge Functions using Deno Test',
+}
+
+Testing is an essential step in the development process to ensure the correctness and performance of your Edge Functions.
+
+When creating test files for Edge Functions, it is recommended to place them in the `supabase/tests` directory and name the file by the function name followed by `-test.ts`. For example, `hello-world-test.ts`.
+
+```typescript
+// deno-test.ts
+
+// Import required libraries and modules
+import {
+  assert,
+  assertExists,
+  assertEquals,
+} from 'https://deno.land/std@0.192.0/testing/asserts.ts'
+import { createClient, SupabaseClient } from 'https://esm.sh/@supabase/supabase-js@2.23.0'
+import { delay } from 'https://deno.land/x/delay@v0.2.0/mod.ts'
+
+// Set up the configuration for the Supabase client
+const supabaseUrl = Deno.env.get('SUPABASE_URL') ?? ''
+const supabaseKey = Deno.env.get('SUPABASE_ANON_KEY') ?? ''
+const options = {
+  auth: {
+    autoRefreshToken: false,
+    persistSession: false,
+    detectSessionInUrl: false,
+  },
+}
+
+// Test the creation and functionality of the Supabase client
+const testClientCreation = async () => {
+  var client: SupabaseClient = createClient(supabaseUrl, supabaseKey, options)
+
+  // Verify if the Supabase URL and key are provided
+  if (!supabaseUrl) throw new Error('supabaseUrl is required.')
+  if (!supabaseKey) throw new Error('supabaseKey is required.')
+
+  // Test a simple query to the database
+  const { data: table_data, error: table_error } = await client
+    .from('my_table')
+    .select('*')
+    .limit(1)
+  if (table_error) {
+    throw new Error('Invalid Supabase client: ' + table_error.message)
+  }
+  assert(table_data, 'Data should be returned from the query.')
+}
+
+// Test the 'hello-world' function
+const testHelloWorld = async () => {
+  var client: SupabaseClient = createClient(supabaseUrl, supabaseKey, options)
+
+  // Invoke the 'hello-world' function with a parameter
+  const { data: func_data, error: func_error } = await client.functions.invoke('hello-world', {
+    body: { name: 'bar' },
+  })
+
+  // Check for errors from the function invocation
+  if (func_error) {
+    throw new Error('Invalid response: ' + func_error.message)
+  }
+
+  // Log the response from the function
+  console.log(JSON.stringify(func_data, null, 2))
+
+  // Assert that the function returned the expected result
+  assertEquals(func_data.message, 'Hello bar!')
+}
+
+// Register and run the tests
+Deno.test('Client Creation Test', testClientCreation)
+Deno.test('Hello-world Function Test', testHelloWorld)
+```
+
+This test case consists of two parts. The first part tests the client library and verifies that the database can be connected to and returns values from a table (`my_table`). The second part tests the edge function and checks if the received value matches the expected value. Here's a brief overview of the code:
+
+- We import various testing functions from the Deno standard library, including `assert`, `assertExists`, and `assertEquals`.
+- We import the `createClient` and `SupabaseClient` classes from the `@supabase/supabase-js` library to interact with the Supabase client.
+- We define the necessary configuration for the Supabase client, including the Supabase URL, API key, and authentication options.
+- The `testClientCreation` function tests the creation of a Supabase client instance and queries the database for data from a table. It verifies that data is returned from the query.
+- The `testHelloWorld` function tests the "Hello-world" Edge Function by invoking it using the Supabase client's `functions.invoke` method. It checks if the response message matches the expected greeting.
+- We run the tests using the `Deno.test` function, providing a descriptive name for each test case and the corresponding test function.
+
+<Admonition type="important">
+
+Please make sure to replace the placeholders (`supabaseUrl`, `supabaseKey`, `my_table`) with the
+actual values relevant to your Supabase setup.
+
+</Admonition>
+
+### Running Edge Functions Locally
+
+To locally test and debug Edge Functions, you can utilize the Supabase CLI. Let's explore how to run Edge Functions locally using the Supabase CLI:
+
+1. Ensure that the Supabase server is running by executing the following command:
+
+   ```bash
+   supabase start
+   ```
+
+2. In your terminal, use the following command to serve the Edge Functions locally:
+
+   ```bash
+   supabase functions serve
+   ```
+
+   This command starts a local server that runs your Edge Functions, enabling you to test and debug them in a development environment.
+
+3. Create the environment variables file:
+
+   ```bash
+   # creates the file
+   touch .env.local
+   # adds the SUPABASE_URL secret
+   echo "SUPABASE_URL=http://localhost:54321" >> .env.local
+   # adds the SUPABASE_ANON_KEY secret
+   echo "SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0" >> .env.local
+   # Alternatively, you can open it in your editor:
+   open .env.local
+   ```
+
+4. To run the tests, use the following command in your terminal:
+
+   ```bash
+   deno test --allow-all deno-test.ts --env-file .env.local
+   ```
+
+## Resources
+
+- Full guide on Testing Supabase Edge Functions on [Mansueli's tips](https://blog.mansueli.com/testing-supabase-edge-functions-with-deno-test)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page