Upgrade to Ember 3.4 (x-select v4.0) #224

Robdel12 · 2018-10-09T16:28:36Z

What is this?

Buckle in, because this is a biggin'.

What started as a simple deprecation warning fix (#223) turned into a full blown upgrade. I needed to remove sendAction from the component, which would be a breaking change and require a major version bump. Doing a major version bump is a perfect spot to get other breaking changes you need done, so that's what I did here.

User facing

Breaking changes

<XSelect> 4.0 has the following breaking changes:

Remove jQuery from addon (no longer passes jQuery events to action handlers or uses jQuery)
Change test helper to use @bigtest/interactor
Remove sendAction. on-change is now the default action fired (always was under the hood).
Remove the actionprop ({{#x-select action="myAction"}})

Non-breaking changes

There are a few changes that are user facing but not breaking changes:

Update the README to use the new angle bracket syntax.
Update the README to explain the new test helper
Added a new migration guide for migrating to 4.x
tabindex is now default to null since <select>s are interactive elements be default. Applying tabindex="0" is redundant.
Added is-selected class to the selected option

Non-user facing changes

The non-user facing changes / upgrades to the addon are:

Upgrade Ember-CLI to 3.4
Upgrade the test helpers & suite to the new ember testing tools. (For async / await)
Rewrite a lot of the test suite to make use of integration tests. Some tests were not really an acceptance test (by reaching into the controller and manipulating that directly).
Rewrite the test suite to use the new test helper (interactor). That's right, we're dog fooding it.
Removed all jQuery from tests
Removed the fs-branding addon. It needed to be upgraded and it's not useful being abstracted (since no other addons are using it)
Ran prettier through the codebase to normalize all code style.

What's the plan after merge?

I'd like to release 4.0.0-beta.x for the community to try out. If no issues are found in say 3-4 weeks (or longer. Or sooner 🤷‍♂️), we'll release 4.0.0 proper. 🎉

TODOs

This needs a whole lot of work. We need to remove jquery from everything.

wwilsman · 2018-10-10T14:07:59Z

README.md

-{{/x-select}}
+<XSelect @value={{bob}} action={{action "selectPerson"}} as |xs|>
+  <xs.option @value={{fred}}}}Fred Flintstone</xs.option>
+  <xs.option @value={{bob}}}}Bob Newhart</xs.option>


Looks like there are some left over } instead of > in this file

wwilsman · 2018-10-12T15:58:18Z

README.md

+`<XSelect>` 4.0 ships with an entirely new test helper that goes
+beyond just allowing you to select an option. It allows you to
+interact with your `<select>` element in all different ways. For
+example in tests if you need to assert your first options `disabled`


For example, (comma)

assert that your first option is

wwilsman · 2018-10-12T15:59:57Z

