From de31ddb3574fceae365edf12d09325067107e9e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leosvel=20P=C3=A9rez=20Espinosa?=
 <leosvel.perez.espinosa@gmail.com>
Date: Thu, 17 Aug 2023 09:27:48 +0100
Subject: [PATCH] chore(react): add e2e tests

---
 .../src/react-module-federation.test.ts       | 26 +++++++++--
 e2e/react-core/src/react.test.ts              | 46 +++++++++++++++++++
 2 files changed, 67 insertions(+), 5 deletions(-)

diff --git a/e2e/react-core/src/react-module-federation.test.ts b/e2e/react-core/src/react-module-federation.test.ts
index 329bc3356588a0..807539378af93a 100644
--- a/e2e/react-core/src/react-module-federation.test.ts
+++ b/e2e/react-core/src/react-module-federation.test.ts
@@ -2,7 +2,6 @@ import { stripIndents } from '@nx/devkit';
 import {
   checkFilesExist,
   cleanupProject,
-  killPort,
   newProject,
   readProjectConfig,
   runCLI,
@@ -114,12 +113,29 @@ describe('React Module Federation', () => {
     // }
   }, 500_000);
 
+  it('should should support generating host and remote apps with the new name and root format', async () => {
+    const shell = uniq('shell');
+    const remote = uniq('remote');
+
+    runCLI(
+      `generate @nx/react:host ${shell} --project-name-and-root-format=as-provided --no-interactive`
+    );
+    runCLI(
+      `generate @nx/react:remote ${remote} --host=${shell} --project-name-and-root-format=as-provided --no-interactive`
+    );
+
+    // check files are generated without the layout directory ("apps/") and
+    // using the project name as the directory when no directory is provided
+    checkFilesExist(`${shell}/module-federation.config.js`);
+    checkFilesExist(`${remote}/module-federation.config.js`);
+
+    // check default generated host is built successfully
+    const buildOutput = runCLI(`run ${shell}:build:development`);
+    expect(buildOutput).toContain('Successfully ran target build');
+  }, 500_000);
+
   async function readPort(appName: string): Promise<number> {
     const config = await readProjectConfig(appName);
     return config.targets.serve.options.port;
   }
 });
-
-function killPorts(ports: number[]): Promise<boolean[]> {
-  return Promise.all(ports.map((p) => killPort(p)));
-}
diff --git a/e2e/react-core/src/react.test.ts b/e2e/react-core/src/react.test.ts
index ae5963e8fa3b45..0140ade9867d91 100644
--- a/e2e/react-core/src/react.test.ts
+++ b/e2e/react-core/src/react.test.ts
@@ -227,6 +227,52 @@ describe('React Applications', () => {
     );
   }, 250_000);
 
+  it('should support generating projects with the new name and root format', () => {
+    const appName = uniq('app1');
+    const libName = uniq('@my-org/lib1');
+
+    runCLI(
+      `generate @nx/react:app ${appName} --bundler=webpack --project-name-and-root-format=as-provided --no-interactive`
+    );
+
+    // check files are generated without the layout directory ("apps/") and
+    // using the project name as the directory when no directory is provided
+    checkFilesExist(`${appName}/src/main.tsx`);
+    // check build works
+    expect(runCLI(`build ${appName}`)).toContain(
+      `Successfully ran target build for project ${appName}`
+    );
+    // check tests pass
+    const appTestResult = runCLI(`test ${appName}`);
+    expect(appTestResult).toContain(
+      `Successfully ran target test for project ${appName}`
+    );
+
+    // assert scoped project names are not supported when --project-name-and-root-format=derived
+    expect(() =>
+      runCLI(
+        `generate @nx/react:lib ${libName} --unit-test-runner=jest --buildable --project-name-and-root-format=derived --no-interactive`
+      )
+    ).toThrow();
+
+    runCLI(
+      `generate @nx/react:lib ${libName} --unit-test-runner=jest --buildable --project-name-and-root-format=as-provided --no-interactive`
+    );
+
+    // check files are generated without the layout directory ("libs/") and
+    // using the project name as the directory when no directory is provided
+    checkFilesExist(`${libName}/src/index.ts`);
+    // check build works
+    expect(runCLI(`build ${libName}`)).toContain(
+      `Successfully ran target build for project ${libName}`
+    );
+    // check tests pass
+    const libTestResult = runCLI(`test ${libName}`);
+    expect(libTestResult).toContain(
+      `Successfully ran target test for project ${libName}`
+    );
+  }, 500_000);
+
   describe('React Applications: --style option', () => {
     it.each`
       style