Merge pull request #596 from Amsterdam/release/2020-01-27

Release/2020-01-27

src/components/Footer/index.js

@@ -1,25 +1,43 @@
 import React from 'react';
 import {
-  Row, Column, Heading, Link, Paragraph, themeColor,
+  Row,
+  Column,
+  Heading,
+  Link,
+  themeColor,
+  themeSpacing,
 } from '@datapunt/asc-ui';
 import styled from 'styled-components';
 
 const Disclaimer = styled.div`
   background-color: ${themeColor('tint', 'level5')};
-  padding-top: 20px;
-  padding-bottom: 20px;
+  padding-top: ${themeSpacing(7)};
+  padding-bottom: ${themeSpacing(7)};
 
   * {
     color: ${themeColor('bright', 'main')};
   }
 `;
 
+const StyledLink = styled(Link)`
+  font-size: 16px;
+  font-family: Avenir Next LT W01 Demi, arial, sans-serif;
+
+  span {
+    align-self: center;
+  }
+`;
+
 const Privacy = styled.div`
   background: ${themeColor('bright', 'main')};
   padding-top: 10px;
   padding-bottom: 10px;
 `;
 
+const StyledHeading = styled(Heading)`
+  margin: 0 0 ${themeSpacing(3)} 0;
+`;
+
 const FooterWrapper = styled.div`
   & {
     display: flex;
@@ -31,26 +49,23 @@ const FooterWrapper = styled.div`
 
 const Footer = () => (
   <FooterWrapper className="app-container no-print" data-testid="siteFooter">
-    <Disclaimer>
+    <Disclaimer data-testid="disclaimer">
       <Row>
         <Column span={12}>
-          <Heading as="h2">Lukt het niet om een melding te doen?</Heading>
-          <Paragraph>&nbsp;</Paragraph>
+          <StyledHeading $as="h2">Lukt het niet om een melding te doen?</StyledHeading>
         </Column>
 
         <Column span={12}>
-          <Paragraph>
-            Bel het Gemeentelijk informatienummer: 14 020 <br />
-            op werkdagen van 08.00 tot 18.00 uur.
-          </Paragraph>
+          Bel het Gemeentelijk informatienummer: 14 020 <br />
+          op werkdagen van 08.00 tot 18.00 uur.
         </Column>
       </Row>
     </Disclaimer>
 
     <Privacy>
       <Row>
         <Column span={12}>
-          <Link href="https://www.amsterdam.nl/privacy/">Privacy</Link>
+          <StyledLink href="https://www.amsterdam.nl/privacy/" variant="with-chevron">Privacy</StyledLink>
         </Column>
       </Row>
     </Privacy>

src/components/Footer/index.test.js

@@ -1,13 +1,21 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
+import { withAppContext } from 'test/utils';
 
 import Footer from './index';
 
 describe('<Footer />', () => {
   it('should render correctly', () => {
-    const wrapper = shallow(
-      <Footer />
+    const { container, getByTestId } = render(
+      withAppContext(<Footer />)
     );
-    expect(wrapper).toMatchSnapshot();
+
+    expect(container.querySelector(
+      'div.no-print')
+    ).toBeInTheDocument();
+    expect(getByTestId('disclaimer')).toBeInTheDocument();
+    expect(container.querySelector(
+      'a[href="https://www.amsterdam.nl/privacy/"]')
+    ).toBeInTheDocument();
   });
 });

src/containers/App/index.js

@@ -1,7 +1,11 @@
 import React, { Fragment, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import {
-  Switch, Route, Redirect, withRouter, useHistory,
+  Switch,
+  Route,
+  Redirect,
+  withRouter,
+  useHistory,
 } from 'react-router-dom';
 import { compose, bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
@@ -50,13 +54,14 @@ export const AppContainer = ({ requestCategoriesAction }) => {
 
         <div className="app-container">
           <Switch>
-            <Redirect exact from="/" to="/incident" />
+            <Redirect exact from="/" to="/incident/beschrijf" />
             <Redirect exact from="/login" to="/manage" />
-            <Route path="/instellingen" component={SettingsModule} />
+            <Redirect exact from="/manage" to="/manage/incidents" />
             <Route path="/manage" component={IncidentManagementModule} />
+            <Route path="/instellingen" component={SettingsModule} />
             <Route path="/incident" component={IncidentContainer} />
             <Route path="/kto/:yesNo/:uuid" component={KtoContainer} />
-            <Route path="" component={NotFoundPage} />
+            <Route component={NotFoundPage} />
           </Switch>
         </div>
 
@@ -78,7 +83,10 @@ export const mapDispatchToProps = dispatch =>
     dispatch
   );
 
-const withConnect = connect(null, mapDispatchToProps);
+const withConnect = connect(
+  null,
+  mapDispatchToProps
+);
 
 const withReducer = injectReducer({ key: 'global', reducer });
 const withSaga = injectSaga({ key: 'global', saga });

src/containers/App/index.test.js

@@ -63,15 +63,17 @@ describe('<App />', () => {
 
     jest.spyOn(auth, 'isAuthenticated').mockImplementationOnce(() => true);
 
+    cleanup();
+
     rerender(
       withAppContext(<AppContainer requestCategoriesAction={() => {}} />),
     );
 
-    expect(queryByTestId('siteFooter')).toBeNull();
+    expect(queryByTestId('siteFooter')).not.toBeInTheDocument();
   });
 
   it('should render the correct theme', () => {
-    global.localStorage.getItem.mockImplementation(() => undefined);
+    jest.spyOn(auth, 'isAuthenticated').mockImplementation(() => false);
 
     const { queryByTestId, rerender } = render(
       withAppContext(<AppContainer requestCategoriesAction={() => { }} />),
@@ -81,7 +83,7 @@ describe('<App />', () => {
 
     cleanup();
 
-    global.localStorage.getItem.mockImplementation(() => '42');
+    jest.spyOn(auth, 'isAuthenticated').mockImplementation(() => true);
 
     rerender(
       withAppContext(<AppContainer requestCategoriesAction={() => { }} />),
@@ -90,6 +92,74 @@ describe('<App />', () => {
     expect(queryByTestId('signalsThemeProvider')).toBeNull();
   });
 
+  describe('routing', () => {
+    it('should redirect from "/" to "/incident/beschrijf"', () => {
+      history.push('/');
+
+      render(
+        withAppContext(<AppContainer requestCategoriesAction={() => { }} />),
+      );
+
+      expect(history.location.pathname).toEqual('/incident/beschrijf');
+    });
+
+    it('should redirect from "/login" to "/manage/incidents"', () => {
+      jest.spyOn(auth, 'isAuthenticated').mockImplementation(() => false);
+
+      render(
+        withAppContext(<AppContainer requestCategoriesAction={() => { }} />),
+      );
+
+      act(() => {
+        history.push('/login');
+      });
+
+      expect(history.location.pathname).toEqual('/manage/incidents');
+
+      cleanup();
+
+      jest.spyOn(auth, 'isAuthenticated').mockImplementation(() => true);
+
+      render(
+        withAppContext(<AppContainer requestCategoriesAction={() => { }} />),
+      );
+
+      act(() => {
+        history.push('/login');
+      });
+
+      expect(history.location.pathname).toEqual('/manage/incidents');
+    });
+
+    it('should redirect from "/manage" to "/manage/incidents"', () => {
+      jest.spyOn(auth, 'isAuthenticated').mockImplementation(() => false);
+
+      render(
+        withAppContext(<AppContainer requestCategoriesAction={() => { }} />),
+      );
+
+      act(() => {
+        history.push('/manage');
+      });
+
+      expect(history.location.pathname).toEqual('/manage/incidents');
+
+      cleanup();
+
+      jest.spyOn(auth, 'isAuthenticated').mockImplementation(() => true);
+
+      render(
+        withAppContext(<AppContainer requestCategoriesAction={() => { }} />),
+      );
+
+      act(() => {
+        history.push('/manage');
+      });
+
+      expect(history.location.pathname).toEqual('/manage/incidents');
+    });
+  });
+
   describe('mapDispatchToProps', () => {
     const dispatch = jest.fn();
 

src/containers/App/reducer.js

@@ -84,11 +84,8 @@ function appReducer(state = initialState, action) {
 
     case LOGOUT:
       return state
-        .set('upload', fromJS({}))
-        .set('userName', undefined)
-        .set('userScopes', undefined)
-        .set('userPermissions', [])
-        .set('accessToken', undefined);
+        .set('user', initialState.get('user'))
+        .set('upload', initialState.get('upload'));
 
     default:
       return state;