wip

e2e/next/src/next-component-tests.test.ts

@@ -1,24 +1,181 @@
-import { newProject, uniq } from '@nrwl/e2e/utils';
+import {
+  createFile,
+  newProject,
+  runCLI,
+  uniq,
+  updateFile,
+  runCypressTests,
+} from '@nrwl/e2e/utils';
 
 describe('NextJs Component Testing', () => {
-  let projName: string;
+  let projectName: string;
   const appName = uniq('next-app');
   const libName = uniq('next-lib');
   const buildableLibName = uniq('next-buildable-lib');
 
   beforeAll(() => {
-    projName = newProject({
-      name: 'next-ct',
+    projectName = newProject({
+      name: uniq('next-ct'),
     });
   });
 
-  it('should test a NextJs app', () => {});
+  it('should test a NextJs app', () => {
+    createAppWithCt(appName);
+    if (runCypressTests) {
+      expect(runCLI(`component-test ${appName} --no-watch`)).toContain(
+        'All specs passed!'
+      );
+    }
+    addTailwindToApp(appName);
+    if (runCypressTests) {
+      expect(runCLI(`component-test ${appName} --no-watch`)).toContain(
+        'All specs passed!'
+      );
+    }
+  });
 
-  it('should test a NextJs lib', () => {});
+  it('should test a NextJs lib', async () => {
+    createLibWithCt(libName, false);
+    if (runCypressTests) {
+      expect(runCLI(`component-test ${libName} --no-watch`)).toContain(
+        'All specs passed!'
+      );
+    }
 
-  it('should test a NextJs buildable lib', () => {});
+    addTailwindToLib(libName);
+  });
 
-  it('should support tailwinds across targets', () => {});
+  it.skip('should test a NextJs buildable lib', async () => {
+    createLibWithCt(buildableLibName, true);
+    if (runCypressTests) {
+      expect(runCLI(`component-test ${buildableLibName} --no-watch`)).toContain(
+        'All specs passed!'
+      );
+    }
+  });
 
-  it('should be able to load assest from app', () => {});
+  it.todo('should support tailwinds');
+
+  it.todo('should be able to load assest');
 });
+
+function createAppWithCt(appName: string) {
+  runCLI(`generate @nrwl/next:app ${appName} --no-interactive`);
+  runCLI(
+    `generate @nrwl/next:component button --project=${appName} --directory=components --flat --no-interactive`
+  );
+  createFile(
+    `apps/${appName}/public/data.json`,
+    JSON.stringify({ message: 'loaded from app data.json' })
+  );
+
+  updateFile(`apps/${appName}/components/button.tsx`, (content) => {
+    return `import { useEffect, useState } from 'react';
+
+export interface ButtonProps {
+  text: string;
+}
+
+const data = fetch('/data.json').then((r) => r.json());
+export default function Button(props: ButtonProps) {
+  const [state, setState] = useState<Record<string, any>>();
+  useEffect(() => {
+    data.then(setState);
+  }, []);
+  return (
+    <>
+      {state && <pre>{JSON.stringify(state, null, 2)}</pre>}
+      <p className="text-blue-600">Button</p>
+      <button className="text-white bg-black p-4">{props.text}</button>
+    </>
+  );
+}
+`;
+  });
+
+  runCLI(
+    `generate @nrwl/next:cypress-component-configuration --project=${appName} --generate-tests --no-interactive`
+  );
+}
+
+function addTailwindToApp(appName: string) {
+  runCLI(
+    `generate @nrwl/react:setup-tailwind --project=${appName} --no-interactive`
+  );
+  updateFile(`apps/${appName}/cypress/support/component.ts`, (content) => {
+    return `${content}
+import '../../pages/styles.css'`;
+  });
+
+  updateFile(`apps/${appName}/components/button.cy.tsx`, (content) => {
+    return `import * as React from 'react';
+import Button from './button';
+
+describe(Button.name, () => {
+  it('renders', () => {
+    cy.mount(<Button text={'test'} />);
+  });
+
+  it('should apply tailwind', () => {
+    cy.mount(<Button text={'tailwind'} />);
+    // should have tailwind styles
+    cy.get('p').should('have.css', 'color', 'rgb(37, 99, 235)');
+  });
+});
+`;
+  });
+}
+
+function createLibWithCt(libName: string, buildable: boolean) {
+  runCLI(
+    `generate @nrwl/next:lib ${libName} --buildable=${buildable} --no-interactive`
+  );
+
+  runCLI(
+    `generate @nrwl/next:component button --project=${libName} --flat --export --no-interactive`
+  );
+
+  updateFile(`libs/${libName}/src/lib/button.tsx`, (content) => {
+    return `import { useEffect, useState } from 'react';
+export interface ButtonProps {
+  text: string
+}
+
+export function Button(props: ButtonProps) {
+  return <button className="text-white bg-black p-4">{props.text}</button>
+}
+`;
+  });
+
+  runCLI(
+    `generate @nrwl/next:cypress-component-configuration --project=${libName} --generate-tests --no-interactive`
+  );
+}
+function addTailwindToLib(libName: string) {
+  createFile(`libs/${libName}/src/lib/styles.css`, ``);
+  runCLI(
+    `generate @nrwl/react:setup-tailwind --project=${libName} --no-interactive`
+  );
+  updateFile(`libs/${libName}/cypress/support/component.ts`, (content) => {
+    return `${content}
+import '../../src/lib/styles.css'`;
+  });
+
+  updateFile(`libs/${libName}/src/lib/button.cy.tsx`, (content) => {
+    return `import * as React from 'react';
+import Button from './button';
+
+describe(Button.name, () => {
+  it('renders', () => {
+    cy.mount(<Button text={'test'} />);
+  });
+
+  it('should apply tailwind', () => {
+    cy.mount(<Button text={'tailwind'} />);
+    // should have tailwind styles
+    cy.get('button').should('have.css', 'color', 'rgb(255,255,255)');
+  });
+});
+`;
+  });
+}

packages/next/src/generators/cypress-component-configuration/cypress-component-configuration.ts

@@ -41,21 +41,22 @@ export async function cypressComponentConfiguration(
 
   await addFiles(tree, projectConfig, options);
 
-  // TODO(caleb): error with npm install bc @swc/[email protected] is installed, but needs helpers v0.5 instead of v0.4
   const { webpackInitGenerator } = ensurePackage<
     typeof import('@nrwl/webpack')
   >('@nrwl/webpack', nxVersion);
   tasks.push(
-    await webpackInitGenerator(tree, { compiler: 'swc', skipFormat: true })
+    await webpackInitGenerator(tree, {
+      compiler: 'swc',
+      uiFramework: 'react',
+      skipFormat: true,
+    })
   );
 
   if (options.skipFormat) {
     await formatFiles(tree);
   }
 
-  return () => {
-    runTasksInSerial(...tasks);
-  };
+  return runTasksInSerial(...tasks);
 }
 
 async function addFiles(