Add rw cli tests to e2e (#1932)

* WIP: Add next step | Improve test-tutorial

* Shuffle e2e test folder layout | Add cli tests

* Merge to main

* Add some fixes for new run-e2e

* PR comments

* run-e2e: Always makeDirectory

tasks/e2e/cypress.json

@@ -5,4 +5,4 @@
     "runMode": 2,
     "openMode": 0
   }
-}
+}

tasks/e2e/cypress/integration/tutorial/codemods/Step6_1_Routes.js → tasks/e2e/cypress/integration/01-tutorial/codemods/Step6_1_Routes.js

@@ -9,9 +9,9 @@ const Routes = () => {
       <Route path="/posts/{id:Int}/edit" page={EditPostPage} name="editPost" />
       <Route path="/posts/{id:Int}" page={PostPage} name="post" />
       <Route path="/posts" page={PostsPage} name="posts" />
-      <Route path="/about" page={AboutPage} name="about" />
-      <Route path="/" page={HomePage} name="home" />
-      <Route notfound page={NotFoundPage} />
+      <Route path="/about" page={AboutPage} name="about" prerender/>
+      <Route path="/" page={HomePage} name="home" prerender/>
+      <Route notfound page={NotFoundPage} prerender/>
     </Router>
   )
 }

tasks/e2e/cypress/integration/02-cli/02-cli-commands.spec.js

@@ -0,0 +1,61 @@
+/* eslint-disable no-undef, camelcase */
+/// <reference types="cypress" />
+
+const BASE_DIR = Cypress.env('RW_PATH')
+
+describe('Check Redwood cli commands against tutorial', () => {
+  // These tests aren't visual, as they only run on the CLI
+  // Disable taking screenshots/videos for this spec
+  before(() => {
+    Cypress.config('record', false)
+  })
+
+  after(() => {
+    Cypress.config('record', true)
+  })
+  it('Should run api tests successfully', () => {
+    cy.exec(`cd ${BASE_DIR}; yarn rw test api --no-watch`, {
+      timeout: 60000,
+    })
+      .its('code')
+      .should('eq', 0)
+  })
+
+  // @TODO figure out why babel issues happen when linked
+  it.skip('Should run web tests successfully', () => {
+    cy.exec(`cd ${BASE_DIR}; yarn rw test web --no-watch`, {
+      timeout: 60000,
+    })
+      .its('code')
+      .should('eq', 0)
+  })
+
+  it('Should run build successfully (no prerender)', () => {
+    // Check if webpack build on web, and babel build on api
+    // work correctly
+    cy.exec(`cd ${BASE_DIR}; yarn rw build --no-prerender`, {
+      timeout: 60000,
+    })
+      .its('code')
+      .should('eq', 0)
+  })
+
+  it('Should prerender about and homepage', () => {
+    // Check if prerender is working
+    cy.exec(`cd ${BASE_DIR}; yarn rw prerender`, {
+      timeout: 60000,
+    })
+      .its('code')
+      .should('eq', 0)
+
+    const WEB_DIST = `${BASE_DIR}/web/dist`
+
+    // Check prerendered files are generated
+    // Prerender prop added to routes in codemods/Step6_1_Routes.js
+    cy.readFile(`${WEB_DIST}/index.html`).should('contain', 'Redwood Blog')
+    cy.readFile(`${WEB_DIST}/about.html`).should(
+      'contain',
+      'This site was created to demonstrate my mastery of Redwood'
+    )
+  })
+})

tasks/run-e2e

@@ -58,15 +58,15 @@ const copyFrameworkPackages = () => {
   try {
     console.log(
       'cp -r',
-      path.join(REDWOODJS_FRAMEWORK_PATH, 'packages'),
-      path.join(REDWOOD_PROJECT_DIRECTORY, 'packages')
+      `"${path.join(REDWOODJS_FRAMEWORK_PATH, 'packages')}"`,
+      `"${path.join(REDWOOD_PROJECT_DIRECTORY, 'packages')}"`
     )
     execa.sync(
       'cp',
       [
         '-r',
-        path.join(REDWOODJS_FRAMEWORK_PATH, 'packages'),
-        path.join(REDWOOD_PROJECT_DIRECTORY, 'packages'),
+        `"${path.join(REDWOODJS_FRAMEWORK_PATH, 'packages')}"`,
+        `"${path.join(REDWOOD_PROJECT_DIRECTORY, 'packages')}"`,
       ],
       {
         shell: true,
@@ -82,7 +82,7 @@ const copyFrameworkPackages = () => {
 
 const runYarnInstall = () => {
   try {
-    execa.sync('yarn install', ['--prefer-offline'], {
+    execa.sync('yarn install', {
       cwd: REDWOOD_PROJECT_DIRECTORY,
       shell: true,
       stdio: 'inherit',
@@ -131,6 +131,16 @@ const runCypress = () => {
   )
 }
 
+const installTaskDeps = () => {
+  console.log('Installing dependencies for tasks/e2e')
+  execa.sync('yarn install', {
+    cwd: path.join(REDWOODJS_FRAMEWORK_PATH, 'tasks/e2e'),
+    shell: true,
+    stdio: 'inherit',
+    env: process.env,
+  })
+}
+
 const args = yargs
   .option('create-project', { default: true, type: 'boolean', alias: 'create' })
   .option('copy-framework', { default: true, type: 'boolean', alias: 'copy' })
@@ -144,7 +154,13 @@ const args = yargs
 
 const REDWOODJS_FRAMEWORK_PATH = path.resolve(__dirname, '..')
 let REDWOOD_PROJECT_DIRECTORY =
-  args._?.[0] || path.join(os.tmpdir(), 'redwood-e2e', new Date().toISOString())
+  args._?.[0] ||
+  path.join(
+    os.tmpdir(),
+    'redwood-e2e',
+    // ":" is problematic with paths
+    new Date().toISOString().split(':').join('-')
+  )
 
 console.log()
 console.log('-'.repeat(80))
@@ -162,6 +178,7 @@ const tasks = [
   copyFramework && runYarnInstall,
   jsProject && convertProjectToJavaScript,
   autoStart && runDevServerInBackground,
+  autoStart && installTaskDeps,
   autoStart && runCypress,
 ].filter(Boolean)