tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

test_sync_device_name.html (7978B)

      1 <!doctype html>
      2 <html>
      3  <head>
      4    <meta charset="utf-8" />
      5    <title>sync-device-name test</title>
      6    <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
      7    <link
      8      rel="stylesheet"
      9      href="chrome://mochikit/content/tests/SimpleTest/test.css"
     10    />
     11    <link rel="stylesheet" href="chrome://global/skin/global.css" />
     12    <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
     13    <script src="../../../../../toolkit/content/tests/widgets/lit-test-helpers.js"></script>
     14    <script
     15      type="module"
     16      src="chrome://browser/content/preferences/widgets/sync-device-name.mjs"
     17    ></script>
     18    <script>
     19      let html, testHelpers;
     20 
     21      const TEST_DEVICE_NAME = "My Device";
     22 
     23      add_setup(async function setup() {
     24        testHelpers = new LitTestHelpers();
     25        ({ html } = await testHelpers.setupLit());
     26        testHelpers.setupTests({
     27          templateFn: () =>
     28            html`<sync-device-name
     29              value=${TEST_DEVICE_NAME}
     30            ></sync-device-name>`,
     31        });
     32 
     33        MozXULElement.insertFTLIfNeeded("browser/preferences/preferences.ftl");
     34      });
     35 
     36      add_task(async function testSyncDeviceName() {
     37        let {
     38          children: [syncDeviceName],
     39        } = await testHelpers.renderTemplate();
     40 
     41        ok(syncDeviceName, "sync-device-name element renders.");
     42        ok(
     43          !syncDeviceName._isInEditMode,
     44          "sync-device-name initially renders in display mode."
     45        );
     46        let deviceNameLabel =
     47          syncDeviceName.shadowRoot.querySelector("moz-box-item").label;
     48        is(deviceNameLabel, TEST_DEVICE_NAME, "Device name is displayed.");
     49        ok(syncDeviceName.changeBtnEl, "Change device name button renders.");
     50 
     51        synthesizeMouseAtCenter(syncDeviceName.changeBtnEl, {});
     52        await syncDeviceName.updateComplete;
     53 
     54        ok(
     55          syncDeviceName._isInEditMode,
     56          "sync-device-name switches to edit mode."
     57        );
     58        is(
     59          syncDeviceName.shadowRoot.activeElement,
     60          syncDeviceName.inputTextEl,
     61          "The input element is in focus."
     62        );
     63        is(
     64          syncDeviceName.inputTextEl.inputEl.value,
     65          TEST_DEVICE_NAME,
     66          "Device name text is displayed in input element."
     67        );
     68 
     69        let cancelBtn = syncDeviceName.shadowRoot.querySelector(
     70          "#fxaCancelChangeDeviceName"
     71        );
     72        let saveBtn = syncDeviceName.shadowRoot.querySelector(
     73          "#fxaSaveChangeDeviceName"
     74        );
     75        ok(cancelBtn && saveBtn, "Cancel and Save buttons render.");
     76 
     77        synthesizeMouseAtCenter(cancelBtn, {});
     78        await syncDeviceName.updateComplete;
     79 
     80        ok(
     81          !syncDeviceName._isInEditMode,
     82          "sync-device-name switches back to display mode."
     83        );
     84        is(
     85          syncDeviceName.shadowRoot.activeElement,
     86          syncDeviceName.changeBtnEl,
     87          "The Change device name button element is in focus."
     88        );
     89      });
     90 
     91      add_task(async function testDisabledStateOfSyncDeviceName() {
     92        let {
     93          children: [syncDeviceName],
     94        } = await testHelpers.renderTemplate();
     95 
     96        ok(!syncDeviceName.disabled, "sync-device-name is enabled by default.");
     97        ok(
     98          !syncDeviceName.changeBtnEl.disabled,
     99          "Change device name button is enabled by default."
    100        );
    101 
    102        syncDeviceName.disabled = true;
    103        await syncDeviceName.updateComplete;
    104 
    105        ok(
    106          syncDeviceName.changeBtnEl.disabled,
    107          "Change device name button is disabled when sync-device-name is disabled."
    108        );
    109      });
    110 
    111      add_task(async function testEditModeOfSyncDeviceName() {
    112        let {
    113          children: [syncDeviceName],
    114        } = await testHelpers.renderTemplate();
    115 
    116        const TEST_STRING = " Test";
    117 
    118        ok(syncDeviceName, "sync-device-name element renders.");
    119 
    120        synthesizeMouseAtCenter(syncDeviceName.changeBtnEl, {});
    121        await syncDeviceName.updateComplete;
    122 
    123        is(
    124          syncDeviceName.shadowRoot.activeElement,
    125          syncDeviceName.inputTextEl,
    126          "The input element is in focus."
    127        );
    128 
    129        sendString(TEST_STRING);
    130 
    131        is(
    132          syncDeviceName.inputTextEl.value,
    133          `${TEST_DEVICE_NAME}${TEST_STRING}`,
    134          "The input element has updated value."
    135        );
    136 
    137        let cancelBtn = syncDeviceName.shadowRoot.querySelector(
    138          "#fxaCancelChangeDeviceName"
    139        );
    140 
    141        synthesizeMouseAtCenter(cancelBtn, {});
    142        await syncDeviceName.updateComplete;
    143 
    144        is(
    145          syncDeviceName.value,
    146          TEST_DEVICE_NAME,
    147          "Device name value hasn't changed."
    148        );
    149 
    150        synthesizeMouseAtCenter(syncDeviceName.changeBtnEl, {});
    151        await syncDeviceName.updateComplete;
    152        sendString(TEST_STRING);
    153 
    154        is(
    155          syncDeviceName.inputTextEl.value,
    156          `${TEST_DEVICE_NAME}${TEST_STRING}`,
    157          "The input element has updated value."
    158        );
    159 
    160        let saveBtn = syncDeviceName.shadowRoot.querySelector(
    161          "#fxaSaveChangeDeviceName"
    162        );
    163        synthesizeMouseAtCenter(saveBtn, {});
    164        await syncDeviceName.updateComplete;
    165 
    166        is(
    167          syncDeviceName.value,
    168          `${TEST_DEVICE_NAME}${TEST_STRING}`,
    169          "Device name value was updated after clicking the Save button."
    170        );
    171      });
    172 
    173      add_task(async function testSyncDeviceNameKeyboardInteraction() {
    174        let {
    175          children: [syncDeviceName],
    176        } = await testHelpers.renderTemplate();
    177 
    178        const TEST_STRING = " Test";
    179 
    180        ok(syncDeviceName, "sync-device-name element renders.");
    181 
    182        synthesizeKey("KEY_Tab", {});
    183 
    184        is(
    185          syncDeviceName.shadowRoot.activeElement,
    186          syncDeviceName.changeBtnEl,
    187          "Change device name button element is in focus."
    188        );
    189 
    190        synthesizeKey("KEY_Enter", {});
    191        await syncDeviceName.updateComplete;
    192 
    193        is(
    194          syncDeviceName.shadowRoot.activeElement,
    195          syncDeviceName.inputTextEl,
    196          "The input element is in focus."
    197        );
    198 
    199        sendString(TEST_STRING);
    200 
    201        is(
    202          syncDeviceName.inputTextEl.value,
    203          `${TEST_DEVICE_NAME}${TEST_STRING}`,
    204          "The input element has updated value."
    205        );
    206 
    207        synthesizeKey("KEY_Escape", {});
    208        await syncDeviceName.updateComplete;
    209 
    210        ok(
    211          !syncDeviceName._isInEditMode,
    212          "sync-device-name switched to display mode after pressing Escape key."
    213        );
    214        is(
    215          syncDeviceName.shadowRoot.activeElement,
    216          syncDeviceName.changeBtnEl,
    217          "Change device name button element is in focus."
    218        );
    219        is(
    220          syncDeviceName.value,
    221          TEST_DEVICE_NAME,
    222          "Device name value hasn't changed."
    223        );
    224 
    225        synthesizeKey("KEY_Enter", {});
    226        await syncDeviceName.updateComplete;
    227 
    228        ok(
    229          syncDeviceName._isInEditMode,
    230          "sync-device-name is back in edit mode."
    231        );
    232        is(
    233          syncDeviceName.shadowRoot.activeElement,
    234          syncDeviceName.inputTextEl,
    235          "The input element is in focus."
    236        );
    237 
    238        sendString(TEST_STRING);
    239        synthesizeKey("KEY_Enter", {});
    240        await syncDeviceName.updateComplete;
    241 
    242        ok(
    243          !syncDeviceName._isInEditMode,
    244          "sync-device-name switched to display mode after pressing Enter key."
    245        );
    246        is(
    247          syncDeviceName.shadowRoot.activeElement,
    248          syncDeviceName.changeBtnEl,
    249          "Change device name button element is in focus."
    250        );
    251        is(
    252          syncDeviceName.value,
    253          `${TEST_DEVICE_NAME}${TEST_STRING}`,
    254          "Device name value was updated."
    255        );
    256      });
    257    </script>
    258  </head>
    259  <body>
    260    <p id="display"></p>
    261    <div id="content" style="display: none"></div>
    262    <pre id="test"></pre>
    263  </body>
    264 </html>