mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
Test stateful component style update (#4309)
This commit is contained in:
parent
76f5e979b3
commit
4bec4cc6f7
20
test/integration/basic/pages/hmr/style-stateful-component.js
Normal file
20
test/integration/basic/pages/hmr/style-stateful-component.js
Normal file
|
@ -0,0 +1,20 @@
|
||||||
|
import React, { Component } from 'react'
|
||||||
|
|
||||||
|
export default class StyleStateFul extends Component {
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<React.Fragment>
|
||||||
|
<div className='hmr-style-page'>
|
||||||
|
<p>
|
||||||
|
This is the style page.
|
||||||
|
<style jsx>{`
|
||||||
|
p {
|
||||||
|
font-size: 100px;
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</React.Fragment>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,6 +1,8 @@
|
||||||
|
import React from 'react'
|
||||||
export default () => {
|
export default () => {
|
||||||
return (
|
return (
|
||||||
<>' '<div className='hmr-style-page'>
|
<React.Fragment>
|
||||||
|
<div className='hmr-style-page'>
|
||||||
<p>
|
<p>
|
||||||
This is the style page.
|
This is the style page.
|
||||||
<style jsx>{`
|
<style jsx>{`
|
||||||
|
@ -9,6 +11,7 @@ export default () => {
|
||||||
}
|
}
|
||||||
`}</style>
|
`}</style>
|
||||||
</p>
|
</p>
|
||||||
</div>' '</>
|
</div>
|
||||||
|
</React.Fragment>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -133,6 +133,41 @@ export default (context, render) => {
|
||||||
|
|
||||||
browser.close()
|
browser.close()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// Added because of a regression in react-hot-loader, see issues: #4246 #4273
|
||||||
|
// Also: https://github.com/zeit/styled-jsx/issues/425
|
||||||
|
it('should update styles in a stateful component correctly', async () => {
|
||||||
|
const browser = await webdriver(context.appPort, '/hmr/style-stateful-component')
|
||||||
|
const pTag = await browser.elementByCss('.hmr-style-page p')
|
||||||
|
const initialFontSize = await pTag.getComputedCss('font-size')
|
||||||
|
|
||||||
|
expect(initialFontSize).toBe('100px')
|
||||||
|
|
||||||
|
const pagePath = join(__dirname, '../', 'pages', 'hmr', 'style-stateful-component.js')
|
||||||
|
|
||||||
|
const originalContent = readFileSync(pagePath, 'utf8')
|
||||||
|
const editedContent = originalContent.replace('100px', '200px')
|
||||||
|
|
||||||
|
// Change the page
|
||||||
|
writeFileSync(pagePath, editedContent, 'utf8')
|
||||||
|
|
||||||
|
// wait for 5 seconds
|
||||||
|
await waitFor(5000)
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Check whether the this page has reloaded or not.
|
||||||
|
const editedPTag = await browser.elementByCss('.hmr-style-page p')
|
||||||
|
const editedFontSize = await editedPTag.getComputedCss('font-size')
|
||||||
|
|
||||||
|
expect(editedFontSize).toBe('200px')
|
||||||
|
} finally {
|
||||||
|
// Finally is used so that we revert the content back to the original regardless of the test outcome
|
||||||
|
// restore the about page content.
|
||||||
|
writeFileSync(pagePath, originalContent, 'utf8')
|
||||||
|
}
|
||||||
|
|
||||||
|
browser.close()
|
||||||
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue