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>