Provide fullNumber and isValid when onSelectFlag

[adrienharnay]

No description provided.

[coveralls]

Coverage increased (+0.02%) to 93.364% when pulling 4e0941a on adrienharnay:patch-2 into e368560 on patw0929:master.

[patw0929]

Thank you for contribution!
For making sure that the PRs can work successfully (current and in future), could you help to write unit tests of PRs? 🙇

[adrienharnay]

Hey, yes I will do so in the upcoming week!

[adrienharnay]

Hey, didn't forget the tests, but have been a bit busy. Will get to it soon

[adrienharnay]

Hey, I've finally found time to write tests!

Here's what I have:

  it('onSelectFlag', () => {
    let expected = '';
    const onSelectFlag = (newNumber, countryData, fullNumber, isValid) => {
      expected = `${isValid},${newNumber},${countryData.iso2},${fullNumber}`;
    };

    this.params.onSelectFlag = onSelectFlag;
    const subject = this.makeSubject();
    const inputComponent = subject.find(TelInput);

    requests[0].respond(200,
      { 'Content-Type': 'text/javascript' },
      libphonenumberUtils);
    window.eval(getScript().text);

    inputComponent.simulate('change', { target: { value: '+886911222333' } });
    // need to simulate flag change
    // inputComponent.simulate('???', { ??? });
    expect(expected).toBe('true,+886911222333,tw,+886 911 222 333');
  });

Could you please help me figure out how to simulate a flag change? Thanks!

[patw0929]

How about this?

diff --git a/__tests__/FlagDropDown.test.js b/__tests__/FlagDropDown.test.js
index c10e3ba..60bf008 100644
--- a/__tests__/FlagDropDown.test.js
+++ b/__tests__/FlagDropDown.test.js
@@ -8,6 +8,7 @@ import fs from 'fs';
 import IntlTelInput from '../src/components/IntlTelInputApp';
 import FlagDropDown from '../src/components/FlagDropDown';
 import CountryList from '../src/components/CountryList';
+import TelInput from '../src/components/TelInput';

 describe('FlagDropDown', function () { // eslint-disable-line func-names
   let libphonenumberUtils;
@@ -440,26 +441,33 @@ describe('FlagDropDown', function () { // eslint-disable-line func-names

   it('onSelectFlag', () => {
     let expected = '';
-    const onSelectFlag = (currentNumber, countryData) => {
-      expected = Object.assign({}, { currentNumber, ...countryData });
+    const onSelectFlag = (currentNumber, countryData, fullNumber, isValid) => {
+      expected = Object.assign({}, { currentNumber, fullNumber, isValid, ...countryData });
     };

     this.params.onSelectFlag = onSelectFlag;
     const subject = this.makeSubject();
     const flagComponent = subject.find(FlagDropDown);
+    const inputComponent = subject.find(TelInput);
     const countryListComponent = subject.find(CountryList);

     requests[0].respond(200,
       { 'Content-Type': 'text/javascript' },
       libphonenumberUtils);
+    window.eval(getScript().text);

+    inputComponent.simulate('change', { target: { value: '+8109012345678' } });
     flagComponent.simulate('click');
     const japanOption = countryListComponent.find('[data-country-code="jp"]');

     japanOption.simulate('click');
+
     expect(expected).toEqual({
-      currentNumber: '',
+      currentNumber: '+8109012345678',
+      fullNumber: '+81 90-1234-5678',
+      isValid: true,
       name: 'Japan (日本)',
       iso2: 'jp',
       dialCode: '81',

And can we update selectFlagHandler in example.js? (To console.log fullNumber and isValid)

[adrienharnay]

Thanks for the great help, works like a charm! Seems ready to be merged, tell me if I can do anything else

[patw0929]

Great! LGTM!
And could you update the selectFlagHandler in example.js? Thanks!

diff --git a/src/example.js b/src/example.js
index e8ff260..884b7c4 100644
--- a/src/example.js
+++ b/src/example.js
@@ -58,8 +58,8 @@ class DemoComponent extends Component {
     });
   }

-  selectFlagHandler(name, currentNumber, selectedCountryData) {
-    log(currentNumber, selectedCountryData);
+  selectFlagHandler(name, currentNumber, selectedCountryData, fullNumber, isValid) {
+    log(currentNumber, selectedCountryData, fullNumber, isValid);
     this.setState({
       [name]: currentNumber,
     });

[adrienharnay]

Woops sorry I totally forgot about this part... It's done!