এনজাইম - কীভাবে অ্যাক্সেস করবেন এবং <ইনপুট> মান সেট করবেন?

Question 1

<input>ব্যবহার করার সময় কীভাবে মান অ্যাক্সেস করবেন সে সম্পর্কে আমি বিভ্রান্ত mount। আমার পরীক্ষা হিসাবে আমি যা পেয়েছি তা এখানে:

  it('cancels changes when user presses esc', done => {
    const wrapper = mount(<EditableText defaultValue="Hello" />);
    const input = wrapper.find('input');

    console.log(input.render().attr('value'));
    input.simulate('focus');
    done();
  });

কনসোলটি প্রিন্ট করে undefined। তবে আমি কোডটি কিছুটা সংশোধন করলে, এটি কাজ করে:

  it('cancels changes when user presses esc', done => {
    const wrapper = render(<EditableText defaultValue="Hello" />);
    const input = wrapper.find('input');

    console.log(input.val());
    input.simulate('focus');
    done();
  });

অবশ্যই, input.simulateলাইনটি ব্যর্থ হওয়ায় আমি renderএখন ব্যবহার করছি । সঠিকভাবে কাজ করার জন্য আমার দু'জনেরই দরকার। আমি কিভাবে এটা ঠিক করব?

সম্পাদনা :

আমার উল্লেখ করা উচিত, <EditableText />এটি একটি নিয়ন্ত্রিত উপাদান নয়। কিন্তু আমি যখন পাস defaultValueমধ্যে <input />, এটা মান সেট বলে মনে হয়। উপরের দ্বিতীয় কোড ব্লকটি মানটি মুদ্রণ করে না এবং একইভাবে যদি আমি ক্রোমে ইনপুট উপাদানটি পরীক্ষা $0.valueকরে কনসোলে টাইপ করি তবে এটি প্রত্যাশিত মানটি দেখায়।

Question 2

আমার মনে হয় আপনি যা চান তা হ'ল:

input.simulate('change', { target: { value: 'Hello' } })

এখানে আমার উত্স ।

render()মান নির্ধারণ করতে আপনার কোথাও ব্যবহার করার দরকার নেই । এবং কেবল এফআইআই, আপনি দুটি পৃথক ব্যবহার করছেন render()। আপনার প্রথম কোড ব্লকের মধ্যে একটি এনজাইম থেকে এসেছে এবং এটি মোড়কের বস্তুর একটি পদ্ধতি mountএবং findআপনাকে দেয় give দ্বিতীয়টি, যদিও এটি 100% স্পষ্ট নয়, সম্ভবত এটিই react-dom। আপনি এনজাইম ব্যবহার করেন, তাহলে মাত্র ব্যবহার shallowবা mountযথাযথ হিসাবে এবং জন্য দরকার নেই renderথেকে react-dom।

Question 3

সঙ্গে এনজাইম 3 , যদি আপনি একটি ইনপুট মান পরিবর্তন করতে হবে কিন্তু কি আগুন করার দরকার নেই onChangeফাংশন আপনি শুধু এটা করতে পারেন ( nodeসম্পত্তি সরানো হয়েছে ):

wrapper.find('input').instance().value = "foo";

আপনি ব্যবহার করতে পারেন wrapper.find('input').simulate("change", { target: { value: "foo" }})ডাকা onChangeযদি (অর্থাত, নিয়ন্ত্রিত উপাদান জন্য) যে জন্য একটি ঠেকনা আছে।

Question 4

বুঝেছি. (আপডেট / উন্নত সংস্করণ)

  it('cancels changes when user presses esc', done => {
    const wrapper = mount(<EditableText defaultValue="Hello" />);
    const input = wrapper.find('input');

    input.simulate('focus');
    input.simulate('change', { target: { value: 'Changed' } });
    input.simulate('keyDown', {
      which: 27,
      target: {
        blur() {
          // Needed since <EditableText /> calls target.blur()
          input.simulate('blur');
        },
      },
    });
    expect(input.get(0).value).to.equal('Hello');

    done();
  });

Question 5

এখানে বিভিন্ন মতামত প্রচুর। কেবলমাত্র আমার পক্ষে কাজ করা উপরের কিছুই ছিল না, এটি ব্যবহার করছিল input.props().value। আমি আশা করি এটি সাহায্য করবে.

Question 6

আমি তৈরি-প্রতিক্রিয়া-অ্যাপ ব্যবহার করছি যা ডিফল্ট এবং এনজাইম ২. 2..০ দ্বারা উপহাসের সাথে আসে।

এটি আমার পক্ষে কাজ করেছে:

const wrapper = mount(<EditableText defaultValue="Hello" />);
const input = wrapper.find('input')[index]; // where index is the position of the input field of interest
input.node.value = 'Change';
input.simulate('change', input);
done();

Question 7

উপরের কেউই আমার পক্ষে কাজ করেনি। এটিই আমার জন্য এনজাইম ^ 3.1.1 এ কাজ করেছে:

input.instance().props.onChange(({ target: { value: '19:00' } }));

এখানে প্রসঙ্গের জন্য বাকী কোডটি দেওয়া হল:

const fakeHandleChangeValues = jest.fn();
  const fakeErrors = {
    errors: [{
      timePeriod: opHoursData[0].timePeriod,
      values: [{
        errorIndex: 2,
        errorTime: '19:00',
      }],
    }],
    state: true,
  };
const wrapper = mount(<AccessibleUI
    handleChangeValues={fakeHandleChangeValues}
    opHoursData={opHoursData}
    translations={translationsForRendering}
  />);
