How to use waitForAnimationFrame method in wpt

Best JavaScript code snippet using wpt

trix-mentions-element-test.js

Source:trix-mentions-element-test.js

...52        provide(Promise.resolve({matched: true, fragment: menu}))53      })54      input.focus()55      triggerInput(input, ':')56      await waitForAnimationFrame()57      assert.exists(expander.querySelector('ul'))58      expander.dismiss()59      await waitForAnimationFrame()60      assert.isNull(expander.querySelector('ul'))61    })62    it('dispatches change events for 2 char activation keys', async function () {63      const expander = document.querySelector('trix-mentions')64      const input = expander.querySelector('trix-editor')65      const receivedText = []66      const expectedText = ['', 'a', 'ab', 'abc', 'abcd']67      expander.addEventListener('trix-mentions-change', event => {68        const {key, text} = event.detail69        assert.equal('[[', key)70        receivedText.push(text)71      })72      triggerInput(input, '[[')73      triggerInput(input, '[[a')74      triggerInput(input, '[[ab')75      triggerInput(input, '[[abc')76      triggerInput(input, '[[abcd')77      assert.deepEqual(receivedText, expectedText)78    })79    it('toggles the [role] and [aria-multiline] when expanding and dismissing the menu', async function () {80      const expander = document.querySelector('trix-mentions')81      const input = expander.querySelector('trix-editor')82      const menu = document.createElement('ul')83      menu.appendChild(document.createElement('li'))84      expander.addEventListener('trix-mentions-change', event => {85        const {provide} = event.detail86        provide(Promise.resolve({matched: true, fragment: menu}))87      })88      input.focus()89      triggerInput(input, ':')90      await waitForAnimationFrame()91      assert.equal(input.getAttribute('role'), 'combobox')92      assert.equal(input.getAttribute('aria-multiline'), 'false')93      expander.dismiss()94      await waitForAnimationFrame()95      assert.equal(input.getAttribute('role'), 'textbox')96      assert.equal(input.getAttribute('aria-multiline'), null)97    })98    describe('committing', function () {99      beforeEach(function () {100        document.body.innerHTML = `101          <trix-mentions keys="#">102            <trix-editor></trix-editor>103            <ul role="listbox" hidden>104              <li id="option-1" role="option">an option</li>105            </ul>106          </trix-mentions>`107      })108      it('forwards the [data-trix-attachment] attribute to the Trix.Attachment instance without a trix-mentions-value listener', async function () {109        const attachmentOptions = {contentType: 'ignored', sgid: 'a-hash'}110        const expander = document.querySelector('trix-mentions')111        const input = expander.querySelector('trix-editor')112        const menu = document.querySelector('ul')113        const item = document.querySelector('li')114        item.setAttribute('data-trix-attachment', JSON.stringify(attachmentOptions))115        item.setAttribute('data-ignored-attribute', 'ignored')116        item.setAttribute('data-trix-attachment-content-type', 'mime')117        menu.appendChild(item)118        expander.addEventListener('trix-mentions-change', event => {119          const {provide} = event.detail120          provide(Promise.resolve({matched: true, fragment: menu}))121        })122        input.focus()123        triggerInput(input, '#')124        await waitForAnimationFrame()125        item.click()126        await waitForAnimationFrame()127        const figure = input.querySelector('figure')128        const {content, contentType, sgid} = JSON.parse(figure.getAttribute('data-trix-attachment'))129        assert.equal(sgid, 'a-hash')130        assert.equal(item.textContent, content)131        assert.equal('mime', contentType)132        assert.equal('mime', figure.getAttribute('data-trix-content-type'))133        assert(figure.textContent.includes(item.textContent))134      })135      it('advances the cursor to after the attachment content', async function () {136        const expander = document.querySelector('trix-mentions')137        const input = expander.querySelector('trix-editor')138        const menu = document.querySelector('ul')139        menu.insertAdjacentHTML('beforeend', '<li id="option-2" role="option">another option</li>')140        const option1 = document.querySelector('li:nth-of-type(1)')141        const option2 = document.querySelector('li:nth-of-type(2)')142        expander.addEventListener('trix-mentions-change', ({detail: {provide}}) => {143          provide(Promise.resolve({matched: true, fragment: menu}))144        })145        input.focus()146        triggerInput(input, '#', true)147        await waitForAnimationFrame()148        assert.equal(option1.getAttribute('aria-selected'), 'true')149        assert.equal(option2.getAttribute('aria-selected'), 'false')150        triggerKeydown(input, 'ArrowDown')151        await waitForAnimationFrame()152        assert.equal(option1.getAttribute('aria-selected'), 'false')153        assert.equal(option2.getAttribute('aria-selected'), 'true')154        triggerInput(input, 'z', true)155        await waitForAnimationFrame()156        option1.click()157        await waitForAnimationFrame()158        const value = input.editor.getDocument()159        assert.equal(value.toString().includes('z'), false)160      })161    })162  })163  describe('multi-word scenarios', function () {164    beforeEach(function () {165      document.body.innerHTML = `166        <trix-mentions keys="@ # [[" multiword="# [[">167          <trix-editor></trix-editor>168        </trix-mentions>`169    })170    it('has activation keys', function () {171      const expander = document.querySelector('trix-mentions')172      assert.deepEqual(173        [174          {key: '@', multiWord: false},175          {key: '#', multiWord: true},176          {key: '[[', multiWord: true}177        ],178        expander.keys179      )180    })181    it('dispatches change event for multi-word', async function () {182      const expander = document.querySelector('trix-mentions')183      const input = expander.querySelector('trix-editor')184      const result = once(expander, 'trix-mentions-change')185      triggerInput(input, '@match #some text')186      const event = await result187      const {key, text} = event.detail188      assert.equal('#', key)189      assert.equal('some text', text)190    })191    it('dispatches change events for 2 char activation keys for multi-word', async function () {192      const expander = document.querySelector('trix-mentions')193      const input = expander.querySelector('trix-editor')194      const receivedText = []195      const expectedText = ['', 'a', 'ab', 'abc', 'abcd', 'abcd def']196      expander.addEventListener('trix-mentions-change', event => {197        const {key, text} = event.detail198        assert.equal('[[', key)199        receivedText.push(text)200      })201      triggerInput(input, '[[')202      triggerInput(input, '[[a')203      triggerInput(input, '[[ab')204      triggerInput(input, '[[abc')205      triggerInput(input, '[[abcd')206      triggerInput(input, '[[abcd def')207      assert.deepEqual(receivedText, expectedText)208    })209    it('dispatches change event for single word match after multi-word', async function () {210      const expander = document.querySelector('trix-mentions')211      const input = expander.querySelector('trix-editor')212      const result = once(expander, 'trix-mentions-change')213      triggerInput(input, '#some text @match')214      const event = await result215      const {key, text} = event.detail216      assert.equal('@', key)217      assert.equal('match', text)218    })219    it('dispatches change event for multi-word with single word inside', async function () {220      const expander = document.querySelector('trix-mentions')221      const input = expander.querySelector('trix-editor')222      const result = once(expander, 'trix-mentions-change')223      triggerInput(input, '#some text @match word')224      const event = await result225      const {key, text} = event.detail226      assert.equal('#', key)227      assert.equal('some text @match word', text)228    })229    it('dispatches change event for the first activation key even if it is typed again', async function () {230      const expander = document.querySelector('trix-mentions')231      const input = expander.querySelector('trix-editor')232      let result = once(expander, 'trix-mentions-change')233      triggerInput(input, '#step 1')234      let event = await result235      let {key, text} = event.detail236      assert.equal('#', key)237      assert.equal('step 1', text)238      await waitForAnimationFrame()239      result = once(expander, 'trix-mentions-change')240      triggerInput(input, ' #step 2', true) //<-- At this point the text inside the input field is "#step 1 #step 2"241      event = await result242      ;({key, text} = event.detail)243      assert.equal('#', key)244      assert.equal('step 1 #step 2', text)245      await waitForAnimationFrame()246      result = once(expander, 'trix-mentions-change')247      triggerInput(input, ' #step 3', true) //<-- At this point the text inside the input field is "#step 1 #step 2 #step 3"248      event = await result249      ;({key, text} = event.detail)250      assert.equal('#', key)251      assert.equal('step 1 #step 2 #step 3', text)252    })253  })254  describe('when the menu is already connected to the document', function () {255    beforeEach(function () {256      document.body.innerHTML = `257        <trix-mentions keys=":">258          <trix-editor></trix-editor>259          <ul role="listbox" hidden>260            <li role="option">an option</li>261          </ul>262        </trix-mentions>`263    })264    it('toggles the visibility when activated and deactivated', async function () {265      const expander = document.querySelector('trix-mentions')266      const input = expander.querySelector('trix-editor')267      const menu = expander.querySelector('ul')268      const item = expander.querySelector('li')269      expander.addEventListener('trix-mentions-change', ({detail: {provide}}) => {270        provide(Promise.resolve({matched: true, fragment: menu}))271      })272      input.focus()273      triggerInput(input, ':')274      await waitForAnimationFrame()275      assert(menu.isConnected)276      assert.deepEqual([menu], Array.from(expander.querySelectorAll('ul')))277      assert.equal(false, menu.hidden)278      item.click()279      await waitForAnimationFrame()280      assert(menu.isConnected)281      assert.equal(expander, menu.parentElement)282      assert.equal(true, menu.hidden)283    })284  })285  describe('driving a turbo-frame', function () {286    it('merges its [name] and text into its [src] attribute, then writes it to the turbo-frame[src]', async function () {287      document.body.innerHTML = `288        <trix-mentions keys=":" name="query" src="/path" data-turbo-frame="menu">289          <trix-editor></trix-editor>290        </trix-mentions>291        <turbo-frame id="menu" role="listbox" hidden></turbo-frame>292      `293      const expander = document.querySelector('trix-mentions')294      const input = document.querySelector('trix-editor')295      const frame = document.querySelector('turbo-frame')296      triggerInput(input, ':a')297      await waitForAnimationFrame()298      assert.equal(expandURL(frame.getAttribute('src')), expandURL('/path?query=a'))299      assert.equal(expandURL(expander.getAttribute('src')), expandURL('/path'))300    })301    it('writes its [name] and text to the turbo-frame[src]', async function () {302      document.body.innerHTML = `303        <trix-mentions keys=":" name="query" data-turbo-frame="menu">304          <trix-editor></trix-editor>305        </trix-mentions>306        <turbo-frame id="menu" src="/path?c=d" role="listbox" hidden></turbo-frame>307      `308      const expander = document.querySelector('trix-mentions')309      const input = document.querySelector('trix-editor')310      const frame = document.querySelector('turbo-frame')311      triggerInput(input, ':a')312      await waitForAnimationFrame()313      assert.equal(expandURL(frame.getAttribute('src')), expandURL('/path?c=d&query=a'))314      assert.equal(expandURL(expander.getAttribute('src')), null)315    })316    it('does not drive a turbo-frame[disabled]', async function () {317      document.body.innerHTML = `318        <trix-mentions keys=":" name="query" data-turbo-frame="menu">319          <trix-editor></trix-editor>320        </trix-mentions>321        <turbo-frame id="menu" src="/path" role="listbox" hidden disabled></turbo-frame>322      `323      const input = document.querySelector('trix-editor')324      const frame = document.querySelector('turbo-frame')325      triggerInput(input, ':a')326      await waitForAnimationFrame()327      assert.equal(frame.getAttribute('src'), '/path')328      assert(frame.hasAttribute('disabled'))329      assert(frame.hidden)330    })331  })332  describe('use inside a ShadowDOM', function () {333    before(function () {334      customElements.define('wrapper-component', WrapperComponent)335    })336    beforeEach(function () {337      document.body.innerHTML = '<wrapper-component></wrapper-component>'338    })339    it('show results on input', async function () {340      const component = document.querySelector('wrapper-component')341      const input = component.shadowRoot.querySelector('trix-editor')342      input.focus()343      triggerInput(input, '@a')344      await waitForAnimationFrame()345      assert.exists(component.shadowRoot.querySelector('ul'))346    })347  })348})349function once(element, eventName) {350  return new Promise(resolve => {351    element.addEventListener(eventName, resolve, {once: true})352  })353}354function triggerInput(input, value, onlyAppend = false) {355  const editor = input.editor356  const selectionEnd = editor.getPosition()357  const selectedRange = onlyAppend ? selectionEnd : [0, selectionEnd]358  editor.setSelectedRange(selectedRange)359  editor.insertString(value)360  return input.dispatchEvent(new InputEvent('input'))361}362function triggerKeydown(element, key) {363  return element.dispatchEvent(new KeyboardEvent('keydown', {key}))364}365async function waitForAnimationFrame() {366  return new Promise(resolve => {367    window.requestAnimationFrame(resolve)368  })369}370function expandURL(pathnameOrURL) {371  if (pathnameOrURL === null || typeof pathnameOrURL === 'undefined') {372    return null373  } else {374    const url = new URL(pathnameOrURL, document.baseURI)375    return url.toString()376  }...

code-block.ts

Source:code-block.ts

...36    });37    it('should update line numbers if node has changed', () => {38      const oldNode = codeBlock()('this is code');39      const nodeView = codeBlockNodeView(oldNode, null as any, () => -1);40      waitForAnimationFrame();41      expect(nodeView.lineNumberGutter.childElementCount).toBe(1);42      const newNode = codeBlock()('this is code\n');43      expect(nodeView.update(newNode)).toBeTruthy();44      waitForAnimationFrame();45      expect(nodeView.lineNumberGutter.childElementCount).toBe(2);46    });47    it('should update language on contentDOM if changed', () => {48      const oldNode = codeBlock({ language: 'custom' })('this is code');49      const nodeView = codeBlockNodeView(oldNode, null as any, () => -1);50      waitForAnimationFrame();51      const newNode = codeBlock({ language: 'different' })('this is code');52      expect(nodeView.update(newNode)).toBeTruthy();53      waitForAnimationFrame();54      expect(nodeView.contentDOM.getAttribute('data-language')).toBe(55        'different',56      );57    });58  });59  describe('line numbers', () => {60    it('should delay updating lineNumbers until the next animation frame', () => {61      const node = codeBlock()('this is code');62      const nodeView = codeBlockNodeView(node, null as any, () => -1);63      expect(nodeView.lineNumberGutter.childElementCount).toBe(0);64      waitForAnimationFrame();65      expect(nodeView.lineNumberGutter.childElementCount).toBe(1);66    });67    it('should render one spans in lineNumberGutter when node text has no newlines', () => {68      const node = codeBlock()('this is code');69      const nodeView = codeBlockNodeView(node, null as any, () => -1);70      waitForAnimationFrame();71      expect(nodeView.lineNumberGutter.childElementCount).toBe(1);72    });73    it('should render two spans in lineNumberGutter when node text has one newline', () => {74      const node = codeBlock()('this is code\nwith a newline');75      const nodeView = codeBlockNodeView(node, null as any, () => -1);76      waitForAnimationFrame();77      expect(nodeView.lineNumberGutter.childElementCount).toBe(2);78    });79    it('should render one span in lineNumberGutter when node has two newline-less text children', () => {80      const node = codeBlock()('this is code', 'and more text');81      const nodeView = codeBlockNodeView(node, null as any, () => -1);82      waitForAnimationFrame();83      expect(nodeView.lineNumberGutter.childElementCount).toBe(1);84    });85  });86  describe('#ignoreMutation', () => {87    it('should ignore any mutation to the lineNumberGutter dom', () => {88      const node = codeBlock()('this is code');89      const nodeView = codeBlockNodeView(node, null as any, () => -1);90      waitForAnimationFrame();91      const mutation: MutationRecord = {92        target: nodeView.lineNumberGutter,93      } as any;94      expect(nodeView.ignoreMutation(mutation)).toBe(true);95    });96    it('should ignore mutation when lineNumberGutter children change', () => {97      const node = codeBlock()('this is code');98      const nodeView = codeBlockNodeView(node, null as any, () => -1);99      waitForAnimationFrame();100      const mutation: MutationRecord = {101        target: nodeView.lineNumberGutter.lastChild!,102      } as any;103      expect(nodeView.ignoreMutation(mutation)).toBe(true);104    });105    it('should not ignore any mutation to the contentDOM', () => {106      const node = codeBlock()('this is code');107      const nodeView = codeBlockNodeView(node, null as any, () => -1);108      waitForAnimationFrame();109      const mutation: MutationRecord = {110        target: nodeView.contentDOM,111      } as any;112      expect(nodeView.ignoreMutation(mutation)).toBe(false);113    });114  });...

