diff --git a/package.json b/package.json index ff96742a..08a54dd9 100644 --- a/package.json +++ b/package.json @@ -4,8 +4,8 @@ "private": true, "proxy": "http://localhost:8000/", "dependencies": { - "@material-ui/core": "^3.9.3", - "@material-ui/icons": "^3.0.2", + "@material-ui/core": "^4.8.3", + "@material-ui/icons": "^4.5.1", "axios": "^0.19.0", "connected-react-router": "^6.5.2", "custom-event-polyfill": "^1.0.7", diff --git a/src/App.tsx b/src/App.tsx index bd2baf4e..b64b49ed 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -23,6 +23,15 @@ import CookieConsent from './cookieConsent/cookieConsent.component'; import ReduxToastr from 'react-redux-toastr'; import Tour from './tour/tour.component'; +import { + StylesProvider, + createGenerateClassName, +} from '@material-ui/core/styles'; + +const generateClassName = createGenerateClassName({ + productionPrefix: 'sgw', +}); + const history = createBrowserHistory(); const middleware = [thunk, routerMiddleware(history), ScigatewayMiddleware]; @@ -80,10 +89,12 @@ class App extends React.Component {
- - {toastrConfig()} - {pageContent()} - + + + {toastrConfig()} + {pageContent()} + +
diff --git a/src/cookieConsent/__snapshots__/cookieConsent.component.test.tsx.snap b/src/cookieConsent/__snapshots__/cookieConsent.component.test.tsx.snap index 36adae28..7046691b 100644 --- a/src/cookieConsent/__snapshots__/cookieConsent.component.test.tsx.snap +++ b/src/cookieConsent/__snapshots__/cookieConsent.component.test.tsx.snap @@ -1,31 +1,31 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Cookie consent component should render correctly 1`] = ` - manage-preferences-button - , - , + accept-button - , + , ] } anchorOrigin={ diff --git a/src/cookieConsent/__snapshots__/cookiesPage.component.test.tsx.snap b/src/cookieConsent/__snapshots__/cookiesPage.component.test.tsx.snap index 0919ab5e..21ace5cc 100644 --- a/src/cookieConsent/__snapshots__/cookiesPage.component.test.tsx.snap +++ b/src/cookieConsent/__snapshots__/cookiesPage.component.test.tsx.snap @@ -4,21 +4,21 @@ exports[`Cookies page component should render correctly 1`] = `
- title - +
- cookie-policy-title - - + - cookie-management-title - - + - - - - - + - essential-cookies-title - - - + + - essential-cookies-description - +
    - cookie-consent-description - - + scigateway-token-description - +
- - - + + - - - - + - analytics-cookies-title - - - + + - analytics-cookies-description - +
    - google-analytics-description - +
- - - + + +
- save-preferences-button - +
`; diff --git a/src/cookieConsent/cookieConsent.component.test.tsx b/src/cookieConsent/cookieConsent.component.test.tsx index a5f08314..5b0f37f5 100644 --- a/src/cookieConsent/cookieConsent.component.test.tsx +++ b/src/cookieConsent/cookieConsent.component.test.tsx @@ -1,5 +1,9 @@ import React from 'react'; -import CookieConsent from './cookieConsent.component'; + +import CookieConsent, { + CookieConsentWithoutStyles, + CombinedCookieConsentProps, +} from './cookieConsent.component'; import { createShallow, createMount } from '@material-ui/core/test-utils'; import { StateType } from '../state/state.types'; import configureStore from 'redux-mock-store'; @@ -7,7 +11,7 @@ import { initialState } from '../state/reducers/scigateway.reducer'; import { initialiseAnalytics } from '../state/actions/scigateway.actions'; import { Provider } from 'react-redux'; import { buildTheme } from '../theming'; -import { MuiThemeProvider } from '@material-ui/core'; +import { MuiThemeProvider } from '@material-ui/core/styles'; import Cookies from 'js-cookie'; import ReactGA from 'react-ga'; import { createLocation } from 'history'; @@ -18,9 +22,10 @@ describe('Cookie consent component', () => { let mount; let mockStore; let state: StateType; + let props: CombinedCookieConsentProps; beforeEach(() => { - shallow = createShallow({ untilSelector: 'CookieConsent' }); + shallow = createShallow({}); mount = createMount(); mockStore = configureStore(); @@ -35,6 +40,19 @@ describe('Cookie consent component', () => { id: 'test id', initialised: false, }; + + props = { + analytics: state.scigateway.analytics, + res: undefined, + location: state.router.location, + loading: state.scigateway.siteLoading, + initialiseAnalytics: jest.fn(), + navigateToCookies: jest.fn(), + classes: { + root: 'root-class', + button: 'button-class', + }, + }; }); afterEach(() => { @@ -44,11 +62,7 @@ describe('Cookie consent component', () => { const theme = buildTheme(); it('should render correctly', () => { - const wrapper = shallow( - - - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -142,35 +156,23 @@ describe('Cookie consent component', () => { name === 'cookie-consent' ? { analytics: true } : null ); - const wrapper = shallow( - - - - ); + const wrapper = shallow(); expect(wrapper.prop('open')).toBeFalsy(); }); it('should set open to false if site is loading', () => { - state.scigateway.siteLoading = false; + props.loading = false; - const wrapper = shallow( - - - - ); + const wrapper = shallow(); expect(wrapper.prop('open')).toBeFalsy(); }); it('should set open to false if on /cookies page', () => { - state.router.location = createLocation('/cookies'); + props.location = createLocation('/cookies'); - const wrapper = shallow( - - - - ); + const wrapper = shallow(); expect(wrapper.prop('open')).toBeFalsy(); }); diff --git a/src/cookieConsent/cookieConsent.component.tsx b/src/cookieConsent/cookieConsent.component.tsx index cee572f2..c9fe81bc 100644 --- a/src/cookieConsent/cookieConsent.component.tsx +++ b/src/cookieConsent/cookieConsent.component.tsx @@ -28,7 +28,7 @@ const styles = (theme: Theme): StyleRules => }, button: { color: theme.palette.primary.contrastText, - margin: theme.spacing.unit, + margin: theme.spacing(1), }, }); @@ -44,7 +44,7 @@ interface CookieConsentDispatchProps { navigateToCookies: () => Action; } -type CombinedCookieConsentProps = CookieConsentStateProps & +export type CombinedCookieConsentProps = CookieConsentStateProps & CookieConsentDispatchProps & WithStyles; @@ -149,6 +149,7 @@ const mapDispatchToProps = ( navigateToCookies: () => dispatch(push('/cookies')), }); +export const CookieConsentWithoutStyles = CookieConsent; export const CookieConsentWithStyles = withStyles(styles)(CookieConsent); export default connect( diff --git a/src/cookieConsent/cookiesPage.component.test.tsx b/src/cookieConsent/cookiesPage.component.test.tsx index 800d0fd0..16862280 100644 --- a/src/cookieConsent/cookiesPage.component.test.tsx +++ b/src/cookieConsent/cookiesPage.component.test.tsx @@ -5,7 +5,7 @@ import { StateType } from '../state/state.types'; import configureStore from 'redux-mock-store'; import { initialState } from '../state/reducers/scigateway.reducer'; import { buildTheme } from '../theming'; -import { MuiThemeProvider } from '@material-ui/core'; +import { MuiThemeProvider } from '@material-ui/core/styles'; import Cookies from 'js-cookie'; import { createLocation } from 'history'; import { push } from 'connected-react-router'; diff --git a/src/cookieConsent/cookiesPage.component.tsx b/src/cookieConsent/cookiesPage.component.tsx index 06889913..d96429e1 100644 --- a/src/cookieConsent/cookiesPage.component.tsx +++ b/src/cookieConsent/cookiesPage.component.tsx @@ -21,31 +21,31 @@ import { push } from 'connected-react-router'; const styles = (theme: Theme): StyleRules => createStyles({ root: { - margin: 2 * theme.spacing.unit, + margin: theme.spacing(2), }, container: { display: 'flex', flexDirection: 'column', - marginTop: 2 * theme.spacing.unit, - marginBottom: 2 * theme.spacing.unit, + marginTop: theme.spacing(2), + marginBottom: theme.spacing(2), }, titleText: { fontWeight: 'bold', color: theme.palette.primary.main, }, cookiePolicy: { - marginTop: 2 * theme.spacing.unit, - marginBottom: 2 * theme.spacing.unit, + marginTop: theme.spacing(2), + marginBottom: theme.spacing(2), }, cookieTypes: { - marginTop: 2 * theme.spacing.unit, - marginBottom: 2 * theme.spacing.unit, + marginTop: theme.spacing(2), + marginBottom: theme.spacing(2), }, button: { color: theme.palette.primary.contrastText, }, cookieList: { - paddingLeft: 2 * theme.spacing.unit, + paddingLeft: theme.spacing(2), }, cookieListItem: { display: 'list-item', diff --git a/src/homePage/__snapshots__/homePage.component.test.tsx.snap b/src/homePage/__snapshots__/homePage.component.test.tsx.snap index 70a7e288..bdd95713 100644 --- a/src/homePage/__snapshots__/homePage.component.test.tsx.snap +++ b/src/homePage/__snapshots__/homePage.component.test.tsx.snap @@ -3,113 +3,113 @@ exports[`Home page component homepage renders correctly 1`] = `
- title - +
- how-label - - + - - explore-label - + - explore-description - - - + + - analyse-label - + - analyse-description - - - + + - record-label - + - record-description - - - - + + + banner-one - - + banner-two - +
`; diff --git a/src/homePage/homePage.component.test.tsx b/src/homePage/homePage.component.test.tsx index 50b7d106..50b1f531 100644 --- a/src/homePage/homePage.component.test.tsx +++ b/src/homePage/homePage.component.test.tsx @@ -1,38 +1,42 @@ import React from 'react'; import { createMount, createShallow } from '@material-ui/core/test-utils'; -import HomePage from './homePage.component'; -import { MuiThemeProvider } from '@material-ui/core'; -import { buildTheme } from '../theming'; -import { StateType } from '../state/state.types'; -import configureStore from 'redux-mock-store'; -import { initialState } from '../state/reducers/scigateway.reducer'; +import { + HomePageWithoutStyles, + CombinedHomePageProps, +} from './homePage.component'; describe('Home page component', () => { let shallow; let mount; - let mockStore; - let state: StateType; + let props: CombinedHomePageProps; beforeEach(() => { shallow = createShallow({ untilSelector: 'div' }); mount = createMount(); - mockStore = configureStore(); - state = JSON.parse(JSON.stringify({ scigateway: initialState })); + props = { + res: undefined, + classes: { + bigImage: 'bigImage-class', + title: 'title-class', + howItWorks: 'howItWorks-class', + howItWorksTitle: 'howItWorksTitle-class', + howItWorksGridItem: 'howItWorksGridItem-class', + howItWorksGridItemTitle: 'howItWorksGridItemTitle-class', + howItWorksGridItemImage: 'howItWorksGridItemImage-class', + howItWorksGridItemCaption: 'howItWorksGridItemCaption-class', + strapline: 'strapline-class', + purpose: 'purpose-class', + }, + }; }); afterEach(() => { mount.cleanUp(); }); - const theme = buildTheme(); - it('homepage renders correctly', () => { - const wrapper = shallow( - - - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); }); diff --git a/src/homePage/homePage.component.tsx b/src/homePage/homePage.component.tsx index 65937a2b..aca395ba 100644 --- a/src/homePage/homePage.component.tsx +++ b/src/homePage/homePage.component.tsx @@ -81,7 +81,7 @@ interface HomePageProps { res: AppStrings | undefined; } -type CombinedHomePageProps = HomePageProps & WithStyles; +export type CombinedHomePageProps = HomePageProps & WithStyles; const HomePage = (props: CombinedHomePageProps): React.ReactElement => (
@@ -94,7 +94,8 @@ const HomePage = (props: CombinedHomePageProps): React.ReactElement => ( {getString(props.res, 'how-label')} - + + ({ res: getAppStrings(state, 'home-page'), }); +export const HomePageWithoutStyles = HomePage; export const HomePageWithStyles = withStyles(styles)(HomePage); export default connect(mapStateToProps)(HomePageWithStyles); diff --git a/src/loginPage/__snapshots__/loginPage.component.test.tsx.snap b/src/loginPage/__snapshots__/loginPage.component.test.tsx.snap index 54ecfc89..250fa5b9 100644 --- a/src/loginPage/__snapshots__/loginPage.component.test.tsx.snap +++ b/src/loginPage/__snapshots__/loginPage.component.test.tsx.snap @@ -5,12 +5,12 @@ exports[`Login page component anonymous component renders correctly 1`] = ` className="root-1" onKeyPress={[Function]} > - - login-button - - + +
`; @@ -30,15 +30,15 @@ exports[`Login page component anonymous component renders failedToLogin error co className="root-1" onKeyPress={[Function]} > - + login-error-msg - - + - login-button - - + + `; @@ -58,15 +58,15 @@ exports[`Login page component anonymous component renders signedOutDueToTokenInv className="root-1" onKeyPress={[Function]} > - + token-invalid-msg - - + - login-button - - + + `; @@ -86,32 +86,26 @@ exports[`Login page component credential component renders correctly 1`] = ` className="root-1" onKeyPress={[Function]} > - - - - login-button - - + + `; @@ -131,35 +125,29 @@ exports[`Login page component credential component renders failedToLogin error c className="root-1" onKeyPress={[Function]} > - + login-error-msg - - + - - - login-button - - + + `; @@ -179,35 +167,29 @@ exports[`Login page component credential component renders signedOutDueToTokenIn className="root-1" onKeyPress={[Function]} > - + token-invalid-msg - - + - - - login-button - - + + `; exports[`Login page component login page renders anonymous login if mnemonic present + anon is selected 1`] = `
- - - - - + + title - + - +
`; exports[`Login page component login page renders credential component if no redirect url 1`] = `
- - - - - + + title - + - +
`; exports[`Login page component login page renders credentials login if mnemonic present + user/pass is selected 1`] = `
- - - - - + + title - + - +
`; exports[`Login page component login page renders dropdown if mnemonic present + there are multiple mnemonics 1`] = `
- - - - - + + title - + - +
`; exports[`Login page component login page renders redirect component if redirect url present 1`] = `
- - - - - + + title - + - +
`; exports[`Login page component login page renders spinner if auth is loading 1`] = `
- - - - - + + title - + - - +
`; @@ -636,13 +588,13 @@ exports[`Login page component redirect component renders correctly 1`] = `
- - Login with Github - - + +
`; @@ -661,16 +613,16 @@ exports[`Login page component redirect component renders failedToLogin error cor
- + login-redirect-error-msg - - + - Login with Github - - + +
`; diff --git a/src/loginPage/loginPage.component.test.tsx b/src/loginPage/loginPage.component.test.tsx index 9365018a..4724a415 100644 --- a/src/loginPage/loginPage.component.test.tsx +++ b/src/loginPage/loginPage.component.test.tsx @@ -1,5 +1,6 @@ import React from 'react'; import LoginPage, { + LoginPageWithoutStyles, LoginPageWithStyles, CredentialsLoginScreen, RedirectLoginScreen, @@ -8,7 +9,7 @@ import LoginPage, { } from './loginPage.component'; import { createShallow, createMount } from '@material-ui/core/test-utils'; import { buildTheme } from '../theming'; -import { MuiThemeProvider } from '@material-ui/core'; +import { MuiThemeProvider } from '@material-ui/core/styles'; import TestAuthProvider from '../authentication/testAuthProvider'; import { createLocation } from 'history'; import axios from 'axios'; @@ -26,6 +27,7 @@ import thunk from 'redux-thunk'; import { AnyAction } from 'redux'; import { NotificationType } from '../state/scigateway.types'; import * as log from 'loglevel'; +import { Select } from '@material-ui/core'; jest.mock('loglevel'); @@ -38,6 +40,9 @@ describe('Login page component', () => { const dummyClasses = { root: 'root-1', + paper: 'paper-class', + avatar: 'avatar-class', + spinner: 'spinner-class', }; beforeEach(() => { @@ -54,9 +59,9 @@ describe('Login page component', () => { props = { auth: { - loading: false, failedToLogin: false, signedOutDueToTokenInvalidation: false, + loading: false, provider: new TestAuthProvider(null), }, location: createLocation('/'), @@ -149,21 +154,13 @@ describe('Login page component', () => { }); it('login page renders credential component if no redirect url', () => { - const wrapper = shallow( - - - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); it('login page renders redirect component if redirect url present', () => { props.auth.provider.redirectUrl = 'test redirect'; - const wrapper = shallow( - - - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -188,7 +185,7 @@ describe('Login page component', () => { const wrapper = shallow( - + ); @@ -217,7 +214,7 @@ describe('Login page component', () => { const wrapper = shallow( - + ); @@ -246,7 +243,7 @@ describe('Login page component', () => { const wrapper = shallow( - + ); @@ -262,7 +259,7 @@ describe('Login page component', () => { props.auth.loading = true; const wrapper = shallow( - + ); expect(wrapper).toMatchSnapshot(); @@ -283,7 +280,7 @@ describe('Login page component', () => { const wrapper = shallow( - + ); @@ -341,7 +338,8 @@ describe('Login page component', () => { wrapper.update(); }); - const simulateDropdown = wrapper.find('Select').first(); + // Find the Select component for the dropdown authenticators list. + const simulateDropdown = wrapper.find(Select).first(); simulateDropdown.prop('onChange')({ target: { value: 'user/pass' } }); expect(testStore.getActions().length).toEqual(1); diff --git a/src/loginPage/loginPage.component.tsx b/src/loginPage/loginPage.component.tsx index 30394ac2..344c3637 100644 --- a/src/loginPage/loginPage.component.tsx +++ b/src/loginPage/loginPage.component.tsx @@ -36,43 +36,42 @@ const styles = (theme: Theme): StyleRules => flexDirection: 'column', alignItems: 'center', width: 'auto', - marginLeft: theme.spacing.unit * 3, - marginRight: theme.spacing.unit * 3, + marginLeft: theme.spacing(3), + marginRight: theme.spacing(3), }, avatar: { - margin: theme.spacing.unit, + margin: theme.spacing(1), backgroundColor: (theme as UKRITheme).ukri.orange, }, paper: { - marginTop: theme.spacing.unit * 8, + marginTop: theme.spacing(8), display: 'flex', flexDirection: 'column', alignItems: 'center', - padding: `${theme.spacing.unit * 3}px ${theme.spacing.unit * 3}px ${theme - .spacing.unit * 3}px`, - [theme.breakpoints.up(400 + theme.spacing.unit * 3 * 2)]: { + padding: theme.spacing(3), + [theme.breakpoints.up(400 + theme.spacing(6))]: { width: 400, marginLeft: 'auto', marginRight: 'auto', }, }, textField: { - marginTop: theme.spacing.unit, + marginTop: theme.spacing(1), minWidth: 200, }, formControl: { - margin: theme.spacing.unit, + margin: theme.spacing(1), minWidth: 200, }, button: { - marginTop: `${theme.spacing.unit * 3}px`, + marginTop: `${theme.spacing(1)}px`, }, warning: { - marginTop: `${theme.spacing.unit * 3}px`, + marginTop: `${theme.spacing(1)}px`, color: 'red', }, info: { - marginTop: `${theme.spacing.unit * 3}px`, + marginTop: `${theme.spacing(1)}px`, color: theme.palette.primary.main, }, spinner: { @@ -236,13 +235,11 @@ export const LoginSelector = ( Authenticator