// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`should match exact snapshot on each step 1`] = `
<BrowserRouter>
  <Router
    history={
      Object {
        "action": "POP",
        "block": [Function],
        "createHref": [Function],
        "go": [Function],
        "goBack": [Function],
        "goForward": [Function],
        "length": 1,
        "listen": [Function],
        "location": Object {
          "hash": "",
          "pathname": "/",
          "search": "",
          "state": undefined,
        },
        "push": [Function],
        "replace": [Function],
      }
    }
  >
    <IntermediateStep
      activeStep={0}
      handleBack={[Function]}
      handleNext={[Function]}
      handleNextApplicationWindow={[Function]}
      handleNextEntireScreen={[Function]}
      resetPendingConnectionDevice={[Function]}
      resetUserAllowedConnection={[Function]}
      steps={
        Array [
          "a",
          "b",
          "c",
        ]
      }
    >
      <Col
        style={
          Object {
            "alignItems": "center",
            "display": "flex",
            "flexDirection": "column",
            "height": "260px",
            "justifyContent": "center",
            "width": "100%",
          }
        }
        xs={12}
      >
        <div
          className="col-xs-12"
          style={
            Object {
              "alignItems": "center",
              "display": "flex",
              "flexDirection": "column",
              "height": "260px",
              "justifyContent": "center",
              "width": "100%",
            }
          }
        >
          <ScanQRStep>
            <div
              style={
                Object {
                  "textAlign": "center",
                }
              }
            >
              <Blueprint3.Text
                ellipsize={false}
                tagName="div"
              >
                <div
                  className=""
                >
                  <span
                    style={
                      Object {
                        "backgroundColor": "#00f99273",
                        "borderRadius": "20px",
                        "fontWeight": 900,
                        "paddingLeft": "8px",
                        "paddingRight": "8px",
                      }
                    }
                  />
                </div>
              </Blueprint3.Text>
              <Blueprint3.Text
                className="bp3-text"
                ellipsize={false}
                tagName="div"
              >
                <div
                  className="bp3-text"
                />
              </Blueprint3.Text>
            </div>
            <div>
              <Blueprint3.Tooltip
                content=""
                hoverCloseDelay={0}
                hoverOpenDelay={100}
                minimal={false}
                position="left"
                transitionDuration={100}
              >
                <Blueprint3.Popover
                  autoFocus={false}
                  boundary="scrollParent"
                  canEscapeKeyClose={false}
                  captureDismiss={false}
                  content=""
                  defaultIsOpen={false}
                  disabled={false}
                  enforceFocus={false}
                  fill={false}
                  hasBackdrop={false}
                  hoverCloseDelay={0}
                  hoverOpenDelay={100}
                  inheritDarkTheme={true}
                  interactionKind="hover-target"
                  lazy={true}
                  minimal={false}
                  modifiers={
                    Object {
                      "arrow": Object {
                        "enabled": true,
                      },
                    }
                  }
                  openOnTargetFocus={true}
                  popoverClassName="bp3-tooltip"
                  position="left"
                  targetTagName="span"
                  transitionDuration={100}
                  usePortal={true}
                  wrapperTagName="span"
                >
                  <Manager>
                    <span
                      className="bp3-popover-wrapper"
                    >
                      <Reference
                        innerRef={[Function]}
                      >
                        <InnerReference
                          innerRef={[Function]}
                          setReferenceNode={[Function]}
                        >
                          <Blueprint3.ResizeSensor
                            onResize={[Function]}
                          >
                            <span
                              className="bp3-popover-target"
                              onBlur={[Function]}
                              onFocus={[Function]}
                              onMouseEnter={[Function]}
                              onMouseLeave={[Function]}
                            >
                              <Blueprint3.Button
                                className="makeStyles-smallQRCode-1"
                                id="magnify-qr-code-button"
                                key=".0"
                                onClick={[Function]}
                                tabIndex={0}
                              >
                                <button
                                  className="bp3-button makeStyles-smallQRCode-1"
                                  id="magnify-qr-code-button"
                                  onBlur={[Function]}
                                  onClick={[Function]}
                                  onKeyDown={[Function]}
                                  onKeyUp={[Function]}
                                  tabIndex={0}
                                  type="button"
                                >
                                  <Blueprint3.Icon
                                    key="leftIcon"
                                  />
                                  <span
                                    className="bp3-button-text"
                                    key="text"
                                  >
                                    <QRCode
                                      bgColor="rgba(0,0,0,0.0)"
                                      fgColor="#000000"
                                      imageSettings={
                                        Object {
                                          "height": 40,
                                          "src": "http://127.0.0.1:3000/logo192.png",
                                          "width": 40,
                                        }
                                      }
                                      includeMargin={false}
                                      level="H"
                                      renderAs="svg"
                                      size={128}
                                      value="http://:3000/"
                                    >
                                      <QRCodeSVG
                                        bgColor="rgba(0,0,0,0.0)"
                                        fgColor="#000000"
                                        imageSettings={
                                          Object {
                                            "height": 40,
                                            "src": "http://127.0.0.1:3000/logo192.png",
                                            "width": 40,
                                          }
                                        }
                                        includeMargin={false}
                                        level="H"
                                        size={128}
                                        value="http://:3000/"
                                      >
                                        <svg
                                          height={128}
                                          shapeRendering="crispEdges"
                                          viewBox="0 0 25 25"
                                          width={128}
                                        >
                                          <path
                                            d="M0,0 h25v25H0z"
                                            fill="rgba(0,0,0,0.0)"
                                          />
                                          <path
                                            d="M0 0h7v1H0zM8 0h1v1H8zM10 0h1v1H10zM12 0h1v1H12zM14 0h2v1H14zM18,0 h7v1H18zM0 1h1v1H0zM6 1h1v1H6zM13 1h1v1H13zM15 1h2v1H15zM18 1h1v1H18zM24,1 h1v1H24zM0 2h1v1H0zM2 2h3v1H2zM6 2h1v1H6zM8 2h3v1H8zM12 2h1v1H12zM14 2h2v1H14zM18 2h1v1H18zM20 2h3v1H20zM24,2 h1v1H24zM0 3h1v1H0zM2 3h3v1H2zM6 3h1v1H6zM9 3h4v1H9zM16 3h1v1H16zM18 3h1v1H18zM20 3h3v1H20zM24,3 h1v1H24zM0 4h1v1H0zM2 4h3v1H2zM6 4h1v1H6zM8 4h3v1H8zM15 4h1v1H15zM18 4h1v1H18zM20 4h3v1H20zM24,4 h1v1H24zM0 5h1v1H0zM6 5h1v1H6zM9 5h1v1H9zM11 5h1v1H11zM13 5h1v1H13zM18 5h1v1H18zM24,5 h1v1H24zM0 6h7v1H0zM8 6h1v1H8zM10 6h1v1H10zM12 6h1v1H12zM14 6h1v1H14zM16 6h1v1H16zM18,6 h7v1H18zM8 7h2v1H8zM12 7h4v1H12zM5 8h2v1H5zM10 8h5v1H10zM18 8h1v1H18zM20 8h1v1H20zM22 8h1v1H22zM24,8 h1v1H24zM1 9h1v1H1zM3 9h2v1H3zM7 9h2v1H7zM11 9h1v1H11zM13 9h1v1H13zM16 9h2v1H16zM20 9h4v1H20zM3 10h4v1H3zM11 10h4v1H11zM16 10h1v1H16zM18 10h4v1H18zM23,10 h2v1H23zM2 11h1v1H2zM8 11h3v1H8zM12 11h1v1H12zM14 11h3v1H14zM18 11h1v1H18zM21 11h1v1H21zM24,11 h1v1H24zM0 12h2v1H0zM6 12h1v1H6zM8 12h1v1H8zM10 12h3v1H10zM16 12h3v1H16zM24,12 h1v1H24zM0 13h1v1H0zM4 13h1v1H4zM7 13h1v1H7zM11 13h1v1H11zM14 13h1v1H14zM16 13h2v1H16zM23 13h1v1H23zM0 14h1v1H0zM6 14h3v1H6zM11 14h1v1H11zM13 14h2v1H13zM18 14h1v1H18zM20 14h2v1H20zM23,14 h2v1H23zM0 15h1v1H0zM2 15h1v1H2zM5 15h1v1H5zM8 15h4v1H8zM13 15h1v1H13zM15 15h1v1H15zM18 15h1v1H18zM22 15h1v1H22zM24,15 h1v1H24zM0 16h1v1H0zM2 16h1v1H2zM5 16h3v1H5zM10 16h1v1H10zM12 16h1v1H12zM14 16h1v1H14zM16 16h5v1H16zM22 16h1v1H22zM8 17h1v1H8zM10 17h2v1H10zM14 17h1v1H14zM16 17h1v1H16zM20 17h1v1H20zM22 17h1v1H22zM0 18h7v1H0zM14 18h3v1H14zM18 18h1v1H18zM20 18h2v1H20zM24,18 h1v1H24zM0 19h1v1H0zM6 19h1v1H6zM8 19h1v1H8zM10 19h2v1H10zM14 19h1v1H14zM16 19h1v1H16zM20 19h1v1H20zM23,19 h2v1H23zM0 20h1v1H0zM2 20h3v1H2zM6 20h1v1H6zM9 20h3v1H9zM15 20h9v1H15zM0 21h1v1H0zM2 21h3v1H2zM6 21h1v1H6zM12 21h4v1H12zM18 21h2v1H18zM21 21h1v1H21zM24,21 h1v1H24zM0 22h1v1H0zM2 22h3v1H2zM6 22h1v1H6zM9 22h1v1H9zM13 22h1v1H13zM16 22h2v1H16zM22 22h1v1H22zM24,22 h1v1H24zM0 23h1v1H0zM6 23h1v1H6zM10 23h1v1H10zM12 23h2v1H12zM16 23h1v1H16zM18 23h3v1H18zM24,23 h1v1H24zM0 24h7v1H0zM12 24h2v1H12zM15 24h4v1H15zM21 24h1v1H21zM24,24 h1v1H24z"
                                            fill="#000000"
                                          />
                                          <image
                                            height={7.8125}
                                            preserveAspectRatio="none"
                                            width={7.8125}
                                            x={8.59375}
                                            xlinkHref="http://127.0.0.1:3000/logo192.png"
                                            y={8.59375}
                                          />
                                        </svg>
                                      </QRCodeSVG>
                                    </QRCode>
                                  </span>
                                  <Blueprint3.Icon
                                    key="rightIcon"
                                  />
                                </button>
                              </Blueprint3.Button>
                            </span>
                          </Blueprint3.ResizeSensor>
                        </InnerReference>
                      </Reference>
                      <Blueprint3.Overlay
                        autoFocus={false}
                        backdropClassName="bp3-popover-backdrop"
                        backdropProps={Object {}}
                        canEscapeKeyClose={false}
                        canOutsideClickClose={false}
                        enforceFocus={false}
                        hasBackdrop={false}
                        isOpen={false}
                        lazy={true}
                        onClose={[Function]}
                        transitionDuration={100}
                        transitionName="bp3-popover"
                        usePortal={true}
                      />
                    </span>
                  </Manager>
                </Blueprint3.Popover>
              </Blueprint3.Tooltip>
            </div>
            <div
              style={
                Object {
                  "marginBottom": "10px",
                }
              }
            >
              <Blueprint3.Text
                className="bp3-text-muted"
                ellipsize={false}
                tagName="div"
              >
                <div
                  className="bp3-text-muted"
                >
                  :
                </div>
              </Blueprint3.Text>
            </div>
            <Blueprint3.Tooltip
              content=""
              hoverCloseDelay={0}
              hoverOpenDelay={100}
              minimal={false}
              position="left"
              transitionDuration={100}
            >
              <Blueprint3.Popover
                autoFocus={false}
                boundary="scrollParent"
                canEscapeKeyClose={false}
                captureDismiss={false}
                content=""
                defaultIsOpen={false}
                disabled={false}
                enforceFocus={false}
                fill={false}
                hasBackdrop={false}
                hoverCloseDelay={0}
                hoverOpenDelay={100}
                inheritDarkTheme={true}
                interactionKind="hover-target"
                lazy={true}
                minimal={false}
                modifiers={
                  Object {
                    "arrow": Object {
                      "enabled": true,
                    },
                  }
                }
                openOnTargetFocus={true}
                popoverClassName="bp3-tooltip"
                position="left"
                targetTagName="span"
                transitionDuration={100}
                usePortal={true}
                wrapperTagName="span"
              >
                <Manager>
                  <span
                    className="bp3-popover-wrapper"
                  >
                    <Reference
                      innerRef={[Function]}
                    >
                      <InnerReference
                        innerRef={[Function]}
                        setReferenceNode={[Function]}
                      >
                        <Blueprint3.ResizeSensor
                          onResize={[Function]}
                        >
                          <span
                            className="bp3-popover-target"
                            onBlur={[Function]}
                            onFocus={[Function]}
                            onMouseEnter={[Function]}
                            onMouseLeave={[Function]}
                          >
                            <Blueprint3.Button
                              className=""
                              icon="duplicate"
                              intent="primary"
                              key=".0"
                              onClick={[Function]}
                              style={
                                Object {
                                  "borderRadius": "100px",
                                }
                              }
                              tabIndex={0}
                            >
                              <button
                                className="bp3-button bp3-intent-primary"
                                onBlur={[Function]}
                                onClick={[Function]}
                                onKeyDown={[Function]}
                                onKeyUp={[Function]}
                                style={
                                  Object {
                                    "borderRadius": "100px",
                                  }
                                }
                                tabIndex={0}
                                type="button"
                              >
                                <Blueprint3.Icon
                                  icon="duplicate"
                                  key="leftIcon"
                                >
                                  <span
                                    className="bp3-icon bp3-icon-duplicate"
                                    icon="duplicate"
                                  >
                                    <svg
                                      data-icon="duplicate"
                                      height={16}
                                      viewBox="0 0 16 16"
                                      width={16}
                                    >
                                      <desc>
                                        duplicate
                                      </desc>
                                      <path
                                        d="M15 0H5c-.55 0-1 .45-1 1v2h2V2h8v7h-1v2h2c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-4 4H1c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1zm-1 10H2V6h8v8z"
                                        fillRule="evenodd"
                                        key="0"
                                      />
                                    </svg>
                                  </span>
                                </Blueprint3.Icon>
                                <span
                                  className="bp3-button-text"
                                  key="text"
                                >
                                  http://:3000/
                                </span>
                                <Blueprint3.Icon
                                  key="rightIcon"
                                />
                              </button>
                            </Blueprint3.Button>
                          </span>
                        </Blueprint3.ResizeSensor>
                      </InnerReference>
                    </Reference>
                    <Blueprint3.Overlay
                      autoFocus={false}
                      backdropClassName="bp3-popover-backdrop"
                      backdropProps={Object {}}
                      canEscapeKeyClose={false}
                      canOutsideClickClose={false}
                      enforceFocus={false}
                      hasBackdrop={false}
                      isOpen={false}
                      lazy={true}
                      onClose={[Function]}
                      transitionDuration={100}
                      transitionName="bp3-popover"
                      usePortal={true}
                    />
                  </span>
                </Manager>
              </Blueprint3.Popover>
            </Blueprint3.Tooltip>
            <Blueprint3.Dialog
              canEscapeKeyClose={true}
              canOutsideClickClose={true}
              className="makeStyles-bigQRCodeDialogRoot-3"
              id="bp3-qr-code-dialog-root"
              isOpen={false}
              onClose={[Function]}
              style={
                Object {
                  "position": "relative",
                  "top": "0px",
                }
              }
              transitionDuration={0}
              usePortal={false}
            >
              <Blueprint3.Overlay
                autoFocus={true}
                backdropProps={Object {}}
                canEscapeKeyClose={true}
                canOutsideClickClose={true}
                className="bp3-overlay-scroll-container"
                enforceFocus={true}
                hasBackdrop={true}
                id="bp3-qr-code-dialog-root"
                isOpen={false}
                lazy={true}
                onClose={[Function]}
                style={
                  Object {
                    "position": "relative",
                    "top": "0px",
                  }
                }
                transitionDuration={0}
                transitionName="bp3-overlay"
                usePortal={false}
              />
            </Blueprint3.Dialog>
          </ScanQRStep>
          <Blueprint3.Button
            onClick={[Function]}
          >
            <button
              className="bp3-button"
              onBlur={[Function]}
              onClick={[Function]}
              onKeyDown={[Function]}
              onKeyUp={[Function]}
              type="button"
            >
              <Blueprint3.Icon
                key="leftIcon"
              />
              <span
                className="bp3-button-text"
                key="text"
              >
                Connect Test Device
              </span>
              <Blueprint3.Icon
                key="rightIcon"
              />
            </button>
          </Blueprint3.Button>
          <Row
            style={
              Object {
                "display": "none",
              }
            }
          >
            <div
              className="row"
              style={
                Object {
                  "display": "none",
                }
              }
            >
              <Blueprint3.Button
                icon="chevron-left"
                intent="danger"
                onClick={[Function]}
                style={
                  Object {
                    "borderRadius": "100px",
                    "marginTop": "10px",
                  }
                }
                text=""
              >
                <button
                  className="bp3-button bp3-intent-danger"
                  onBlur={[Function]}
                  onClick={[Function]}
                  onKeyDown={[Function]}
                  onKeyUp={[Function]}
                  style={
                    Object {
                      "borderRadius": "100px",
                      "marginTop": "10px",
                    }
                  }
                  type="button"
                >
                  <Blueprint3.Icon
                    icon="chevron-left"
                    key="leftIcon"
                  >
                    <span
                      className="bp3-icon bp3-icon-chevron-left"
                      icon="chevron-left"
                    >
                      <svg
                        data-icon="chevron-left"
                        height={16}
                        viewBox="0 0 16 16"
                        width={16}
                      >
                        <desc>
                          chevron-left
                        </desc>
                        <path
                          d="M7.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71l-4 4C5.11 7.47 5 7.72 5 8c0 .28.11.53.29.71l4 4a1.003 1.003 0 001.42-1.42L7.41 8z"
                          fillRule="evenodd"
                          key="0"
                        />
                      </svg>
                    </span>
                  </Blueprint3.Icon>
                  <Blueprint3.Icon
                    key="rightIcon"
                  />
                </button>
              </Blueprint3.Button>
            </div>
          </Row>
        </div>
      </Col>
    </IntermediateStep>
  </Router>
