Configure CI/CD pipelines for Canva Connect API integrations with GitHub Actions.
Use when setting up automated testing, configuring CI pipelines,
or integrating Canva API tests into your build process.
Trigger with phrases like "canva CI", "canva GitHub Actions",
"canva automated tests", "CI canva", "canva pipeline".
Configure CI/CD pipelines for Canva Connect API integrations with GitHub Actions.
Use when setting up automated testing, configuring CI pipelines,
or integrating Canva API tests into your build process.
Trigger with phrases like "canva CI", "canva GitHub Actions",
"canva automated tests", "CI canva", "canva pipeline".
allowed-tools
Read, Write, Edit, Bash(gh:*)
version
1.0.0
license
MIT
author
Jeremy Longshore <jeremy@intentsolutions.io>
tags
["saas","design","canva"]
compatible-with
claude-code
Canva CI Integration
Overview
Set up CI/CD pipelines for Canva Connect API integrations. Uses MSW mock server for unit tests and real API calls for integration tests.
Instructions
Step 1: GitHub Actions Workflow
# .github/workflows/canva-integration.ymlname:CanvaIntegrationTestson:push:branches: [main]
pull_request:branches: [main]
jobs:unit-tests:runs-on:ubuntu-lateststeps:-uses:actions/checkout@v4-uses:actions/setup-node@v4with:node-version:'20'cache:'npm'-run:npmci-run:npmtest----coverage# Unit tests use MSW mocks — no real API callsintegration-tests:runs-on:ubuntu-latestif:github.event_name=='push'&&github.ref=='refs/heads/main'
needs:
unit-tests
env:
CANVA_CLIENT_ID:
${{
secrets.CANVA_CLIENT_ID
}}
CANVA_CLIENT_SECRET:
${{
secrets.CANVA_CLIENT_SECRET
}}
CANVA_ACCESS_TOKEN:
${{
secrets.CANVA_ACCESS_TOKEN
}}
steps:
-
uses:
actions/checkout@v4
-
uses:
actions/setup-node@v4
with:
node-version:
'20'
cache:
'npm'
-
run:
npm
ci
-
name:
Verify
Canva
API
connectivity
run:
|
HTTP_CODE=$(curl -s -o /dev/null -w "%{http_code}" \
-H "Authorization: Bearer $CANVA_ACCESS_TOKEN" \
"https://api.canva.com/rest/v1/users/me")
if [ "$HTTP_CODE" != "200" ]; then
echo "Canva API check failed: HTTP $HTTP_CODE"
exit 1
fi
-
name:
Run
integration
tests
run:
npm
run
test:integration
Step 2: Configure Secrets
# Store OAuth credentials as GitHub secrets
gh secret set CANVA_CLIENT_ID --body "OCAxxxxxxxxxxxxxxxx"
gh secret set CANVA_CLIENT_SECRET --body "xxxxxxxxxxxxxxxx"# For integration tests, store a long-lived access token# (refresh it periodically via a separate workflow or manually)
gh secret set CANVA_ACCESS_TOKEN --body "cnvat_xxxxxxxxxxxxxxxx"
