Unlock 30% off on Manual Testing Annual Plans this Holiday Season.

Copied to Clipboard!

How to use handleRefImageLoadingError method in backstopjs

Best JavaScript code snippet using backstopjs

ImageScrubber.js

Source:ImageScrubber.js

1import React from 'react';2import styled from 'styled-components';3import TwentyTwenty from 'backstop-twentytwenty';4import { colors, fonts, shadows } from '../../styles';5const ScrubberViewBtn = styled.button`6  margin: 1em;7  padding: 10px 16px;8  height: 32px;9  background-color: ${props =>10    props.selected ? colors.secondaryText : colors.lightGray};11  color: ${props => (props.selected ? colors.lightGray : colors.secondaryText)};12  border-radius: 3px;13  text-transform: uppercase;14  font-family: ${fonts.latoRegular};15  text-align: center;16  font-size: 12px;17  border: none;18  box-shadow: ${props => (props.selected ? 'none' : shadows.shadow01)};19  transition: all 100ms ease-in-out;20  &:focus {21    outline: none;22  }23  &:hover {24    cursor: pointer;25    box-shadow: ${props => (!props.selected ? shadows.shadow02 : '')};26  }27  &.loadingDiverged {28    animation: blink normal 1200ms infinite ease-in-out;29    background-color: green;30  }31  @keyframes blink {32    0% {33      opacity: 1;34    }35    50% {36      opacity: 0.75;37    }38    100% {39      opacity: 1;40    }41  }42`;43const Wrapper = styled.div`44  cursor: ew-resize;45  padding-bottom: 20px;46  overflow: hidden;47  .testImage {48    opacity: 1;49  }50  .testImage,51  .refImage {52    max-width: 100%;53  }54`;55const WrapTitle = styled.div`56  display: flex;57  justify-content: center;58  padding-top: 10px;59  padding-bottom: 10px;60  position: sticky;61  top: 0;62  z-index: 5;63  background: white;64  border-bottom: 1px solid #e4e4e4;65`;66const SliderBar = styled.div`67  height: 100%;68  width: 5px;69  background: ${colors.red};70  transform: translate(-2.5px, 0);71`;72export default class ImageScrubber extends React.Component {73  constructor (props) {74    super(props);75    this.state = {76      isRefImageMissing: false,77      isLoading: false78    };79    this.handleRefImageLoadingError = this.handleRefImageLoadingError.bind(this);80    this.loadingDiverge = this.loadingDiverge.bind(this);81  }82  handleRefImageLoadingError () {83    this.setState({84      isRefImageMissing: true85    });86  }87  loadingDiverge (torf) {88    this.setState({89      isLoading: !!torf90    });91  }92  render () {93    const {94      scrubberModalMode,95      testImageType,96      position,97      refImage,98      testImage,99      diffImage,100      divergedImage,101      showScrubberTestImage,102      showScrubberRefImage,103      showScrubberDiffImage,104      showScrubberDivergedImage,105      showScrubber106    } = this.props;107    const scrubberTestImageSlug = this.props[testImageType];108    const hasDiff = diffImage && diffImage.length > 0;109    // only show the diverged option if the report comes from web server110    function showDivergedOption () {111      return /remote/.test(location.search);112    }113    // TODO: halp. i don't haz context.114    const that = this;115    function divergedWorker () {116      if (that.state.isLoading) {117        console.error('Diverged process is already running. Please hang on.');118        return;119      }120      if (divergedImage) {121        showScrubberDivergedImage(divergedImage);122        return;123      }124      showScrubberDivergedImage('');125      that.loadingDiverge(true);126      const refImg = document.images.isolatedRefImage;127      const testImg = document.images.isolatedTestImage;128      const h = refImg.height;129      const w = refImg.width;130      const worker = new Worker('divergedWorker.js');131      worker.addEventListener(132        'message',133        function (result) {134          const divergedImgData = result.data;135          let clampedImgData = getEmptyImgData(h, w);136          for (let i = divergedImgData.length - 1; i >= 0; i--) {137            clampedImgData.data[i] = divergedImgData[i];138          }139          const lcsDiffResult = imageToCanvasContext(null, h, w);140          lcsDiffResult.putImageData(clampedImgData, 0, 0);141          const divergedImageResult = lcsDiffResult.canvas.toDataURL(142            'image/png'143          );144          showScrubberDivergedImage(divergedImageResult);145          that.loadingDiverge(false);146        },147        false148      );149      worker.addEventListener('error', function (error) {150        showScrubberDivergedImage('');151        that.loadingDiverge(false);152        console.error(error);153      });154      worker.postMessage({155        divergedInput: [156          getImgDataDataFromContext(imageToCanvasContext(refImg)),157          getImgDataDataFromContext(imageToCanvasContext(testImg)),158          h,159          w160        ]161      });162    }163    const dontUseScrubberView = this.state.isRefImageMissing || !hasDiff;164    const showIsolatedRefImage = !hasDiff && scrubberModalMode === 'SHOW_SCRUBBER_REF_IMAGE';165    const showIsolatedTestImage = !hasDiff && scrubberModalMode === 'SHOW_SCRUBBER_TEST_IMAGE';166    return (167      <div>168        <WrapTitle>169          {hasDiff && (170            <div>171              <ScrubberViewBtn172                selected={scrubberModalMode === 'SHOW_SCRUBBER_REF_IMAGE'}173                onClick={showScrubberRefImage}174              >175                REFERENCE176              </ScrubberViewBtn>177              <ScrubberViewBtn178                selected={scrubberModalMode === 'SHOW_SCRUBBER_TEST_IMAGE'}179                onClick={showScrubberTestImage}180              >181                TEST182              </ScrubberViewBtn>183              <ScrubberViewBtn184                selected={scrubberModalMode === 'SHOW_SCRUBBER_DIFF_IMAGE'}185                onClick={showScrubberDiffImage}186              >187                DIFF188              </ScrubberViewBtn>189              <ScrubberViewBtn190                selected={scrubberModalMode === 'SCRUB'}191                onClick={showScrubber}192              >193                SCRUBBER194              </ScrubberViewBtn>195              <ScrubberViewBtn196                selected={scrubberModalMode === 'SHOW_SCRUBBER_DIVERGED_IMAGE'}197                onClick={divergedWorker}198                className={this.state.isLoading ? 'loadingDiverged' : ''}199                style={{200                  display: showDivergedOption() ? '' : 'none'201                }}202              >203                {this.state.isLoading ? 'DIVERGING!' : 'DIVERGED'}204              </ScrubberViewBtn>205            </div>206          )}207        </WrapTitle>208        <Wrapper>209          <img210            id="isolatedRefImage"211            src={refImage}212            style={{213              margin: 'auto',214              display: showIsolatedRefImage ? 'block' : 'none'215            }}216          />217          <img218            id="isolatedTestImage"219            className="testImage"220            src={testImage}221            style={{222              margin: 'auto',223              display: showIsolatedTestImage ? 'block' : 'none'224            }}225          />226          <img227            className="diffImage"228            src={diffImage}229            style={{230              margin: 'auto',231              display: dontUseScrubberView ? 'block' : 'none'232            }}233          />234          <div235            style={{236              display: dontUseScrubberView ? 'none' : 'block'237            }}238          >239            <TwentyTwenty240              verticalAlign="top"241              minDistanceToBeginInteraction={0}242              maxAngleToBeginInteraction={Infinity}243              initialPosition={position}244              newPosition={position}245            >246              <img247                id="scrubberRefImage"248                className="refImage"249                src={refImage}250                onError={this.handleRefImageLoadingError}251              />252              <img253                id="scrubberTestImage"254                className="testImage"255                src={scrubberTestImageSlug}256              />257              <SliderBar className="slider" />258            </TwentyTwenty>259          </div>260        </Wrapper>261      </div>262    );263  }264}265/**266 * ========= DIVERGED HELPERS ========267 */268function getImgDataDataFromContext (context) {269  return context.getImageData(0, 0, context.canvas.width, context.canvas.height)270    .data;271}272function getEmptyImgData (h, w) {273  var o = imageToCanvasContext(null, h, w);274  return o.createImageData(w, h);275}276function imageToCanvasContext (_img, h, w) {277  let img = _img;278  if (!_img) {279    img = { height: h, width: w };280  }281  const canvas = document.createElement('canvas');282  canvas.width = img.width;283  canvas.height = img.height;284  const context = canvas.getContext('2d');285  if (_img) {286    context.drawImage(img, 0, 0);287  }288  return context;...

Using AI Code Generation

1module.exports = {2    {3    },4    {5    },6    {7    },8    {9    },10    {11    }12    {13    }14  "paths": {15  },16  "engineOptions": {17  },18}

Using AI Code Generation

1const backstop = require('backstopjs');2const handleRefImageLoadingError = require('backstopjs/handler/referenceMissing.js');3const handleTestImageLoadingError = require('backstopjs/handler/testMissing.js');4const handleTestFail = require('backstopjs/handler/testFailed.js');5const handleTestPass = require('backstopjs/handler/testPass.js');6const handleOpenReport = require('backstopjs/handler/openReport.js');7const handleExit = require('backstopjs/handler/exit.js');8const handleCreateBitmaps = require('backstopjs/handler/createBitmaps.js');9const handleAcceptAll = require('backstopjs/handler/acceptAll.js');10const handleAccept = require('backstopjs/handler/accept.js');11const handleSkip = require('backstopjs/handler/skip.js');12const handleHelp = require('backstopjs/handler/help.js');13const handleAbort = require('backstopjs/handler/abort.js');14const handleReport = require('backstopjs/handler/report.js');15const backstopjs = require('backstopjs');16const backstopConfig = require('./backstop.js');17const backstopUtils = require('backstopjs/core/util');18const backstopEngine = require('backstopjs/core/engine');19const backstopCommands = require('backstopjs/command');20const backstopReport = require('backstopjs/report');21const backstopjs = require('backstopjs');22const backstopConfig = require('./backstop.js');23const backstopUtils = require('backstopjs/core/util');24const backstopEngine = require('backstopjs/core/engine');25const backstopCommands = require('backstopjs/command');26const backstopReport = require('backstopjs/report');27const backstopjs = require('backstopjs');28const backstopConfig = require('./backstop.js');29const backstopUtils = require('backstopjs/core/util');30const backstopEngine = require('backstopjs/core/engine');

Using AI Code Generation

1const backstop = require('backstopjs');2const config = require('./backstop.json');3const handleRefImageLoadingError = (err, refData) => {4  console.log('refData', refData);5  console.log('error', err);6};7backstop('test', {8}).catch((error) => {9  console.log('error', error);10});

Using AI Code Generation

1var backstopjs = require('backstopjs');2var config = require('./backstop.json');3var handleRefImageLoadingError = backstopjs.util.handleRefImageLoadingError;4handleRefImageLoadingError(function(err, refData) {5    console.log('handleRefImageLoadingError', err, refData);6});7backstopjs('test', {8});9| `engineOptions` | A JSON object that will be passed to the engine. | `{}` |

Using AI Code Generation

1'use strict';2const backstopjs = require('backstopjs');3const handleRefImageLoadingError = backstopjs.core.util.handleRefImageLoadingError;4const config = require('./backstop.json');5const configEngine = require('./backstop-engine.json');6const retryCount = configEngine.retryCount || 1;7const retryTimeout = configEngine.retryTimeout || 1000;8backstopjs('reference', {9  async handleRefImageLoadingError(error, ref) {10    let retry = 0;11    while (retry < retryCount) {12      try {13        await handleRefImageLoadingError(error, ref);14        return;15      } catch (e) {16        retry++;17        await new Promise((resolve) => setTimeout(resolve, retryTimeout));18      }19    }20    throw error;21  }22});23{24    {25    },26    {27    },28    {29    },30    {31    }32    {

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.