Using AI Code Generation

1var page = require('webpage').create();2page.onConsoleMessage = function(msg) {3  console.log(msg);4};5page.onLoadFinished = function(status) {6  console.log('Status: ' + status);7  page.evaluate(function() {8    console.log('Page title is ' + document.title);9  });10  phantom.exit();11};12  console.log('Status: ' + status);13});

Using AI Code Generation

1module.exports = {2  'Test': function (browser) {3      .waitForAnimationFrame()4      .assert.title('Google')5      .end();6  }7};

Using AI Code Generation

1var wpt = require('wptdriver');2var page = require('webpage').create();3page.open(url, function(status) {4  if (status !== 'success') {5    console.log('Unable to access network');6  } else {7    wpt.waitForAnimationFrame();8    var title = page.evaluate(function() {9      return document.title;10    });11    console.log('Page title is ' + title);12  }13  phantom.exit();14});

Using AI Code Generation

1var wpt = require('wptdriver');2var page = require('webpage').create();3page.open(url, function(status) {4  if (status !== 'success') {5    console.log('Unable to access network');6  } else {7    wpt.waitForAnimationFrame();8    var title = page.evaluate(function() {9      return document.title;10    });11    console.log('Page title is ' + title);12  }13  phantom.exit();14});

Using AI Code Generation