</BrowserRouter>
`;

exports[`should match exact snapshot on each step 2`] = `
<BrowserRouter>
  <Router
    history={
      Object {
        "action": "POP",
        "block": [Function],
        "createHref": [Function],
        "go": [Function],
        "goBack": [Function],
        "goForward": [Function],
        "length": 1,
        "listen": [Function],
        "location": Object {
          "hash": "",
          "pathname": "/",
          "search": "",
          "state": undefined,
        },
        "push": [Function],
        "replace": [Function],
      }
    }
  >
    <IntermediateStep
      activeStep={1}
      handleBack={[Function]}
      handleNext={[Function]}
      handleNextApplicationWindow={[Function]}
      handleNextEntireScreen={[Function]}
      resetPendingConnectionDevice={[Function]}
      resetUserAllowedConnection={[Function]}
      steps={
        Array [
          "a",
          "b",
          "c",
        ]
      }
    >
      <Col
        style={
          Object {
            "alignItems": "center",
            "display": "flex",
            "flexDirection": "column",
            "height": "260px",
            "justifyContent": "center",
            "width": "100%",
          }
        }
        xs={12}
      >
        <div
          className="col-xs-12"
          style={
            Object {
              "alignItems": "center",
              "display": "flex",
              "flexDirection": "column",
              "height": "260px",
              "justifyContent": "center",
              "width": "100%",
            }
          }
        >
          <Row
            center="xs"
          >
            <div
              className="row center-xs"
            >
              <div
                style={
                  Object {
                    "marginBottom": "10px",
                  }
                }
              >
                <Blueprint3.Text
                  ellipsize={false}
                  tagName="div"
                >
                  <div
                    className=""
                  />
                </Blueprint3.Text>
              </div>
            </div>
          </Row>
          <ChooseAppOrScreeenStep
            handleNextApplicationWindow={[Function]}
            handleNextEntireScreen={[Function]}
          >
            <Row
              style={
                Object {
                  "width": "100%",
                }
              }
            >
              <div
                className="row"
                style={
                  Object {
                    "width": "100%",
                  }
                }
              >
                <Col
                  xs={12}
                >
                  <div
                    className="col-xs-12"
                  >
                    <Row
                      center="xs"
                    >
                      <div
                        className="row center-xs"
                      >
                        <Col
                          xs={6}
                        >
                          <div
                            className="col-xs-6"
                          >
                            <Row
                              center="xs"
                            >
                              <div
                                className="row center-xs"
                              >
                                <Col>
                                  <div
                                    className=""
                                  >
                                    <ShareAppOrScreenControlGroup
                                      handleNextApplicationWindow={[Function]}
                                      handleNextEntireScreen={[Function]}
                                    >
                                      <Blueprint3.ControlGroup
                                        className="makeStyles-controlGroupRoot-4"
                                        fill={true}
                                        id="share-screen-or-app-btn-group"
                                        style={
                                          Object {
                                            "width": "380px",
                                          }
                                        }
                                        vertical={false}
                                      >
                                        <div
                                          className="bp3-control-group bp3-fill makeStyles-controlGroupRoot-4"
                                          id="share-screen-or-app-btn-group"
                                          style={
                                            Object {
                                              "width": "380px",
                                            }
                                          }
                                        >
                                          <Blueprint3.Button
                                            className="makeStyles-shareEntireScreenButton-5"
                                            intent="primary"
                                            onClick={[Function]}
                                          >
                                            <button
                                              className="bp3-button bp3-intent-primary makeStyles-shareEntireScreenButton-5"
                                              onBlur={[Function]}
                                              onClick={[Function]}
                                              onKeyDown={[Function]}
                                              onKeyUp={[Function]}
                                              type="button"
                                            >
                                              <Blueprint3.Icon
                                                key="leftIcon"
                                              />
                                              <span
                                                className="bp3-button-text"
                                                key="text"
                                              >
                                                <Blueprint3.Icon
                                                  className="makeStyles-shareEntireScreenButtonIcon-6"
                                                  color="white"
                                                  icon="desktop"
                                                  iconSize={100}
                                                >
                                                  <span
                                                    className="bp3-icon bp3-icon-desktop makeStyles-shareEntireScreenButtonIcon-6"
                                                    icon="desktop"
                                                  >
                                                    <svg
                                                      data-icon="desktop"
                                                      fill="white"
                                                      height={100}
                                                      viewBox="0 0 20 20"
                                                      width={100}
                                                    >
                                                      <desc>
                                                        desktop
                                                      </desc>
                                                      <path
                                                        d="M19 0H1C.45 0 0 .45 0 1v13c0 .55.45 1 1 1h5.67l-.5 3H5c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1h-1.17l-.5-3H19c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-1 13H2V2h16v11z"
                                                        fillRule="evenodd"
                                                        key="0"
                                                      />
                                                    </svg>
                                                  </span>
                                                </Blueprint3.Icon>
                                                <Blueprint3.Text
                                                  className="bp3-running-text"
                                                  ellipsize={false}
                                                  tagName="div"
                                                >
                                                  <div
                                                    className="bp3-running-text"
                                                  />
                                                </Blueprint3.Text>
                                              </span>
                                              <Blueprint3.Icon
                                                key="rightIcon"
                                              />
                                            </button>
                                          </Blueprint3.Button>
                                          <Blueprint3.Button
                                            className="makeStyles-shareAppButton-7"
                                            intent="primary"
                                            onClick={[Function]}
                                          >
                                            <button
                                              className="bp3-button bp3-intent-primary makeStyles-shareAppButton-7"
                                              onBlur={[Function]}
                                              onClick={[Function]}
                                              onKeyDown={[Function]}
                                              onKeyUp={[Function]}
                                              type="button"
                                            >
                                              <Blueprint3.Icon
                                                key="leftIcon"
                                              />
                                              <span
                                                className="bp3-button-text"
                                                key="text"
                                              >
                                                <Blueprint3.Icon
                                                  className="makeStyles-shareAppButtonIcon-8"
                                                  color="white"
                                                  icon="application"
                                                  iconSize={100}
                                                >
                                                  <span
                                                    className="bp3-icon bp3-icon-application makeStyles-shareAppButtonIcon-8"
                                                    icon="application"
                                                  >
                                                    <svg
                                                      data-icon="application"
                                                      fill="white"
                                                      height={100}
                                                      viewBox="0 0 20 20"
                                                      width={100}
                                                    >
                                                      <desc>
                                                        application
                                                      </desc>
                                                      <path
                                                        d="M3.5 9h9c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-9c-.28 0-.5.22-.5.5s.22.5.5.5zm0 2h5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-5c-.28 0-.5.22-.5.5s.22.5.5.5zM19 1H1c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h18c.55 0 1-.45 1-1V2c0-.55-.45-1-1-1zm-1 16H2V6h16v11zM3.5 13h7c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-7c-.28 0-.5.22-.5.5s.22.5.5.5z"
                                                        fillRule="evenodd"
                                                        key="0"
                                                      />
                                                    </svg>
                                                  </span>
                                                </Blueprint3.Icon>
                                                <Blueprint3.Text
                                                  className="bp3-running-text"
                                                  ellipsize={false}
                                                  tagName="div"
                                                >
                                                  <div
                                                    className="bp3-running-text"
                                                  />
                                                </Blueprint3.Text>
                                              </span>
                                              <Blueprint3.Icon
                                                key="rightIcon"
                                              />
                                            </button>
                                          </Blueprint3.Button>
                                          <Blueprint3.Button
                                            active={true}
                                            className="makeStyles-orDecorationButton-9"
                                            style={
                                              Object {
                                                "zIndex": 999,
                                              }
                                            }
                                          >
                                            <button
                                              className="bp3-button bp3-active makeStyles-orDecorationButton-9"
                                              onBlur={[Function]}
                                              onKeyDown={[Function]}
                                              onKeyUp={[Function]}
                                              style={
                                                Object {
                                                  "zIndex": 999,
                                                }
                                              }
                                              type="button"
                                            >
                                              <Blueprint3.Icon
                                                key="leftIcon"
                                              />
                                              <Blueprint3.Icon
                                                key="rightIcon"
                                              />
                                            </button>
                                          </Blueprint3.Button>
                                        </div>
                                      </Blueprint3.ControlGroup>
                                      <ChooseAppOrScreenOverlay
                                        handleClose={[Function]}
                                        handleNextApplicationWindow={[Function]}
                                        handleNextEntireScreen={[Function]}
                                        isChooseAppOrScreenOverlayOpen={false}
                                        isEntireScreenToShareChosen={false}
                                      >
                                        <Blueprint3.Dialog
                                          autoFocus={true}
                                          canEscapeKeyClose={true}
                                          canOutsideClickClose={true}
                                          className="makeStyles-dialogRoot-10 choose-app-or-screen-dialog"
                                          enforceFocus={true}
                                          hasBackdrop={true}
                                          isOpen={false}
                                          onClose={[Function]}
                                          transitionDuration={0}
                                          usePortal={true}
                                        >
                                          <Blueprint3.Overlay
                                            autoFocus={true}
                                            backdropProps={Object {}}
                                            canEscapeKeyClose={true}
                                            canOutsideClickClose={true}
                                            className="bp3-overlay-scroll-container"
                                            enforceFocus={true}
                                            hasBackdrop={true}
                                            isOpen={false}
                                            lazy={true}
                                            onClose={[Function]}
                                            transitionDuration={0}
                                            transitionName="bp3-overlay"
                                            usePortal={true}
                                          />
                                        </Blueprint3.Dialog>
                                      </ChooseAppOrScreenOverlay>
                                    </ShareAppOrScreenControlGroup>
                                  </div>
                                </Col>
                              </div>
                            </Row>
                          </div>
                        </Col>
                      </div>
                    </Row>
                  </div>
                </Col>
              </div>
            </Row>
          </ChooseAppOrScreeenStep>
          <Row>
            <div
              className="row"
            >
              <Col
                xs={12}
              >
                <div
                  className="col-xs-12"
                >
                  <Blueprint3.Button
                    intent="none"
                    onClick={[Function]}
                    rightIcon="chevron-right"
                    style={
                      Object {
                        "borderRadius": "100px",
                        "display": "none",
                        "textAlign": "center",
                        "width": "300px",
                      }
                    }
                  >
                    <button
                      className="bp3-button"
                      onBlur={[Function]}
                      onClick={[Function]}
                      onKeyDown={[Function]}
                      onKeyUp={[Function]}
                      style={
                        Object {
                          "borderRadius": "100px",
                          "display": "none",
                          "textAlign": "center",
                          "width": "300px",
                        }
                      }
                      type="button"
                    >
                      <Blueprint3.Icon
                        key="leftIcon"
                      />
                      <span
                        className="bp3-button-text"
                        key="text"
                      >
                        Next
                      </span>
                      <Blueprint3.Icon
                        icon="chevron-right"
                        key="rightIcon"
                      >
                        <span
                          className="bp3-icon bp3-icon-chevron-right"
                          icon="chevron-right"
                        >
                          <svg
                            data-icon="chevron-right"
                            height={16}
                            viewBox="0 0 16 16"
                            width={16}
                          >
                            <desc>
                              chevron-right
                            </desc>
                            <path
                              d="M10.71 7.29l-4-4a1.003 1.003 0 00-1.42 1.42L8.59 8 5.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4-4c.18-.18.29-.43.29-.71 0-.28-.11-.53-.29-.71z"
                              fillRule="evenodd"
                              key="0"
                            />
                          </svg>
                        </span>
                      </Blueprint3.Icon>
                    </button>
                  </Blueprint3.Button>
                </div>
              </Col>
            </div>
          </Row>
          <Row
            style={
              Object {
                "display": "none",
              }
            }
          >
            <div
              className="row"
              style={
                Object {
                  "display": "none",
                }
              }
            >
              <Blueprint3.Button
                icon="chevron-left"
                intent="danger"
                onClick={[Function]}
                style={
                  Object {
                    "borderRadius": "100px",
                    "marginTop": "10px",
                  }
                }
                text=""
              >
                <button
                  className="bp3-button bp3-intent-danger"
                  onBlur={[Function]}
                  onClick={[Function]}
                  onKeyDown={[Function]}
                  onKeyUp={[Function]}
                  style={
                    Object {
                      "borderRadius": "100px",
                      "marginTop": "10px",
                    }
                  }
                  type="button"
                >
                  <Blueprint3.Icon
                    icon="chevron-left"
                    key="leftIcon"
                  >
                    <span
                      className="bp3-icon bp3-icon-chevron-left"
                      icon="chevron-left"
                    >
                      <svg
                        data-icon="chevron-left"
                        height={16}
                        viewBox="0 0 16 16"
                        width={16}
                      >
                        <desc>
                          chevron-left
                        </desc>
                        <path
                          d="M7.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71l-4 4C5.11 7.47 5 7.72 5 8c0 .28.11.53.29.71l4 4a1.003 1.003 0 001.42-1.42L7.41 8z"
                          fillRule="evenodd"
                          key="0"
                        />
                      </svg>
                    </span>
                  </Blueprint3.Icon>
                  <Blueprint3.Icon
                    key="rightIcon"
                  />
                </button>
              </Blueprint3.Button>
            </div>
          </Row>
        </div>
      </Col>
    </IntermediateStep>
  </Router>
