Merge pull request #104 from oslabs-beta/AS/CbReactTesting

As/cb react testing

Author: samos17

__tests__/React Unit Testing/testClipboard.tsx

@@ -0,0 +1,47 @@
+import React from 'React';
+import { Provider } from 'react-redux';
+import { render, screen } from '@testing-library/react';
+import configureStore from 'redux-mock-store';
+import '@testing-library/jest-dom';
+import { Clipboard } from '../../client/components/Clipboard';
+import { BrowserRouter } from 'react-router-dom';
+
+const initialState = {
+  clipboard:{
+    server: '',
+  },
+  userInfo: {
+    projectsInfo: [],
+  }
+};
+
+const mockStore = configureStore();
+
+const board = () => {
+  render(
+    <Provider store={mockStore(initialState)}>
+      <BrowserRouter>
+        <Clipboard />
+      </BrowserRouter>
+    </Provider>  
+  );
+};
+
+describe('Unit testing Clipboard component', () => {
+  beforeEach(() => {
+    board();
+  });
+
+  test(`Renders a Clipboard with the classname of ${'code-container'}`, () => {
+    expect(screen.getByTestId('code-container')).toBeInTheDocument();
+  });
+  test(`Renders the delete button with the classname of ${'delete'}` , () => {
+    expect(screen.getByRole('button', { name:'Clear Clipboard' })).toBeInTheDocument();
+  });
+  test(`Renders the copy button with a class name of ${'clipboard-button-container'}`, () => {
+    expect(screen.getByTestId('bttn-copy')).toBeInTheDocument();
+  });
+  test(`Renders the server url textbox with a label of ${'Server URL'}`, () => {
+    expect(screen.getByRole('textbox', { name:'Server URL' })).toBeInTheDocument();
+  });
+});

client/components/Clipboard.tsx

@@ -71,13 +71,15 @@ export const Clipboard = () => {
   return (
     <div className="page-body">
       <Box
-        sx={{
+        sx={{ 
           display: 'flex',
           flexDirection: 'column',
           alignItems: 'center',
           gap: '30px',
           width: .8,
         }}
+        className='code-container'
+        data-testid='code-container'
       >
         <Typography variant="h3" align="center" gutterBottom sx={{ color: '#6E00BB', mb: 0, mt: 5 }}>{projectName}</Typography>
         <TextField
@@ -112,6 +114,7 @@ export const Clipboard = () => {
         <Button
           onClick={handleClear}
           sx={{ flexDirection: 'column' }}
+          className='delete'
         >
           <DeleteForeverIcon /> 
           {buttonText}

dist/dist/bundle.js

@@ -1,5 +1,7 @@
 /*! js-cookie v3.0.1 | MIT */
 
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
+
 /**
  * @license React
  * react-dom.production.min.js

dist/dist/bundle.js.LICENSE.txt

@@ -91,7 +91,6 @@
     "file-loader": "^6.2.0",
     "highlight.js": "^11.6.0",
     "js-cookie": "^3.0.1",
-    "node-fetch": "2.6.7",
     "passport": "^0.5.0",
     "passport-github2": "^0.1.12",
     "pg": "^8.8.0",