Features

.gitignore

@@ -24,6 +24,3 @@ yarn-error.log*
 
 .env
 /.vscode
-
-# test
-/src/tests/

src/components/Dashboard.js

@@ -26,6 +26,7 @@ const Dashboard = ({ events, id, name, getEvents, history, ...props }) => {
   useEffect(() => {
     if (events.length === 0) {
       // replace id with your userid with id# in getevents (console.log('id', id))
+      console.log('dashboard:id', id);
       getEvents(id);
     }
   }, []);

src/tests/About.test.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import { toBeInTheDocument } from '@testing-library/jest-dom';
+import { render, fireEvent } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import { store } from './store';
+
+import About from '../components/pages/About';
+
+expect.extend({ toBeInTheDocument });
+
+test('About page renders correctly', () => {
+  const history = createMemoryHistory();
+  const { queryByText } = render(
+    <Provider store={store}>
+      <Router history={history}>
+        <About />
+      </Router>
+    </Provider>
+  );
+
+  const heroText = queryByText('Know what your audience wants.');
+
+  const stepsHeader = queryByText('3 Easy Steps');
+  const step1Header = queryByText('Step 1:');
+  const step2Header = queryByText('Step 2:');
+  const step3Header = queryByText('Step 3:');
+
+  const step1aText = queryByText(
+    'Create a DJ account and make pages for your events.'
+  );
+  const step1bText = queryByText('Share the event pages with your clients.');
+
+  const step2aText = queryByText(
+    'Clients create song requests on the events pages.'
+  );
+  const step2bText = queryByText(
+    'Clients also upvote the requests they want to hear.'
+  );
+
+  const step3aText = queryByText('See which songs receive the most votes.');
+  const step3bText = queryByText(
+    'Get additional recommendations from the app, based on those song requests.'
+  );
+  const step3cText = queryByText('Create awesome playlists!');
+
+  expect(heroText).toBeInTheDocument();
+
+  expect(stepsHeader).toBeInTheDocument();
+  expect(step1Header).toBeInTheDocument();
+  expect(step2Header).toBeInTheDocument();
+  expect(step3Header).toBeInTheDocument();
+
+  expect(step1aText).toBeInTheDocument();
+  expect(step1bText).toBeInTheDocument();
+
+  expect(step2aText).toBeInTheDocument();
+  expect(step2bText).toBeInTheDocument();
+
+  expect(step3aText).toBeInTheDocument();
+  expect(step3bText).toBeInTheDocument();
+  expect(step3cText).toBeInTheDocument();
+});
+
+test('Link on About page CTA button takes user to registration page', () => {
+  const history = createMemoryHistory();
+  const { getByTestId } = render(
+    <Provider store={store}>
+      <Router history={history}>
+        <About />
+      </Router>
+    </Provider>
+  );
+
+  const toRegistration = getByTestId('toRegistration');
+  fireEvent.click(toRegistration);
+  const currentUrl = history.entries[1].pathname;
+  expect(currentUrl).toMatch('/register');
+});

src/tests/AddEvent.test.js

@@ -0,0 +1,147 @@
+// import React from 'react';
+// import { toBeInTheDocument } from '@testing-library/jest-dom';
+// import { render, fireEvent } from '@testing-library/react';
+// import { Provider } from 'react-redux';
+// // import { createMemoryHistory } from 'history';
+// import { Router } from 'react-router-dom';
+// import AddEvent from '../components/Events/AddEvent';
+// import { store } from './store';
+
+// expect.extend({ toBeInTheDocument });
+
+// test('Add Event page renders inputs for event data', async () => {
+//   const history = createMemoryHistory();
+//   const simulatedDom = render(
+//     <Router history={history}>
+//       <Provider store={store}>
+//         <AddEvent />
+//       </Provider>
+//     </Router>
+//   );
+
+//   const mainHeading = simulatedDom.queryByText(/Add an Event/i);
+//   const descriptionLabel = simulatedDom.queryByText(/description/i);
+//   const eventNameLabel = simulatedDom.queryByText(/event name/i);
+//   const eventTypeLabel = simulatedDom.queryByText(/type of event/i);
+//   const eventImgContainer = simulatedDom.getByTestId('event-img-container');
+
+//   const addressLine1Label = simulatedDom.queryByText(/Address Line 1/i);
+//   const addressLine2Label = simulatedDom.queryByText(/Address Line 2/i);
+//   const cityLabel = simulatedDom.queryByText(/city/i);
+//   const stateLabel = simulatedDom.queryByText(/state/i);
+//   const zipLabel = simulatedDom.queryByText(/zip/i);
+
+//   const dateLabel = simulatedDom.queryByText(/date/i);
+//   const startTimeLabel = simulatedDom.queryByText(/start time/i);
+//   const endTimeLabel = simulatedDom.queryByText(/end time/i);
+
+//   const showMoreButton = simulatedDom.getByTestId('showMoreLocationData');
+//   const venueNameLabel = simulatedDom.queryByText(/Venue Name/i);
+//   const venueWebsiteLabel = simulatedDom.queryByText(/Venue Website/i);
+//   const venueEmailLabel = simulatedDom.queryByText(/Venue Email/i);
+
+//   const submitButton = simulatedDom.getByTestId('submit-button');
+
+//   expect(mainHeading).toBeInTheDocument();
+//   expect(eventNameLabel).toBeInTheDocument();
+//   expect(eventTypeLabel).toBeInTheDocument();
+//   expect(descriptionLabel).toBeInTheDocument();
+//   expect(eventImgContainer).toBeInTheDocument();
+
+//   expect(addressLine1Label).toBeInTheDocument();
+//   expect(addressLine2Label).toBeInTheDocument();
+//   expect(cityLabel).toBeInTheDocument();
+//   expect(stateLabel).toBeInTheDocument();
+//   expect(zipLabel).toBeInTheDocument();
+
+//   expect(dateLabel).toBeInTheDocument();
+//   expect(startTimeLabel).toBeInTheDocument();
+//   expect(endTimeLabel).toBeInTheDocument();
+
+//   expect(venueNameLabel).not.toBeInTheDocument();
+//   expect(venueWebsiteLabel).not.toBeInTheDocument();
+//   expect(venueEmailLabel).not.toBeInTheDocument();
+//   expect(showMoreButton).toBeInTheDocument();
+
+//   expect(submitButton).toBeInTheDocument();
+// });
+
+// test('Clicking on show more button on AddEvent page displays additional fields', () => {
+//   const history = createMemoryHistory();
+//   const { queryByText, getByTestId } = render(
+//     <Provider store={store}>
+//       <Router history={history}>
+//         <AddEvent />
+//       </Router>
+//     </Provider>
+//   );
+
+//   const showMoreButton = getByTestId('showMoreLocationData');
+//   fireEvent.click(showMoreButton);
+
+//   const venueNameLabel = queryByText(/Venue Name/i);
+//   const venueWebsiteLabel = queryByText(/Venue Website/i);
+//   const venueEmailLabel = queryByText(/Venue Email/i);
+//   const locationImgContainer = getByTestId('location-img-container');
+
+//   expect(venueNameLabel).toBeInTheDocument();
+//   expect(venueWebsiteLabel).toBeInTheDocument();
+//   expect(venueEmailLabel).toBeInTheDocument();
+//   expect(locationImgContainer).toBeInTheDocument();
+// });
+
+// test("Clicking on pencil on AddEvent page's event image container toggles display of additional field to change url", () => {
+//   const history = createMemoryHistory();
+//   const { queryByText, getByTestId } = render(
+//     <Provider store={store}>
+//       <Router history={history}>
+//         <AddEvent />
+//       </Router>
+//     </Provider>
+//   );
+
+//   let eventImgLabel = queryByText(/Link to Event Image/i);
+//   expect(eventImgLabel).not.toBeInTheDocument();
+
+//   const eventPencil = getByTestId('event-pencil');
+//   expect(eventPencil).toBeInTheDocument();
+//   fireEvent.click(eventPencil);
+
+//   eventImgLabel = queryByText(/Link to Event Image/i);
+//   expect(eventImgLabel).toBeInTheDocument();
+
+//   fireEvent.click(eventPencil);
+//   eventImgLabel = queryByText(/Link to Event Image/i);
+//   expect(eventImgLabel).not.toBeInTheDocument();
+// });
+
+// test("Clicking on pencil on AddEvent page's location image container toggles display of additional field to change url", () => {
+//   const history = createMemoryHistory();
+//   const { queryByText, getByTestId } = render(
+//     <Provider store={store}>
+//       <Router history={history}>
+//         <AddEvent />
+//       </Router>
+//     </Provider>
+//   );
+
+//   let locationImgLabel = queryByText(/Link to Venue Image/i);
+//   expect(locationImgLabel).not.toBeInTheDocument();
+
+//   const showMoreButton = getByTestId('showMoreLocationData');
+//   fireEvent.click(showMoreButton);
+
+//   const locationPencil = getByTestId('location-pencil');
+//   expect(locationPencil).toBeInTheDocument();
+//   fireEvent.click(locationPencil);
+
+//   const locationImgContainer = getByTestId('location-img-container');
+//   expect(locationImgContainer).toBeInTheDocument();
+
+//   locationImgLabel = queryByText(/Link to Venue Image/i);
+//   expect(locationImgLabel).toBeInTheDocument();
+
+//   fireEvent.click(locationPencil);
+//   locationImgLabel = queryByText(/Link to Venue Image/i);
+//   expect(locationImgLabel).not.toBeInTheDocument();
+// });

src/tests/App.test.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+
+import { Provider } from 'react-redux';
+import { createMemoryHistory } from 'history';
+import { Router } from 'react-router-dom';
+import { store } from './store';
+
+import App from '../components/pages/Home';
+
+test('App component renders to Homepage', () => {
+  const history = createMemoryHistory();
+  const { container, queryByText, getByText } = render(
+    <Provider store={store}>
+      <Router history={history}>
+        <App />
+      </Router>
+    </Provider>
+  );
+
+  const currentUrl = history.entries[0].pathname;
+  expect(currentUrl).toMatch('/');
+});
+
+test('Login link sends user to the login page', () => {
+  const history = createMemoryHistory();
+  const { getByText } = render(
+    <Provider store={store}>
+      <Router history={history}>
+        <App />
+      </Router>
+    </Provider>
+  );
+
+  fireEvent.click(getByText(/log in/i));
+
+  const currentUrl = history.entries[1].pathname;
+  expect(currentUrl).toMatch('/login');
+});
+
+test('Register link sends user to the register page', () => {
+  const history = createMemoryHistory();
+  const { container, queryByText, getByText, getByTestId } = render(
+    <Provider store={store}>
+      <Router history={history}>
+        <App />
+      </Router>
+    </Provider>
+  );
+});