fix: testing fix

Author: Zhou

src/components/navigationBar/navigationBar.js

@@ -50,7 +50,7 @@ function NavigationBar() {
     }
 
     return(
-    <AppBar position="static" backgroundColor="#224878" elevation={0} className={classes.appBar}>
+    <AppBar position="static" elevation={0} className={classes.appBar}>
     <Toolbar className={classes.toolbar}>
       <Typography variant="h6" color="inherit" align="left" noWrap className={classes.toolbarTitle}>
         Planimation

src/pages/PageOne/dragAndDrop.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import styles from "./styles.less";
+// import styles from "./styles.less";
 
 class DragAndDrop extends React.Component {
   componentDidMount() {
@@ -26,7 +26,7 @@ class DragAndDrop extends React.Component {
 
   render() {
     return (
-      <div ref={(elem) => (this.nv = elem)} className={styles.drop_area}>
+      <div ref={(elem) => (this.nv = elem)}>
         {this.props.name}
       </div>
     );

src/pages/PageOne/dropAndFetch.jsx

@@ -5,26 +5,31 @@ import Container from "@material-ui/core/Container";
 import CloudUploadIcon from "@material-ui/icons/CloudUpload";
 import css from "./index.module.less";
 
+const dragsAndDrops=[
+  { name: "Domain", fileType: ".pddl", desc: "or predictes and actions." },
+  {
+    name: "Problem",
+    fileType: ".pddl",
+    desc: "for objects, initial state and goal.",
+  },
+  {
+    name: "Animation",
+    fileType: ".pddl",
+    desc: "object is representation.",
+  },
+];
 class DropAndFetch extends React.Component {
   constructor(props) {
     super(props);
     this.datas = {};
   }
 
-  state = {
-    dragsAndDrops: [
-      { name: "Domain", fileType: ".pddl", desc: "or predictes and actions." },
-      {
-        name: "Problem",
-        fileType: ".pddl",
-        desc: "for objects, initial state and goal.",
-      },
-      {
-        name: "Animation",
-        fileType: ".pddl",
-        desc: "object is representation.",
-      },
-    ],
+ 
+
+  componentWillUnmount = () => {
+    this.setState = (state, callback) => {
+      return;
+    };
   };
 
   uploadPDDL = (files) => {
@@ -49,14 +54,14 @@ class DropAndFetch extends React.Component {
     return resp;
   };
 
-  handleSubmit = () => {
+  handleSubmit = async () => {
     //Control check for files
     if (
       "domain" in this.datas &&
       "problem" in this.datas &&
       "animation" in this.datas
     ) {
-      let resp = this.uploadPDDL(this.datas);
+      let resp = await this.uploadPDDL(this.datas);
       console.log(resp);
     } else {
       console.log("Some files are missing");
@@ -73,7 +78,7 @@ class DropAndFetch extends React.Component {
       <React.Fragment>
         <div>
           <Container component="main" className={css.dropareaBox}>
-            {this.state.dragsAndDrops.map((drag) => (
+            {dragsAndDrops.map((drag) => (
               <DropZone
                 key={drag.name}
                 name={drag.name}
@@ -83,11 +88,11 @@ class DropAndFetch extends React.Component {
               />
             ))}
           </Container>
-          <Container maxWidth="sm" component="main" marginTop="50">
+          <Container maxWidth="sm" component="main">
             <div className={css.buttonBox}>
               <Button
                 variant="contained"
-                color="#224878"
+                color="default"
                 onClick={() => this.props.onClick()}
               >
                 Cancel

src/pages/PageOne/index.module.less

@@ -1,36 +1,23 @@
-.buttonBox {
+.dropzoneBox {
   /* 
   background: #fff;
   */
-  display: flex;
+  display: inline-block;
   justify-content: space-around;
+  width: 30%;
   padding: 20px;
 }
 
-.textBox {
-  /* 
-  background: #fff;
-  */
-  display: flex;
-  justify-content: space-around;
+.buttonBox {
   padding: 20px;
-}
-
-.dropzoneBox {
-  /* 
-  background: #fff;
-  */
-  display: inline-block;
+  display: flex;
   justify-content: space-around;
-  width: 30%;
-  padding: 20px;
 }
 
 .dropareaBox {
   /* 
-  background: #fff;
-  */
+background: #fff;
+*/
   display: flex;
   justify-content: space-around;
-  width: 80%;
-}
+}

src/pages/PageTwo/index.js

@@ -167,9 +167,9 @@ class PageTwo extends React.Component {
 
                 </Container>
 
-                <Container maxWidth="sm" component="main"  marginTop="50">
+                <Container maxWidth="sm" component="main">
                 <div className={css.buttonBox}>
-                <Button variant="contained" color="#224878" onClick={this.handleOnClick} text-align="left">Cancel</Button>
+                <Button variant="contained" color="default" onClick={this.handleOnClick} text-align="left">Cancel</Button>
                 <Button  variant="contained" color="primary"  startIcon={<CloudUploadIcon />} onClick={()=>{
                     // eslint-disable-next-line no-restricted-globals
                     location.href = '/page4';

src/tests/App.test.js

@@ -7,6 +7,6 @@ test('renders learn react link', () => {
     <Router>
       <App />
     </Router>);
-  const linkElement = screen.getByText(/this is app/i);
-//   expect(linkElement).toBeInTheDocument();
+  const linkElement = screen.getByText(/Quickly build an visualisation animation form problem or VFG file shows the plan and subplan for each problem./i);
+  expect(linkElement).toBeInTheDocument();
 });