const input = wrapper.find('#input-2').at(0);
input.instance().props.onChange(({ target: { value: '19:00' } }));
expect(wrapper.state().error).toEqual(fakeErrors);

Question 8

আমি টাইপস্ক্রিপ্টের সাথে প্রতিক্রিয়া ব্যবহার করছি এবং নিম্নলিখিতগুলি আমার জন্য কাজ করেছে

wrapper.find('input').getDOMNode<HTMLInputElement>().value = 'Hello';
wrapper.find('input').simulate('change');

সরাসরি মান নির্ধারণ করা হচ্ছে

wrapper.find('input').instance().value = 'Hello'`

আমাকে একটি সংকলন সতর্কবার্তা সৃষ্টি করছিল।

Question 9

এটি এনজাইম ২.৪.১ ব্যবহার করে আমার জন্য কাজ করে:

const wrapper = mount(<EditableText defaultValue="Hello" />);
const input = wrapper.find('input');

console.log(input.node.value);

Question 10

এখানে আমার কোড ..

const input = MobileNumberComponent.find('input')
// when
input.props().onChange({target: {
   id: 'mobile-no',
   value: '1234567900'
}});
MobileNumberComponent.update()
const Footer = (loginComponent.find('Footer'))
expect(Footer.find('Buttons').props().disabled).equals(false)

আমি আমার ডিওএম আপডেট করেছি componentname.update() এবং তারপরে 10 ডিজিটের দৈর্ঘ্যের সাথে সাবমিট বাটন যাচাইকরণ (অক্ষম / সক্ষম) পরীক্ষা করব।

Question 11

আমার ক্ষেত্রে আমি রেফার কলব্যাক ব্যবহার করছিলাম,

  <input id="usuario" className="form-control" placeholder="Usuario"
                                                       name="usuario" type="usuario"
                                                       onKeyUp={this._validateMail.bind(this)}
                                                       onChange={()=> this._validateMail()}
                                                       ref={(val) =>{ this._username = val}}
                                                    >

মান পেতে। সুতরাং এনজাইম এটির মান পরিবর্তন করবে না __ ব্যবহারকারী নাম।

সুতরাং আমি করতে হয়েছিল:

login.node._username.value = "mario@com.com";
    user.simulate('change');
    expect(login.state('mailValid')).toBe(true);

মান সেট করতে সক্ষম হতে তারপরে কল পরিবর্তন করুন। এবং তারপর জোর দেওয়া।

Question 12

এটি আমার পক্ষে কাজ করেছে:

let wrapped = mount(<Component />);
expect(wrapped.find("input").get(0).props.value).toEqual("something");

Question 13

যদি কেউ লড়াই করে যাচ্ছেন তবে আমি নিম্নলিখিতটি আমার পক্ষে কাজ করে দেখলাম

const wrapper = mount(<NewTask {...props} />); // component under test
const textField = wrapper.find(TextField);

textField.props().onChange({ target: { value: 'New Task 2' } })
textField.simulate('change');
// wrapper.update() didn't work for me, need to find element again

console.log(wrapper.find(TextField).props()); // New Task 2

দেখে মনে হচ্ছে যে আপনাকে প্রথমে পরিবর্তন ইভেন্টে কী ঘটে তা সংজ্ঞায়িত করতে হবে এবং তারপরে এটি অনুকরণ করতে হবে (পরিবর্তিত ইভেন্টটিকে ডেটা সহ সিমুলেট করার পরিবর্তে)

Question 14

আমি খুব সহজ উপায়ে সমাধান করেছি:

প্রপস থেকে মান সেট করুন :

  const wrapper: ShallowWrapper = shallow(<ProfileViewClass name: 'Sample Name' />);

এইচটিএমএল কোড :

  <input type='text' defaultValue={props.name} className='edituser-name' />

এর থেকে বৈশিষ্ট্যটি অ্যাক্সেস করুনwrapper.find(element).props().attribute-name :

  it('should render user name', () => {
    expect(wrapper.find('.edituser-name').props().defaultValue).toContain(props.name);
  });

চিয়ার্স

Question 15

উপরের সমাধানগুলির কোনওটিই আমার পক্ষে কাজ করেনি কারণ আমি ফর্মিক ব্যবহার করছিলাম এবং ক্ষেত্রের মান পরিবর্তনের পাশাপাশি ক্ষেত্রটি "ছোঁয়া" চিহ্নিত করা দরকার। নিম্নলিখিত কোডটি আমার পক্ষে কাজ করেছিল।

const emailField = orderPageWrapper.find('input[name="email"]')

emailField.simulate('focus')
emailField.simulate('change', { target: { value: 'test@example.com', name: 'email' } })
emailField.simulate('blur')

Question 16

আমি মান সেট করতে র‌্যাপারের সেটভ্যালু [ https://vue-test-utils.vuejs.org/api/wrapper/#setvalue-value] পদ্ধতি ব্যবহার করি ।

inputA = wrapper.findAll('input').at(0)
inputA.setValue('123456')

Question 17

.simulate()আমার পক্ষে কোনওভাবেই কাজ করে না, আমি node.valueকল করার প্রয়োজন ছাড়াই কেবল অ্যাক্সেস নিয়ে কাজ করেছি .simulate(); আপনার ক্ষেত্রে:

const wrapper = mount(<EditableText defaultValue="Hello" />);
const input = wrapper.find('input').at(0);

// Get the value
console.log(input.node.value); // Hello

// Set the value
input.node.value = 'new value';

// Get the value
console.log(input.node.value); // new value

আশা করি এটি অন্যদের জন্য সহায়তা করবে!