diff --git a/src/styles/raw-themes/dark-raw-theme.js b/src/styles/raw-themes/dark-raw-theme.js index 7e55a9d4d93bb3..8d88f8fe00708c 100644 --- a/src/styles/raw-themes/dark-raw-theme.js +++ b/src/styles/raw-themes/dark-raw-theme.js @@ -6,7 +6,7 @@ module.exports = { spacing: Spacing, fontFamily: 'Roboto, sans-serif', palette: { - primary1Color: Colors.teal200, + primary1Color: Colors.grey500, primary2Color: Colors.cyan700, primary3Color: Colors.cyan100, accent1Color: Colors.pinkA200, diff --git a/test/theming-v12-spec.js b/test/theming-v12-spec.js new file mode 100644 index 00000000000000..6f529d2b465cec --- /dev/null +++ b/test/theming-v12-spec.js @@ -0,0 +1,233 @@ +//NOTE: all these tests depend on ThemeManager, DarkRawTheme, and Colors +//Modifying any of the above files will break these tests! + +const AppBar = require('app-bar'); +const RaisedButton = require('raised-button'); +const React = require('react'); +const TestUtils = React.addons.TestUtils; +const ThemeManager = require('styles/theme-manager'); +const ThemeDecorator = require('styles/theme-decorator'); +const DarkRawTheme = require('styles/raw-themes/dark-raw-theme'); +const LightRawTheme = require('styles/raw-themes/light-raw-theme'); +const Colors = require('styles/colors'); + +describe('Theming', () => { + + describe('ThemeManager', () => { + + it('should return new theme object when spacing modifier invoked', () => { + let currentMuiTheme = ThemeManager.getMuiTheme(DarkRawTheme); + let modifiedMuiTheme = ThemeManager.modifyRawThemeSpacing(currentMuiTheme, currentMuiTheme.rawTheme.spacing); + + expect(currentMuiTheme === modifiedMuiTheme).to.be.false; + }); + + it('should return new theme object when palette modifier invoked', () => { + let currentMuiTheme = ThemeManager.getMuiTheme(DarkRawTheme); + let modifiedMuiTheme = ThemeManager.modifyRawThemePalette(currentMuiTheme, currentMuiTheme.rawTheme.palette); + + expect(currentMuiTheme === modifiedMuiTheme).to.be.false; + }); + + it('should return new theme object when fontFamily modifier invoked', () => { + let currentMuiTheme = ThemeManager.getMuiTheme(DarkRawTheme); + let modifiedMuiTheme = ThemeManager.modifyRawThemeFontFamily(currentMuiTheme, currentMuiTheme.rawTheme.fontFamily); + + expect(currentMuiTheme === modifiedMuiTheme).to.be.false; + }); + }); + + describe('When no theme is specified, AppBar', () => { + + it('should display with default light theme', () => { + + let renderedAppbar = TestUtils.renderIntoDocument(); + let appbarDivs = TestUtils.scryRenderedDOMComponentsWithTag(renderedAppbar, 'div'); + let firstDiv = appbarDivs[0].getDOMNode(); + + expect(firstDiv.style.backgroundColor).to.equal('rgb(0, 188, 212)'); + }); + }); + + describe('When the dark theme is specified', () => { + + describe('using context / react lifecycle methods, AppBar', () => { + + it('should display with passed down dark theme', () => { + + let renderedAppbar = TestUtils.renderIntoDocument(); + let appbarDivs = TestUtils.scryRenderedDOMComponentsWithTag(renderedAppbar, 'div'); + let firstDiv = appbarDivs[0].getDOMNode(); + + expect(firstDiv.style.backgroundColor).to.equal('rgb(158, 158, 158)'); + }); + + it('should display with passed down dark theme and overriden specific attribute', () => { + + let renderedAppbar = TestUtils.renderIntoDocument(); + let appbarDivs = TestUtils.scryRenderedDOMComponentsWithTag(renderedAppbar, 'div'); + let firstDiv = appbarDivs[0].getDOMNode(); + + let appbarH1s = TestUtils.scryRenderedDOMComponentsWithTag(renderedAppbar, 'h1'); + let firstH1 = appbarH1s[0].getDOMNode(); + + expect(firstDiv.style.backgroundColor).to.equal('rgb(158, 158, 158)'); + expect(firstH1.style.color).to.equal('rgb(98, 0, 234)'); + }); + + }); + + describe('using theme decorator, AppBar', () => { + + it('should display with passed down dark theme', () => { + + let renderedAppbar = TestUtils.renderIntoDocument(); + let appbarDivs = TestUtils.scryRenderedDOMComponentsWithTag(renderedAppbar, 'div'); + let firstDiv = appbarDivs[0].getDOMNode(); + + expect(firstDiv.style.backgroundColor).to.equal('rgb(158, 158, 158)'); + }); + + it('should display with passed down dark theme and overriden specific attribute', () => { + + let renderedAppbar = TestUtils.renderIntoDocument(); + let appbarDivs = TestUtils.scryRenderedDOMComponentsWithTag(renderedAppbar, 'div'); + let firstDiv = appbarDivs[0].getDOMNode(); + + let appbarH1s = TestUtils.scryRenderedDOMComponentsWithTag(renderedAppbar, 'h1'); + let firstH1 = appbarH1s[0].getDOMNode(); + + expect(firstDiv.style.backgroundColor).to.equal('rgb(158, 158, 158)'); + expect(firstH1.style.color).to.equal('rgb(98, 0, 234)'); + }); + + }); + }); + + describe('When theme is updated through button click, AppBar', () => { + + it('should display with updated theme', () => { + let renderedComponent = TestUtils.renderIntoDocument(); + let componentDivs = TestUtils.scryRenderedDOMComponentsWithTag(renderedComponent, 'div'); + let appbarDiv = componentDivs[1].getDOMNode(); + let buttonNode = (TestUtils.scryRenderedDOMComponentsWithTag(renderedComponent, 'button'))[1]; + + let appbarH1s = TestUtils.scryRenderedDOMComponentsWithTag(renderedComponent, 'h1'); + let firstH1 = appbarH1s[0].getDOMNode(); + + expect(appbarDiv.style.backgroundColor).to.equal('rgb(158, 158, 158)'); + expect(firstH1.style.color).to.equal('rgba(255, 255, 255, 0.867188)'); + + //simulate button click + TestUtils.Simulate.click(buttonNode); + + //now new theme should be applied and text color of app bar should be changed + expect(appbarDiv.style.backgroundColor).to.equal('rgb(0, 188, 212)'); + expect(firstH1.style.color).to.equal('rgb(98, 0, 234)'); + }); + }); +}); + +//react components used for context-theme-passing testing +const AppBarDarkUsingContext = React.createClass({ + + childContextTypes: { + muiTheme:React.PropTypes.object, + }, + + getChildContext() { + return { + muiTheme: ThemeManager.getMuiTheme(DarkRawTheme) + }; + }, + + render() { + return (); + }, +}); + +const AppBarDarkUsingContextWithOverride = React.createClass({ + + childContextTypes: { + muiTheme:React.PropTypes.object, + }, + + getInitialState() { + let newMuiTheme = ThemeManager.getMuiTheme(DarkRawTheme); + newMuiTheme.appBar.textColor = Colors.deepPurpleA700; + + return { + muiTheme: newMuiTheme, + }; + }, + + getChildContext() { + return { + muiTheme: this.state.muiTheme, + }; + }, + + render() { + return (); + }, +}); + +//react components used decorator-theme-passing texting +let darkMuiTheme = ThemeManager.getMuiTheme(DarkRawTheme); + +@ThemeDecorator(darkMuiTheme) +class AppBarDarkUsingDecorator extends React.Component +{ + render() { + return (); + } +} + +let darkMuiThemeWithOverride = ThemeManager.getMuiTheme(DarkRawTheme); +darkMuiThemeWithOverride.appBar.textColor = Colors.deepPurpleA700; + +@ThemeDecorator(darkMuiThemeWithOverride) +class AppBarDarkUsingDecoratorWithOverride extends React.Component +{ + render() { + return (); + } +} + +//react component used to test whether or not theme updates down the hierarchy +const ButtonToUpdateThemeWithAppBar = React.createClass({ + getInitialState () { + return { + muiTheme: ThemeManager.getMuiTheme(DarkRawTheme), + }; + }, + + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + + handleClick() { + let newMuiThemeWithOverride = ThemeManager.getMuiTheme(LightRawTheme); + newMuiThemeWithOverride.appBar.textColor = Colors.deepPurpleA700; + + this.setState({ + muiTheme: newMuiThemeWithOverride, + }); + }, + + render () { + return ( +
+ + +
+ ); + }, + +}); \ No newline at end of file