Git Product home page Git Product logo

askdarcel-web's Introduction

ShelterTech Web App Travis CI Status

Sauce Test Status

Docker-based Development Set-up Instructions (Recommended)

Requirements

Docker Community Edition (CE) >= 17.06 Docker Compose >= 1.18

Follow the Docker installation instructions for your OS.

Set up the project

This is not a full guide to Docker and Docker Compose, so please consult other guides to learn more about those tools.

The docker-compose.yml is configured to mount the git repo on your host filesystem into the Docker container so that any changes you make on your host machine will be synced into the container and vice versa.

# Install node dependencies
$ docker-compose run --rm web npm install

# Build static assets bundle
$ docker-compose run --rm web npm run build

# Run dev server
$ docker-compose up

You should be able to view the web app in your browser at http://localhost:8080.

By default, this assumes that you have also set up askdarcel-api project using the Docker setup instructions and that the API server is running. If you want to target a different instance of askdarcel-api, you can modify the API_URL environment variable in docker-compose.yml.

Non-Docker Set-up Instructions

Installing Node.js and npm

We recommend using nvm (Node Version Manager) or Docker to ensure that the versions of Node.js and npm are the same across development, Travis CI, staging, and production environments.

After installing nvm, to install both Node.js and npm run from the top of the git repo:

$ nvm install  # Reads from .nvmrc
$ npm install -g [email protected]  # Make sure this matches .travis.yml

Installing npm dependencies

To install the dependencies, from the top directory run

npm install

To build the bundled script with webpack run

npm run build

And to run the dev server, run

npm run dev

End to end testing

Quick summary of what TestCafe is and how it works

It's a framework for running end-to-end tests (read: real browser tests) that injects your tests onto an existing web page. Architecturally, they spin up a lightweight proxy server that wraps your web page, and when you connect a browser to the proxy server, it serves the requested page with the test driver injected into it.

It's essentially an alternative to writing Selenium tests, and I've found it nice to use because it mimics many of the common HTML5 DOM APIs and because they've added a lot of reasonable default behavior that Selenium lacks, such as properly waiting for events to finish running and for elements to appear before running your assertions.

How to run

If you are not using Docker and all the services are bound to localhost, then you should just be able to run:

$ npm run testcafe -- --skip-js-errors chrome testcafe/*.js

Note: Make sure you have the dev server running (npm run dev) before you try running the above

If you are using Docker, then you'll need to run it somewhat like this:

$ docker-compose run --rm -p 1337:1337 -e BASE_URL=http://web:8080 web npm run testcafe -- --skip-js-errors remote --skip-js-errors --hostname localhost --ports 1337,1338 ./testcafe/

This will spin up a web server at http://localhost:1337/ and print out a URL to use. You should manually enter it into your browser to start the tests.

askdarcel-web's People

Contributors

twolfe2 avatar lgarofalo avatar richardxia avatar lexholden avatar achadha avatar derekfidler avatar alexanderturinske avatar jfhamlin avatar jjfreund avatar trucnguyen avatar zandersparrow avatar zjipsen avatar akatrent avatar

Watchers

Tabitha avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.