Merge pull request #13 from oslabs-beta/loader-styles-test

Added new test, fixed failing test, updated error loader styles

Author: ElDuke717

src/app/__tests__/ActionContainer.test.tsx

@@ -5,6 +5,7 @@ import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import ActionContainer from '../containers/ActionContainer';
 import { useStoreContext } from '../store';
+import TravelContainer from '../containers/TravelContainer';
 
 const state = {
   tabs: {
@@ -148,3 +149,17 @@ describe('unit testing for ActionContainer', () => {
     await expect(dispatch).toHaveBeenCalledTimes(1);
   });
 });
+
+describe('integration testing for ActionContainer', () => {
+  beforeEach(() => {
+    mockeduseStoreContext.mockClear();
+    dispatch.mockClear();
+    render(<ActionContainer actionView={true} />);
+    render(<TravelContainer snapshotsLength={0} />);
+  });
+
+  test('Slider resets on clear button', () => {
+    fireEvent.click(screen.getAllByRole('button')[0]);
+    expect(screen.getByRole('slider')).toHaveStyle('left: 0');
+  });
+});

src/app/__tests__/Loader.test.tsx

@@ -6,7 +6,7 @@ import Loader from '../components/Loader';
 describe('unit testing for Loader.tsx', () => {
   test('renders a loading icon', () => {
     const { container } = render(<Loader loading={true} result={false} />);
-    expect(container.firstChild).toHaveClass('css-xp4o0b');
+    expect(container.firstChild).toHaveClass('css-1tm071a');
   });
 
   test('renders a fail icon', () => {

src/app/components/Loader.tsx

@@ -17,7 +17,7 @@ const handleResult = (result: boolean): JSX.Element =>
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 const Loader = ({ loading, result }): JSX.Element =>
   loading ? (
-    <ClipLoader color='#123abc' size={30} loading={loading} style={{ display: "inline", margin: "0 auto" }}/>
+    <ClipLoader color='#123abc' size={30} loading={loading} />
   ) : (
     handleResult(result)
   );

src/app/styles/layout/_errorContainer.scss

@@ -40,6 +40,10 @@
 		justify-content: center;
 		align-items: center;
 	}
+	.loaderChecks span {
+		margin: 0 auto;
+		display: inline;
+	}
 	h2 {
 		padding-left: 2%;
 		padding-right: 2%;