I have a composable element which has a parent which has a test tag. I want to locate the child element using parent's test tag. How can I do that with Kakao?
class MyScreen(semanticsProvider: SemanticsNodeInteractionsProvider) :
ComposeScreen<MyScreen>(semanticsProvider = semanticsProvider) {
val myChild: KNode = onNode {
// has parent with test tag "MyParent"
}
}
Column(
modifier = Modifier.padding(
// some code...,
)
.appendTestTag("MyParent"),
) {
Text(
text = state.Text, // I want to assert this text
// some code...
)
}
I tried using this in my test class and it's working, but I want to have the locators in MyScreen class:
composeTestRule.onNode(
hasParent(
hasTestTag("MyParent")
)
).assertTextEquals(expectedText)
Instead I want to have this in my test:
myChild.assertTextEquals(expectedText)
Related
I would like to add a getter / setter to my StencilJS component. As I'm currently aware, you cannot use the get / set logic with #Prop(). How would I generate similar logic in a StencilJS component?
For example, say I have the following Angular component, I could do the following:
#Input()
get enabled(): boolean {
return this._enabledOverride == null ? this._getDefaultEnabled() : this.enabledOverride;
}
set enabled(value: boolean) {
this._enabledOverride = coerceBooleanProperty(value);
}
_enabledOverride: boolean|null = null;
private _getDefaultEnabled() {
return this.stepControl ? this.stepControl.valid && this.interacted : this.interacted;
}
My attempt at a StencilJS component would be the following:
Child Component
_enabled: boolean;
#Prop() enabled: boolean;
#Watch('enabled')
watchHandler(newValue: boolean, oldValue: boolean) {
this._enabledOverride = coerceBooleanProperty(newValue);
this._enabled = this._enabledOverride == null ? this.getDefaultEnabled() : this._enabledOverride;
}
_enabledOverride: boolean | null = null;
Here, I Watch for enabled to change, do logic, and set a private instance variable of _enabled to the updated value. This is great, for use within the instance. But what if I need to access the enabled property from the parent component, also my logic wouldn't run on page load since #Watch() isn't triggered on page load. Once it does run, there is now a mismatch in value between enabled and _enabled. So for example in my parent component if I had:
Parent Component
export class Parent {
#Element() el: HTMLElement;
componentWillLoad() {
const childElements = this.el.querySelectorAll('app-child-component');
childElements.forEach((el) => {
// attempting to access the enabled property would be out of sync with the private _enabled
console.log(el.enabled)
})
}
}
As seen above, attempting to access the enabled property would be out of sync with the private _enabled giving me an out-of-date property value. How should I go about this? Thanks!
You could add a method with the #Method decorator to act as a getter:
#Method()
async getEnabled() {
return this._enabledOverride == null ? this._getDefaultEnabled() : this.enabledOverride;
}
And then use it like
const childElements = this.el.querySelectorAll('app-child-component');
await Promise.all(
childElements.map(async el => console.log(await el.getEnabled()))
)
When I try to test Widget that contains
hintText: LocalizationResources.of(context).writecomment
I get an Exception saying:
The following NoSuchMethodError was thrown building CommentInput(dirty, state:
_CommentInputState#32224):
The getter 'writecomment' was called on null.
So, is there something that I'm missing?
Widget builds nicely on a device and a simulator.
This is how my test looks like:
....
final Widget widget =
MaterialApp(home: CommentWallWidget(channelUid: '123456'), title: 'jelena',);
await tester.pumpWidget(widget);
And the LocalizationResources is just simple l10n:
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'l10n/messages_all.dart';
///class containing localization logic and string getters
class LocalizationResources {
static Future<LocalizationResources> load(Locale locale) {
final String name =
locale.countryCode.isEmpty ? locale.languageCode : locale.toString();
final String localeName = Intl.canonicalizedLocale(name);
return initializeMessages(localeName).then((_) {
Intl.defaultLocale = localeName;
return LocalizationResources();
});
}
static LocalizationResources of(BuildContext context) {
return Localizations.of<LocalizationResources>(
context, LocalizationResources);
}
....
You need to wrap your test widget in the MediaQuery widget and provide your localization delegate. For more an example see here.
final Widget widget = MediaQuery(
data: MediaQueryData(),
child: MaterialApp(
localizationsDelegates: [LocalizationResourcesDelegate()],
home: CommentWallWidget(channelUid: '123456'),
title: 'jelena',
)
);
I try to click html css 'a' but I cant access to it. How can I to do?
at test
waitFor { myelement.displayed }
myelement.click()
class test extends Page {
static at = { title == "test page" }
static content = {
myelement {$("a", id: "myid")}
}
}
You should be able to access it directly using the ID. I think your syntax is incorrect, try using the ID selector instead: $("#myId")
I have a page that uses a module for defining form content. It is rather generically usable but needs different resulting pages after form actions have been triggered (button click, etc.).
class CreateOrganisationPage extends Page {
static url = "#contact/organisation/create"
static at = {
form.displayed
}
static content = {
form(wait: true) {
module BusinessEntityFormModule, businessEntityName: 'organisation'
}
}
}
The module implementing the form content contains a UI control saveCommand that requires that a page ViewBusinessEntityPage is navigated to after submitting. In order to keep that module more reusable across different tests I wanted to provide that page as a parameter.
What is the best approach to do so?
class BusinessEntityFormModule extends Module {
String businessEntityName = "entity"
String idPrefix = "edit"
static content = {
self {
def id = "$idPrefix-" + StringUtils.capitalize(businessEntityName)
$("form", id: id)
}
saveCommand(to: ViewBusinessEntityPage) {
$('[data-command="save"]')
}
}
}
Simply define a property for the destination page in your module and use it in the content definition:
class BusinessEntityFormModule extends Module {
Class postSavePage
static content = {
saveCommand(to: postSavePage) {
$('[data-command="save"]')
}
}
}
And then set it when defining the module as part of the page:
class CreateOrganisationPage extends Page {
static content = {
form(wait: true) {
module BusinessEntityFormModule, businessEntityName: 'organisation', postSavePage: ViewBusinessEntityPage
}
}
}
I'm using dynatree with selectMode = 3, when user clicks into a node that has a parent, I need to apply a class to the parent. Any idea how to do it?
This is my code:
function CheckUnCheckParents(flag, node) {
var pnode = node.getParent();
if (pnode != null) {
if (hasSelectedNodes(pnode)) {
**add class 'dynatree-selected' to the parent**
}
}
return false;
}
Set the addClass on the parent:
pnode.data.addClass = 'dynatree-selected'