This project is a web-based user interface for Reading for Gender Bias. This project is currently under active development by members of GLAM Lab at Whitman College.
- Vue Framework for client-based web applications.
- Puppeteer, mocha, chai and miragejs for automated end-to-end testing.
- Yarn for package management.
git clone https://github.com/gender-bias/gender-bias
cd gender-bias
pip3 install -e .
NOTE: The last line in the above snippet installs this library in "editable" mode, which is probably fine while the library is in a state of flux.
To set up the project, make sure yarn
is installed and then use it to install the packages for this project:
yarn install
Make sure you have NodeJS
is installed on your computer. npm
comes with NodeJS, so you don't have to install npm
on its own.
You can also install yarn
. Finally, make sure you have pip3
on your computer, and you have Python 3.
- Clone the backend repoistory through an IDE or from Github.
- Using windows terminal,
cd gender-bias
pip3 install -e .
Once installed, run the front-end server as follows:
yarn serve
OR a
npm run server
The server runs at http://localhost:8080
by default.
Before running tests, start the back-end server with genderbias-server
, or start a fake server with yarn test-serve
.
To run the entire test suite, run yarn test
.
To run a single test, run yarn test --grep 'test name'
, specifying the name of the test you wish to run.
You can find the tests in the test
directory. The Component.spec.js
files depend on bootstrap.js
.
The tests are divided into files by Vue component.
They employ the Mocha test framework and the Puppeteer and Chai libraries. Puppeteer allows one to simulate user events in the browser and Chai is an assertion library.
When you create a .spec.js
test file, it will be called by bootstrap.js
when you run the tests.
In the test files, describe
blocks demarcate the tests by state, such as the page after the opening of the page, the clicking of a button, the typing of text into the textarea,
or hovering over a style class. These state-changing events are handled with before
and after
blocks.
The tests run asynchronously, which is indicated by the async
and await
keywords. This is because we don't know how long each test will take to complete, so it is more efficient for them to run concurrently. The await
keyword tells the line to run only after the previous asynchronous work within the function has finished running, and can only be used in functions that are prefaced with async
.
The convention is to define variables for style-class-selectors necessary for testing in bootstrap.js
; again, these are organized by component.
Run
yarn lint
- Mollie Marr @molliem conceived the project and guided its developement.
- Jordan Matlesky @j6k4m8 started the project and mentored the GLAM team.
- Janet Davis @ProfJanetDavis (Mentor for the GLAMLab Developers, summer 2020)
- Ahmed Elsayed @elsayeaa (Main Developer, summer 2020)
- Dylan Wu @dylanjwu (Main Developer, summer 2020)
- Kalilou Ali Kadiri @kaliloua7 (Main Developer, summer 2020)
- Nidhi Jaltare @nidhi2509 (Main Developer, summer 2020)
- Zoë Hill @Life1999 (Main Developer, summer 2020)