Add integration tests for create-houdini (#1204)

.github/workflows/tests.yml

@@ -75,13 +75,15 @@ jobs:
               id: pnpm-cache
               run: |
                 echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
+
             - uses: actions/cache@v3
               name: Setup pnpm cache
               with:
                 path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
                 key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
                 restore-keys: |
                   ${{ runner.os }}-pnpm-store-
+
             - name: Install dependencies
               run: pnpm install
 
@@ -91,8 +93,8 @@ jobs:
             - name: Tests
               run: pnpm run tests
 
-    verify_create:
-        name: Verify Create
+    verify_init:
+        name: Verify Init
         runs-on: ubuntu-latest
         steps:
             - name: Checkout source
@@ -140,6 +142,62 @@ jobs:
 
             - name: Run init
               run: cd project && node ../houdini/packages/houdini/build/cmd-esm/index.js init -y
+
+    verify_create:
+        name: Verify Create
+        runs-on: ubuntu-latest
+        strategy:
+            matrix:
+                template: [react, react-typescript, sveltekit-demo]
+        steps:
+            - name: Checkout source
+              uses: actions/checkout@v3
+              with:
+                  ref: ${{ github.ref }}
+
+            - name: Install Node.js
+              uses: actions/setup-node@v3
+              with:
+                node-version: 18.17.1
+
+            - uses: pnpm/[email protected]
+              name: Install pnpm
+              id: pnpm-install
+              with:
+                version: 8
+
+            - name: Get pnpm store directory
+              id: pnpm-cache
+              run: |
+                echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
+
+            - uses: actions/cache@v3
+              name: Setup pnpm cache
+              with:
+                path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+                key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+                restore-keys: |
+                  ${{ runner.os }}-pnpm-store-
+
+            - name: Install dependencies
+              run: cd packages/create-houdini && pnpm install
+
+            - name: Create template (local)
+              if: matrix.template != 'sveltekit-demo'
+              run: cd packages/create-houdini && pnpm dev test-${{ matrix.template }} -t ${{ matrix.template }} -s local
+
+            - name: Create template (not local)
+              if: matrix.template == 'sveltekit-demo'
+              run: cd packages/create-houdini && pnpm dev test-${{ matrix.template }} -t ${{ matrix.template }}
+
+            - run: cd packages/create-houdini/test-${{ matrix.template }} && npx playwright install
+
+            - name: e2e install
+              run: cd packages/create-houdini/test-${{ matrix.template }} && npm i
+
+            - name: e2e tests
+              if: matrix.template == 'sveltekit-demo'
+              run: cd packages/create-houdini/test-${{ matrix.template }} && npm run test:integration
 
     e2e_tests:
         name: End-to-End Tests
@@ -256,4 +314,4 @@ jobs:
               run: pnpm --filter e2e-kit run lint
 
             - name: End-to-End check
-              run: pnpm --filter e2e-kit run check
+              run: pnpm --filter e2e-kit run check

packages/create-houdini/.gitignore

@@ -0,0 +1 @@
+test-*

packages/create-houdini/bin.js

@@ -1,7 +1,8 @@
 #!/usr/bin/env node
 import * as p from '@clack/prompts'
+import { program, Option, InvalidArgumentError } from 'commander'
 import * as graphql from 'graphql'
-import { bold, cyan, gray, green, grey, italic, white } from 'kleur/colors'
+import { bold, cyan, gray, grey, italic, white } from 'kleur/colors'
 import fs, { readFileSync, writeFileSync } from 'node:fs'
 import path from 'node:path'
 import { exit } from 'node:process'
@@ -28,6 +29,24 @@ const options = fs.readdirSync(templatesDir).map((templateDir) => {
 	return { ...data, value: templateDir }
 })
 
+program.argument('[project_name]', 'optional project name')
+program.addOption(
+	new Option('-t, --template <template>', 'template you want to use').choices(
+		options.map((c) => c.value)
+	)
+)
+program.addOption(
+	new Option('-s, --schema <schema>', '"local" or "http..."').argParser((value) => {
+		if (value === 'local' || value.startsWith('http')) {
+			return value
+		}
+		throw new InvalidArgumentError('Should be "local" or "http..." or do not set it!')
+	})
+)
+
+program.parse(process.argv)
+const options_cli = program.opts()
+
 p.intro('🎩 Welcome to Houdini!')
 
 // if we weren't given a directory, then we should ask
@@ -78,11 +97,13 @@ if (dirToCreate && !fs.existsSync(projectDir)) {
 	fs.mkdirSync(projectDir)
 }
 
-const template = await p.select({
-	message: 'Which template do you want to use?',
-	initialValue: 'react-typescript',
-	options,
-})
+const template = options_cli.template
+	? options_cli.template
+	: await p.select({
+			message: 'Which template do you want to use?',
+			initialValue: 'react-typescript',
+			options,
+	  })
 if (p.isCancel(template)) {
 	process.exit(1)
 }
@@ -94,14 +115,18 @@ if (!templateMeta) {
 }
 
 // ask if the schema is local or remote
-const localSchema =
-	template !== 'sveltekit-demo' &&
-	(await p.confirm({
-		message: 'Is your api going to be defined in this project too?',
-	}))
+const localSchema = templateMeta.apiUrl
+	? false
+	: options_cli.schema === 'local'
+	? true
+	: options_cli.schema?.startsWith('http')
+	? false
+	: await p.confirm({
+			message: 'Is your api going to be defined in this project too?',
+	  })
 
 // if we have a remote schema then we need to introspect it and write the value
-let apiUrl = templateMeta.apiUrl ?? ''
+let apiUrl = options_cli.schema?.startsWith('http') ? options_cli.schema : templateMeta.apiUrl ?? ''
 if (!localSchema) {
 	let pullSchema_content = ''
 	if (apiUrl === '') {
@@ -153,13 +178,9 @@ copy(
 	['.meta.json']
 )
 
-// if we have a local schema then we have more fiiles to copy
+// if we have a local schema then we have more files to copy
 if (localSchema) {
-	if (template === 'react') {
-		copy(sourcePath('./fragments/localApi'))
-	} else if (template === 'react-typescript') {
-		copy(sourcePath('./fragments/localApi-typescript'))
-	}
+	copy(sourcePath('./fragments/localSchema/' + template))
 }
 
 // If anything goes wrong, we don't want to block the user

packages/create-houdini/package.json

@@ -20,8 +20,9 @@
 	},
 	"dependencies": {
 		"@clack/prompts": "^0.6.3",
-		"kleur": "^4.1.5",
-		"graphql": "16.8.0"
+		"commander": "^9.4.0",
+		"graphql": "16.8.0",
+		"kleur": "^4.1.5"
 	},
 	"devDependencies": {
 		"@types/node": "^18.7.23",

packages/create-houdini/templates/react-typescript/.graphqlrc.yaml

@@ -0,0 +1,8 @@
+projects:
+    default:
+        schema:
+            - ./$houdini/graphql/schema.graphql
+        documents:
+            - '**/*.gql'
+            - '**/*.tsx'
+            - ./$houdini/graphql/documents.gql

packages/create-houdini/templates/react/.graphqlrc.yaml

@@ -0,0 +1,8 @@
+projects:
+    default:
+        schema:
+            - ./$houdini/graphql/schema.graphql
+        documents:
+            - '**/*.gql'
+            - '**/*.jsx'
+            - ./$houdini/graphql/documents.gql

packages/create-houdini/templates/sveltekit-demo/package.json

@@ -15,7 +15,7 @@
 		"test:unit": "vitest"
 	},
 	"devDependencies": {
-		"@playwright/test": "^1.28.1",
+		"@playwright/test": "1.30.0",
 		"@sveltejs/adapter-auto": "^2.0.0",
 		"@sveltejs/kit": "^1.20.4",
 		"@typescript-eslint/eslint-plugin": "^5.45.0",

packages/create-houdini/templates/sveltekit-demo/tests/test.ts

@@ -2,5 +2,5 @@ import { expect, test } from '@playwright/test';
 
 test('index page has expected h1', async ({ page }) => {
 	await page.goto('/');
-	await expect(page.getByRole('heading', { name: 'Welcome to SvelteKit' })).toBeVisible();
+	await expect(page.getByRole('heading', { name: 'Welcome to Houdini 🎩' })).toBeVisible();
 });