# wix-ui-test-utils

> > A common test utils used within the different `wix-ui` packages

Latest version **1.0.191** (published 2022-08-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install wix-ui-test-utils
pnpm add wix-ui-test-utils
yarn add wix-ui-test-utils
bun add wix-ui-test-utils
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.191 |
| Published | 2022-08-30 |
| First published | 2017-11-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 175.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Wix |
| Maintainers | yurynix, itai.benda, wix-ci, wix-ambassador, shahata, netanelgilad, wix-ci-publisher, wix-bi-publisher |

## Links

- npm: https://www.npmjs.com/package/wix-ui-test-utils
- Homepage: https://github.com/wix/wix-ui#readme
- Issues: https://github.com/wix/wix-ui/issues
- npm.io page: https://npm.io/package/wix-ui-test-utils

## Dependencies (5)

- [@unidriver/core](https://npm.io/package/@unidriver/core.md) ^1.3.0
- [@stylable/uni-driver](https://npm.io/package/@stylable/uni-driver.md) ^2.5.3
- [@unidriver/puppeteer](https://npm.io/package/@unidriver/puppeteer.md) ^2.2.7
- [@unidriver/protractor](https://npm.io/package/@unidriver/protractor.md) ^1.1.7
- [@unidriver/jsdom-react](https://npm.io/package/@unidriver/jsdom-react.md) ^1.7.0

## Recent versions

- 1.0.191 (latest) — 2022-08-30
- 1.0.150 (old) — 2019-04-02
- 1.0.190 — 2022-07-07
- 1.0.186 — 2022-01-04
- 1.0.185 — 2021-12-28
- 1.0.184 — 2021-12-23
- 1.0.183 — 2021-08-17
- 1.0.182 — 2021-07-26
- 1.0.181 — 2021-07-05
- 1.0.180 — 2021-04-22
- 1.0.179 — 2021-03-07
- 1.0.178 — 2020-11-29
- 1.0.177 — 2020-10-26
- 1.0.176 — 2020-10-23
- 1.0.175 — 2020-10-07
- … 174 more at https://npm.io/package/wix-ui-test-utils/versions

## README

# wix-ui-test-utils

> A common test utils used within the different `wix-ui` packages

## Generic test utils

The following helper functions can be used within the different `wix-ui` packages:

### `isClassExists`

Returns `true` if a certain class exists on an element.

```javascript
import {isClassExists} from 'wix-ui-test-utils/react-helpers';

const element = document.createElement('div');
element.classList.add('big');

isClassExists(element, 'big'); // true
isClassExists(element, 'small'); // false
```

### `sleep`

Returns a promise that resolves after a given timeout.

```javascript
import {sleep} from 'wix-ui-test-utils/react-helpers';

sleep(5000)
  .then(() => console.log('Hello world'));

async function foo() {
  await sleep(5000);
  console.log('Hello world');
}
```

### `makeControlled`

A HOC that makes underlying component "controlled". The "controlled" element will be
initiated with an initial value, invoke an `onChange` callback and will bind the passed
prop functions.

```javascript
import {mount} from 'enzyme';
import {makeControlled} from 'wix-ui-test-utils/react-helpers';

const UncontrolledInput = props => (
  <input {...props}/>
);

const ControlledInput = makeControlled(UncontrolledInput);
const component = mount(
  <ControlledInput
    value={initialValue}
  />
);

// ...
```

## Protractor helpers

### `getStoryUrl`

Returns the iframe URL of a storybook's story.

```javascript
import {getStoryUrl} from 'wix-ui-test-utils/protractor';

const storyUrl = getStoryUrl('Components', 'DatePicker'); // 'iframe.html?selectedKind=...'
browser.get(storyUrl);
```

### `scrollToElement`

Scroll the window to a given element location.

```javascript
import {scrollToElement} from 'wix-ui-test-utils/protractor';

// `el` is a DOM node
scrollToElement(el);
```

### `hasEllipsis`

Checks if the element's text has overflowed and displays ellipsis

```javascript
import {hasEllipsis} from 'wix-ui-test-utils/protractor';

// `el` is a DOM node
expect(hasEllipsis(el)).toEqual(true);
```

### `hasAttribute`

Checks if the element has attribute

```javascript
import {hasAttribute} from 'wix-ui-test-utils/protractor';

// `el` is a DOM node
expect(hasAttribute(el, 'id')).toEqual(true);
```

### `waitForVisibilityOf`

Wait until an element is visible.

```javascript
import {waitForVisibilityOf} from 'wix-ui-test-utils/protractor';

waitForVisibilityOf(
  element,
  errorMsg, // error message to throw when failed
  timeout // timeout (in ms), default is 10000
);
```

### `mouseEnter`

Move the mouse on the element.

```javascript
import {mouseEnter} from 'wix-ui-test-utils/protractor';

mouseEnter(element);
```

### `mouseLeave`

Move the mouse out of the element.

```javascript
import {mouseLeave} from 'wix-ui-test-utils/protractor';

mouseLeave(element);
```

## Testkit helpers

### `createDriverFactory`

Accepts a component driver. Returns a new driver factory. An explanation of drivers can be viewd
[here](./docs/COMPONENT_DRIVERS.md).

```javascript
import React from 'react';
import {createDriverFactory} from 'wix-ui-test-utils/driver-factory';
import {buttonDriverFactory} from './Button.driver';
import Button from './';

const createDriver = createDriverFactory(buttonDriverFactory);

describe('Button', () => {
  it('should exist', () => {
    const driver = createDriver(<Button />);
    expect(driver.exists()).toBe(true);
  });
});
```

### Vanilla (react-test-utils)

#### `testkitFactoryCreator`

Accepts a component driver. Returns a testkit factory.

```javascript
import {testkitFactoryCreator} from 'wix-ui-test-utils/vanilla';
import datePickerDriverFactory './driver';

const driverFactory = testkitFactoryCreator(datePickerDriverFactory);
const driver = driverFactory({
  // ...
});

driver.click();
driver.exists();
// ...
```

#### `isTestkitExists`

This function should be used inside the component tests in order to to perform a sanity check for the exposed testkit.
It accepts a React Element and a testkit factory. Returns `true` if the driver
works as expected.

```javascript
import {testkitFactoryCreator, isTestkitExists} from 'wix-ui-test-utils/vanilla';
import datePickerDriverFactory './driver';

const driverFactory = testkitFactoryCreator(datePickerDriverFactory);

isTestkitExists(
  <DatePicker />,
  driverFactory
); // true
```

### Enzyme

#### `enzymeTestkitFactoryCreator`

Accepts a component driver. Returns a testkit factory based on enzyme.

```javascript
import {enzymeTestkitFactoryCreator} from 'wix-ui-test-utils/enzyme';
import datePickerDriverFactory './driver';

const driverFactory = enzymeTestkitFactoryCreator(datePickerDriverFactory);
const driver = driverFactory({
  // ...
});

driver.click();
driver.exists();
// ...
```

#### `isEnzymeTestkitExists`

This function should be used inside the component tests in order to to perform a sanity check for the exposed testkit.
It accepts a React Element and a testkit factory. Returns `true` if the driver
works as expected.

```javascript
import {enzymeTestkitFactoryCreator, isEnzymeTestkitExists} from 'wix-ui-test-utils/enzyme';
import datePickerDriverFactory './driver';
import {mount} from 'enzyme';

const driverFactory = enzymeTestkitFactoryCreator(datePickerDriverFactory);

isEnzymeTestkitExists(
  <DatePicker />,
  driverFactory,
  mount
); // true
```

### Protractor

#### `protractorTestkitFactoryCreator`

Accepts a component driver. Returns a testkit factory for protractor.

```javascript
import {protractorTestkitFactoryCreator} from 'wix-ui-test-utils/protractor';
import datePickerDriverFactory './driver';

const driverFactory = protractorTestkitFactoryCreator(datePickerDriverFactory);
const driver = driverFactory({dataHook: 'date-picker'});

driver.click();
driver.exists();
// ...
```

---
_Source: https://npm.io/package/wix-ui-test-utils · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._