[examples][frameworks] add tests for all examples being detected (#9197)

This PR adds tests (under `packages/fs-detectors`) that ensure are `./examples` get detected as the appropriate framework.

examples/sveltekit/package.json

@@ -12,7 +12,7 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "next",
-    "@sveltejs/kit": "next",
+    "@sveltejs/kit": "1.0.0-next.589",
     "@types/cookie": "^0.5.1",
     "prettier": "^2.6.2",
     "prettier-plugin-svelte": "^2.7.0",

packages/frameworks/src/frameworks.ts

@@ -954,6 +954,7 @@ export const frameworks = [
     ],
   },
   {
+    // TODO: fix detected as "sveltekit-1"
     name: 'SvelteKit (Legacy Beta)',
     slug: 'sveltekit',
     demo: 'https://sveltekit-template.vercel.app',
@@ -1671,6 +1672,44 @@ export const frameworks = [
     getOutputDirName: async () => 'public',
     defaultVersion: '0.13.0', // Must match the build image
   },
+  {
+    name: 'Hydrogen',
+    slug: 'hydrogen',
+    demo: 'https://hydrogen-template.vercel.app',
+    logo: 'https://api-frameworks.vercel.sh/framework-logos/hydrogen.svg',
+    tagline: 'React framework for headless commerce',
+    description: 'React framework for headless commerce',
+    website: 'https://hydrogen.shopify.dev',
+    useRuntime: { src: 'package.json', use: '@vercel/hydrogen' },
+    detectors: {
+      some: [
+        {
+          path: 'hydrogen.config.js',
+        },
+        {
+          path: 'hydrogen.config.ts',
+        },
+      ],
+    },
+    settings: {
+      installCommand: {
+        placeholder: '`yarn install`, `pnpm install`, or `npm install`',
+      },
+      buildCommand: {
+        value: 'shopify hydrogen build',
+        placeholder: '`npm run build` or `shopify hydrogen build`',
+      },
+      devCommand: {
+        value: 'shopify hydrogen dev',
+        placeholder: 'shopify hydrogen dev',
+      },
+      outputDirectory: {
+        value: 'dist',
+      },
+    },
+    dependency: '@shopify/hydrogen',
+    getOutputDirName: async () => 'dist',
+  },
   {
     name: 'Vite',
     slug: 'vite',
@@ -1871,44 +1910,6 @@ export const frameworks = [
       },
     ],
   },
-  {
-    name: 'Hydrogen',
-    slug: 'hydrogen',
-    demo: 'https://hydrogen-template.vercel.app',
-    logo: 'https://api-frameworks.vercel.sh/framework-logos/hydrogen.svg',
-    tagline: 'React framework for headless commerce',
-    description: 'React framework for headless commerce',
-    website: 'https://hydrogen.shopify.dev',
-    useRuntime: { src: 'package.json', use: '@vercel/hydrogen' },
-    detectors: {
-      some: [
-        {
-          path: 'hydrogen.config.js',
-        },
-        {
-          path: 'hydrogen.config.ts',
-        },
-      ],
-    },
-    settings: {
-      installCommand: {
-        placeholder: '`yarn install`, `pnpm install`, or `npm install`',
-      },
-      buildCommand: {
-        value: 'shopify hydrogen build',
-        placeholder: '`npm run build` or `shopify hydrogen build`',
-      },
-      devCommand: {
-        value: 'shopify hydrogen dev',
-        placeholder: 'shopify hydrogen dev',
-      },
-      outputDirectory: {
-        value: 'dist',
-      },
-    },
-    dependency: '@shopify/hydrogen',
-    getOutputDirName: async () => 'dist',
-  },
   {
     name: 'Other',
     slug: null,

packages/fs-detectors/test/unit.examples.test.ts

@@ -0,0 +1,35 @@
+import frameworkList from '@vercel/frameworks';
+import { detectFramework } from '../src';
+import { FixtureFilesystem } from './utils/fixture-filesystem';
+import { readdirSync, lstatSync } from 'fs';
+import { join } from 'path';
+
+function getExamples() {
+  const root = join(__dirname, '..', '..', '..');
+  const examplesPath = join(root, 'examples');
+  const examples = readdirSync(examplesPath);
+
+  const exampleDirs = examples.filter(example => {
+    const examplePath = join(examplesPath, example);
+    const stat = lstatSync(examplePath);
+    return stat.isDirectory();
+  });
+
+  return exampleDirs.map(exampleDirName => {
+    return [exampleDirName, join(examplesPath, exampleDirName)];
+  });
+}
+
+describe('examples should be detected', () => {
+  const examples = getExamples();
+
+  it.each(examples)('%s', async (example, examplePath) => {
+    const fs = new FixtureFilesystem(examplePath);
+    const framework = await detectFramework({ fs, frameworkList });
+    if (!framework) {
+      throw new Error(`Framework not detected for example "${example}".`);
+    }
+
+    expect(framework).toBe(example);
+  });
+});