fix(nextjs): generate working spec file for --appDir

packages/next/src/generators/application/application.spec.ts

@@ -450,14 +450,28 @@ describe('app', () => {
         appDir: true,
       });
 
-      expect(tree.exists('apps/testApp/pages/styles.css')).toBeFalsy();
-
-      expect(tree.exists('apps/testApp/app/global.css'));
-      expect(tree.exists('apps/testApp/app/page.tsx'));
-      expect(tree.exists('apps/testApp/app/layout.tsx'));
-      expect(tree.exists('apps/testApp/app/api/hello/route.ts'));
-      expect(tree.exists('apps/testApp/app/page.module.css'));
-      expect(tree.exists('apps/testApp/app/favicon.ico'));
+      expect(tree.exists('apps/test-app/pages/styles.css')).toBeFalsy();
+      expect(tree.exists('apps/test-app/app/global.css')).toBeTruthy();
+      expect(tree.exists('apps/test-app/app/page.tsx')).toBeTruthy();
+      expect(tree.exists('apps/test-app/app/layout.tsx')).toBeTruthy();
+      expect(tree.exists('apps/test-app/app/api/hello/route.ts')).toBeTruthy();
+      expect(tree.exists('apps/test-app/app/page.module.css')).toBeTruthy();
+      expect(tree.exists('apps/test-app/public/favicon.ico')).toBeTruthy();
+      expect(tree.read('apps/test-app/specs/page.spec.tsx', 'utf-8'))
+        .toMatchInlineSnapshot(`
+        "import React from 'react';
+        import { render } from '@testing-library/react';
+        import Page from '../apps/page';
+
+        describe('Page', () => {
+          it('should render successfully', () => {
+            const { baseElement } = render(<Page />);
+
+            expect(baseElement).toBeTruthy();
+          });
+        });
+        "
+      `);
     });
   });
 });

packages/next/src/generators/application/files/app/page.tsx__tmpl__

@@ -14,7 +14,7 @@
 const StyledPage = styled.div`<%- pageStyleContent %>`;
 <% }%>
 
-export default async function Index() {
+export default function Index() {
   /*
    * Replace the elements below with your own.
    *
@@ -26,4 +26,4 @@ export default async function Index() {
       <%- appContent %>
     </<%= wrapper %>>
   );
-};
+};

packages/next/src/generators/application/files/common/specs/__fileName__.spec.tsx__tmpl__

@@ -1,11 +1,11 @@
 import React from 'react';
 import { render } from '@testing-library/react';
+<% if(appDir) {%> import Page from '../apps/page';<% } else {%>import Index from '../pages/index';<% } %>
 
-import Index from '../pages/index';
-
-describe('Index', () => {
+describe('<% if(appDir) { %>Page<% } else { %>Index<% } %>', () => {
   it('should render successfully', () => {
-    const { baseElement } = render(<Index />);
+    const { baseElement } = render(<% if(appDir) { %><Page /><% } else { %><Index /><% } %>);
+
     expect(baseElement).toBeTruthy();
   });
 });

packages/next/src/generators/application/lib/create-application-files.ts

@@ -16,9 +16,11 @@ import {
 } from './create-application-files.helpers';
 
 export function createApplicationFiles(host: Tree, options: NormalizedSchema) {
+  const n = names(options.name);
   const templateVariables = {
-    ...names(options.name),
     ...options,
+    ...n,
+    fileName: options.appDir ? 'page' : options.fileName ?? n.fileName,
     dot: '.',
     tmpl: '',
     rootTsConfigPath: getRelativePathToRootTsConfig(