tests/qunit/suites/resources/jquery/jquery.localize.test.js

   1 ( function ( $, mw ) {
   2         QUnit.module( 'jquery.localize', QUnit.newMwEnvironment() );
   3
   4         QUnit.test( 'Handle basic replacements', function ( assert ) {
   5                 var html, $lc;
   6                 mw.messages.set( 'basic', 'Basic stuff' );
   7
   8                 // Tag: html:msg
   9                 html = '<div><span><html:msg key="basic" /></span></div>';
  10                 $lc = $( html ).localize().find( 'span' );
  11
  12                 assert.strictEqual( $lc.text(), 'Basic stuff', 'Tag: html:msg' );
  13
  14                 // Attribute: title-msg
  15                 html = '<div><span title-msg="basic"></span></div>';
  16                 $lc = $( html ).localize().find( 'span' );
  17
  18                 assert.strictEqual( $lc.attr( 'title' ), 'Basic stuff', 'Attribute: title-msg' );
  19
  20                 // Attribute: alt-msg
  21                 html = '<div><span alt-msg="basic"></span></div>';
  22                 $lc = $( html ).localize().find( 'span' );
  23
  24                 assert.strictEqual( $lc.attr( 'alt' ), 'Basic stuff', 'Attribute: alt-msg' );
  25
  26                 // Attribute: placeholder-msg
  27                 html = '<div><input placeholder-msg="basic" /></div>';
  28                 $lc = $( html ).localize().find( 'input' );
  29
  30                 assert.strictEqual( $lc.attr( 'placeholder' ), 'Basic stuff', 'Attribute: placeholder-msg' );
  31         } );
  32
  33         QUnit.test( 'Proper escaping', function ( assert ) {
  34                 var html, $lc;
  35                 mw.messages.set( 'properfoo', '<proper esc="test">' );
  36
  37                 // This is handled by jQuery inside $.fn.localize, just a simple sanity checked
  38                 // making sure it is actually using text() and attr() (or something with the same effect)
  39
  40                 // Text escaping
  41                 html = '<div><span><html:msg key="properfoo" /></span></div>';
  42                 $lc = $( html ).localize().find( 'span' );
  43
  44                 assert.strictEqual( $lc.text(), mw.msg( 'properfoo' ), 'Content is inserted as text, not as html.' );
  45
  46                 // Attribute escaping
  47                 html = '<div><span title-msg="properfoo"></span></div>';
  48                 $lc = $( html ).localize().find( 'span' );
  49
  50                 assert.strictEqual( $lc.attr( 'title' ), mw.msg( 'properfoo' ), 'Attributes are not inserted raw.' );
  51         } );
  52
  53         QUnit.test( 'Options', function ( assert ) {
  54                 var html, $lc, x, sitename = 'Wikipedia';
  55                 mw.messages.set( {
  56                         'foo-lorem': 'Lorem',
  57                         'foo-ipsum': 'Ipsum',
  58                         'foo-bar-title': 'Read more about bars',
  59                         'foo-bar-label': 'The Bars',
  60                         'foo-bazz-title': 'Read more about bazz at $1 (last modified: $2)',
  61                         'foo-bazz-label': 'The Bazz ($1)',
  62                         'foo-welcome': 'Welcome to $1! (last visit: $2)'
  63                 } );
  64
  65                 // Message key prefix
  66                 html = '<div><span title-msg="lorem"><html:msg key="ipsum" /></span></div>';
  67                 $lc = $( html ).localize( {
  68                         prefix: 'foo-'
  69                 } ).find( 'span' );
  70
  71                 assert.strictEqual( $lc.attr( 'title' ), 'Lorem', 'Message key prefix - attr' );
  72                 assert.strictEqual( $lc.text(), 'Ipsum', 'Message key prefix - text' );
  73
  74                 // Variable keys mapping
  75                 x = 'bar';
  76                 html = '<div><span title-msg="title"><html:msg key="label" /></span></div>';
  77                 $lc = $( html ).localize( {
  78                         keys: {
  79                                 title: 'foo-' + x + '-title',
  80                                 label: 'foo-' + x + '-label'
  81                         }
  82                 } ).find( 'span' );
  83
  84                 assert.strictEqual( $lc.attr( 'title' ), 'Read more about bars', 'Variable keys mapping - attr' );
  85                 assert.strictEqual( $lc.text(), 'The Bars', 'Variable keys mapping - text' );
  86
  87                 // Passing parameteters to mw.msg
  88                 html = '<div><span><html:msg key="foo-welcome" /></span></div>';
  89                 $lc = $( html ).localize( {
  90                         params: {
  91                                 'foo-welcome': [ sitename, 'yesterday' ]
  92                         }
  93                 } ).find( 'span' );
  94
  95                 assert.strictEqual( $lc.text(), 'Welcome to Wikipedia! (last visit: yesterday)', 'Passing parameteters to mw.msg' );
  96
  97                 // Combination of options prefix, params and keys
  98                 x = 'bazz';
  99                 html = '<div><span title-msg="title"><html:msg key="label" /></span></div>';
 100                 $lc = $( html ).localize( {
 101                         prefix: 'foo-',
 102                         keys: {
 103                                 title: x + '-title',
 104                                 label: x + '-label'
 105                         },
 106                         params: {
 107                                 title: [ sitename, '3 minutes ago' ],
 108                                 label: [ sitename, '3 minutes ago' ]
 109
 110                         }
 111                 } ).find( 'span' );
 112
 113                 assert.strictEqual( $lc.text(), 'The Bazz (Wikipedia)', 'Combination of options prefix, params and keys - text' );
 114                 assert.strictEqual( $lc.attr( 'title' ), 'Read more about bazz at Wikipedia (last modified: 3 minutes ago)', 'Combination of options prefix, params and keys - attr' );
 115         } );
 116
 117         QUnit.test( 'Handle data text', function ( assert ) {
 118                 var html, $lc;
 119                 mw.messages.set( 'option-one', 'Item 1' );
 120                 mw.messages.set( 'option-two', 'Item 2' );
 121                 html = '<select><option data-msg-text="option-one"></option><option data-msg-text="option-two"></option></select>';
 122                 $lc = $( html ).localize().find( 'option' );
 123                 assert.strictEqual( $lc.eq( 0 ).text(), mw.msg( 'option-one' ), 'data-msg-text becomes text of options' );
 124                 assert.strictEqual( $lc.eq( 1 ).text(), mw.msg( 'option-two' ), 'data-msg-text becomes text of options' );
 125         } );
 126
 127         QUnit.test( 'Handle data html', function ( assert ) {
 128                 var html, $lc;
 129                 mw.messages.set( 'html', 'behold... there is a <a>link</a> here!!' );
 130                 html = '<div><div data-msg-html="html"></div></div>';
 131                 $lc = $( html ).localize().find( 'a' );
 132                 assert.strictEqual( $lc.length, 1, 'link is created' );
 133                 assert.strictEqual( $lc.text(), 'link', 'the link text got added' );
 134         } );
 135 }( jQuery, mediaWiki ) );