README.md


 ``` javascript
-  import { select } from "yourappname/tests/helpers/x-select";
+// you can name the import whatever you want
+import XSelect from "yourappname/tests/helpers/x-select";


Just for the sake of the rest of the examples here, I think it should be XSelectInteractor

Hahah that's funny, I was trying to hand wave over the fact that we're using an interactor and make it just about the helper. But I agree, there's no escaping it really.

wwilsman · 2018-10-12T16:07:57Z

README.md

+  // ...
+
+  test('Selecting an option', async (assert) => {
+    await xselect.select('Fred Flintstone');


I was going to mention leaving a quick comment that says something like "the interactor resolves after interacting with the select, but not after any change events are handled" which is why we use when for the following assertion.

But then that made me think that people will pretty much require when whenever they use this test helper. Or we can override the default select method to resolve after it is selected. It would still throw an error when it cannot select or when the option does not get selected, and it would mean people can expect as usual after awaiting on select(option).

cowboyd · 2018-10-15T23:07:50Z

Nice work @Robdel12 🎉

I have one suggestion, and one question. Both are related to the fact that we're introducing breaking changes.

With angle brackets, I believe that the @ properties should follow javascript naming conventions since they are javascript variables. Rather than html properties like it was before... So @onSelect instead of @on-select Maybe we can deprecate the @on-select Property and then remove it in v5 or something.
Should we consider the case of having the select each over the options itself so that we can get rid of the need for all the registration poo?

<XSelect @over={items} as |Option item|>
  <Option>{item.name}</Option>
</XSelect>

Or should that be a v5 thing? I'm just mentioning it now since we're breaking things.

Robdel12 · 2018-10-16T00:37:42Z

🤔

Hmm, I'm totally not opposed to that. I think we can do that in a follow on PR after this one for v4?
That one feels more like a v5 thing to me. It'd be interesting to explore that change looks like for existing users too

This uncovered some bugs and also more refactoring is needed

`tabindex` does not need to be set to 0 from the ember component since that's its default in the DOM. Only apply the attribute when it's different than 0.

That addon was a premature abstraction. No need for it to live in a different project entirely.

Looks like the service is now dead

Attempt to upgrade to ember 3.4

5f3dd41

This needs a whole lot of work. We need to remove jquery from everything.

wwilsman reviewed Oct 10, 2018

View reviewed changes

Robdel12 force-pushed the rd/upgrade-ember branch 5 times, most recently from 7940e5c to 13bbf5f Compare October 12, 2018 15:13

wwilsman reviewed Oct 12, 2018

View reviewed changes

Robdel12 force-pushed the rd/upgrade-ember branch from 08f6630 to 9adf6eb Compare October 13, 2018 02:42

Robdel12 requested a review from cowboyd October 15, 2018 22:50

Robdel12 changed the title ~~[WIP] Upgrade to Ember 3.4 (x-select v4.0)~~ Upgrade to Ember 3.4 (x-select v4.0) Oct 15, 2018

Robdel12 force-pushed the rd/upgrade-ember branch from 9adf6eb to 31f315d Compare October 16, 2018 00:41

Robdel12 added 14 commits October 16, 2018 14:40

Update test suite to use Interactors

5c88266

This uncovered some bugs and also more refactoring is needed

Update interactor, fill in tests, remove jquery & sendAction

e6e1389

Add attribute integration tests & remove default tabindex

277a4a8

`tabindex` does not need to be set to 0 from the ember component since that's its default in the DOM. Only apply the attribute when it's different than 0.

Remove the rest of jQuery from tests

3426e8b

Single quotes with prettier

c572645

Unskip tests

89c7a03

Refactor to new test API

dc1b568

Remove fs-branding addon

3557ac4

That addon was a premature abstraction. No need for it to live in a different project entirely.

Update markdown-code-highlighting addon

de8ac67

Remove embadge badge from README

2f545a3

Looks like the service is now dead

Update everything to new angle bracket syntax

16ff744

Remove jQuery from everything

d51ed0e

First pass at writing new test helper README docs

7a3b7f3

Update CHANGELOG to reflect the changes here

eab286e

Update dummy app documentation and write 3.x to 4.x migration guide

404f0b7

Robdel12 force-pushed the rd/upgrade-ember branch from 31f315d to 404f0b7 Compare October 16, 2018 19:41

Robdel12 requested a review from wwilsman October 16, 2018 19:46

weekly-digest bot mentioned this pull request Oct 21, 2018

Weekly Digest (14 October, 2018 - 21 October, 2018) #226

Closed

cowboyd approved these changes Oct 22, 2018

View reviewed changes

Robdel12 merged commit a7a30d8 into master Oct 22, 2018

Robdel12 deleted the rd/upgrade-ember branch November 22, 2018 07:41

Robdel12 mentioned this pull request Nov 27, 2018

Running without jquery #199

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade to Ember 3.4 (x-select v4.0) #224

Upgrade to Ember 3.4 (x-select v4.0) #224

Robdel12 commented Oct 9, 2018 •

edited

Loading

wwilsman Oct 10, 2018

wwilsman Oct 12, 2018 •

edited

Loading

wwilsman Oct 12, 2018

Robdel12 Oct 12, 2018

wwilsman Oct 12, 2018 •

edited

Loading

cowboyd commented Oct 15, 2018

Robdel12 commented Oct 16, 2018

Upgrade to Ember 3.4 (x-select v4.0) #224

Upgrade to Ember 3.4 (x-select v4.0) #224

Conversation

Robdel12 commented Oct 9, 2018 • edited Loading

What is this?

User facing

Breaking changes

Non-breaking changes

Non-user facing changes

What's the plan after merge?

TODOs

wwilsman Oct 10, 2018

Choose a reason for hiding this comment

wwilsman Oct 12, 2018 • edited Loading

Choose a reason for hiding this comment

wwilsman Oct 12, 2018

Choose a reason for hiding this comment

Robdel12 Oct 12, 2018

Choose a reason for hiding this comment

wwilsman Oct 12, 2018 • edited Loading

Choose a reason for hiding this comment

cowboyd commented Oct 15, 2018

Robdel12 commented Oct 16, 2018

Robdel12 commented Oct 9, 2018 •

edited

Loading

wwilsman Oct 12, 2018 •

edited

Loading

wwilsman Oct 12, 2018 •

edited

Loading