This is the way I did , but I got "Uncaught RangeError: Maximum call stack size exceeded"
function get_tag_elem() {
let class_name = add_tag();
let tag_elem = $('#meta_tag_element > button.bx--tag.bx--tag--color');
tag_elem.removeClass('bx--tag--color');
tag_elem.addClass(class_name);
let tag_html = tag_elem.html()
return $(tag_html);
}
<button id="tag_value" class="bx--tag">
<span class="bx--tag__label">Article Tag</span>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path d="M12 4.7L11.3 4 8 7.3 4.7 4 4 4.7 7.3 8 4 11.3 4.7 12 8 8.7 11.3 12 12 11.3 8.7 8z"></path>
</svg>
</button>
The idea is to duplicate the button using an HTML template.
var template = document.getElementById("tag_value").outerHTML;
var container = document.getElementById("container")
var id = 0;
function add_button() {
$(container).append($(template.replace("tag_value", "btn" + ++id)))
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span style="display:none">
<button id="tag_value" class="bx--tag">
<span class="bx--tag__label">Article Tag</span>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path d="M12 4.7L11.3 4 8 7.3 4.7 4 4 4.7 7.3 8 4 11.3 4.7 12 8 8.7 11.3 12 12 11.3 8.7 8z"></path>
</svg>
</button>
</span>
<button onclick="add_button()">add button</button>
<div id="container"></div>
Related
So I have elements selected by 'querySelectorAll()' (becomes a list) and I want to use JS to change the inside of an element other than the elements selected.
<button role="checkbox" type="button" class="button__button___TCWNI button__secondary___WMaVW button__lg___w9Vy5" data-test="multiple-selection-box-0" aria-checked="false">
<span class="button__leftIconContainer___JQhd9"><svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="square" class="svg-inline--fa fa-square fa-w-14 " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path fill="currentColor" d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-6 400H54c-3.3 0-6-2.7-6-6V86c0-3.3 2.7-6 6-6h340c3.3 0 6 2.7 6 6v340c0 3.3-2.7 6-6 6z"></path></svg></span>
<span data-mathjax="true">A</span></button>
The [span class="button__leftIconContainer___JQhd9"] is what I'm at right now, and I want access to [span data-mathjax="true"] through the parent element or straight to it.
I took the audio player code from this article, made a few style changes, and am now attempting to display multiple such players on one page. Currently, only the first player responds to clicks.
I used row and column elements to display full-page rows with 3 players per row, each player having its own icon image and audio source file. My trouble is now in establishing the index-searching procedure so that the JS can play audio_X when button_X is clicked.
I've tried other solutions on StackOverflow to no avail, so I've removed all the changes I tried and am starting again from square one.
const playerButton = document.querySelector('.player-button'),
audio = document.querySelector('audio'),
playIcon = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#3D3132">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
</svg>
`,
pauseIcon = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#3D3132">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
</svg>
`;
function toggleAudio() {
if (audio.paused) {
audio.play();
playerButton.innerHTML = pauseIcon;
// document.getElementById("1").style.opacity = "1";
} else {
audio.pause();
playerButton.innerHTML = playIcon;
// document.getElementById("1").style.opacity = "0";
}
}
playerButton.addEventListener('click', toggleAudio);
function audioEnded() {
playerButton.innerHTML = playIcon;
}
audio.onended = audioEnded;
const timeline = document.querySelector('.timeline');
function changeTimelinePosition() {
const percentagePosition = (100 * audio.currentTime) / audio.duration;
timeline.style.backgroundSize = `${percentagePosition}% 100%`;
timeline.value = percentagePosition;
}
audio.ontimeupdate = changeTimelinePosition;
function changeSeek() {
const time = (timeline.value * audio.duration) / 100;
audio.currentTime = time;
}
timeline.addEventListener('change', changeSeek);
const soundButton = document.querySelector('.sound-button'),
soundIcon = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#3D3132">
<path fill-rule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM14.657 2.929a1 1 0 011.414 0A9.972 9.972 0 0119 10a9.972 9.972 0 01-2.929 7.071 1 1 0 01-1.414-1.414A7.971 7.971 0 0017 10c0-2.21-.894-4.208-2.343-5.657a1 1 0 010-1.414zm-2.829 2.828a1 1 0 011.415 0A5.983 5.983 0 0115 10a5.984 5.984 0 01-1.757 4.243 1 1 0 01-1.415-1.415A3.984 3.984 0 0013 10a3.983 3.983 0 00-1.172-2.828 1 1 0 010-1.415z" clip-rule="evenodd" />
</svg>`,
muteIcon = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#3D3132">
<path fill-rule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM12.293 7.293a1 1 0 011.414 0L15 8.586l1.293-1.293a1 1 0 111.414 1.414L16.414 10l1.293 1.293a1 1 0 01-1.414 1.414L15 11.414l-1.293 1.293a1 1 0 01-1.414-1.414L13.586 10l-1.293-1.293a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>`;
function toggleSound() {
audio.muted = !audio.muted;
soundButton.innerHTML = audio.muted ? muteIcon : soundIcon;
}
soundButton.addEventListener('click', toggleSound);
<div class="audio-player left">
<div class="icon-container">
<img src="coverart1.jpg" style="width: 100%" alt="">
<!--<svg xmlns="http://www.w3.org/2000/svg" class="audio-icon" viewBox="0 0 20 20" fill="currentColor">
<path d="blahblahblahpath" />
</svg>-->
<audio src="audio/1.mp3"></audio>
</div>
<div class="controls">
<button class="player-button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#3D3132">
<path fill-rule="evenodd" d="blahblahblahpath" />
</svg>
</button>
<input type="range" class="timeline" max="100" value="0">
<button class="sound-button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#3D3132">
<path fill-rule="evenodd" d="blahblahblahpath" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
With this structure, I'm not quite sure how to index/search for specific players (beyond knowing that i should probably use queryselectALL and add for loops to some JS functions).
Any fixes? Currently the first player works perfectly, but no other player responds to clicks. Something with the event listener perhaps?
beyond knowing that i should probably use queryselectALL and add for loops to some JS functions
That's the point: you'll need to assign event listeners to each player instance.
let audioPlayers = document.querySelectorAll(".audio-player");
if (audioPlayers.length) {
audioPlayers.forEach(function(audioPlayer, i) {
let audio = audioPlayer.querySelector("audio");
let playerButton = audioPlayer.querySelector(".player-button");
playerButton.addEventListener("click", function(e) {
let current = e.currentTarget;
let audio = current.closest(".audio-player").querySelector("audio");
let btnSvg = current.querySelector(".useBtn");
if (!audio.paused) {
btnSvg.setAttribute("href", "#icon-play");
audio.pause();
} else {
btnSvg.setAttribute("href", "#icon-pause");
audio.play();
}
});
let timeline = audioPlayer.querySelector('.timeline');
timeline.addEventListener('change', function(e) {
let time = (timeline.value * audio.duration) / 100;
audio.currentTime = time;
});
audio.addEventListener('ended', function(e) {
console.log('audio finished');
timeline.value = 0;
});
audio.addEventListener('timeupdate', function(e) {
let percentagePosition = (100 * audio.currentTime) / audio.duration;
timeline.value = percentagePosition;
});
});
}
svg {
display: block;
width: 1em;
}
.player-button {
display: inline-block;
height: 1em;
background: none;
padding: 0;
border: none;
font-size: 1.2em;
position: relative;
bottom: -0.15em;
}
<div class="audio-player left">
<div class="icon-container">
<audio preload="metadata" src="https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3"></audio>
</div>
<div class="controls">
<button class="player-button">
<svg viewBox="0 0 20 20" fill="#3D3132">
<use class="useBtn" href="#icon-play" />
</svg>
</button>
<input type="range" class="timeline" min="0" max="100" step="1" value="0">
</div>
</div>
<div class="audio-player left">
<div class="icon-container">
<audio preload="metadata" src="https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3"></audio>
</div>
<div class="controls">
<button class="player-button">
<svg viewBox="0 0 20 20" fill="#3D3132">
<use class="useBtn" href="#icon-play" />
</svg>
</button>
<input type="range" class="timeline" min="0" max="100" step="1" value="0">
</div>
</div>
<svg class="plyrBtns" style="display:none" aria-hidden="true">
<symbol class="icon icon-play" id="icon-play" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
</symbol>
<symbol class="icon icon-pause" id="icon-pause" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
</symbol>
</svg>
How do add a tooltip in Bootstrap v5 via Javascript? I'm tying to add a tooltip and popover to the same element and it seems the best route is to enable both them via JS.
The tooltip added via html works as expected:
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<span class="input-group-text mb-3" id="basic-addon2" title="If you want us">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
</svg>
</span>
Next I tried to add the tooltip via JS:
var options =
{
title : "If you want us",
};
var responseTeamMemberSpanElm = document.getElementById("basic-addon2");
var tooltipResponseTeamMember = new bootstrap.Tooltip(responseTeamMemberSpanElm,options );
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<span class="input-group-text mb-3" id="basic-addon2" >
<!-- info icon with circle around: from https://icons.getbootstrap.com/icons/info-circle/ -->
<svg "basic-addon2-svg" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
</svg>
</span>
The look of the tooltip looks different. Also, I can put my cursor on the grey background, the tooltip works as expected but when I hover over the circle "i", the tooltip stops working. After I hover over the circle "i", I see the tooltip get moved to the bottom of the screen and the tooltip doesn't work even if I hover elsewhere and come back to the background.
All the older answers I found are using the JQuery version of bootstrap.
Is this a bug or am I doing something wrong?
If you define css propertry pointer-events: none; in all child of tooltip element then its working fine but this may be create a problems on click, hover, focus and other events listener.
So re-initialize tooltip method when hide tooltip by hide.bs.tooltip method in Bootstrap-v5.
Source: https://getbootstrap.com/docs/5.0/components/tooltips/#events
Try below snippet.
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
this.addEventListener('hide.bs.tooltip', function () {
new bootstrap.Tooltip(tooltipTriggerEl)
})
return new bootstrap.Tooltip(tooltipTriggerEl)
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<div class="container mt-5">
<div class="row">
<div class="col-sm-12">
<span class="input-group-text border position-relative" id="basic-addon2" data-bs-toggle="tooltip" data-bs-placement="top" title="If you want us">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle"
viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
<path
d="M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" />
</svg>
</span>
</div>
<div class="col-sm-12 my-3">
<span class="input-group-text border position-relative" id="basic-addon3" data-bs-toggle="tooltip" data-bs-placement="top" title="If you want us">
<input type="text" class="form-control me-2" placeholder="First Name">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle"
viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
<path
d="M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" />
</svg>
</span>
</div>
</div>
</div>
<span id="tooltip" class="tooltip">
<svg class="svg-inline--fa fa-question-circle fa-w-16" data-fa-transform="grow-6" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="question-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="" style="transform-origin: 0.5em 0.5em;">
<g transform="translate(256 256)">
<g transform="translate(0, 0) scale(1.375, 1.375) rotate(0 0 0)">
<path fill="currentColor" d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z" transform="translate(-256 -256)">
</path>
</g>
</g>
</svg>
<!-- <i class="fas fa-question-circle" data-fa-transform="grow-6"></i> -->
<span>Use this button to show/hide the calipers.<br>When the calipers are shown:<br>- Click and hold the caliper lines to drag them.<br>- Click and hold the caliper measurement to drag both calipers together.
</span>
</span>
<span id="tooltip" class="tooltip">
<svg class="svg-inline--fa fa-question-circle fa-w-16" data-fa-transform="grow-6" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="question-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="" style="transform-origin: 0.5em 0.5em;">
<g transform="translate(256 256)">
<g transform="translate(0, 0) scale(1.375, 1.375) rotate(0 0 0)">
<path fill="currentColor" d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z" transform="translate(-256 -256)">
</path>
</g>
</g>
</svg>
<!-- <i class="fas fa-question-circle" data-fa-transform="grow-6"></i> -->
<span>Use this button to show/hide the calipers.<br>When the calipers are shown:<br>- Click and hold the caliper lines to drag them.<br>- Click and hold the caliper measurement to drag both calipers together.
</span>
</span>
** Please find attached code snippet.
Unable to retrieve tooltip message when moving mouse to element.
what is happening , at few instance tooltip is displayed but it is getting disappeared within fraction of seconds so text is not getting retrieved.
Various options tried out :
1.
Actions action = new Actions(driver);<br/>
action.MoveToElement(ElementHandler.FindElement(By.XPath("(//*[name()='svg' and #class='svg-inline--fa fa-question-circle fa-w-16']")));<br/>
Thread.Sleep(2000);<br/>
action.Perform();<br/>
action.MoveByOffset(1, 1).Build().Perform();
Actions action = new Actions(driver);<br/>
action.MoveToElement(ElementHandler.FindElement(By.XPath("//span[#id='tooltip']")).Perform();<br/>
string theTextIWant = (string)((IJavaScriptExecutor)driver).ExecuteScript("return arguments[0].value;", driver.FindElement(By.Xpath("//span[#id='tooltip']//span")));
** Span tag text of tooltip is fetched only on hovering.
None of the options are working.
The main challenge is tooltip is disappearing within seconds, hence unable to get text. Other than ClickAndHold method if any other solution is provided will be really helpful.
Will be really gratefully if any solution/approach is provided.
You can try to get the text from the tooltip asap it's displayed
Actions action = new Actions(driver);
action.MoveToElement(ElementHandler.FindElement(By.XPath("//span[#id='tooltip']")).Perform();
WebElement toolTip = driver.findElement(By.xpath("//*[#id="tooltip"]"));
String toolTipText = toolTip.getText();
System.out.println("toolTipText-->"+toolTipText);
I have the following two blocks of code generated from React Material UI both contained within a larger React element written by myself.
<InputAdornment muiFormControl={{...}} position="end" classes={{...}} component="div" disablePointerEvents={false} disableTypography={false}>
<div className="MuiInputAdornment-root-35 MuiInputAdornment-positionEnd-38 Hook-searchFieldInputAdornmentStyle-1adbbdv">
<pure(SearchIcon)>
<SearchIcon>
<WithStyles(SvgIcon)>
<SvgIcon classes={{...}} color="inherit" component="svg" fontSize="default" viewBox="0 0 24 24">
<svg className="MuiSvgIcon-root-40" focusable="false" viewBox="0 0 24 24" color={[undefined]} aria-hidden="true" role="presentation">
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
<path fill="none" d="M0 0h24v24H0z" />
</svg>
</SvgIcon>
</WithStyles(SvgIcon)>
</SearchIcon>
</pure(SearchIcon)>
</div>
</InputAdornment>
and
<InputAdornment muiFormControl={{...}} position="end" classes={{...}} component="div" disablePointerEvents={false} disableTypography={false}>
<div className="MuiInputAdornment-root-35 MuiInputAdornment-positionEnd-38">
<pure(ExpandLessIcon)>
<ExpandLessIcon>
<WithStyles(SvgIcon)>
<SvgIcon classes={{...}} color="inherit" component="svg" fontSize="default" viewBox="0 0 24 24">
<svg className="MuiSvgIcon-root-40" focusable="false" viewBox="0 0 24 24" color={[undefined]} aria-hidden="true" role="presentation">
<path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" />
<path fill="none" d="M0 0h24v24H0z" />
</svg>
</SvgIcon>
</WithStyles(SvgIcon)>
</ExpandLessIcon>
</pure(ExpandLessIcon)>
</div>
</InputAdornment>
The only important difference is that one has a SearchIcon contained in it and the other has an ExpandLessIcon
I want to find the one with the SearchIcon using Enzyme. I have the following so far
wrapper.find(InputAdornment).containsNode(SearchIcon) but it gives me the following error
ReferenceError: SearchIcon is not defined
I should add that SearchIcon is not a component of mine and is dynamically generated by material-ui so I can't reference its type.
Any idea how I should adjust my enzyme query ?
.containsNode() needs a React Element like <div />, not React Component like div.
You can use a displayName in find, e.g. to get the SearchIcon element:
expect(wrapper.find(InputAdornment).find('SearchIcon')).toHaveLength(1)
or the InputAdornment containing SearchIcon:
expect(
wrapper.find(InputAdornment).filterWhere(x => x.find('SearchIcon').exists())
).toHaveLength(1)