Is something like this possible?
for my_class_selector in _aClass _bClass _cClass _dClass _eClass ...
.my_class_selector
display none
Basically I want to create a bunch of classes with similar properties...
Just needed the curly braces
for my_class_selector in _aClass _bClass _cClass _dClass _eClass
.{my_class_selector}
display none
Related
In my React project, sometimes a dynamically generated UUID needs to be added to the a data-testid value to ensure uniqueness amongst duplicate components in the DOM.
I have a test situation where I can grab the element I want. Now I want to get the dynamically generated data-testid from it. I've tried this but it doesn't work:
const questionDropdown = queryAllByText('Free Text')[0];
console.log(questionDropdown.getAttribute('data-testid'));
Any suggestions how to get it?
I think it's a dataset so you can get it like this:
console.log(questionDropdown.dataset.testid);
If you have an expected result you can test it with testing-library/jest-dom:
expect(questionDropdown).toHaveAttribute("data-testid", "test-id");
Doc: https://github.com/testing-library/jest-dom#tohaveattribute
I finally figured out how to do it!
So, I have a Semantic-UI Dropdown with a dynamically generated data-testid. The trick to getting the element is simply to use Regex, like this:
const questionTypeDropdown = getByTestId(/conditional-task-question-type/);
I'm revisiting this. I believe that the answer from adesuriey works great if you're dealing with conventional text, say in an Input element. But in the Semantic UI Dropdown it does not appear to work.
I think the problem lies with finding the correct ancestor element. I've tried many things but with no success.
How could I convert this className:
className={`Tooltip__message Tooltip__message--${position}`}
to a css Module className?
There are two classes, and one concatenates a variable.
You can either do this, normal JavaScript:
className={'wrapper searchDiv ' + this.state.something}
or the string template version, with backticks:
className={`wrapper searchDiv ${this.state.something}`}
Both types are of course just JavaScript, but the first pattern is the traditional kind.
Anyway, in JSX, anything enclosed in curly brackets is executed as JavaScript, so you can basically do whatever you want there. But combining JSX strings and curly brackets is a no-go for attributes.
Ref to https://stackoverflow.com/a/36209517/10789574
How can I integrate both ng-classes
ng-class="{removeBtn:'selected'}[resource.check_added_to_plan]" && ng-class="'lastSpan':($index+1)%3==0}"
If resource.check_added_to_plan is "removeBtn" then I need to add "selected" class
Thanks
I'm really not sure, what are you trying to achieve, but you need to fix syntax errors and do something like this:
ng-class="{removeBtn: resource.check_added_to_plan, lastSpan: ($index+1)%3==0}"
So, in a form class1: condition1, class2: condition2, etc...
I cannot figure out how to select an element by cssSelector in my WebDriver test.
I will appreciate your help in solving this problem.
According to webdriver css selector syntax it has to be something like
WebDriver.findElement(By.cssSelector("a[ng-click='session='my_portcalls'']"))
but it doesn't work.
I hit a similar hurdle using Protractor/WebDriverJS.
What worked for me was the following:
element(by.css('[ng-click="changePanel(\'delete\')"]'));
In the html the element looks like the following:
.... ng-click="changePanel('delete')" ...
So single escaping works!
You need to escape the single quotes inside the attribute value for the selector to be valid:
WebDriver.findElement(By.cssSelector("a[ng-click='session=\\'my_portcalls\\'']"))
I like a directive that conditionally puts a tag outside some content (but always prints the content), like this:
<p><strong ng-if-always-keep-inner-content="model.condition">{{model.text}}</strong>/p>
so if condition is true I get
<p><strong>yada yada</strong></p>
otherwise I get
<p>yada yada</p>
I could write it myself, but I want to know if it is possible to do with built in directives/options.
I should perhaps say this is used together with Bootstrap, which afaiu recommends using <strong> vs some class with a bold font.
I don't think there is a built in directive. You should write it.
I suggest to use a classic ng-if
<p ng-if="model.condition"><strong>{{model.text}}</strong></p>
<p ng-if="!model.condition">{{model.text}}</p>
In your specific case, you can also use ng-class and set the strong style via css.