github.com/web-platform-tests/wpt.fyi@v0.0.0-20240530210107-70cf978996f1/webapp/components/test/test-runs-query-builder.html (about)

     1  <!doctype html>
     2  <html>
     3  <head>
     4    <meta charset="utf-8">
     5    <script src="../../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
     6    <script src="../../node_modules/wct-browser-legacy/browser.js"></script>
     7  
     8    <script type="module" src="../test-runs-query-builder.js"></script>
     9  </head>
    10  <body>
    11    <test-fixture id="query-builder-fixture">
    12      <template>
    13        <test-runs-query-builder></test-runs-query-builder>
    14      </template>
    15    </test-fixture>
    16  
    17    <script type="module">
    18  import '../test-runs-query-builder.js';
    19  import { PolymerElement } from '../../node_modules/@polymer/polymer/polymer-element.js';
    20  import { Channels } from '../product-info.js';
    21  
    22  suite('TestRunsQueryBuilder', () => {
    23    let queryBuilder, sandbox;
    24  
    25    suiteSetup(() => {
    26      sandbox = sinon.sandbox.create();
    27      // Spoof an empty result for /api/shas to speed up tests.
    28      // This is done in suiteSetup/suiteTeardown to avoid async fetches slipping
    29      // through between tests.
    30      const ignore = new RegExp('/api/(shas|versions)');
    31      sandbox.stub(window, 'fetch', url => {
    32        if (ignore.test(url.pathname)) {
    33          return Promise.resolve(new Response('[]'));
    34        }
    35        throw url;
    36      });
    37    });
    38  
    39    suiteTeardown(() => {
    40      sandbox.restore();
    41    });
    42  
    43    setup(() => {
    44      queryBuilder = fixture('query-builder-fixture');
    45      queryBuilder.productSpecs = ['chrome', 'edge'];
    46    });
    47  
    48    test('instanceof Polymer.Element', () => {
    49      assert.isTrue(queryBuilder instanceof PolymerElement);
    50    });
    51  
    52    test('add item', () => {
    53      queryBuilder.addProduct();
    54      assert.equal(queryBuilder.products.length, 3);
    55      assert.equal(queryBuilder.products[2].browser_name, 'android_webview');
    56      queryBuilder.addProduct();
    57      assert.equal(queryBuilder.products.length, 4);
    58      assert.equal(queryBuilder.products[3].browser_name, 'chrome_android');
    59    });
    60  
    61    test('delete item', (done) => {
    62      flush(() => {
    63        const first = queryBuilder.root.querySelector('product-builder');
    64        first.deleteProduct();
    65        assert.equal(queryBuilder.products.length, 1);
    66        assert.equal(queryBuilder.products[0].browser_name, 'edge');
    67        done();
    68      });
    69    });
    70  
    71    test('clear all items', () => {
    72      // Wait for shadow DOM.
    73      queryBuilder.clearAll();
    74      assert.equal(queryBuilder.products.length, 0);
    75    });
    76  
    77    test('productSpecs', () => {
    78      queryBuilder.set('products.0.labels', ['beta']);
    79      assert.equal(queryBuilder.productSpecs[0], 'chrome[beta]');
    80    });
    81  
    82    test('aligned', () => {
    83      queryBuilder.aligned = false;
    84      expect(queryBuilder.query).to.not.contain('aligned');
    85      queryBuilder.aligned = true;
    86      expect(queryBuilder.query).to.contain('aligned');
    87  
    88      const alignedCB = queryBuilder.shadowRoot.querySelector('#aligned-checkbox');
    89      expect(alignedCB.checked).to.be.true;
    90      alignedCB.checked = false;
    91      expect(queryBuilder.query).to.not.contain('aligned');
    92      alignedCB.checked = true;
    93      expect(queryBuilder.query).to.contain('aligned');
    94    });
    95  
    96    test('labels', () => {
    97      queryBuilder.labelsString = '';
    98      expect(queryBuilder.query).to.not.contain('label');
    99      queryBuilder.labelsString = 'foo,';
   100      expect(queryBuilder.query).to.contain('label=foo');
   101      expect(queryBuilder.query).to.not.contain('foo,');
   102      queryBuilder.labels = ['foo', 'bar'];
   103      expect(queryBuilder.query).to.contain('label=foo');
   104      expect(queryBuilder.query).to.contain('label=bar');
   105    });
   106  
   107    suite('shared channels', () => {
   108      setup(() => {
   109        queryBuilder.clearAll();
   110        queryBuilder.productSpecs = ['chrome', 'safari'];
   111        queryBuilder.labels = ['stable'];
   112      });
   113  
   114      for (const channel of Channels) {
   115        test(`_channel=${channel}`, done => {
   116          flush(() => {
   117            for (const productBuilder of queryBuilder.shadowRoot.querySelectorAll('product-builder')) {
   118              productBuilder._channel = channel;
   119            }
   120            expect(queryBuilder.queryParams.label).to.contain(channel);
   121            done();
   122          });
   123        });
   124      }
   125  
   126      for (const channel of Channels) {
   127        test(`labels=[${channel}]`, done => {
   128          queryBuilder.labels = [channel];
   129          queryBuilder.submit();
   130          flush(() => {
   131            for (const productBuilder of queryBuilder.shadowRoot.querySelectorAll('product-builder')) {
   132              expect(productBuilder._channel).to.equal(channel);
   133            }
   134            done();
   135          });
   136        });
   137      }
   138    });
   139  
   140    test('shas', () => {
   141      const shas = ['1234567890', '0987654321'];
   142      queryBuilder.shas = shas.slice(0, 1);
   143      expect(queryBuilder.query).to.contain(`sha=${shas[0]}`);
   144  
   145      queryBuilder.shas = shas;
   146      expect(queryBuilder.query).to.contain(`sha=${shas[0]}`);
   147      expect(queryBuilder.query).to.contain(`sha=${shas[1]}`);
   148  
   149      queryBuilder.shas = ['latest'];
   150      expect(queryBuilder.query).to.not.contain('sha');
   151  
   152      queryBuilder.shas = [];
   153      expect(queryBuilder.query).to.not.contain('sha');
   154    });
   155  
   156    suite('shas autocomplete', () => {
   157      let sandbox;
   158  
   159      setup(() => {
   160        sandbox = sinon.sandbox.create();
   161        sandbox.spy(queryBuilder, 'shasURLUpdated');
   162      });
   163  
   164      teardown(() => {
   165        sandbox.restore();
   166      });
   167  
   168      test('/api/shas fetches', () => {
   169        // Should only trigger a single update, in spite of many params changing.
   170        queryBuilder.updateQueryParams({ product: ['chrome'], aligned: true, label: ['dev'] });
   171        expect(queryBuilder.shasURLUpdated.callCount).to.equal(1);
   172      });
   173    });
   174  
   175    suite('master runs only', () => {
   176      test('updateQueryParams', () => {
   177        queryBuilder.updateQueryParams({ label: ['master'] });
   178        expect(queryBuilder.master).to.be.true;
   179  
   180        queryBuilder.updateQueryParams({ label: [] });
   181        expect(queryBuilder.master).to.be.false;
   182      });
   183  
   184      test('queryParams', () => {
   185        queryBuilder.master = true;
   186        expect(queryBuilder.query).to.contain('master');
   187  
   188        queryBuilder.master = false;
   189        expect(queryBuilder.query).to.not.contain('master');
   190      });
   191    });
   192  });
   193  
   194  </script>
   195  </body>
   196  </html>