-
Notifications
You must be signed in to change notification settings - Fork 3.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
chore: Move component-index generation to scaffold-config package #21090
Changes from all commits
1ccc895
327bafc
9d4e27f
01f8928
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
import dedent from 'dedent' | ||
|
||
const componentIndexHtmlGenerator = (headModifier: string = '') => { | ||
return () => { | ||
const template = dedent` | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta charset="utf-8"> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
<meta name="viewport" content="width=device-width,initial-scale=1.0"> | ||
<title>Components App</title> | ||
${headModifier} | ||
</head> | ||
<body> | ||
<div data-cy-root></div> | ||
</body> | ||
</html> | ||
` | ||
|
||
// If the framework supplies an empty string for the modifier, | ||
// strip out the empty line | ||
return template.replace(/\n {4}\n/g, '\n') | ||
} | ||
} | ||
|
||
export default componentIndexHtmlGenerator |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,6 +2,7 @@ import path from 'path' | |
import dedent from 'dedent' | ||
import fs from 'fs-extra' | ||
import * as dependencies from './dependencies' | ||
import componentIndexHtmlGenerator from './component-index-template' | ||
import { defineConfigAvailable } from '@packages/data-context/src/sources/migration/codegen' | ||
import semver from 'semver' | ||
import resolveFrom from 'resolve-from' | ||
|
@@ -122,6 +123,7 @@ export const WIZARD_FRAMEWORKS = [ | |
codeGenFramework: 'react', | ||
glob: '*.{js,jsx,tsx}', | ||
mountModule: 'cypress/react', | ||
componentIndexHtml: componentIndexHtmlGenerator(), | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I like this approach. It seems like there's duplication (there is) but I think it's actually somewhat ideal. That said, if you forgot to add One thing we could do is add a test that loops each of these, asserting the output, like
Do you think this would be useful to have, or the types are enough to keep us safe and confident? I could go either way. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think that relying on types is fine - if they're not here to catch issues like this, then why do we even have them? It's also implicitly covered by the system tests (though I wouldn't want to rely on them to cover this feature, they are a backstop against the types as well). |
||
}, | ||
{ | ||
type: 'vueclivue2', | ||
|
@@ -142,6 +144,7 @@ export const WIZARD_FRAMEWORKS = [ | |
codeGenFramework: 'vue', | ||
glob: '*.vue', | ||
mountModule: 'cypress/vue2', | ||
componentIndexHtml: componentIndexHtmlGenerator(), | ||
}, | ||
{ | ||
type: 'vueclivue3', | ||
|
@@ -162,6 +165,7 @@ export const WIZARD_FRAMEWORKS = [ | |
codeGenFramework: 'vue', | ||
glob: '*.vue', | ||
mountModule: 'cypress/vue', | ||
componentIndexHtml: componentIndexHtmlGenerator(), | ||
}, | ||
{ | ||
type: 'nextjs', | ||
|
@@ -181,6 +185,7 @@ export const WIZARD_FRAMEWORKS = [ | |
codeGenFramework: 'react', | ||
glob: '*.{js,jsx,tsx}', | ||
mountModule: 'cypress/react', | ||
componentIndexHtml: componentIndexHtmlGenerator('<div id="__next_css__DO_NOT_USE__"></div>'), | ||
}, | ||
{ | ||
type: 'nuxtjs', | ||
|
@@ -200,6 +205,7 @@ export const WIZARD_FRAMEWORKS = [ | |
codeGenFramework: 'vue', | ||
glob: '*.vue', | ||
mountModule: 'cypress/vue2', | ||
componentIndexHtml: componentIndexHtmlGenerator(), | ||
}, | ||
{ | ||
type: 'vue2', | ||
|
@@ -219,6 +225,7 @@ export const WIZARD_FRAMEWORKS = [ | |
codeGenFramework: 'vue', | ||
glob: '*.vue', | ||
mountModule: 'cypress/vue2', | ||
componentIndexHtml: componentIndexHtmlGenerator(), | ||
}, | ||
{ | ||
type: 'vue3', | ||
|
@@ -238,6 +245,7 @@ export const WIZARD_FRAMEWORKS = [ | |
codeGenFramework: 'vue', | ||
glob: '*.vue', | ||
mountModule: 'cypress/vue', | ||
componentIndexHtml: componentIndexHtmlGenerator(), | ||
}, | ||
{ | ||
type: 'react', | ||
|
@@ -257,5 +265,6 @@ export const WIZARD_FRAMEWORKS = [ | |
codeGenFramework: 'react', | ||
glob: '*.{js,jsx,tsx}', | ||
mountModule: 'cypress/react', | ||
componentIndexHtml: componentIndexHtmlGenerator(), | ||
}, | ||
] as const |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
import { expect } from 'chai' | ||
import dedent from 'dedent' | ||
import componentIndexHtmlGenerator from '../../src/component-index-template' | ||
|
||
describe('componentIndexHtmlGenerator', () => { | ||
it('strips spaces and newlines appropriately', () => { | ||
const generator = componentIndexHtmlGenerator() | ||
|
||
const expected = dedent` | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta charset="utf-8"> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
<meta name="viewport" content="width=device-width,initial-scale=1.0"> | ||
<title>Components App</title> | ||
</head> | ||
<body> | ||
<div data-cy-root></div> | ||
</body> | ||
</html>` | ||
|
||
expect(generator()).to.eq(expected) | ||
}) | ||
|
||
it('handles header modifier', () => { | ||
const generator = componentIndexHtmlGenerator('foobar') | ||
|
||
const expected = dedent` | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta charset="utf-8"> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
<meta name="viewport" content="width=device-width,initial-scale=1.0"> | ||
<title>Components App</title> | ||
foobar | ||
</head> | ||
<body> | ||
<div data-cy-root></div> | ||
</body> | ||
</html>` | ||
|
||
expect(generator()).to.eq(expected) | ||
}) | ||
}) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I wonder if we should be using https://nodejs.org/api/os.html#oseol
I think this would fail on windows?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hm. I don't think this is the right place for that - if we scaffold files using OS EOL separators, then that would be done in the
scaffoldFile
method indata-context/src/actions/WizardActions.ts
. Then it would be in one place, applying to all files we scaffold to disk.I don't think we should do that, though. Several other methods in that same file (
scaffoldFixtures
andscaffoldConfig
for example) use\n
as well. It'd be a bit of a change and would probably want its own ticket.