Project Name: Mock
Team Members and Contributions: Alyssa Sun (asun59), Faizah Naqvi (ffnaqvi) (20 hrs) Alyssa worked on the strategy pattern, mocked data, testing, README, and overall structure of the program. Faizah worked on the front end table interaction, overall structure of the program, commenting, and testing.
Link to Repo: repo
IMPORTANT NOTE: USERNAME AND PASSWORD TO SIGN IN IS: "Alyssa", "A" OR "Faizah", "F"
- Relationships between Classes/Interfaces:
- styles: is the folder that holds all the css files that manages the front end styling. Much of this was taken from the gear up!
- components: is the folder that holds all the front end type script and react files that
handles front end logic.
- data: This folder has the mockData.js which is a file that contains mock data. This mock data is retrieved from the front end since we don't have an actual server to return calculated data. Thus, we just have a json that contains samples of realistic data that could be returned from a CSV server that is directly being used in our front end.
- commands: This folder contains everything that is needed to execute user commands.
- callCommands contains a dictionary that maps key commands strings to a replFunction interface. This allows us to satisfy a developer need to easily add commands without needing to modify our code greatly.
- commandFunction.tsx handles holding all the REPLFunciton functions. We utilize strategy pattern through having REPLFunciton be in interface where other functions can implement this. Thus, our dictionary just maps commands to an interface so developers can add and remove commands as they please since everything is wrapped around an interface. In this folder, we implemented search, mode, view, load functions that is necessary for our mock uses.
- REPL: This folder contains all the files that deal with the users constant command input.
- REPL.tsx is the higher level file that simply manages the structure. There is a history const and mode const. This is help here so that other files have access to these values and can update them accordingly. We added mode here from the gear up so we can have a shared state that properly updates mode and the command's mode output.
- REPLHisory.tsx primarily manages with updating the history of user input and output. Much of the code was adopted from the gear up. We added an aditional funcitonality that as the history output search and view results in a form of a table for higher readability. Finally, - REPLInput.tsx simply handles taking in an input and entering it into our REPLFunction and retreiving an output.
- Other files: the other files were just basic set ups. We added a password to our login to protect user access to files.
No known bugs
We focused on front end e2e playwright tests. (We did not create any unit testing since we did not implement back end components and methods!). We split out tests into various files to help with readability and organization. The App tests focuses on the login page, Load tests taht calling load functions correctly and returns expected output including error messages, simarily for mod, search, and view. them we also had an intergration file that heavily focuses on
the interaction of calling various thing, entering various things, clicking various things etc. We ensured we can make various commands and the output would be correct, we ensured logging in, calling commands, and logging out functions, and we ensured the overall interaction between various command calls and actions function well together.
Run Tests: cd into mock where the test folder exists. Call npx playwright test in your terminal to execute the front end playwright tests.
Build and Run Program: cd into mock where teh application lives. Call npm start in your terminal to run our applcation. Then click on the local host link!
Enter valid commands: There are four valid commands: mode, search, load_csv, and view. view can only be used after load_csv is successfully called and has no arguments. load_csv needs to have the name of a valid file. search can only be called after load_csv is successfully called and requires a column indentifier (which can be a string or an int) and a search value. mode has no arguments.
Example inputs:
- mode
- load_csv header
- view
- search 2 Indian
No collaboration