Add tests for (real world) package installation

.github/workflows/e2e.yml

@@ -65,6 +65,10 @@ jobs:
       - name: Install Playwright and browsers
         run: pnpm playwright install --with-deps
 
+      - name: Run setup
+        working-directory: ./e2e/${{ matrix.project }}
+        run: pnpm run --if-present setup
+
       - name: Run sources
         working-directory: ./e2e/${{ matrix.project }}
         run: pnpm run sources

.gitignore

@@ -38,4 +38,6 @@ packages/extension/.DS_Store
 packages/ui/core-components/coverage
 sites/docs/.evidence/meta/query-cache/hashes.json
 
-priority_support_users.csv
+priority_support_users.csv
+
+evidence-*.tgz

e2e/package.json

@@ -6,6 +6,7 @@
 		"@playwright/test": "^1.45.3",
 		"chalk": "^5.3.0",
 		"ora": "^8.1.0",
-		"sade": "^1.8.1"
+		"sade": "^1.8.1",
+		"glob": "11.0.0"
 	}
 }

e2e/packaging/.gitignore

@@ -0,0 +1,15 @@
+.evidence/template
+.svelte-kit
+build
+node_modules
+.DS_Store
+static/data
+*.options.yaml
+.vscode/settings.json
+.env
+.evidence/meta
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+package-lock.json

e2e/packaging/.npmrc

@@ -0,0 +1,3 @@
+loglevel=error
+audit=false
+fund=false

e2e/packaging/README.md

