Comments (13)
@richmolj right now the closes thing you can do is
export default PageObject.create({
name: {
scope: '#search_name',
value: value(),
fillIn()
}
});
And then do:
page.name().value();
page.name().fillIn('Juan')
Anyway, I get the point and I understand the proposed API is simpler, I think we can discuss about it for 1.x.
Thanks!
from ember-cli-page-object.
@richmolj I agree this is something to consider. I'm not sure if I would change the behavior of fillable
and value
because fillable
returns a promise and runs outside of the andThen
block but value
must be called inside a andThen
block.
I think there's a way to create a simple helper that achieves that behavior, let me think about it a bit and I get back to you with an example on how to implement it using a customHelper
.
Saying that, I think it would be nice to have a section in the site with examples of custom helpers that the community can use and contribute to, and if any of them becomes popular we can add it to the addon.
@richmolj @juanazam what do you think?
from ember-cli-page-object.
@richmolj here's an example on how to achieve that. I didn't test it thoroughly but I think it works just fine
var input = PageObject.customHelper(function(scope) {
return function(textToFillIn) {
if (typeof(textToFillIn) === 'undefined') {
return findWithAssert(scope).val();
} else {
return fillIn(scope, textToFillIn);
}
};
});
var page = PageObject.create({
visit: visitable('/users'),
userName: input('#userName')
});
// ... test ...
page.visit().userName('san650');
andThen(function() {
assert.equal(page.userName(), 'san650');
});
Please let me know if it works for you 😄
from ember-cli-page-object.
@san650 interesting, it does look like that would work. That said, I actually really liked the API of @juanazam's comment. I wonder if it would be possible to get this 'out of the box', by always returning a reference to the element, and always being able to call any action/query on it:
export default PageObject.create({
name: PageObject.all('#name')
});
page.name().value();
page.name().fillIn('Juan');
page.name().click();
page.name().text();
So you save whether it's a clickable
, fillable
, etc until the actual test. I realize this would be a significant divergence though.
from ember-cli-page-object.
@richmolj you can actually build your own component to do that.
tests/pages/components/input.js
export default function input(selector) {
return {
scope: selector,
value: PageObject.value()
fillIn: PageObject.filable()
};
}
/tests/my-test.js
import input from './pages/components/input';
let page = PageObject.create({
name: input("#name")
})
We have that in our application and it's very useful. Do you think this might do the trick?
from ember-cli-page-object.
Yep, I'm actually heading down that direction now. It would be nice to get this built-in to the add-on, though, so the API is consistent. For instance avoiding some projects doing page.name().val()
and others doing page.name().getValue()
, etc.
from ember-cli-page-object.
@richmolj we have thought abut building some 'default' components withing the addon, but it seems to hard to find a set that will always be useful for everybody. Anyway, there is still room for discussion on that, what do you think @san650?
from ember-cli-page-object.
@richmolj @juanazam actually, we already generate several properties for each component. Please take a look at this page.
So, let's say you have the following definition
var page = PageObject.create({
title: { scope: 'h1' }
});
then you have the following properties for free
test('...', function(assert) {
// actions
page.title().click();
page.title().clickOn('a subtitle');
andThen(function() {
// predicates and queries
assert.ok(page.title().isVisible());
assert.ok(!page.title().isHidden());
assert.ok(page.title().contains('foo bar'));
assert.equal(page.title().text(), 'foo bar baz');
});
});
Maybe it makes sense to keep adding default properties to DRY tests even more.
What other properties do you think we need? .fillIn
, .value
, .attribute
...
from ember-cli-page-object.
@san650 I did not realize that! I think this is actually my preferred way to use this add-on for most things. Is there a downside to just adding all the others?
from ember-cli-page-object.
I don't see a downside, we introduced this feature with @juanazam a few months ago to see how it was going to work and personally I'm happy with the results, page object definitions got reduced a lot!
We chose the properties that made sense for most elements in the page, you usually want click, read the text or see if the element is there, at the time I felt that fillIn
, value
, etc. were too specific for some parts of the application... but now I feel different.
Feedback like yours is really helpful to help us define where we need to go with the addon, let's define what other attributes make sense to have as defaults.
Right now we are working on the 1.0 release and I don't want to keep adding features to it so we can release it sooner. But we can create a PR to merge right after the 1.0
release.
from ember-cli-page-object.
@san650 sounds great! let's define that list so we can implement it as an 1.x
feature.
from ember-cli-page-object.
Hey @richmolj since lots of properties are now included by default on components. Do you think we can close this?
from ember-cli-page-object.
Yup 👍
from ember-cli-page-object.
Related Issues (20)
- How to replace deprecated `is(':focus')`? HOT 3
- Errors running tests since upgrading to v5 of `ember-qunit` HOT 7
- Deprecation calls need to be updated for compat with Ember 3.24 HOT 2
- Incompatible with Embroider 's `staticAddonTestSupportTrees` optimized mode HOT 10
- new deprecation: `create-url-argument` *always* throws when an object is passed to create. HOT 4
- Query Engines
- Assign is being referenced from @ember/polyfills. This prevents upgrade to Ember 4 HOT 4
- Update ember-cli-babel HOT 5
- migrate to v2 Addon Format HOT 4
- Types require allowSyntheticDefaultImports=true HOT 2
- Replace usage of ember-native-dom-helpers by @ember/test-helpers HOT 1
- is there a way to create recursive page object? HOT 2
- docs: clickable needs to be awaited HOT 2
- All imports must be declared as dependencies or peers HOT 3
- Fix support for @tsconfig/ember 3.0.0 error TS7016 HOT 6
- [Quest] Remove jquery
- get rid of `$.param(`
- `$.prop(`
- deprecate finders `scope` option
- string getters on a collection definition raise error HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ember-cli-page-object.