-
Notifications
You must be signed in to change notification settings - Fork 2.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(testing): support NextJs Component Testing
wip wip wip wip wipp wip working
- Loading branch information
1 parent
2dd59c3
commit a719923
Showing
21 changed files
with
940 additions
and
61 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
57 changes: 57 additions & 0 deletions
57
docs/generated/packages/next/generators/cypress-component-configuration.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| { | ||
| "name": "cypress-component-configuration", | ||
| "factory": "./src/generators/cypress-component-configuration/cypress-component-configuration", | ||
| "schema": { | ||
| "$schema": "http://json-schema.org/schema", | ||
| "cli": "nx", | ||
| "$id": "CypressComponentConfiguration", | ||
| "title": "", | ||
| "type": "object", | ||
| "examples": [ | ||
| { | ||
| "command": "nx g @nrwl/next:cypress-component-configuration --project=my-react-project", | ||
| "description": "Add component testing to your Next project" | ||
| }, | ||
| { | ||
| "command": "nx g @nrwl/react:cypress-component-configuration --project=my-react-project --generate-tests", | ||
| "description": "Add component testing to your Next project and generate component tests for your existing components" | ||
| } | ||
| ], | ||
| "properties": { | ||
| "project": { | ||
| "type": "string", | ||
| "description": "The name of the project to add cypress component testing configuration to", | ||
| "x-dropdown": "projects", | ||
| "x-prompt": "What project should we add Cypress component testing to?", | ||
| "x-priority": "important" | ||
| }, | ||
| "generateTests": { | ||
| "type": "boolean", | ||
| "description": "Generate default component tests for existing components in the project", | ||
| "x-prompt": "Automatically generate tests for components declared in this project?", | ||
| "default": false, | ||
| "x-priority": "important" | ||
| }, | ||
| "buildTarget": { | ||
| "type": "string", | ||
| "description": "A build target used to configure Cypress component testing in the format of `project:target[:configuration]`. The build target should be from a Next app. If not provided we will try to infer it from your projects usage.", | ||
| "pattern": "^[^:\\s]+:[^:\\s]+(:\\S+)?$" | ||
| }, | ||
| "skipFormat": { | ||
| "type": "boolean", | ||
| "description": "Skip formatting files", | ||
| "default": false, | ||
| "x-priority": "internal" | ||
| } | ||
| }, | ||
| "required": ["project"], | ||
| "examplesFile": "", | ||
| "presets": [] | ||
| }, | ||
| "description": "cypress-component-configuration generator", | ||
| "implementation": "/packages/next/src/generators/cypress-component-configuration/cypress-component-configuration.ts", | ||
| "aliases": [], | ||
| "hidden": false, | ||
| "path": "/packages/next/src/generators/cypress-component-configuration/schema.json", | ||
| "type": "generator" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,191 @@ | ||
| import { | ||
| createFile, | ||
| newProject, | ||
| runCLI, | ||
| uniq, | ||
| updateFile, | ||
| runCypressTests, | ||
| } from '@nrwl/e2e/utils'; | ||
|
|
||
| describe('NextJs Component Testing', () => { | ||
| let projectName: string; | ||
| const appName = uniq('next-app'); | ||
| const libName = uniq('next-lib'); | ||
| const buildableLibName = uniq('next-buildable-lib'); | ||
|
|
||
| beforeAll(() => { | ||
| projectName = newProject({ | ||
| name: uniq('next-ct'), | ||
| }); | ||
| }); | ||
|
|
||
| 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', async () => { | ||
| createLibWithCt(libName, false); | ||
| if (runCypressTests) { | ||
| expect(runCLI(`component-test ${libName} --no-watch`)).toContain( | ||
| 'All specs passed!' | ||
| ); | ||
| } | ||
| addTailwindToLib(libName); | ||
| if (runCypressTests) { | ||
| expect(runCLI(`component-test ${libName} --no-watch`)).toContain( | ||
| 'All specs passed!' | ||
| ); | ||
| } | ||
| }); | ||
|
|
||
| it('should test a NextJs buildable lib', async () => { | ||
| createLibWithCt(buildableLibName, true); | ||
| if (runCypressTests) { | ||
| expect(runCLI(`component-test ${buildableLibName} --no-watch`)).toContain( | ||
| 'All specs passed!' | ||
| ); | ||
| } | ||
|
|
||
| addTailwindToLib(buildableLibName); | ||
| if (runCypressTests) { | ||
| expect(runCLI(`component-test ${libName} --no-watch`)).toContain( | ||
| 'All specs passed!' | ||
| ); | ||
| } | ||
| }); | ||
| }); | ||
|
|
||
| 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> | ||
| } | ||
| export default 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}/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)'); | ||
| }); | ||
| }); | ||
| `; | ||
| }); | ||
| updateFile(`libs/${libName}/cypress/support/styles.ct.css`, (content) => { | ||
| return `${content} | ||
| @tailwind base; | ||
| @tailwind components; | ||
| @tailwind utilities; | ||
| `; | ||
| }); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
packages/cypress/src/generators/cypress-component-project/files/cypress/tsconfig.cy.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.