@@ -0,0 +1,44 @@
+# Evidence Template Project
+
+## Using Codespaces
+
+If you are using this template in Codespaces, click the `Start Evidence` button in the bottom status bar. This will install dependencies and open a preview of your project in your browser - you should get a popup prompting you to open in browser.
+
+Or you can use the following commands to get started:
+
+```bash
+npm install
+npm run sources
+npm run dev -- --host 0.0.0.0
+```
+
+See [the CLI docs](https://docs.evidence.dev/cli/) for more command information.
+
+**Note:** Codespaces is much faster on the Desktop app. After the Codespace has booted, select the hamburger menu → Open in VS Code Desktop.
+
+## Get Started from VS Code
+
+The easiest way to get started is using the [VS Code Extension](https://marketplace.visualstudio.com/items?itemName=Evidence.evidence-vscode):
+
+1. Install the extension from the VS Code Marketplace
+2. Open the Command Palette (Ctrl/Cmd + Shift + P) and enter `Evidence: New Evidence Project`
+3. Click `Start Evidence` in the bottom status bar
+
+## Get Started using the CLI
+
+```bash
+npx degit evidence-dev/template my-project
+cd my-project
+npm install
+npm run sources
+npm run dev
+```
+
+Check out the docs for [alternative install methods](https://docs.evidence.dev/getting-started/install-evidence) including Docker, Github Codespaces, and alongside dbt.
+
+## Learning More
+
+- [Docs](https://docs.evidence.dev/)
+- [Github](https://github.com/evidence-dev/evidence)
+- [Slack Community](https://slack.evidence.dev/)
+- [Evidence Home Page](https://www.evidence.dev)

e2e/packaging/build-deps-to-tgz.js

@@ -0,0 +1,35 @@
+import { copyFile, readdir, rm } from 'node:fs/promises';
+import { glob } from 'glob';
+import path from 'node:path';
+import { exec } from 'node:child_process';
+import { promisify } from 'node:util';
+
+const aexec = promisify(exec);
+const __dirname = path.dirname(new URL(import.meta.url).pathname);
+
+for (const pkg of await glob('../../packages/**/package.json', {
+	ignore: {
+		ignored: (path) => path.fullpath().includes('node_modules')
+	}
+})) {
+	const package_dir = path.dirname(pkg);
+	const package_name = path.basename(package_dir);
+
+	// call `pnpm pack` in the package directory
+	// and move the tarball to the root of the project
+	// with the name `evidence-dev-<package_name>.tgz`
+
+	await aexec('pnpm pack', { cwd: package_dir });
+
+	const files = await readdir(package_dir);
+	const tarball = files.filter((file) => file.endsWith('.tgz'))[0];
+	if (tarball === undefined) {
+		throw new Error(`Could not find tarball for ${package_name}`);
+	}
+
+	await copyFile(
+		path.join(package_dir, tarball),
+		path.join(__dirname, `evidence-dev-${package_name}.tgz`)
+	);
+	await rm(path.join(package_dir, tarball));
+}

e2e/packaging/evidence.plugins.yaml

@@ -0,0 +1,20 @@
+
+components:
+  # This loads all of evidence's core charts and UI components
+  # You probably don't want to edit this dependency unless you know what you are doing
+  "@evidence-dev/core-components": {}
+
+datasources:
+  # You can add additional datasources here by adding npm packages. 
+  # Make to also add them to `package.json`.
+  "@evidence-dev/bigquery": { }
+  "@evidence-dev/csv": { }
+  "@evidence-dev/databricks": { }
+  "@evidence-dev/duckdb": { }
+  "@evidence-dev/mssql": { }
+  "@evidence-dev/mysql": { }
+  "@evidence-dev/postgres": { }
+  "@evidence-dev/snowflake": { }
+  "@evidence-dev/sqlite": { }
+  "@evidence-dev/trino": { }
+  "@evidence-dev/motherduck": { }

e2e/packaging/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "e2e-packaging",
+  "version": "0.0.1",
+  "scripts": {
+    "build": "evidence build",
+    "build:strict": "evidence build:strict",
+    "dev": "evidence dev --open /",
+    "sources": "evidence sources",
+    "preview": "evidence preview",
+    "test:preview": "playwright test",
+    "test:dev": "cross-env DEV=true playwright test",
+	"setup": "node ./build-deps-to-tgz.js && npm i && pnpm sources"
+  },
+  "engines": {
+    "npm": ">=7.0.0",
+    "node": ">=18.0.0"
+  },
+  "type": "module",
+  "dependencies": {
+    "@evidence-dev/bigquery": "file:./evidence-dev-bigquery.tgz",
+    "@evidence-dev/core-components": "file:./evidence-dev-core-components.tgz",
+    "@evidence-dev/csv": "file:./evidence-dev-csv.tgz",
+    "@evidence-dev/databricks": "file:./evidence-dev-databricks.tgz",
+    "@evidence-dev/duckdb": "file:./evidence-dev-duckdb.tgz",
+    "@evidence-dev/evidence": "file:./evidence-dev-evidence.tgz",
+    "@evidence-dev/motherduck": "file:./evidence-dev-motherduck.tgz",
+    "@evidence-dev/mssql": "file:./evidence-dev-mssql.tgz",
+    "@evidence-dev/mysql": "file:./evidence-dev-mysql.tgz",
+    "@evidence-dev/postgres": "file:./evidence-dev-postgres.tgz",
+    "@evidence-dev/snowflake": "file:./evidence-dev-snowflake.tgz",
+    "@evidence-dev/sqlite": "file:./evidence-dev-sqlite.tgz",
+    "@evidence-dev/trino": "file:./evidence-dev-trino.tgz"
+  },
+  "overrides": {
+    "jsonwebtoken": "9.0.0",
+    "trim@<0.0.3": ">0.0.3",
+    "sqlite3": "5.1.5",
+    "axios": "^1.7.4",
+	"@evidence-dev/component-utilities": "file:./evidence-dev-component-utilities.tgz",
+	"@evidence-dev/preprocess": "file:./evidence-dev-preprocess.tgz",
+	"@evidence-dev/sdk": "file:./evidence-dev-sdk.tgz",
+	"@evidence-dev/universal-sql": "file:./evidence-dev-universal-sql.tgz",
+	"@evidence-dev/tailwind": "file:./evidence-dev-tailwind.tgz",
+	"@evidence-dev/db-commons": "file:./evidence-dev-db-commons.tgz",
+	"@evidence-dev/telemetry": "file:./evidence-dev-telemetry.tgz",
+	"@evidence-dev/icons": "file:./evidence-dev-icons.tgz"
+  },
+  "private": true,
+  "devDependencies": {
+    "@types/node": "^22.10.1",
+    "cross-env": "^7.0.3"
+  }
+}

e2e/packaging/pages/index.md

@@ -0,0 +1,59 @@
+---
+title: Welcome to Evidence
+---
+
+<Details title='How to edit this page'>
+
+This page can be found in your project at `/pages/index.md`. Make a change to the markdown file and save it to see the change take effect in your browser.
+
+</Details>
+
+```sql categories
+  select
+      category
+  from needful_things.orders
+  group by category
+```
+
+<Dropdown data={categories} name=category value=category>
+    <DropdownOption value="%" valueLabel="All Categories"/>
+</Dropdown>
+
+<Dropdown name=year>
+    <DropdownOption value=% valueLabel="All Years"/>
+    <DropdownOption value=2019/>
+    <DropdownOption value=2020/>
+    <DropdownOption value=2021/>
+</Dropdown>
+
+```sql orders_by_category
+  select
+      date_trunc('month', order_datetime) as month,
+      sum(sales) as sales_usd,
+      category
+  from needful_things.orders
+  where category like '${inputs.category.value}'
+  and date_part('year', order_datetime) like '${inputs.year.value}'
+  group by all
+  order by sales_usd desc
+```
+
+<BarChart
+    data={orders_by_category}
+    title="Sales by Month, {inputs.category.label}"
+    x=month
+    y=sales_usd
+    series=category
+/>
+
+## What's Next?
+
+- [Connect your data sources](settings)
+- Edit/add markdown files in the `pages` folder
+- Deploy your project with [Evidence Cloud](https://evidence.dev/cloud)
+
+## Get Support
+
+- Message us on [Slack](https://slack.evidence.dev/)
+- Read the [Docs](https://docs.evidence.dev/)
+- Open an issue on [Github](https://github.com/evidence-dev/evidence)

e2e/packaging/playwright.config.js

@@ -0,0 +1,4 @@
+import { defineConfig } from '@playwright/test';
+import { config } from '../playwright-config';
+
+export default defineConfig(config);

e2e/packaging/sources/needful_things/connection.yaml

@@ -0,0 +1,5 @@
+# This file was automatically generated
+name: needful_things
+type: duckdb
+options:
+  filename: needful_things.duckdb

e2e/packaging/sources/needful_things/orders.sql

@@ -0,0 +1 @@
+select * from orders

e2e/packaging/tests/tests.spec.js

@@ -0,0 +1,10 @@
+// @ts-check
+import { test, expect } from '@playwright/test';
+import { waitForPageToLoad } from '../../test-utils';
+
+test('has title', async ({ page }) => {
+	await page.goto('/');
+	await waitForPageToLoad(page);
+
+	await expect(page).toHaveTitle(/Welcome to Evidence/);
+});

pnpm-workspace.yaml

@@ -1,5 +1,8 @@
 packages:
   - 'e2e'
   - 'e2e/*'
+  # packaging e2e test installs its own dependencies
+  # based on the `npm pack`-generated tarballs
+  - '!e2e/packaging'
   - 'packages/**'
   - 'sites/*'