PolymerElements / app-localize-behavior

Polymer behaviour to help internationalize your application
48 stars 54 forks source link

Error 'this.localize is not a function' on tests #135

Closed felixzapata closed 6 years ago

felixzapata commented 6 years ago

Description

I have a component that uses the app-localize-behavior, and works fine but when I run the tests I have errors.

This component calls to the localize function in order to set a property. But the tests throws an error if I use a JSON file instead of the resources property:

<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../app-localize-behavior.html">

<dom-module id="my-component">
  <template>
    <span>{{myFoobar}}</span>
    <button type="button" on-tap="foobar">Click</button>
  </template>

  <script>
    Polymer({
      is: "x-translate",

      behaviors: [
        Polymer.AppLocalizeBehavior
      ],

      properties: {
       myFoobar: {
          type: String
       },
        language: {
          value: 'en',
          type: String
        }
      },
      attached: function() {
        this.loadResources(this.resolveUrl('locales.json'));
      },
      foobar: function() {
          if(something) { 
            this.set('myFoobar', this.localize('x'));
          } else {
            this.set('myFoobar', this.localize('y'));
         }
      }
    });
  </script>
</dom-module>

Steps to reproduce

To reproduce the error, you can use the tests inside of the app-localize-behavior:

The component using a JSON file

<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../app-localize-behavior.html">

<dom-module id="x-translate">
  <template>
    <button type="button" on-tap="foobar">aaaa</button>
  </template>

  <script>
    Polymer({
      is: "x-translate",

      behaviors: [
        Polymer.AppLocalizeBehavior
      ],

      properties: {
        language: {
          value: 'en',
          type: String
        }
      },
      attached: function() {
        this.loadResources(this.resolveUrl('locales.json'));
      },
      foobar: function() {
        console.log(this.localize('greeting'))
      }
    });
  </script>
</dom-module>

The component using local resources

<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../app-localize-behavior.html">

<dom-module id="x-translate">
  <template>
    <div id="output">{{localize('greeting')}}</div>
    <div id="missing">{{localize('missing')}}</div>
    <button type="button" on-tap="foobar">aaaa</button>
  </template>

  <script>
    Polymer({
      is: "x-translate",

      behaviors: [
        Polymer.AppLocalizeBehavior
      ],

      properties: {
        language: {
          value: 'en',
          type: String
        },
        resources: {
          value: function() {
            return {
              "en": {
                "greeting": "hello",
                "intro": "my name is {name}. i have {numCats, number} cats."
              },
              "fr": {
                "greeting": "bonjour",
                "intro": "je m'apelle {name}. j'ai {numCats, number} chats."
              }
            }
          }
        }
      },
      foobar: function() {
        console.log(this.localize('greeting'))
      }
    });
  </script>
</dom-module>

The test

<!doctype html>
<html>
<head>

  <title>app-localize-behavior tests</title>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">

  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
  <script src="../../web-component-tester/browser.js"></script>
  <link rel="import" href="../../iron-test-helpers/mock-interactions.html">

  <!-- Intl polyfill -->
  <script src="../../intl/dist/Intl.min.js"></script>
  <script src="../../intl/locale-data/jsonp/en.js"></script>
  <script src="../../intl/locale-data/jsonp/fr.js"></script>

  <link rel="import" href="x-translate.html">

</head>
<body>

  <test-fixture id="basic">
    <template>
      <x-translate></x-translate>
    </template>
  </test-fixture>

  <script>
    function getRequestsCache(elem) {
      return elem.constructor.prototype.__localizationCache.requests;
    }

    function getStringsCache(elem) {
      return elem.constructor.prototype.__localizationCache.messages;
    }

    function resetRequestsCache(elem) {
      elem.constructor.prototype.__localizationCache.requests = {};
    }

    function resetStringsCache(elem) {
      elem.constructor.prototype.__localizationCache.messages = {};
    }

    suite('basic', function() {
      test('can translate a basic string', function() {
        var app = fixture('basic');
        assert.equal(1, 1);
        MockInteractions.tap(Polymer.dom(app.root).querySelector('button'));
      });
    });
  </script>
</body>
</html>

Using the JSON file

captura de pantalla 2018-08-23 a las 17 22 36

Using the local resources property

captura de pantalla 2018-08-23 a las 17 26 41

Why the test fails if I use a JSON file and I call the localize function?

felixzapata commented 6 years ago

I am going to change my component.