open-index/open-npm huggingface dataset:
npm package: @pepfar-react-lib/http-tools
Description: **Repo Owner:** Ben Guaraldi [@benguaraldi](https://github.com/benguaraldi)
Author: jakub-bao
Latest version: 0.1.31

# JavaScript Test-friendly Fetch
**Repo Owner:** Ben Guaraldi [@benguaraldi](https://github.com/benguaraldi)


This is a slim layer processing HTTP calls from your front-end to your server.
It comes with:
1. Response caching to make tests ultra-fast
2. Response mocking so you don't have to change server data with each tests. Makes tests so much faster and parallel friendly.
3. Easy switching of users and authentication.

## Installation
```bash
npm i @pepfar-react-lib/http-tools
```

## Usage

### Register server base URL
Before doing any HTTP calls you have to register your server base URL and also provide information in which environment you are (`test`,`development`,`production`). You can simply copy the line below:
```javascript
import {apiInit} from "@pepfar-react-lib/http-tools";

apiInit('http://www.google.com/',process.env.NODE_ENV);
```

### Using GET to retrieve data

Simple GET using a promise:
```javascript
import {getData} from "@pepfar-react-lib/http-tools";

function getUsers():Promise<User[]> {
    return getData('/users').then(users=>{
            //do something
            return users;
        });
}
```

Simple get using `await`:
```javascript
import {getData} from "@pepfar-react-lib/http-tools";

async function getUsers():Promise<User[]>{
    let users = await getData('/users');
    // do something
    return users;
}
```

### Mocking server response during tests
Now imagine you are writing a test and no matter what's in the database you want the result of GET from `/users` to return two exact objects. It's as simple as:
```javascript
import {registerGetMock} from "@pepfar-react-lib/http-tools";

const mockedResponse = [{name: 'John', name: 'Bob'}];

test('Should receive two users', async ()=> {
    registerGetMock('/users', mockedResponse);
    // now you can test your app and when your front-end code queries `/users` it will receive the `mockedResponse` from above
    screen.getByText('John');
    screen.getByText('Bob');
});
```
npm package: @pepfar-react-lib/jest-tools
Description: Utilities for simplified JEST/REACT testing
Author: jakub-bao
Latest version: 0.1.20

# REACT Test Utils
**Repo Owner:** Ben Guaraldi [@benguaraldi](https://github.com/benguaraldi)

This super-light library will help you write your REACT tests much more effectively.

It is designed for developers using `REACT`, `Jest` & `Material-UI`

## Why this library?
Jest is awesome!  
But it can be a bit elaborate to do basic tasks.  
This library focuses on `REACT` + `Jest` used case and is inspired by super handy `Cypress` commands.

`@pepfar-react-lib/jest-tools` should help you write your tests much faster and make them much more readable. Disagree? Submit an issue in our repo!

### Example:

Instead of: 
```javascript
// picks an option from select menu
fireEvent.mouseDown(screen.getByTestId(selectId).childNodes[0]);
screen.getByText(value);
fireEvent.click(screen.getByText(value));
checkSelectValue(selectId, value);
```

you can just write:
```javascript
// does the same as example above
select(selectId, value);
```

## Installation
```bash
npm i @pepfar-react-lib/jest-tools
```

## Usage
```javascript
import {select} from "@pepfar-react-lib/jest-tools";
// your code
select(selectId,value);
```

## API
Full list of all methods in [API docs](./docs/modules.md)
npm package: @pepfar-react-lib/network-check
Description: A react component for DHIS2 custom apps which monitors network connection to DHIS2 server
Author: jakub-bao
Latest version: 0.5.6

# DHIS2 Network Check
**Repo Owner:** Ben Guaraldi [@benguaraldi](https://github.com/benguaraldi)

Minimalistic REACT component to warn user they're offline or their session expired.

![you're offline](.github/images/youre-offline.png)
![your session expired](.github/images/expired.png)

It's based on `notistack` https://www.npmjs.com/package/notistack  
Which uses amazing `REACT Material UI Snackbar` https://material-ui.com/components/snackbars/

## Installation

```
npm i @pepfar-react-lib/network-check
npm i notistack
```

## Usage
```
import {SnackbarProvider} from 'notistack';
import {NetworkCheck} from '@pepfar-react-lib/network-check';

<SnackbarProvider>
    <NetworkCheck intervalMs={5000} baseUrl='https://play.dhis2.org/'/>
</SnackbarProvider>
```

### Notes
`<NetworkCheck/>` component can be only used inside `<SnackbarProvider>` context.  

**Why?** `<SnackbarProvider>` manages output of info/alert messages. `<NetworkCheck/>` will share one instance of `<SnackbarProvider>` in your app with other services. Rather than overlapping over another existing instance.

## Development

```
git clone https://github.com/dhis2-app/network-check.git && cd network-check 
npm install
npm start
```

Don't forget to run tests
```
npm test
```

And build with:
```
npm build
```
npm package: @pepfar-react-lib/test-console
Description: **Repo Owner:** Ben Guaraldi [@benguaraldi](https://github.com/benguaraldi)
Author: jakub-bao
Latest version: 0.1.14

# DHIS2 Dev Tools
**Repo Owner:** Ben Guaraldi [@benguaraldi](https://github.com/benguaraldi)

**What does this library solve?**
1. Did you ever ask QA to test your app but they were testing an old version on another server?
2. Does your QA team find themselves replicating the same scenario in your app over and over?

**Solution for #1**  
If you add `<DevTools>` to your app then your tester can just press `~` on keyboard to open developers only console. There they can double-check build name & date of your app.

**Solution for #2**  
You can automate any task in JavaScript as a function and then inject the function into `<DevTools>`. Your tester can then click a button in `<DevTools>` and save himself a lot of clicking.  
We're using this for pre-filling elaborate search dialogs for each test scenario.

![Example use](docs/example.png)

## Usage

You can inject any method. Anything you need to automate in your app. Just wrap it into a method and inject
into `Dev Tools`.

In the below example we want to automate searches by calling `this.search` method with different parameters.

```javascript
import {DevTools, registerDevMethod} from "@pepfar-react-lib/test-console";

export default class SearchForm extends React.Component {
    constructor(props) {
        const searches = [
            {name: '1. Rwanda', method: () => this.search('Rwanda', '2020Q4')},
            {name: '2. Nigeria', method: () => this.search('Nigeria', '2020Q4')},
        ];
        searches.forEach(registerDevMethod);
    }

    search(ou: string, period: string) {
        // your code
    }

    render() {
        return <React.Fragment>
            <MyAwesomeSearchForm onSearch={this.search}/>
            <DevTools buildName={'Dedupe search added'} buildDate={new Date()}/>
        </React.Fragment>
    }
}
```