add optional e2e tests and non-interactive generator to new-design

packages/new-design/lib/config.mjs

@@ -51,6 +51,9 @@ dist
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# e2e test results
+sites/*/playwright-report
 `,
   fetch: {
     config: [

packages/new-design/lib/download-list.js

@@ -11,12 +11,11 @@ const avoid = {
     'pattern-picker.js',
     'header.js',
   ],
-  dirs: [ 'node_modules', 'layouts' ]
+  dirs: ['node_modules', 'layouts', 'e2e'],
 }
 
-
 // Method to check what files to keep
-const keep = file => {
+const keep = (file) => {
   if (avoid.files.indexOf(basename(file)) !== -1) return false
   for (const dir of avoid.dirs) {
     if (file.indexOf(dir) !== -1) return false
@@ -28,16 +27,11 @@ const keep = file => {
 const getFiles = async (site) => {
   const all = await rdir(join('..', '..', 'sites', site))
 
-  return all
+  return all.filter((file) => keep(file)).map((file) => file.slice(12))
-    .filter(file => keep(file))
-    .map(file => file.slice(12))
 }
 
-getFiles('shared').then(shared => {
+getFiles('shared').then((shared) => {
-  getFiles(join('lab', 'components')).then(lab => {
+  getFiles(join('lab', 'components')).then((lab) => {
-    console.log(JSON.stringify([
+    console.log(JSON.stringify([...shared, ...lab], null, 2))
-      ...shared,
-      ...lab,
-    ], null, 2))
   })
 })

packages/new-design/lib/utils.mjs

@@ -112,9 +112,9 @@ export const getChoices = async () => {
           ).name
 
     // check whether a folder with that name already exists
-    config.dest = join(cwd, name)
+    const dest = join(cwd, name)
     try {
-      const dir = await opendir(config.dest)
+      const dir = await opendir(dest)
       dir.close()
     } catch {
       // the folder didn't exist, so we're good to go
@@ -219,6 +219,7 @@ const copyPackageJson = async (config, choices) => {
     name: choices.name,
     tag: config.tag,
     dependencies: config.templateData.dependencies,
+    includeTests: choices.includeTests,
   })
 }
 
@@ -299,7 +300,8 @@ const copyAll = async (config, choices) => {
   // Copy shared files
   promises = promises.concat(
     config.relativeFiles.shared.map((from) => {
-      copyFileOrTemplate(config.source.shared, config.dest, from)
+      if (choices.includeTests || !from.match(/e2e|playwright/))
+        copyFileOrTemplate(config.source.shared, config.dest, from)
     })
   )
 
@@ -412,6 +414,7 @@ const showTips = (config, choices) => {
 
 // Creates the environment based on the user's choices
 export const createEnvironment = async (choices) => {
+  config.dest = join(process.cwd(), choices.name)
   // Store directories for re-use
   config.source = {
     templateData: join(newDesignDir, `templates/from-${choices.template}.mjs`),

packages/new-design/scripts/generate-from-cli.mjs

@@ -0,0 +1,11 @@
+import { createEnvironment } from '../lib/utils.mjs'
+
+const choices = {
+  template: process.env.TEMPLATE,
+  name: process.env.NAME,
+  manager: 'yarn',
+  overwrite: true,
+  includeTests: true,
+}
+
+createEnvironment(choices)

packages/new-design/shared/e2e/lab.spec.js

@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test'
+
+test('test', async ({ page }) => {
+  await page.goto('http://localhost:8000/')
+  await page.getByRole('link', { name: '👉 To your design 👈' }).click()
+  await page
+    .getByRole('list')
+    .filter({ hasText: 'Size 28Size 30Size 32Size 34Size 36Size 38Size 40Size 42Size 44Size 46' })
+    .getByRole('button', { name: 'Size 36' })
+    .click()
+  await page.getByTitle('draftDesign').click()
+
+  await expect(page.getByText('Something went wrong')).toHaveCount(0)
+  await expect(page.getByText('Unhandled Runtime Error')).toHaveCount(0)
+  await expect(page.getByRole('button', { name: '° Measurements' })).toBeVisible()
+})

packages/new-design/shared/playwright.config.js

@@ -0,0 +1,70 @@
+const { defineConfig, devices } = require('@playwright/test')
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ */
+module.exports = defineConfig({
+  testDir: './e2e',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://127.0.0.1:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  webServer: {
+    command: 'yarn dev',
+    url: 'http://127.0.0.1:8000',
+    reuseExistingServer: !process.env.CI,
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
+
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ..devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+})

packages/new-design/templates/shared/package.json.mustache

@@ -50,8 +50,12 @@
     "@freesewing/plugin-svgattr": "$$ tag $$",
     "@freesewing/plugin-theme": "$$ tag $$",
     "@freesewing/plugin-i18n": "$$ tag $$",
+    "@freesewing/plugin-mirror": "$$ tag $$",
     "@freesewing/models": "$$ tag $$",
     "@headlessui/react": "^1.6.5",
+    $$ #includeTests $$
+    "@playwright/test": "^1.32.3",
+    $$ /includeTests $$
     "js-yaml": "^4.1.0",
     "file-saver": "^2.0.5",
     "axios": "^0.27.2",
@@ -75,6 +79,9 @@
     "mermaid": "10.1.0",
     "next-i18next": "^11.0.0",
     "pdfkit": "^0.13.0",
+    $$ #includeTests $$
+    "playwright": "^1.32.3",
+    $$ /includeTests $$
     "react-copy-to-clipboard": "^5.0.4",
     "react-hotkeys-hook": "^3.4.4",
     "react-swipeable": "^6.2.0",