1var wpt = require('webpagetest');2var wpt = new WebPageTest('www.webpagetest.org');3var testId = "testId";4wpt.runTest(url, {5}, function(err, data) {6    if (err) return console.error(err);7    testId = data.data.testId;8    console.log('Test ID: ' + testId);9    wpt.waitForTestStart(testId, function(err, data) {10        if (err) return console.error(err);11        console.log('Test started');12        wpt.waitForFirstViewComplete(testId, function(err, data) {13            if (err) return console.error(err);14            console.log('First view complete');15            wpt.getTestResults(testId, function(err, data) {16                if (err) return console.error(err);17                console.log('First view results: ' + data.data.median.firstView.loadTime);18                wpt.getTestResults(testId, function(err, data) {19                    if (err) return console.error(err);20                    console.log('Second view results: ' + data.data.median.secondView.loadTime);21                    wpt.getVideo(testId, function(err, data) {22                        if (err) return console.error(err);23                        console.log('Video: ' + data);24                    });25                });26            });27        });28    });29});

Using AI Code Generation

1const { waitForAnimationFrame } = require('wpt-api');2module.exports = async function (page, scenario, vp) {3  await waitForAnimationFrame(page, 100);4};5const { waitForNetworkIde } = requir('wp-api');6modul.exports = async function (page, scenario, vp {7  await waitForNetworkIdle(page, 100);8}9constw{pwaitForSelector t = require('wpt-api' =10module.exports = async function (page, scenario, vp) {11  await waitForSelector(page, 'body');12};13const { waitForXPath r = require('wpt-api');14module.exports = async function (page, scenario, vp) {15 ;16const { waitFor } = require('wpt-api');17module.exports = async function (page, scenario, vp) {18  await waitFor(1000   location: 'Dulles:Chrome',19}, function(err, data) {20    if (err) return console.error(err);21    console.log('Test status: ' + data.statusText);22    if (data.statusCode == 200) {23        console.log('Test completed at: ' + data.data.completed);24        console.log('View the test at: ' + data.data.summary);25    }26    wpt.waitForTestCompletion(data.data.testId, 30, function(err, data) {27        if (err) return console.error(err);28        wpt.getTestResults(data.data.testId, function(err, data) {29            if (err) return console.error(err);30            console.log('First View Speed Index: ' + data.data.average.firstView.SpeedIndex);31            console.log('First View Visual Complete: ' + data.data.average.firstView.visualComplete);32        });33    });34});

Using AI Code Generation

1const { waitForAnimationFrame } = require('wpt-api');2module.exports = async function (page, scenario, vp) {3  await waitForAnimationFrame(page, 100);4};5const { waitForNetworkIdle } = require('wpt-api');6module.exports = async function (page, scenario, vp) {7  await waitForNetworkIdle(page, 100);8};9const { waitForSelector } = require('wpt-api');10module.exports = async function (page, scenario, vp) {11  await waitForSelector(page, 'body');12};13const { waitForXPath } = require('wpt-api');14module.exports = async function (page, scenario, vp) {15};16const { waitFor } = require('wpt-api');17module.exports = async function (page, scenario, vp) {18  await waitFor(1000);

Using AI Code Generation

1var wpt = require('wptdriver');2wpt.waitForAnimationFrame(function() {3  wpt.log('animation frame completed');4});5var wpt = require('wptdriver');6wpt.waitForDocumentComplete(function() {7  wpt.log('document complete');8});9var wpt = require('wptdriver');10wpt.waitForDocumentReady(function() {11  wpt.log('document ready');12});13var wpt = require('wptdriver');14wpt.waitForJQuery(function() {15  wpt.log('jQuery ready');16});17var wpt = require('wptdriver');18wpt.waitForJQueryComplete(function() {19  wpt.log('jQuery complete');20});21var wpt = require('wptdriver');22wpt.waitForNetworkIdle(function() {23  wpt.log('network idle');24});25var wpt = require('wptdriver');26wpt.waitForNetworkQuiet(function() {27  wpt.log('network quiet');28});29var wpt = require('wptdriver');30wpt.waitForPageLoad(function() {

Using AI Code Generation

1waitForAnimationFrame(function() {2});3## waitForElement(selector, callback, [timeout])4waitForElement('#my-element', function(element) {5});6## waitForElementToBeRemoved(selector, callback, [timeout])7waitForElementToBeRemoved('#my-element', function() {8});9## waitForFunction(pageFunction, [options])10waitForFunction(function() {11    return document.body.textContent.includes('WPT');12}).then(function() {13});14## waitForNavigation([options])

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.