fix: Corrects generated netlify.toml for setup deploy netlify command (…

…redwoodjs#6670)

* Corrects generated netlify.toml for deploy setup.

* WIP to mock FS to check netlfiy toml

* Automock fs

* More mocks to not hit the fs

* Reuse example-todo-main fixture

* Single source of truth for paths

* try path.sep

* Debug windows path

* netlify.test.js: Fix Windows path issue

* Clean up code and add descriptive comment for regex

Co-authored-by: Tobbe Lundberg <[email protected]>

__fixtures__/example-todo-main/netlify.toml

@@ -0,0 +1,21 @@
+[build]
+  command = "yarn rw deploy netlify"
+  publish = "web/dist"
+  functions = "api/dist/functions"
+
+[dev]
+  # To use [Netlify Dev](https://www.netlify.com/products/dev/),
+  # install netlify-cli from https://docs.netlify.com/cli/get-started/#installation
+  # and then use netlify link https://docs.netlify.com/cli/get-started/#link-and-unlink-sites
+  # to connect your local project to a site already on Netlify
+  # then run netlify dev and our app will be accessible on the port specified below
+  framework = "redwoodjs"
+  # Set targetPort to the [web] side port as defined in redwood.toml
+  targetPort = 8910
+  # Point your browser to this port to access your RedwoodJS app
+  port = 8888
+
+[[redirects]]
+  from = "/*"
+  to = "/200.html"
+  status = 200

packages/cli/__mocks__/fs.js

@@ -19,7 +19,9 @@ fs.existsSync = (path) => {
   return isString(mockFiles[path])
 }
 
-fs.mkdirSync = () => {}
+fs.mkdirSync = (path) => {
+  mockFiles[path] = ''
+}
 
 fs.readFileSync = (path) => {
   // In prisma v4.3.0, prisma format uses a Wasm module. See https://github.com/prisma/prisma/releases/tag/4.3.0.

packages/cli/src/commands/setup/deploy/__tests__/__snapshots__/netlify.test.js.snap

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`netlify should add netlify.toml 1`] = `
+"[build]
+  command = "yarn rw deploy netlify"
+  publish = "web/dist"
+  functions = "api/dist/functions"
+
+[dev]
+  # To use [Netlify Dev](https://www.netlify.com/products/dev/),
+  # install netlify-cli from https://docs.netlify.com/cli/get-started/#installation
+  # and then use netlify link https://docs.netlify.com/cli/get-started/#link-and-unlink-sites
+  # to connect your local project to a site already on Netlify
+  # then run netlify dev and our app will be accessible on the port specified below
+  framework = "redwoodjs"
+  # Set targetPort to the [web] side port as defined in redwood.toml
+  targetPort = 8910
+  # Point your browser to this port to access your RedwoodJS app
+  port = 8888
+
+[[redirects]]
+  from = "/*"
+  to = "/200.html"
+  status = 200
+"
+`;
+
+exports[`netlify should call the handler without error 1`] = `
+"[build]
+  command = "yarn rw deploy netlify"
+  publish = "web/dist"
+  functions = "api/dist/functions"
+
+[dev]
+  # To use [Netlify Dev](https://www.netlify.com/products/dev/),
+  # install netlify-cli from https://docs.netlify.com/cli/get-started/#installation
+  # and then use netlify link https://docs.netlify.com/cli/get-started/#link-and-unlink-sites
+  # to connect your local project to a site already on Netlify
+  # then run netlify dev and our app will be accessible on the port specified below
+  framework = "redwoodjs"
+  # Set targetPort to the [web] side port as defined in redwood.toml
+  targetPort = 8910
+  # Point your browser to this port to access your RedwoodJS app
+  port = 8888
+
+[[redirects]]
+  from = "/*"
+  to = "/200.html"
+  status = 200
+"
+`;

packages/cli/src/commands/setup/deploy/__tests__/netlify.test.js

@@ -0,0 +1,80 @@
+// Automock fs using ../..../__mocks__/fs
+jest.mock('fs')
+
+import fs from 'fs'
+import path from 'path'
+
+import { getPaths } from '../../../../lib'
+import { updateApiURLTask } from '../helpers'
+// Mock telemetry and other things
+import '../../../../lib/test'
+
+jest.mock('../../../../lib', () => {
+  const path = jest.requireActual('path')
+
+  return {
+    getPaths: () => {
+      return {
+        base: path.resolve(
+          path.join(
+            __dirname,
+            '../../../../../../../__fixtures__/example-todo-main'
+          )
+        ),
+      }
+    },
+    getConfig: () => ({
+      web: {
+        port: 8910,
+      },
+    }),
+    writeFilesTask: (fileNameToContentMap) => {
+      const keys = Object.keys(fileNameToContentMap)
+      expect(keys.length).toBe(1)
+      // Need to escape path.sep on Windows, otherwise the backslash (that
+      // path.sep is on Windows) together with the 'n' in "netlify" will be
+      // interpreted as a new-line. And need to use double backslashes, so
+      // that one "survives" into the regexp
+      expect(keys[0]).toMatch(new RegExp(`\\${path.sep}netlify.toml$`))
+      expect(fileNameToContentMap[keys[0]]).toMatchSnapshot()
+    },
+  }
+})
+
+const REDWOOD_TOML_PATH = path.join(getPaths().base, 'redwood.toml')
+
+beforeEach(() => {
+  fs.__setMockFiles({
+    [REDWOOD_TOML_PATH]: `[web]
+  title = "Redwood App"
+  port = 8910
+  apiUrl = "/.redwood/functions" # you can customize graphql and dbAuth urls individually too: see https://redwoodjs.com/docs/app-configuration-redwood-toml#api-paths
+  includeEnvironmentVariables = [] # any ENV vars that should be available to the web side, see https://redwoodjs.com/docs/environment-variables#web
+[api]
+  port = 8911
+[browser]
+  open = true
+`,
+  })
+})
+
+describe('netlify', () => {
+  it('should call the handler without error', async () => {
+    const netlify = require('../providers/netlify')
+    expect(async () => await netlify.handler({ force: true })).not.toThrow()
+  })
+
+  it('Should update redwood.toml apiUrl', () => {
+    updateApiURLTask('/.netlify/functions').task()
+
+    expect(fs.readFileSync(REDWOOD_TOML_PATH)).toMatch(
+      /apiUrl = "\/.netlify\/functions"/
+    )
+  })
+
+  it('should add netlify.toml', async () => {
+    const netlify = require('../providers/netlify')
+    await netlify.handler({ force: true })
+    // Will be verified by a snapshot up above in the mocked `writeFilesTask`
+  })
+})

packages/cli/src/commands/setup/deploy/providers/netlify.js

@@ -14,7 +14,10 @@ export const command = 'netlify'
 export const description = 'Setup Netlify deploy'
 
 const files = [
-  { path: path.join(getPaths().base, 'netlify.toml'), content: NETLIFY_TOML },
+  {
+    path: path.join(getPaths().base, 'netlify.toml'),
+    content: NETLIFY_TOML,
+  },
 ]
 
 const notes = [
@@ -26,10 +29,7 @@ export const handler = async ({ force }) => {
   const tasks = new Listr(
     [
       updateApiURLTask('/.netlify/functions'),
-      addFilesTask({
-        files,
-        force,
-      }),
+      addFilesTask({ files, force }),
       printSetupNotes(notes),
     ],
     { rendererOptions: { collapse: false } }

packages/cli/src/commands/setup/deploy/templates/netlify.js

@@ -3,9 +3,9 @@ import { getConfig } from '../../../../lib'
 const config = getConfig()
 
 export const NETLIFY_TOML = `[build]
-command = "yarn rw deploy netlify"
-publish = "web/dist"
-functions = "api/dist/functions"
+  command = "yarn rw deploy netlify"
+  publish = "web/dist"
+  functions = "api/dist/functions"
 
 [dev]
   # To use [Netlify Dev](https://www.netlify.com/products/dev/),