Merge pull request #134 from technologiestiftung/test/buttons

.babelrc.js

@@ -4,4 +4,9 @@ module.exports = {
     ['@babel/preset-env', { modules: isTest ? 'commonjs' : false }],
     '@babel/preset-react',
   ],
+  env: {
+    test: {
+      plugins: ['@babel/plugin-transform-runtime'],
+    },
+  },
 };

package.json

@@ -16,6 +16,7 @@
   "license": "MIT",
   "devDependencies": {
     "@babel/core": "^7.9.6",
+    "@babel/plugin-transform-runtime": "^7.9.6",
     "@babel/preset-env": "^7.5.5",
     "@babel/preset-react": "^7.0.0",
     "@testing-library/jest-dom": "^5.7.0",

src/__tests__/button.test.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import ButtonRound from '../components/ButtonRound';
+import ButtonBorder from '../components/ButtonBorder';
+import ButtonAdopted from '../components/ButtonAdopted';
+import { Provider } from 'unistore/react';
+import Store from '../state/Store';
+import { useAuth0 } from '../utils/auth0';
+
+/**
+ * Auth0 mock taken from here
+ * https://itnext.io/how-to-mock-auth0-spa-hooks-to-test-your-react-components-e45b6a38fddb
+ *
+ * Unistore setup taken from here
+ * https://github.com/preactjs/preact-cli/issues/524#issuecomment-372697712
+ *
+ *
+ */
+const dummyUser = {
+  email: 'foo@bah.com',
+  email_verified: true,
+  sub: 'auth0|12345678912345678901234',
+  name: 'foo',
+  nickname: 'foobah',
+  metadata: { name: 'foo' },
+};
+// intercept the useAuth0 function and mock it
+jest.mock('../utils/auth0');
+
+beforeEach(() => {
+  // Mock the Auth0 hook and make it return a logged in state
+  useAuth0.mockReturnValue({
+    isAuthenticated: true,
+    dummyUser,
+    logout: jest.fn(),
+    loginWithRedirect: jest.fn(),
+    getTokenSilently: jest.fn().mockImplementation(() => 'xxx'),
+  });
+});
+
+afterAll(() => {
+  jest.restoreAllMocks();
+});
+describe('button tests', () => {
+  test('round button should have a basic functionality', () => {
+    const onClick = jest.fn();
+    const { getByText } = render(
+      <ButtonRound toggle={onClick}>Round</ButtonRound>
+    );
+    const button = getByText(/round/i);
+    fireEvent.click(button);
+    expect(button).toHaveAttribute('role', 'button');
+    expect(button).toHaveAttribute('tabindex', '0');
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  test('border button should have a basic functionality (deprecated component)', () => {
+    // const onClick = jest.fn();
+    const { getByRole } = render(<ButtonBorder>Border</ButtonBorder>);
+
+    const button = getByRole(/button/i);
+    // fireEvent.click(button);
+    expect(button).toHaveAttribute('role', 'button');
+    expect(button).toHaveAttribute('tabindex', '0');
+    // expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  test('Adopted button should have a basic functionality', () => {
+    // const onClick = jest.fn();
+    const { getByRole, getByText } = render(
+      <Provider store={Store}>
+        <ButtonAdopted />
+      </Provider>
+    );
+
+    const button = getByRole(/button/i);
+    const label = getByText(/abonniert/i);
+    expect(button).toHaveAttribute('role', 'button');
+    expect(label).toBeTruthy();
+    expect(label).toHaveTextContent(/abonniert/i);
+    expect(button).toHaveAttribute('tabindex', '0');
+    // fireEvent.click(button);
+    // expect(label).toHaveTextContent(/entferne/i);
+    // expect(onClick).toHaveBeenCalledTimes(1);
+  });
+});

src/components/App.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled, { ThemeProvider } from 'styled-components';
+import { ThemeProvider } from 'styled-components';
 import { theme } from '../assets/theme';
 import { Router } from 'react-router-dom';
 import history from '../history';
@@ -38,35 +38,35 @@ if (cookie === 'true') {
 //   font-family: ${props => props.theme.fontFamily};
 // `;
 
-const TsbLinkDiv = styled.div`
-  position: absolute;
-  z-index: 1;
-  top: 30px;
-  left: 30px;
+// const TsbLinkDiv = styled.div`
+//   position: absolute;
+//   z-index: 1;
+//   top: 30px;
+//   left: 30px;
 
-  a {
-    display: flex;
-    flex-direction: column;
-    text-decoration: none;
-    color: black;
-    font-weight: bold;
-  }
-`;
+//   a {
+//     display: flex;
+//     flex-direction: column;
+//     text-decoration: none;
+//     color: black;
+//     font-weight: bold;
+//   }
+// `;
 
-const LogoImg = styled.img`
-  margin-top: 10px;
-  width: 160px;
-`;
+// const LogoImg = styled.img`
+//   margin-top: 10px;
+//   width: 160px;
+// `;
 
-const TSBLink = () => {
-  return (
-    <TsbLinkDiv className="link">
-      <a href="https://citylab-berlin.org">
-        <LogoImg src={logo}></LogoImg>
-      </a>
-    </TsbLinkDiv>
-  );
-};
+// const TSBLink = () => {
+//   return (
+//     <TsbLinkDiv className="link">
+//       <a href="https://citylab-berlin.org">
+//         <LogoImg src={logo}></LogoImg>
+//       </a>
+//     </TsbLinkDiv>
+//   );
+// };
 
 const AppContainer = p => {
   const { isLoading, data, overlay } = p;

src/components/ButtonAdopted/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 import CloseIcon from '@material-ui/icons/Close';
 
@@ -18,25 +18,25 @@ const StyledButtonAdopted = styled.div`
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  transition: .125s opacity ease-in-out;
+  transition: 0.125s opacity ease-in-out;
   margin-bottom: 10px;
   cursor: pointer;
 
   &:hover {
-    transition: .125s opacity ease-in-out;
+    transition: 0.125s opacity ease-in-out;
     background: ${p => p.theme.colorTextDark};
     color: white;
 
     svg {
-      transition: .125s opacity ease-in-out;
+      transition: 0.125s opacity ease-in-out;
       fill: white;
     }
   }
 
   svg {
-    width: .75em;
-    height: .75em;
-    transition: .125s opacity ease-in-out;
+    width: 0.75em;
+    height: 0.75em;
+    transition: 0.125s opacity ease-in-out;
   }
 `;
 
@@ -45,11 +45,16 @@ const Label = styled.span``;
 const ButtonAdopted = p => {
   const { getTokenSilently, isAuthenticated } = useAuth0();
   const { selectedTree, state, user } = p;
-  const [ unadopting, setUnadopting ] = useState(false);
+  const [unadopting, setUnadopting] = useState(false);
 
+  /**
+   * FIXME: What is the purpose of this function?
+   * What should it do
+   *
+   */
   const handleClick = () => {
     selectedTree ? unadoptTree(selectedTree.id) : '';
-  }
+  };
 
   const unadoptTree = async id => {
     try {
@@ -83,8 +88,7 @@ const ButtonAdopted = p => {
       });
       setUnadopting(false);
 
-      await isTreeAdopted(id, user.user_id)
-
+      await isTreeAdopted(id, user.user_id);
     } catch (error) {
       console.error(error);
     }
@@ -98,25 +102,34 @@ const ButtonAdopted = p => {
           state,
           `/private/get-is-tree-adopted?uuid=${uuid}&treeid=${treeid}`
         );
-        const r = await fetchAPI(url, { headers: { Authorization: 'Bearer ' + token } });
-        Store.setState({treeAdopted: r.data});
+        const r = await fetchAPI(url, {
+          headers: { Authorization: 'Bearer ' + token },
+        });
+        Store.setState({ treeAdopted: r.data });
       } catch (error) {
         console.log(error);
       }
     }
   };
 
   return (
-    <StyledButtonAdopted role={'button'} tabIndex={'0'} onClick={() => handleClick()}>
-      <Label>{unadopting ? 'Entferne': 'Abonniert'}</Label>
+    <StyledButtonAdopted
+      role={'button'}
+      tabIndex={'0'}
+      onClick={() => handleClick()}
+    >
+      <Label>{unadopting ? 'Entferne' : 'Abonniert'}</Label>
       <CloseIcon />
     </StyledButtonAdopted>
-  )
-}
-
-export default connect(state => ({
-  treeAdopted: state.treeAdopted,
-  selectedTree: state.selectedTree,
-  user: state.user,
-  state: state
-}), Actions)(ButtonAdopted);
+  );
+};
+
+export default connect(
+  state => ({
+    treeAdopted: state.treeAdopted,
+    selectedTree: state.selectedTree,
+    user: state.user,
+    state: state,
+  }),
+  Actions
+)(ButtonAdopted);