सरू + कहानी की किताब। एक ही स्थान पर परीक्षण मामले, डेटा और घटक प्रतिपादन का भंडारण

पहले, सरू को एक e2e परीक्षण उपकरण के रूप में माना जाता था। एक ऐसे विषय में सामने के इंजीनियरों की बढ़ती रुचि का निरीक्षण करना दिलचस्प था जिसमें सेलेनियम ने अपने पूरे जीवन पर शासन किया था। उस समय, सरू की क्षमताओं का प्रदर्शन करने वाला एक विशिष्ट वीडियो या लेख डेटा प्रविष्टि के लिए एपीआई के बारे में एक यादृच्छिक रूप से चयनित साइट और अच्छी तरह से योग्य चापलूसी समीक्षाओं के आसपास भटकने तक सीमित था।

हम में से कई लोगों ने स्टोरीबुक / स्टाइलगाइडिस्ट / डॉक्ज़ जैसे वातावरण द्वारा प्रदान किए गए अलगाव में घटकों के परीक्षण के लिए सरू का उपयोग करने का अनुमान लगाया है। एक अच्छा उदाहरण है स्टेफानो मैगी का लेख " साइरस एंड स्टोरीबुक के साथ एक आभासी सूची घटक का परीक्षण" । यह एक स्टोरीबुक स्टोरी बनाने का प्रस्ताव करता है, इसमें एक घटक रखें और एक वैश्विक चर डेटा में डालें जो परीक्षण के लिए उपयोगी होगा। यह दृष्टिकोण अच्छा है, लेकिन इसमें टेस्ट स्टोरीबुक और सरू के बीच फटा हुआ है। यदि हमारे पास कई घटक हैं, तो ऐसे परीक्षणों को पढ़ना और बनाए रखना मुश्किल होगा।

इस लेख में मैं यह दिखाने की कोशिश करूंगा कि कैसे आगे जाने के लिए और सरू में जावास्क्रिप्ट निष्पादित करने की क्षमता से अधिकतम लेने के लिए। यह कैसे काम करता है यह देखने के लिए, कृपया पते पर स्रोत कोड डाउनलोड करें और npm i और npm रन टेस्ट कमांड चलाएं ।

tl; डॉ:

• आप एक किताब में एक लिंक को साइप्रेस द्वारा अपनी संपूर्णता में परीक्षण करने के लिए स्टोरीबुक स्टोरी से एक घटक में रख सकते हैं (परीक्षण तर्क को कई भागों में तोड़े बिना)।
• सरू हमारी टीम के लिए इतना शक्तिशाली लग रहा था कि हमने यूआई घटकों का परीक्षण करने के लिए हुड के नीचे जेएस-डोम का उपयोग करने वाले उपकरणों को पूरी तरह से त्याग दिया।

समस्या का निरूपण

, Datepicker . , .

Storybook

Storybook , — Story . , Story DOM-. — , Cypress .

import React from 'react';
import Datepicker from './Datepicker.jsx';

export default {
  component: Datepicker,
  title: 'Datepicker',
};

export const emptyStory = () => {
    // Reference to retrieve it in Cypress during the test
    window.Datepicker = Datepicker;

    // Just a mount point
    return (
        <div id="component-test-mount-point"></div>
    )
};

Storybook. Cypress.

Cypress

-. , :

/// <reference types="cypress" />

import React from 'react';
import ReactDOM from 'react-dom';

/**
 * <Datepicker />
 * * renders text field.
 * * renders desired placeholder text.
 * * renders chosen date.
 * * opens calendar after clicking on text field.
 */

context('<Datepicker />', () => {
    it('renders text field.', () => { });

    it('renders desired placeholder text.', () => { });

    it('renders chosen date.', () => { });

    it('opens calendar after clicking on text field.', () => { });
})

. . Storybook. Story, "Open canvas in new tab" sidebar. URL Cypress:

const rootToMountSelector = '#component-test-mount-point';

before(() => {
    cy.visit('http://localhost:12345/iframe.html?id=datepicker--empty-story');
    cy.get(rootToMountSelector);
});

, div id=component-test-mount-point. , . :

afterEach(() => {
    cy.document()
        .then((doc) => {
            ReactDOM.unmountComponentAtNode(doc.querySelector(rootToMountSelector));
        });
});

. , :

const selectors = {
    innerInput: '.react-datepicker__input-container input',
};

it('renders text field.', () => {
    cy.window().then((win) => {
        ReactDOM.render(
            <win.Datepicker />,
            win.document.querySelector(rootToMountSelector)
        );
    });

    cy
        .get(selectors.innerInput)
        .should('be.visible');
});

? props. . . — Cypress!

,

, props.

<Popup /> c props "showed". "showed" true, <Popup /> . "showed" c true false, <Popup /> .
?

, React - .

state. state boolean, "showed" props.

let setPopupTestWrapperState = null;
const PopupTestWrapper = ({ showed, win }) => {
    const [isShown, setState] = React.useState(showed);
    setPopupTestWrapperState = setState;
    return <win.Popup showed={isShown} />
}

, :

it('becomes hidden after being shown when showed=false passed.', () => {
    // arrange
    cy.window().then((win) => {
        // initial state - popup is visible
        ReactDOM.render(
            <PopupTestWrapper
                showed={true}
                win={win}
            />,
            win.document.querySelector(rootToMountSelector)
        );
    });

    // act
    cy.then(() => { setPopupTestWrapperState(false); })

    // assert
    cy
        .get(selectors.popupWindow)
        .should('not.be.visible');
});

: hook setState , class.

, , . , - -.

Cypress . ref . , ref state .

<Popup /> , ( ). :

it('closes via method call.', () => {
    // arrange
    let popup = React.createRef();
    cy.window().then((win) => {
        // initial state - popup is visible
        ReactDOM.render(
            <win.Popup
                showed={true}
                ref={popup}
            />,
            win.document.querySelector(rootToMountSelector)
        );
    });

    // act
    cy.then(() => { popup.current.hide(); })

    // assert
    cy
        .get(selectors.popupWindow)
        .should('not.be.visible');
})

:

Storybook:

• Storybook Stories React .
• .
• Story window ( Cypress).
• Story , ( ).
• .

: Storybook . Stories .

Cypress:

• JavaScript .
• Stories, .
• (, ).
• .
• UI .

, . , , .

js-dom . ?

• Js-dom , . DOM .
• js-dom . .
• -, CSS z-index? Cypress, .
• - . ?

?

— !
— .
"" - react-lifecycle — … . . , ? , ?

cypress-react-unit-test? Storybook?

— . Storybook, Cypress, ..

लेकिन अब इस उपकरण में कई समस्याएं हैं जो इसे चलाने के परीक्षणों के लिए एक पूर्ण पर्यावरण के रूप में उपयोग करने की अनुमति नहीं देते हैं।

मुझे उम्मीद है कि Gleb Bahmutov और Cypress की टीम इन कठिनाइयों से निपटेगी।

पुनश्च: मेरी राय और मेरे सहकर्मियों की राय इस बात से सहमत है कि प्रस्तावित दृष्टिकोण हमें जेएस-डोम का उपयोग करने वाले उपकरणों के एकाधिकार की समीक्षा करने की अनुमति देता है। तुम उसके बारे में क्या सोचते हो?