AeroGear Sync UI (DEPRECATED)

The UI for the AeroGear Data Sync Server. Based on React and PatternFly.

Project moved to apollo-voyager-server repository

	Project Info
License:	Apache License, Version 2.0
Build:	Docker
End User Documentation:	https://docs.aerogear.org
Community Documentation:	https://aerogear.org
Issue tracker:	https://issues.jboss.org/browse/AEROGEAR
Mailing lists:	aerogear-dev

Prerequisites

A running PostgreSQL server. To run postgres in a docker container use the following command

docker-compose up

Database credentials can be found in docker-compose.yml

Running

1. Install the dependencies

   npm install

2. Build the UI and watch for changes.

   npm run server

3. Builds the UI in production mode. Use this before pushing a new docker image.

   npm run build

Docker

1. Build the image

   docker build -t aerogear/sync-ui:latest .

2. Run the image

   docker run --rm --name sync-ui -p 8000:8000 -d aerogear/sync-ui:latest

3. Stop the container

   docker stop sync-ui

Configuration

UI server has some environment variables to be set. If they're not set, defaults for development will be used.

• AUDIT_LOGGING: : If true, audit logs of resolver operations will be logged to stdout. Defaults to true.

Tests

The UI makes use of Jest as assertion library and Enzyme as DOM rendering and manipulation utility.

Running the test suite

To execute the whole test suite:

1. Make sure the app is stopped, otherwise server tests will fail.
2. Install development dependencies:

   npm install --development

3. Run:

   npm run test

To execute a single test file:

1. Install Jest or run it from the project dependencies:

   node_modules/.bin/jest path/to/test.js

You can also run a single test using it.only().

Adding new tests

Writing tests cases with Enzyme, Apollo and React might be tricky. Before adding any new ones, keep in mind:

• Test files must end with .test.js for Jest to find them.
• Components using GraphQL queries must be fully rendered and inside a MockedProvided component:

   <MockedProvider mocks={[]} addTypename={false}>
       <DataSourcesList />
   </MockedProvider>

  Read more about testing with Apollo and React ah the Apollo testing guide.
• When asserting using query result, you must define mocks for all involved ones. They have to be mocked in the exact way they are called and they are only valid for 1 call. Moreover, this process is async and the component first render won't have any results yet (potentially ending up with a false negative). To workaround this, use the utility function sleep() and wrapper.update() in order for the queries to finish. This Github issues answer describes briefly and concisely how to do it.
• GraphQL-independent components may be better rendered with shallow() and render(), read more about them at Enzyme docs.
• Enzyme wrappers are snapshots of the DOM. Whenever you expect something to change, don't forget calling wrapper.update().
• Use it.skip() instead of commenting out blocks or adding TODOs.

If using VSCode, give Jest VSCode Extension a try.