SDKs: Vue code snippets (#3295)

## Description

- rename `e2e` commands in e2e servers to `test`
- add Quicktstart snippets: Vue and Nuxt
- add Quickstart snippet tests

.github/workflows/ci.yml

@@ -84,14 +84,51 @@ jobs:
           cache-install-state: true
 
       - name: Run E2E tests
-        run: yarn nx e2e @e2e/${{ matrix.e2e-server }}
+        run: yarn nx test @e2e/${{ matrix.e2e-server }}
 
       - name: Upload Playwright Report
         uses: actions/upload-artifact@v3
         # Only upload the report if the tests failed
         if: ${{ failure() }}
         with:
-          name: ${{ matrix.sdk }}-playwright-report
+          name: ${{ matrix.e2e-server }}-playwright-report
+          path: packages/sdks-tests/playwright-report/
+          retention-days: 30
+
+  sdks-snippets:
+    name: Gen 2 SDK Snippets
+    runs-on: ubuntu-latest
+
+    strategy:
+      # we still want to run all the SDK tests even if one fails, to get a full picture of the state of the SDKs.
+      fail-fast: false
+      matrix:
+        snippet: ['vue', 'nuxt']
+
+    steps:
+      - name: Setup
+        uses: actions/checkout@v3
+
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18.x'
+
+      - name: 📥 Monorepo install
+        uses: ./.github/actions/yarn-nm-install
+        with:
+          cache-node-modules: true
+          cache-install-state: true
+
+      - name: Build Snippet
+        run: yarn nx test @snippet/${{ matrix.snippet }}
+
+      - name: Upload Playwright Report
+        uses: actions/upload-artifact@v3
+        # Only upload the report if the tests failed
+        if: ${{ failure() }}
+        with:
+          name: ${{ matrix.snippet }}-snippet-playwright-report
           path: packages/sdks-tests/playwright-report/
           retention-days: 30
 
@@ -142,7 +179,7 @@ jobs:
           cache-install-state: true
 
       - name: Run E2E tests
-        run: yarn nx e2e @e2e/${{ matrix.e2e-server }}
+        run: yarn nx test @e2e/${{ matrix.e2e-server }}
 
   lint:
     runs-on: ubuntu-latest

packages/react-tests/nextjs/package.json

@@ -6,7 +6,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "e2e": "SERVER_NAME=gen1-next yarn nx test:e2e @sdk/tests",
+    "test": "SERVER_NAME=gen1-next yarn nx test:e2e @sdk/tests",
     "serve": "yarn start"
   },
   "dependencies": {

packages/react-tests/react-remix/package.json

@@ -5,7 +5,7 @@
     "build": "remix build",
     "dev": "remix dev",
     "serve": "remix-serve build",
-    "e2e": "SERVER_NAME=gen1-remix yarn nx test:e2e @sdk/tests",
+    "test": "SERVER_NAME=gen1-remix yarn nx test:e2e @sdk/tests",
     "typecheck": "tsc"
   },
   "dependencies": {

packages/react-tests/react-vite/package.json

@@ -7,7 +7,7 @@
     "tsc": "tsc",
     "build": "tsc && vite build",
     "serve": "vite preview",
-    "e2e": "SERVER_NAME=gen1-react yarn nx test:e2e @sdk/tests"
+    "test": "SERVER_NAME=gen1-react yarn nx test:e2e @sdk/tests"
   },
   "dependencies": {
     "@builder.io/react": "workspace:*",

packages/sdks-tests/embedder/index.js

@@ -1,5 +1,4 @@
 import http from 'http';
-import { SDK_LOADED_MSG } from '../src/tests/context.js';
 
 /**
  * Very simple HTTP server that returns SDK content in an iframe to mimic the visual editor.

packages/sdks-tests/package.json

@@ -6,10 +6,10 @@
     "build": "tsc",
     "dev": "tsc -w",
     "lint": "eslint --ext .ts,.tsx ./src/",
-    "prepare-e2e": "echo $SERVER_NAME | tr ',' '\n' | xargs -I _ echo @e2e/_ | tr '\n' ',' | xargs -I _ yarn nx run-many -p _ -t build",
-    "test": "yarn prepare-e2e && playwright test",
-    "test:e2e": "TYPE=e2e yarn nx test",
-    "test:snippet": "TYPE=snippet yarn nx test",
+    "prepare:e2e": "echo $SERVER_NAME | tr ',' '\n' | xargs -I _ echo @e2e/_ | tr '\n' ',' | xargs -I _ yarn nx run-many -p _ -t build",
+    "prepare:snippet": "echo $SERVER_NAME | tr ',' '\n' | xargs -I _ echo @snippet/_ | tr '\n' ',' | xargs -I _ yarn nx run-many -p _ -t build",
+    "test:e2e": "yarn prepare:e2e && TEST_TYPE=e2e playwright test",
+    "test:snippet": "yarn prepare:snippet && TEST_TYPE=snippet playwright test",
     "run-embedder": "node embedder/index.js",
     "install-playwright": "playwright install chromium --with-deps"
   },
@@ -42,7 +42,12 @@
           "lint"
         ]
       },
-      "test": {
+      "test:e2e": {
+        "dependsOn": [
+          "install-playwright"
+        ]
+      },
+      "test:snippet": {
         "dependsOn": [
           "install-playwright"
         ]

packages/sdks-tests/playwright.config.ts

@@ -1,8 +1,9 @@
+import { z } from 'zod';
 import { defineConfig, devices } from '@playwright/test';
 import path from 'path';
 import { fileURLToPath } from 'url';
-import { EMBEDDER_PORT } from './src/tests/context.js';
-import { SDK_MAP, serverNames } from './src/tests/sdk.js';
+import { EMBEDDER_PORT } from './src/helpers/context.js';
+import { SDK_MAP, serverNames } from './src/helpers/sdk.js';
 
 const getDirName = () => {
   try {
@@ -26,8 +27,11 @@ const things = serverNames.map((packageName, i) => {
   };
 });
 
+const TestTypeEnum = z.enum(['e2e', 'snippet']);
+const testType = TestTypeEnum.parse(process.env.TEST_TYPE);
+
 export default defineConfig({
-  testDir: getDirName() + '/src/tests',
+  testDir: getDirName() + `/src/${testType}-tests`,
   // testMatch: '**/*.ts',
   /* Run tests in files in parallel */
   fullyParallel: true,
@@ -62,7 +66,7 @@ export default defineConfig({
 
   webServer: things
     .map(({ packageName, port, portFlag }) => ({
-      command: `PORT=${port} yarn workspace @e2e/${packageName} serve ${portFlag}`,
+      command: `PORT=${port} yarn workspace @${testType}/${packageName} serve ${portFlag}`,
       port,
       reuseExistingServer: false,
       ...(packageName === 'react-native' ? { timeout: 120 * 1000 } : {}),

packages/sdks-tests/src/tests/ab-test.spec.ts → packages/sdks-tests/src/e2e-tests/ab-test.spec.ts

@@ -1,6 +1,6 @@
 import type { Browser } from '@playwright/test';
 import { expect } from '@playwright/test';
-import { excludeTestFor, test } from './helpers/index.js';
+import { excludeTestFor, test } from '../helpers/index.js';
 const SELECTOR = 'div[builder-content-id]';
 
 const createContextWithCookies = async ({

packages/sdks-tests/src/tests/animation.spec.ts → packages/sdks-tests/src/e2e-tests/animation.spec.ts

@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { excludeTestFor, checkIsRN, test } from './helpers/index.js';
+import { excludeTestFor, checkIsRN, test } from '../helpers/index.js';
 
 test.describe('Animations', () => {
   test('renders animations', async ({ page, sdk }) => {

packages/sdks-tests/src/tests/basic-styles.spec.ts → packages/sdks-tests/src/e2e-tests/basic-styles.spec.ts

@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { test, currentDirname, checkIsRN } from './helpers/index.js';
+import { test, checkIsRN, mockFolderPath } from '../helpers/index.js';
 import fs from 'fs';
 import path from 'path';
 
@@ -43,7 +43,7 @@ test.describe('Basic styles', () => {
     sdk,
   }) => {
     test.fail(checkIsRN(sdk));
-    const mockImgPath = path.join(currentDirname, '..', '..', 'mocks', 'placeholder-img.png');
+    const mockImgPath = path.join(mockFolderPath, 'placeholder-img.png');
     const mockImgBuffer = fs.readFileSync(mockImgPath);
 
     await page.route('**/*', route => {

packages/sdks-tests/src/tests/block-styles.spec.ts → packages/sdks-tests/src/e2e-tests/block-styles.spec.ts

@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { getClassSelector, test } from './helpers/index.js';
+import { getClassSelector, test } from '../helpers/index.js';
 
 test.describe('Block Styles', () => {
   test('check that block styles load', async ({ page, sdk }) => {

packages/sdks-tests/src/tests/blocks.spec.ts → packages/sdks-tests/src/e2e-tests/blocks.spec.ts

@@ -2,15 +2,15 @@ import { expect } from '@playwright/test';
 import fs from 'fs';
 import path from 'path';
 import { VIDEO_CDN_URL } from '../specs/video.js';
-import type { ExpectedStyles } from './helpers/index.js';
+import type { ExpectedStyles } from '../helpers/index.js';
 import {
   excludeRn,
   excludeTestFor,
   checkIsRN,
   test,
-  currentDirname,
   isSSRFramework,
-} from './helpers/index.js';
+  mockFolderPath,
+} from '../helpers/index.js';
 
 test.describe('Blocks', () => {
   test('Text', async ({ page, sdk }) => {
@@ -67,7 +67,7 @@ test.describe('Blocks', () => {
       isSSRFramework(packageName),
       'SSR frameworks get the images from the server so page.route intercept does not work'
     );
-    const mockImgPath = path.join(currentDirname, '..', '..', 'mocks', 'placeholder-img.png');
+    const mockImgPath = path.join(mockFolderPath, 'placeholder-img.png');
     const mockImgBuffer = fs.readFileSync(mockImgPath);
 
     await page.route('**/*', route => {
@@ -132,7 +132,7 @@ test.describe('Blocks', () => {
   test.describe('Video', () => {
     test('video render and styles', async ({ page, sdk }) => {
       test.skip(checkIsRN(sdk));
-      const mockVideoPath = path.join(currentDirname, '..', '..', 'mocks', 'video.mp4');
+      const mockVideoPath = path.join(mockFolderPath, 'video.mp4');
       const mockVideoBuffer = fs.readFileSync(mockVideoPath);
 
       await page.route('**/*', route => {
@@ -198,7 +198,7 @@ test.describe('Blocks', () => {
 
     test('video children', async ({ page, sdk }) => {
       test.skip(checkIsRN(sdk));
-      const mockVideoPath = path.join(currentDirname, '..', '..', 'mocks', 'video.mp4');
+      const mockVideoPath = path.join(mockFolderPath, 'video.mp4');
       const mockVideoBuffer = fs.readFileSync(mockVideoPath);
 
       await page.route('**/*', route => {

packages/sdks-tests/src/tests/css-properties.spec.ts → packages/sdks-tests/src/e2e-tests/css-properties.spec.ts

@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { isSSRFramework, test } from './helpers/index.js';
+import { isSSRFramework, test } from '../helpers/index.js';
 
 test.describe('CSS Properties from Builder Content (js enabled)', () => {
   test('set image width CSS properties correctly', async ({ page, packageName }) => {

packages/sdks-tests/src/tests/custom-breakpoints.spec.ts → packages/sdks-tests/src/e2e-tests/custom-breakpoints.spec.ts

@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { expectStylesForElement, checkIsRN, test } from './helpers/index.js';
+import { expectStylesForElement, checkIsRN, test } from '../helpers/index.js';
 
 test.describe('Custom Breakpoints', () => {
   /* set breakpoint config in content -

packages/sdks-tests/src/tests/custom-components.spec.ts → packages/sdks-tests/src/e2e-tests/custom-components.spec.ts

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
-import { excludeTestFor, test } from './helpers/index.js';
-import { launchEmbedderAndWaitForSdk } from './helpers/visual-editor.js';
+import { excludeTestFor, test } from '../helpers/index.js';
+import { launchEmbedderAndWaitForSdk } from '../helpers/visual-editor.js';
 
 const HELLO_CUSTOM_COMPONENT_LOADED_MESSAGE =
   'BUILDER_EVENT: builder.registerComponent Component name: Hello';

packages/sdks-tests/src/tests/default-styles.spec.ts → packages/sdks-tests/src/e2e-tests/default-styles.spec.ts

@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { excludeGen1, test } from './helpers/index.js';
+import { excludeGen1, test } from '../helpers/index.js';
 
 // is a subset - if this selector is there then others would've also been added
 const DEFAULT_STYLES = `.builder-button {

packages/sdks-tests/src/tests/duplicate-attributes.spec.ts → packages/sdks-tests/src/e2e-tests/duplicate-attributes.spec.ts

@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { excludeTestFor, test } from './helpers/index.js';
+import { excludeTestFor, test } from '../helpers/index.js';
 
 test.describe('Duplicate Attributes', () => {
   test('wrapped block has no duplicate attributes', async ({ page, packageName, sdk }) => {

packages/sdks-tests/src/tests/dynamic-content.spec.ts → packages/sdks-tests/src/e2e-tests/dynamic-content.spec.ts

@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { excludeTestFor, findTextInPage, test } from './helpers/index.js';
+import { excludeTestFor, findTextInPage, test } from '../helpers/index.js';
 
 test.describe('Dynamic Content', () => {
   test('Data Bindings', async ({ page, sdk }) => {

packages/sdks-tests/src/tests/editing.spec.ts → packages/sdks-tests/src/e2e-tests/editing.spec.ts

@@ -4,8 +4,8 @@ import { MODIFIED_EDITING_STYLES } from '../specs/editing-styles.js';
 import { NEW_TEXT } from '../specs/helpers.js';
 import { MODIFIED_HOMEPAGE } from '../specs/homepage.js';
 import type { BuilderContent } from '../specs/types.js';
-import { test } from './helpers/index.js';
-import { launchEmbedderAndWaitForSdk } from './helpers/visual-editor.js';
+import { test } from '../helpers/index.js';
+import { launchEmbedderAndWaitForSdk } from '../helpers/visual-editor.js';
 
 const sendContentUpdateMessage = async ({
   page,

packages/sdks-tests/src/tests/external-data.spec.ts → packages/sdks-tests/src/e2e-tests/external-data.spec.ts

@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { excludeTestFor, test } from './helpers/index.js';
+import { excludeTestFor, test } from '../helpers/index.js';
 
 test.describe('External Data', () => {
   test('renders initial value', async ({ page, packageName, sdk }) => {

packages/sdks-tests/src/tests/form.spec.ts → packages/sdks-tests/src/e2e-tests/form.spec.ts

@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { excludeTestFor, test } from './helpers/index.js';
+import { excludeTestFor, test } from '../helpers/index.js';
 
 test.describe('Form', () => {
   test('Form rendering correctly', async ({ page, sdk }) => {

packages/sdks-tests/src/tests/hover-animation.spec.ts → packages/sdks-tests/src/e2e-tests/hover-animation.spec.ts

@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { test, checkIsGen1React, checkIsRN } from './helpers/index.js';
+import { test, checkIsGen1React, checkIsRN } from '../helpers/index.js';
 
 test.describe('Hover animations', () => {
   test('Button should change color when hovered', async ({ page, sdk }) => {

packages/sdks-tests/src/tests/http-requests.spec.ts → packages/sdks-tests/src/e2e-tests/http-requests.spec.ts

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
-import { excludeGen1, excludeTestFor, test } from './helpers/index.js';
-import { launchEmbedderAndWaitForSdk } from './helpers/visual-editor.js';
+import { excludeGen1, excludeTestFor, test } from '../helpers/index.js';
+import { launchEmbedderAndWaitForSdk } from '../helpers/visual-editor.js';
 
 test.describe('HTTP Requests', () => {
   test('call proxy API only once - in page', async ({ page, packageName, sdk }) => {

packages/sdks-tests/src/tests/hydration.spec.ts → packages/sdks-tests/src/e2e-tests/hydration.spec.ts

@@ -1,4 +1,4 @@
-import { findTextInPage, test } from './helpers/index.js';
+import { findTextInPage, test } from '../helpers/index.js';
 
 /**
  * The only way to guarantee that hydration has completed is to interact with

packages/sdks-tests/src/tests/inputs.spec.ts → packages/sdks-tests/src/e2e-tests/inputs.spec.ts

@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { excludeTestFor, test } from './helpers/index.js';
+import { excludeTestFor, test } from '../helpers/index.js';
 
 test.describe('Inputs', () => {
   test('starts off with default value', async ({ page, sdk }) => {

packages/sdks-tests/src/tests/js-code.spec.ts → packages/sdks-tests/src/e2e-tests/js-code.spec.ts

@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { excludeTestFor, test } from './helpers/index.js';
+import { excludeTestFor, test } from '../helpers/index.js';
 
 test.describe('JS Code', () => {
   test('initializes correct value from JS Code block', async ({ page, sdk }) => {

packages/sdks-tests/src/tests/link-component.spec.ts → packages/sdks-tests/src/e2e-tests/link-component.spec.ts

@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { test } from './helpers/index.js';
+import { test } from '../helpers/index.js';
 
 const testLinkComponent = (path: string, totalLinks: number) => {
   test('renders regular anchor element by default', async ({ page }) => {

packages/sdks-tests/src/tests/navigation.spec.ts → packages/sdks-tests/src/e2e-tests/navigation.spec.ts

@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { findTextInPage, test } from './helpers/index.js';
+import { findTextInPage, test } from '../helpers/index.js';
 
 test('Client-side navigation', async ({ page }) => {
   await page.goto('/');

packages/sdks-tests/src/tests/reactivity.spec.ts → packages/sdks-tests/src/e2e-tests/reactivity.spec.ts

@@ -1,6 +1,6 @@
 import type { ConsoleMessage } from '@playwright/test';
 import { expect } from '@playwright/test';
-import { excludeTestFor, checkIsRN, test } from './helpers/index.js';
+import { excludeTestFor, checkIsRN, test } from '../helpers/index.js';
 
 test.describe('Reactive State', () => {
   test('shows default value', async ({ page, sdk }) => {

packages/sdks-tests/src/tests/repeat-items-bindings.spec.ts → packages/sdks-tests/src/e2e-tests/repeat-items-bindings.spec.ts

@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { excludeTestFor, test } from './helpers/index.js';
+import { excludeTestFor, test } from '../helpers/index.js';
 
 test.describe('Repeat items bindings', () => {
   test('Updating state should display repeat collection', async ({ page, sdk }) => {

packages/sdks-tests/src/tests/show-hide-if.spec.ts → packages/sdks-tests/src/e2e-tests/show-hide-if.spec.ts

@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { excludeTestFor, findTextInPage, checkIsRN, test } from './helpers/index.js';
+import { excludeTestFor, findTextInPage, checkIsRN, test } from '../helpers/index.js';
 
 test.describe('Show If & Hide If', () => {
   test('works on static conditions', async ({ page }) => {

packages/sdks-tests/src/tests/slot.spec.ts → packages/sdks-tests/src/e2e-tests/slot.spec.ts

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
 import { FIRST_SYMBOL_CONTENT, SECOND_SYMBOL_CONTENT } from '../specs/slot-with-symbol.js';
-import { excludeTestFor, checkIsRN, test } from './helpers/index.js';
+import { excludeTestFor, checkIsRN, test } from '../helpers/index.js';
 
 test.describe('Slot', () => {
   test('slot should render', async ({ page, packageName, sdk }) => {

packages/sdks-tests/src/tests/ssr.spec.ts → packages/sdks-tests/src/e2e-tests/ssr.spec.ts

@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { checkIsRN, isSSRFramework, test } from './helpers/index.js';
+import { checkIsRN, isSSRFramework, test } from '../helpers/index.js';
 
 test.describe('SSR', () => {
   test('js enabled', async ({ page, sdk }) => {