proofy

proofy

A set of tools for creating and conducting experiments.

npm i --save proofy

---

Demo project

• Open: https://rubaxa.github.io/proofy/
• and DevTools / Console

---

1. Describe xevents

import { xevent } from 'proofy';
 
export const appXEvents = xevent.group('App events', {
    // Некий набор DOM событий
    dom: xevent.group('DOM', {
        ready: xevent('Ready', {}), // "Ready" — описание события
        unload: xevent('Page unload', {}),
    }),
 
    // События авторизации
    auth: xevent.group('Авторизация', {
        try: xevent(
            ({step, type, method}) => `Попытка авторизации с шага "${step.name}" по "${type.name}" через "${method.name}"`,
            {
                step: xevent.enum('Шаг', {
                    'login': 'Ввод Логина',
                    'passwd': 'Ввод пароля',
                    'f-restore': 'Быстрый Вход',
                }),
                type: xevent.enum('Тип', {
                    'password': 'Пароль',
                    'qr': 'QR',
                    'webauthn': 'WebAuthn',
                }),
                method: xevent.enum('Метод отправки формы', {
                    'submit': 'Отправка Формы',
                    'redirect': 'JS Редирект',
                }),
            },
        ),
 
        // Клик по кнопке, ссылки и т.п.
        сlickBy: xevent(
            ({elem}) => `Клик по "${elem.name}"`,
            {
                elem: xevent.enum('Элемент', {
                    'signup': 'Регистрация',
                    'login': 'Вход'
                    'qrlink': 'QR',
                }),
            },
        ),
    }),
});
 
// Дальше, где-то в коде используем их.
document.addEventListener('DOMContentLoaded', () => {
    appXEvents.dom.ready(); // ['dom', 'ready']
});
 
// Или упрощенная запись
appXEvents.dom.ready.$bind(document, 'DOMContentLoaded');
appXEvents.dom.unload.$bind(window, 'unload');

---

Поисываем фичу

import { qrXEvents } from '@account/qr/xevents';
 
const qrauthFeature = createFeature({
    id: 'qrauth',
    name: 'Авторизация по QR',
    events: qrXEvents,
});

---

Соединяем с React или с чем угодно

export type AuthFormProps = {
    xevents?: typeof qrXEvents;
};
 
export function AuthForm(props: AuthFormProps) {
    const {
        xevents,
    } = props;
 
    // Где-то в коде трегирим событие
    xevents?.clickBy({elem: 'login'});
};
 
<AppForm
    xevents={qrauthFeature.events}
/>;

---

Конфигурируем фичу

setupExperiment(feature, {
    split: 'a1',
    enabled: true,
    released: false,
});

---

Подключаем Reporter (XRay)

xraySplitAutoConfiguration(xray);
addExperimentsObserver(createXRayReporter({
    send: xray.send,
    verbose: false,
}));

---

Development

• npm i
• npm test, code coverage