</BrowserRouter>
`;

exports[`should match exact snapshot on each step 3`] = `
<BrowserRouter>
  <Router
    history={
      Object {
        "action": "POP",
        "block": [Function],
        "createHref": [Function],
        "go": [Function],
        "goBack": [Function],
        "goForward": [Function],
        "length": 1,
        "listen": [Function],
        "location": Object {
          "hash": "",
          "pathname": "/",
          "search": "",
          "state": undefined,
        },
        "push": [Function],
        "replace": [Function],
      }
    }
  >
    <IntermediateStep
      activeStep={2}
      handleBack={[Function]}
      handleNext={[Function]}
      handleNextApplicationWindow={[Function]}
      handleNextEntireScreen={[Function]}
      resetPendingConnectionDevice={[Function]}
      resetUserAllowedConnection={[Function]}
      steps={
        Array [
          "a",
          "b",
          "c",
        ]
      }
    >
      <Col
        style={
          Object {
            "alignItems": "center",
            "display": "flex",
            "flexDirection": "column",
            "height": "260px",
            "justifyContent": "center",
            "width": "100%",
          }
        }
        xs={12}
      >
        <div
          className="col-xs-12"
          style={
            Object {
              "alignItems": "center",
              "display": "flex",
              "flexDirection": "column",
              "height": "260px",
              "justifyContent": "center",
              "width": "100%",
            }
          }
        >
          <ConfirmStep>
            <div
              style={
                Object {
                  "marginTop": "50px",
                  "width": "80%",
                }
              }
            >
              <Row
                style={
                  Object {
                    "marginBottom": "10px",
                  }
                }
              >
                <div
                  className="row"
                  style={
                    Object {
                      "marginBottom": "10px",
                    }
                  }
                >
                  <Col
                    style={
                      Object {
                        "textAlign": "center",
                      }
                    }
                    xs={12}
                  >
                    <div
                      className="col-xs-12"
                      style={
                        Object {
                          "textAlign": "center",
                        }
                      }
                    >
                      <Blueprint3.Text
                        ellipsize={false}
                        tagName="div"
                      >
                        <div
                          className=""
                        />
                      </Blueprint3.Text>
                    </div>
                  </Col>
                </div>
              </Row>
              <Row
                center="xs"
                middle="xs"
              >
                <div
                  className="row center-xs middle-xs"
                >
                  <Col
                    xs={5}
                  >
                    <div
                      className="col-xs-5"
                    >
                      <DeviceInfoCallout>
                        <Component
                          style={
                            Object {
                              "margin": "0 auto",
                              "textAlign": "center",
                            }
                          }
                        >
                          <h4
                            className="bp3-heading"
                            style={
                              Object {
                                "margin": "0 auto",
                                "textAlign": "center",
                              }
                            }
                          >
                            :
                          </h4>
                        </Component>
                        <Blueprint3.Callout
                          id="device-info-callout"
                          style={
                            Object {
                              "borderRadius": "8px",
                            }
                          }
                        >
                          <div
                            className="bp3-callout"
                            id="device-info-callout"
                            style={
                              Object {
                                "borderRadius": "8px",
                              }
                            }
                          >
                            <Row
                              center="xs"
                            >
                              <div
                                className="row center-xs"
                              >
                                <Col
                                  xs={12}
                                >
                                  <div
                                    className="col-xs-12"
                                  >
                                    <Blueprint3.Text
                                      ellipsize={false}
                                      tagName="div"
                                    >
                                      <div
                                        className=""
                                      >
                                        :
                                         
                                        <span />
                                      </div>
                                    </Blueprint3.Text>
                                    <Blueprint3.Tooltip
                                      content={
                                        <React.Fragment>
                                          <Blueprint3.Text
                                            ellipsize={false}
                                            tagName="div"
                                          >
                                            
                                          </Blueprint3.Text>
                                          <span
                                            style={
                                              Object {
                                                "fontWeight": 900,
                                              }
                                            }
                                          >
                                            <Blueprint3.Text
                                              ellipsize={false}
                                              tagName="div"
                                            >
                                              
                                            </Blueprint3.Text>
                                          </span>
                                        </React.Fragment>
                                      }
                                      hoverCloseDelay={0}
                                      hoverOpenDelay={100}
                                      minimal={false}
                                      position="top"
                                      transitionDuration={100}
                                    >
                                      <Blueprint3.Popover
                                        autoFocus={false}
                                        boundary="scrollParent"
                                        canEscapeKeyClose={false}
                                        captureDismiss={false}
                                        content={
                                          <React.Fragment>
                                            <Blueprint3.Text
                                              ellipsize={false}
                                              tagName="div"
                                            >
                                              
                                            </Blueprint3.Text>
                                            <span
                                              style={
                                                Object {
                                                  "fontWeight": 900,
                                                }
                                              }
                                            >
                                              <Blueprint3.Text
                                                ellipsize={false}
                                                tagName="div"
                                              >
                                                
                                              </Blueprint3.Text>
                                            </span>
                                          </React.Fragment>
                                        }
                                        defaultIsOpen={false}
                                        disabled={false}
                                        enforceFocus={false}
                                        fill={false}
                                        hasBackdrop={false}
                                        hoverCloseDelay={0}
                                        hoverOpenDelay={100}
                                        inheritDarkTheme={true}
                                        interactionKind="hover-target"
                                        lazy={true}
                                        minimal={false}
                                        modifiers={
                                          Object {
                                            "arrow": Object {
                                              "enabled": true,
                                            },
                                          }
                                        }
                                        openOnTargetFocus={true}
                                        popoverClassName="bp3-tooltip"
                                        position="top"
                                        targetTagName="span"
                                        transitionDuration={100}
                                        usePortal={true}
                                        wrapperTagName="span"
                                      >
                                        <Manager>
                                          <span
                                            className="bp3-popover-wrapper"
                                          >
                                            <Reference
                                              innerRef={[Function]}
                                            >
                                              <InnerReference
                                                innerRef={[Function]}
                                                setReferenceNode={[Function]}
                                              >
                                                <Blueprint3.ResizeSensor
                                                  onResize={[Function]}
                                                >
                                                  <span
                                                    className="bp3-popover-target"
                                                    onBlur={[Function]}
                                                    onFocus={[Function]}
                                                    onMouseEnter={[Function]}
                                                    onMouseLeave={[Function]}
                                                  >
                                                    <div
                                                      className=""
                                                      key=".0"
                                                      style={
                                                        Object {
                                                          "backgroundColor": "#00f99273",
                                                          "borderRadius": "20px",
                                                          "fontWeight": 900,
                                                          "paddingLeft": "10px",
                                                          "paddingRight": "10px",
                                                        }
                                                      }
                                                      tabIndex={0}
                                                    >
                                                      <Blueprint3.Text
                                                        className="bp3-text-large"
                                                        ellipsize={false}
                                                        tagName="div"
                                                      >
                                                        <div
                                                          className="bp3-text-large"
                                                        >
                                                          :
                                                           
                                                          <span
                                                            className="device-ip-span"
                                                          />
                                                        </div>
                                                      </Blueprint3.Text>
                                                    </div>
                                                  </span>
                                                </Blueprint3.ResizeSensor>
                                              </InnerReference>
                                            </Reference>
                                            <Blueprint3.Overlay
                                              autoFocus={false}
                                              backdropClassName="bp3-popover-backdrop"
                                              backdropProps={Object {}}
                                              canEscapeKeyClose={false}
                                              canOutsideClickClose={false}
                                              enforceFocus={false}
                                              hasBackdrop={false}
                                              isOpen={false}
                                              lazy={true}
                                              onClose={[Function]}
                                              transitionDuration={100}
                                              transitionName="bp3-popover"
                                              usePortal={true}
                                            />
                                          </span>
                                        </Manager>
                                      </Blueprint3.Popover>
                                    </Blueprint3.Tooltip>
                                    <Blueprint3.Text
                                      ellipsize={false}
                                      tagName="div"
                                    >
                                      <div
                                        className=""
                                      >
                                        :
                                         
                                        <span />
                                      </div>
                                    </Blueprint3.Text>
                                    <Blueprint3.Text
                                      ellipsize={false}
                                      tagName="div"
                                    >
                                      <div
                                        className=""
                                      >
                                        :
                                         
                                        <span />
                                      </div>
                                    </Blueprint3.Text>
                                    <div
                                      style={
                                        Object {
                                          "margin": "0 auto",
                                          "width": "200px",
                                        }
                                      }
                                    >
                                      <Blueprint3.Text
                                        className="bp3-text-muted"
                                        ellipsize={true}
                                        tagName="div"
                                      >
                                        <div
                                          className="bp3-text-overflow-ellipsis bp3-text-muted"
                                        >
                                          :
                                           
                                          <span />
                                        </div>
                                      </Blueprint3.Text>
                                    </div>
                                  </div>
                                </Col>
                              </div>
                            </Row>
                          </div>
                        </Blueprint3.Callout>
                      </DeviceInfoCallout>
                    </div>
                  </Col>
                  <Col
                    xs={5}
                  >
                    <div
                      className="col-xs-5"
                    >
                      <SharingSourcePreviewCard>
                        <Blueprint3.Card
                          className="preview-share-thumb-container"
                          elevation={0}
                          interactive={false}
                          onClick={[Function]}
                          onMouseEnter={[Function]}
                          onMouseLeave={[Function]}
                          onMouseOver={[Function]}
                          style={
                            Object {
                              "backgroundColor": "rgba(0,0,0,0.0)",
                              "height": "200px",
                              "minWidth": "250px",
                            }
                          }
                        >
                          <div
                            className="bp3-card bp3-elevation-0 preview-share-thumb-container"
                            onClick={[Function]}
                            onMouseEnter={[Function]}
                            onMouseLeave={[Function]}
                            onMouseOver={[Function]}
                            style={
                              Object {
                                "backgroundColor": "rgba(0,0,0,0.0)",
                                "height": "200px",
                                "minWidth": "250px",
                              }
                            }
                          >
                            <Row
                              center="xs"
                              middle="xs"
                              style={
                                Object {
                                  "height": "95%",
                                  "minWidth": "200px",
                                }
                              }
                            >
                              <div
                                className="row center-xs middle-xs"
                                style={
                                  Object {
                                    "height": "95%",
                                    "minWidth": "200px",
                                  }
                                }
                              >
                                <Col
                                  xs={12}
                                >
                                  <div
                                    className="col-xs-12"
                                  >
                                    <Blueprint3.Spinner
                                      size={60}
                                    >
                                      <div
                                        className="bp3-spinner"
                                      >
                                        <div
                                          className="bp3-spinner-animation"
                                        >
                                          <svg
                                            height={60}
                                            strokeWidth="6.67"
                                            viewBox="1.67 1.67 96.67 96.67"
                                            width={60}
                                          >
                                            <path
                                              className="bp3-spinner-track"
                                              d="M 50,50 m 0,-45 a 45,45 0 1 1 0,90 a 45,45 0 1 1 0,-90"
                                            />
                                            <path
                                              className="bp3-spinner-head"
                                              d="M 50,50 m 0,-45 a 45,45 0 1 1 0,90 a 45,45 0 1 1 0,-90"
                                              pathLength={280}
                                              strokeDasharray="280 280"
                                              strokeDashoffset={210}
                                            />
                                          </svg>
                                        </div>
                                      </div>
                                    </Blueprint3.Spinner>
                                  </div>
                                </Col>
                              </div>
                            </Row>
                            <Row
                              center="xs"
                            >
                              <div
                                className="row center-xs"
                              >
                                <Col
                                  style={
                                    Object {
                                      "backgroundColor": "rgba(0,0,0,0.45)",
                                      "color": "white",
                                      "textAlign": "center",
                                    }
                                  }
                                  xs={12}
                                >
                                  <div
                                    className="col-xs-12"
                                    style={
                                      Object {
                                        "backgroundColor": "rgba(0,0,0,0.45)",
                                        "color": "white",
                                        "textAlign": "center",
                                      }
                                    }
                                  >
                                    <Blueprint3.Text
                                      ellipsize={true}
                                      tagName="div"
                                    >
                                      <div
                                        className="bp3-text-overflow-ellipsis"
                                      />
                                    </Blueprint3.Text>
                                  </div>
                                </Col>
                              </div>
                            </Row>
                          </div>
                        </Blueprint3.Card>
                      </SharingSourcePreviewCard>
                    </div>
                  </Col>
                </div>
              </Row>
            </div>
          </ConfirmStep>
          <Row>
            <div
              className="row"
            >
              <Col
                xs={12}
              >
                <div
                  className="col-xs-12"
                >
                  <Blueprint3.Button
                    intent="success"
                    onClick={[Function]}
                    rightIcon="small-tick"
                    style={
                      Object {
                        "borderRadius": "100px",
                        "display": "inline",
                        "textAlign": "center",
                        "width": "300px",
                      }
                    }
                  >
                    <button
                      className="bp3-button bp3-intent-success"
                      onBlur={[Function]}
                      onClick={[Function]}
                      onKeyDown={[Function]}
                      onKeyUp={[Function]}
                      style={
                        Object {
                          "borderRadius": "100px",
                          "display": "inline",
                          "textAlign": "center",
                          "width": "300px",
                        }
                      }
                      type="button"
                    >
                      <Blueprint3.Icon
                        key="leftIcon"
                      />
                      <Blueprint3.Icon
                        icon="small-tick"
                        key="rightIcon"
                      >
                        <span
                          className="bp3-icon bp3-icon-small-tick"
                          icon="small-tick"
                        >
                          <svg
                            data-icon="small-tick"
                            height={16}
                            viewBox="0 0 16 16"
                            width={16}
                          >
                            <desc>
                              small-tick
                            </desc>
                            <path
                              d="M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z"
                              fillRule="evenodd"
                              key="0"
                            />
                          </svg>
                        </span>
                      </Blueprint3.Icon>
                    </button>
                  </Blueprint3.Button>
                </div>
              </Col>
            </div>
          </Row>
          <Row
            style={
              Object {
                "display": "inline-block",
              }
            }
          >
            <div
              className="row"
              style={
                Object {
                  "display": "inline-block",
                }
              }
            >
              <Blueprint3.Button
                icon="chevron-left"
                intent="danger"
                onClick={[Function]}
                style={
                  Object {
                    "borderRadius": "100px",
                    "marginTop": "10px",
                  }
                }
                text=""
              >
                <button
                  className="bp3-button bp3-intent-danger"
                  onBlur={[Function]}
                  onClick={[Function]}
                  onKeyDown={[Function]}
                  onKeyUp={[Function]}
                  style={
                    Object {
                      "borderRadius": "100px",
                      "marginTop": "10px",
                    }
                  }
                  type="button"
                >
                  <Blueprint3.Icon
                    icon="chevron-left"
                    key="leftIcon"
                  >
                    <span
                      className="bp3-icon bp3-icon-chevron-left"
                      icon="chevron-left"
                    >
                      <svg
                        data-icon="chevron-left"
                        height={16}
                        viewBox="0 0 16 16"
                        width={16}
                      >
                        <desc>
                          chevron-left
                        </desc>
                        <path
                          d="M7.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71l-4 4C5.11 7.47 5 7.72 5 8c0 .28.11.53.29.71l4 4a1.003 1.003 0 001.42-1.42L7.41 8z"
                          fillRule="evenodd"
                          key="0"
                        />
                      </svg>
                    </span>
                  </Blueprint3.Icon>
                  <Blueprint3.Icon
                    key="rightIcon"
                  />
                </button>
              </Blueprint3.Button>
            </div>
          </Row>
        </div>
      </Col>
    </IntermediateStep>
  </Router>
</BrowserRouter>
`;