From 7903b352490819b676656522d70db49f62165a1b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aur=C3=A9lio=20Saraiva?= Date: Sat, 9 Sep 2017 14:36:19 -0300 Subject: [PATCH 01/17] Update autocomplete-component.md --- source/guides/tutorial/autocomplete-component.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/source/guides/tutorial/autocomplete-component.md b/source/guides/tutorial/autocomplete-component.md index 0ecfa05..43ef4c3 100644 --- a/source/guides/tutorial/autocomplete-component.md +++ b/source/guides/tutorial/autocomplete-component.md @@ -1,3 +1,11 @@ + +Enquanto eles procuram um aluguel, os usuários também podem querer restringir sua busca para uma cidade específica. +Enquanto nosso componente de listagem de aluguel [inicial] (... / componente simples /) apenas exibiu informações de aluguel, esse novo componente de filtro também permitirá ao usuário fornecer informações sob a forma de critérios de filtragem. + +Para começar, vamos gerar o nosso novo componente. +Chamaremos esse componente `list-filter`, já que tudo o que queremos que nosso componente faça é filtrar a lista de aluguel com base na entrada. + + As they search for a rental, users might also want to narrow their search to a specific city. While our [initial](../simple-component/) rental listing component only displayed rental information, this new filter component will also allow the user to provide input in the form of filter criteria. From bcfc0bdd462e6d8fce061608fd4ed5858825910a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aur=C3=A9lio=20Saraiva?= Date: Sat, 9 Sep 2017 14:45:59 -0300 Subject: [PATCH 02/17] Update autocomplete-component.md --- .../guides/tutorial/autocomplete-component.md | 23 +++++++------------ 1 file changed, 8 insertions(+), 15 deletions(-) diff --git a/source/guides/tutorial/autocomplete-component.md b/source/guides/tutorial/autocomplete-component.md index 43ef4c3..5f5a757 100644 --- a/source/guides/tutorial/autocomplete-component.md +++ b/source/guides/tutorial/autocomplete-component.md @@ -1,26 +1,19 @@ -Enquanto eles procuram um aluguel, os usuários também podem querer restringir sua busca para uma cidade específica. -Enquanto nosso componente de listagem de aluguel [inicial] (... / componente simples /) apenas exibiu informações de aluguel, esse novo componente de filtro também permitirá ao usuário fornecer informações sob a forma de critérios de filtragem. +Quando nossos usuários estão procurando um imóvel, eles precisam filtrar a pesquisa por uma cidade especifica, por exemplo. +Nosso [primeiro component](../simple-component/) `rental-listing` apenas mostrava informações sobre o o imóvel, esse novo componente vai permitir que nosso usuário consiga filtrar os imóveis por critérios. -Para começar, vamos gerar o nosso novo componente. -Chamaremos esse componente `list-filter`, já que tudo o que queremos que nosso componente faça é filtrar a lista de aluguel com base na entrada. - - -As they search for a rental, users might also want to narrow their search to a specific city. -While our [initial](../simple-component/) rental listing component only displayed rental information, this new filter component will also allow the user to provide input in the form of filter criteria. - -To begin, let's generate our new component. -We'll call this component `list-filter`, since all we want our component to do is filter the list of rentals based on input. +Para começar, vamos gerar o nosso novo component. +Chamaremos esse component de `list-filter`, já que tudo o que precisamos é que ele filtre os imóveis disponivel. ```shell ember g component list-filter ``` -As before when we created the [`rental-listing` component](../simple-component), the "generate component" CLI command creates +Assim como o component [`rental-listing` component](../simple-component), o comando "generate component" vai criar: -* a Handlebars template (`app/templates/components/list-filter.hbs`), -* a JavaScript file (`app/components/list-filter.js`), -* and a component integration test (`tests/integration/components/list-filter-test.js`). +* um arquivo de template (`app/templates/components/list-filter.hbs`), +* um arquivo JavaScript (`app/templates/components/list-filter.hbs`), +* and um arquivo contendo o teste de integração (`tests/integration/components/list-filter-test.js`). #### Providing Markup to a Component From 4eb2f7b41cca512c7b70b266ba52220ce660bb72 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aur=C3=A9lio=20Saraiva?= Date: Sat, 9 Sep 2017 14:46:14 -0300 Subject: [PATCH 03/17] Update autocomplete-component.md --- source/guides/tutorial/autocomplete-component.md | 1 - 1 file changed, 1 deletion(-) diff --git a/source/guides/tutorial/autocomplete-component.md b/source/guides/tutorial/autocomplete-component.md index 5f5a757..2496da1 100644 --- a/source/guides/tutorial/autocomplete-component.md +++ b/source/guides/tutorial/autocomplete-component.md @@ -1,4 +1,3 @@ - Quando nossos usuários estão procurando um imóvel, eles precisam filtrar a pesquisa por uma cidade especifica, por exemplo. Nosso [primeiro component](../simple-component/) `rental-listing` apenas mostrava informações sobre o o imóvel, esse novo componente vai permitir que nosso usuário consiga filtrar os imóveis por critérios. From 90b8be90577f7b3b800f9d0217ddcac48b6bad7b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aur=C3=A9lio=20Saraiva?= Date: Sat, 9 Sep 2017 15:02:02 -0300 Subject: [PATCH 04/17] Update autocomplete-component.md --- source/guides/tutorial/autocomplete-component.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/source/guides/tutorial/autocomplete-component.md b/source/guides/tutorial/autocomplete-component.md index 2496da1..e6d43e4 100644 --- a/source/guides/tutorial/autocomplete-component.md +++ b/source/guides/tutorial/autocomplete-component.md @@ -14,15 +14,15 @@ Assim como o component [`rental-listing` component](../simple-component), o coma * um arquivo JavaScript (`app/templates/components/list-filter.hbs`), * and um arquivo contendo o teste de integração (`tests/integration/components/list-filter-test.js`). -#### Providing Markup to a Component +#### Atualizando as declarações de componente -In our `app/templates/rentals.hbs` template file, we'll add a reference to our new `list-filter` component. +Vamos adicionar nosso component `list-filter` em nosso arquivo `app/templates/rentals.hbs`. -Notice that below we "wrap" our rentals markup inside the open and closing mentions of `list-filter` on lines 12 and 20. -This is an example of the [**block form**](../../components/wrapping-content-in-a-component) of a component, -which allows a Handlebars template to be rendered _inside_ the component's template wherever the `{{yield}}` expression appears. +Observe que vamos envolver nossa listagem de imóveis dentro do component `list-filter`, nas linhas 12 e 20. +Esse é um exemplo de [**block form**](../../components/wrapping-content-in-a-component), que permite que os template Handlebars seja renderizado _inside_, dentro do component `list-filter` na expressão `{{yield}}`. + +Neste caso, estamos passando (`yielding`), o resultado do nosso filtro para dentro da marcação interna, através da variável `rentals` (linha 14). -In this case we are passing, or "yielding", our filter data to the inner markup as a variable called `rentals` (line 14). ```app/templates/rentals.hbs{+12,+13,+14,+15,+16,+17,+18,+19,+20,-21,-22,-23}
From 9f0d75a89261c12e3636eebd66304197510e5732 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aur=C3=A9lio=20Saraiva?= Date: Sat, 9 Sep 2017 15:14:33 -0300 Subject: [PATCH 05/17] Update autocomplete-component.md --- .../guides/tutorial/autocomplete-component.md | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/source/guides/tutorial/autocomplete-component.md b/source/guides/tutorial/autocomplete-component.md index e6d43e4..f46966c 100644 --- a/source/guides/tutorial/autocomplete-component.md +++ b/source/guides/tutorial/autocomplete-component.md @@ -50,9 +50,9 @@ Neste caso, estamos passando (`yielding`), o resultado do nosso filtro para dent {{/each}} ``` -#### Accepting Input to a Component +#### Adicionando um input ao component -We want the component to simply provide an input field and yield the results list to its block, so our template will be simple: +Queremos que o component simplesmente tenha um campo (input) e envie o resultado para a expressão `{{yield}}`. ```app/templates/components/list-filter.hbs {{input value=value @@ -61,17 +61,14 @@ We want the component to simply provide an input field and yield the results lis placeholder="Filter By City"}} {{yield results}} ``` +Observer que nosso template agora possui um novo tipo de helper [`{{input}}`](../../templates/input-helpers), ele funciona como um campo de texto, no qual nosso usuário poderá digitar uma cidade e filtrar o resultado de imóveis. +A propriedade `value` do` input` será sincronizada com a propriedade `value` do component. -The template contains an [`{{input}}`](../../templates/input-helpers) helper that renders as a text field, in which the user can type a pattern to filter the list of cities used in a search. -The `value` property of the `input` will be kept in sync with the `value` property in the component. +Outra maneira de dizer isso é que a propriedade `value` do `input` é [**bound**](../../object-model/bindings/) com a propriedade `value` do compenent. -Another way to say this is that the `value` property of `input` is [**bound**](../../object-model/bindings/) to the `value` property of the component. -If the property changes, either by the user typing in the input field, or by assigning a new value to it in our program, -the new value of the property is present in both the rendered web page and in the code. +A propriedade `key-up` será vinculada à ação` handleFilterEntry`. -The `key-up` property will be bound to the `handleFilterEntry` action. - -Here is what the component's JavaScript looks like: +Aqui está como nosso código JavaScript do component deve ficar: ```app/components/list-filter.js import Ember from 'ember'; From 007dd1fc24b86d0d61a31850c29f5bbccc34d43d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aur=C3=A9lio=20Saraiva?= Date: Sat, 9 Sep 2017 15:48:44 -0300 Subject: [PATCH 06/17] Update autocomplete-component.md --- .../guides/tutorial/autocomplete-component.md | 36 +++++++++---------- 1 file changed, 17 insertions(+), 19 deletions(-) diff --git a/source/guides/tutorial/autocomplete-component.md b/source/guides/tutorial/autocomplete-component.md index f46966c..75a37fd 100644 --- a/source/guides/tutorial/autocomplete-component.md +++ b/source/guides/tutorial/autocomplete-component.md @@ -93,32 +93,30 @@ export default Ember.Component.extend({ }); ``` -#### Filtering Data Based on Input +#### Filtrando os dados -In the above example we use the `init` hook to seed our initial listings by calling the `filter` action with an empty value. -Our `handleFilterEntry` action calls a function called `filter` based on the `value` attribute set by the input helper. +No exemplo acima, usamos o hook `init` para criar nossas lista de imóveis iniciais ao chamar a função `filter` com um valor vazio. +Nossa action `handleFilterEntry` chama uma função chamada `filter` com base no valor do atributo `value`. -The `filter` function is passed in by the calling object. This is a pattern known as [closure actions](../../components/triggering-changes-with-actions/#toc_passing-the-action-to-the-component). +A função `filter` foi passada como objeto. Este é um padrão conhecido como [closure actions](../../components/triggering-changes-with-actions/#toc_passing-the-action-to-the-component). -Notice the `then` function called on the result of calling the `filter` function. -The code expects the `filter` function to return a promise. -A [promise](http://emberjs.com/api/classes/RSVP.Promise.html) is a JavaScript object that represents the result of an asynchronous function. -A promise may or may not be executed at the time you receive it. -To account for this, it provides functions, like `then` that let you give it code it will run when it eventually does receive a result. +Observe a função `then` chamada no resultado da função `filter`. +O código espera que a função `filter` responda uma promessa. +Uma [promise](http://emberjs.com/api/classes/RSVP.Promise.html) é um objeto JavaScript que representa o resultado de uma função assíncrona. +Uma promise pode ou não ser executada no momento em que você a declara. +Em nosso exemplo, fornecemos a função `then` que permite que seja executado somente quando na promise finalizar de processar o resultado. +Para implementar a função `filter` para fazer a filtragem dos imóveis de acordo com a cidade, criaremos um controller chamado `rental`. +[Controllers](../../controllers/) contêm ações e propriedades disponiveis para nosso template. +Como Ember trabalha por conveção, ele saberá que um controller chamado `rental` coresponde a uma route com o mesmo nome. -To implement the `filter` function to do the actual filter of rentals by city, we'll create a `rentals` controller. -[Controllers](../../controllers/) contain actions and properties available to the template of its corresponding route. -In our case we want to generate a controller called `rentals`. -Ember will know that a controller with the name of `rentals` will apply to the route with the same name. +Crie um controller para a route `rental` executando o seguinte: -Generate a controller for the `rentals` route by running the following: ```shell ember g controller rentals ``` - -Now, define your new controller like so: +Agora, podemos adicionar a action `filterByCity` ao controller: ```app/controllers/rentals.js import Ember from 'ember'; @@ -136,9 +134,9 @@ export default Ember.Controller.extend({ }); ``` -When the user types in the text field in our component, the `filterByCity` action in the controller is called. -This action takes in the `value` property, and filters the `rental` data for records in data store that match what the user has typed thus far. -The result of the query is returned to the caller. +Quando o usuário digitar no campo de texto em nosso component, a action `filterByCity` no controller será chamada. +Essa action aceita a propriedade `value` e filtra os dados de `rental` de acordo com a cidade que o usuário digitou. +O resultado da consulta é retornado para quem o chamou. #### Faking Query Results From a4baf5aaed1c50e0c8bcb62d3210a291d6499512 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aur=C3=A9lio=20Saraiva?= Date: Sat, 9 Sep 2017 18:43:30 -0300 Subject: [PATCH 07/17] Update autocomplete-component.md --- source/guides/tutorial/autocomplete-component.md | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/source/guides/tutorial/autocomplete-component.md b/source/guides/tutorial/autocomplete-component.md index 75a37fd..106f9e4 100644 --- a/source/guides/tutorial/autocomplete-component.md +++ b/source/guides/tutorial/autocomplete-component.md @@ -138,10 +138,10 @@ Quando o usuário digitar no campo de texto em nosso component, a action `filter Essa action aceita a propriedade `value` e filtra os dados de `rental` de acordo com a cidade que o usuário digitou. O resultado da consulta é retornado para quem o chamou. -#### Faking Query Results +#### Simulando um resultado -For this action to work, we need to replace our Mirage `config.js` file with the following, so that it can respond to our queries. -Instead of simply returning the list of rentals, our Mirage HTTP GET handler for `rentals` will return rentals matching the string provided in the URL query parameter called `city`. +Para que esta action funcione, precisamos substituir no arquivo `config.js` no Mirage com o seguinte, para que ele possa devolver o resultado de acordo com nossa consulta. +Em vez de simplesmente retornar a lista de imóveis, nosso manipulador Mirage HTTP GET `rentals` retornará os imóveis correspondente à string fornecida no parâmetro `city` na URL. ```mirage/config.js export default function() { @@ -197,8 +197,7 @@ export default function() { }); } ``` - -After updating our mirage configuration, we should see a simple filter on the home screen that will update the rental list as you type: +Depois de atualizar as configurações do Mirage, devemos conseguir ver o resultado sendo filtrado a medida que vamos digitando no campo de texto. ![home screen with filter component](../../images/autocomplete-component/styled-super-rentals-filter.png) From 1516ebcbea59eaefe1c191aa2b455392167b6cc7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aur=C3=A9lio=20Saraiva?= Date: Sat, 9 Sep 2017 19:00:43 -0300 Subject: [PATCH 08/17] Update autocomplete-component.md --- .../guides/tutorial/autocomplete-component.md | 124 +++++++++++++----- 1 file changed, 94 insertions(+), 30 deletions(-) diff --git a/source/guides/tutorial/autocomplete-component.md b/source/guides/tutorial/autocomplete-component.md index 106f9e4..b27e81d 100644 --- a/source/guides/tutorial/autocomplete-component.md +++ b/source/guides/tutorial/autocomplete-component.md @@ -201,7 +201,15 @@ Depois de atualizar as configurações do Mirage, devemos conseguir ver o result ![home screen with filter component](../../images/autocomplete-component/styled-super-rentals-filter.png) -#### Handling Results Coming Back at Different Times +#### Manipulação de resultados que retornam em tempos diferentes + +No nosso exemplo, você pode notar que, se você digitar rapidamente que os resultados podem ficar fora de sincronia com o texto de filtro atual inserido. +Isso ocorre porque nossa função de filtragem de dados é _synchronous_, o que significa que o código na função é agendado para mais tarde, enquanto o código que chama a função continua a ser executado. +Muitas vezes, o código que pode fazer pedidos de rede está configurado para ser assíncrono porque o servidor pode retornar suas respostas em horários variáveis. + +Permite adicionar algum código de proteção para garantir que nossos resultados não sejam sincronizados com a entrada do filtro. +Para fazer isso, simplesmente forneceremos o texto do filtro para a função de filtro, de modo que, quando os resultados retornarem, podemos comparar o valor do filtro original com o valor do filtro atual. +Vamos atualizar os resultados na tela somente se o valor do filtro original e o valor do filtro atual forem iguais. In our example, you might notice that if you type quickly that the results might get out of sync with the current filter text entered. This is because our data filtering function is _asynchronous_, meaning that the code in the function gets scheduled for later, while the code that calls the function continues to execute. @@ -235,8 +243,9 @@ export default Ember.Controller.extend({ }); ``` -In the `filterByCity` function in the rental controller above, -we've added a new property called `query` to the filter results instead of just returning an array of rentals as before. +Na função `filterByCity` no controlador de aluguel acima, adicionamos uma nova propriedade chamada` query` aos resultados do filtro em vez de apenas retornar uma matriz de aluguéis como antes. + +In the `filterByCity` function in the rental controller above, we've added a new property called `query` to the filter results instead of just returning an array of rentals as before. ```app/components/list-filter.js{+9,+10,+11,+19,+20,+21} import Ember from 'ember'; @@ -266,26 +275,36 @@ export default Ember.Component.extend({ }); ``` +No nosso componente de filtro de lista JavaScript, usamos a propriedade `query` para comparar a propriedade` value` do componente. +A propriedade `value` representa o estado mais recente do campo de entrada. +Portanto, verificamos se os resultados correspondem ao campo de entrada, garantindo que os resultados permanecerão em sincronia com a última coisa que o usuário digitou. + +Embora esta abordagem mantenha nossa ordem de resultados consistente, há outras coisas a considerar ao lidar com várias tarefas simultâneas, como [limitar o número de solicitações feitas ao servidor] (https://emberjs.com/api/classes/Ember .run.html # method_debounce). +Para criar um comportamento de autocompletar eficaz e robusto para seus aplicativos, recomendamos considerar o projeto de adição [`ember-concurrency`] (http://ember-concurrency.com/#/docs/introduction). + +Agora você pode continuar a implementar o [próximo recurso] (../ service /), ou continuar para testar nosso componente de filtro recém-criado. In our list filter component JavaScript, we use the `query` property to compare to the `value` property of the component. The `value` property represents the latest state of the input field. Therefore we now check that results match the input field, ensuring that results will stay in sync with the last thing the user has typed. -While this approach will keep our results order consistent, there are other things to consider when dealing with multiple concurrent tasks, -such as [limiting the number of requests made to the server](https://emberjs.com/api/classes/Ember.run.html#method_debounce). -To create effective and robust autocomplete behavior for your applications, -we recommend considering the [`ember-concurrency`](http://ember-concurrency.com/#/docs/introduction) addon project. + +While this approach will keep our results order consistent, there are other things to consider when dealing with multiple concurrent tasks, such as [limiting the number of requests made to the server](https://emberjs.com/api/classes/Ember.run.html#method_debounce). +To create effective and robust autocomplete behavior for your applications, we recommend considering the [`ember-concurrency`](http://ember-concurrency.com/#/docs/introduction) addon project. You can now proceed on to implement the [next feature](../service/), or continue on to test our newly created filter component. -### An Integration Test +### Teste de integração + +Agora que criamos um novo componente para filtrar uma lista, queremos criar uma prova para verificá-la. +Vamos usar um [teste de integração de componentes] (../../ testing / testing-components) para verificar o nosso comportamento de componentes, semelhante a [como testamos o nosso componente de listagem de aluguel mais cedo] (../ componente simples / # toc_teste- de-integra-o). + +Comece por abrir o teste de integração de componentes criado quando geramos nosso componente `list-filter`,` tests / integration / components / list-filter-test.js`. +Remova o teste padrão e crie um novo teste que verifique isso por padrão, o componente listará todos os itens. -Now that we've created a new component for filtering a list, -we want to create a test to verify it. -Let's use a [component integration test](../../testing/testing-components) -to verify our component behavior, -similar to [how we tested our rental listing component earlier](../simple-component/#toc_teste-de-integra-o). +Now that we've created a new component for filtering a list, we want to create a test to verify it. +Let's use a [component integration test](../../testing/testing-components) to verify our component behavior, similar to [how we tested our rental listing component earlier](../simple-component/#toc_teste-de-integra-o). Lets begin by opening the component integration test created when we generated our `list-filter` component, `tests/integration/components/list-filter-test.js`. Remove the default test, and create a new test that verifies that by default, the component will list all items. @@ -302,6 +321,9 @@ test('should initially load all listings', function (assert) { }); ``` +Nosso componente de filtro de lista toma uma função como um argumento, usado para encontrar a lista de aluguel de correspondência com base na string de filtro fornecida pelo usuário. +Nós fornecemos uma função de ação configurando-a para o escopo local do nosso teste, chamando `this.on`. + Our list-filter component takes a function as an argument, used to find the list of matching rentals based on the filter string provided by the user. We provide an action function by setting it to the local scope of our test by calling `this.on`. @@ -326,6 +348,18 @@ test('should initially load all listings', function (assert) { }); ``` +`this.on` irá adicionar a função fornecida ao escopo local de teste como` filterByCity`, que podemos usar para fornecer ao componente. + +Nossa função `filterByCity` vai pretender ser a função de ação de nosso componente, que faz a filtragem real da lista de aluguel. + +Não estamos testando a filtragem real dos aluguéis neste teste, pois está focada apenas na capacidade do componente. +Vamos testar a lógica completa de filtragem em testes de aceitação, descritos na próxima seção. + +Uma vez que nosso componente está esperando que o processo do filtro seja assíncrono, retornamos as promessas do nosso filtro, usando a [Biblioteca RSVP da Ember] (http://emberjs.com/api/classes/RSVP.html). + +Em seguida, adicionaremos a chamada para renderizar o componente para mostrar as cidades que fornecemos acima. + + `this.on` will add the provided function to the test local scope as `filterByCity`, which we can use to provide to the component. Our `filterByCity` function is going to pretend to be the action function for our component, that does the actual filtering of the rental list. @@ -373,16 +407,21 @@ test('should initially load all listings', function (assert) { }); ``` +Finalmente, adicionamos uma chamada de "espera" no final do nosso teste para afirmar os resultados. + +Ember's [wait helper] (../../ testing / testing-components / # toc_waiting-on-asynchronous-behavior) aguarda que todas as tarefas assíncronas sejam concluídas antes de executar o retorno da função dada. +Ele retorna uma promessa de que também retornamos do teste. + +Se você retornar uma promessa de um teste QUnit, o teste aguardará até terminar até que essa promessa seja resolvida. +Nesse caso, nosso teste é concluído quando o ajudante `wait` decide que o processamento está concluído, e a função que fornecemos que afirma que o estado resultante está concluído. Finally we add a `wait` call at the end of our test to assert the results. -Ember's [wait helper](../../testing/testing-components/#toc_waiting-on-asynchronous-behavior) -waits for all asynchronous tasks to complete before running the given function callback. +Ember's [wait helper](../../testing/testing-components/#toc_waiting-on-asynchronous-behavior) waits for all asynchronous tasks to complete before running the given function callback. It returns a promise that we also return from the test. If you return a promise from a QUnit test, the test will wait to finish until that promise is resolved. -In this case our test completes when the `wait` helper decides that processing is finished, -and the function we provide that asserts the resulting state is completed. +In this case our test completes when the `wait` helper decides that processing is finished, and the function we provide that asserts the resulting state is completed. ```tests/integration/components/list-filter-test.js{+3,+33,+34,+35,+36} import { moduleForComponent, test } from 'ember-qunit'; @@ -424,10 +463,15 @@ test('should initially load all listings', function (assert) { }); ``` +Para o nosso segundo teste, verificaremos que o texto de digitação no filtro realmente chamará adequadamente a ação do filtro e atualizará as listagens mostradas. + +Nós adicionaremos algumas funcionalidades adicionais à nossa ação `filterByCity` para retornar um único aluguel, representado pela variável `FILTERED_ITEMS` quando qualquer valor estiver definido. + +Forçamos a ação gerando um evento `keyUp` em nosso campo de entrada, e depois afirmamos que apenas um item é renderizado. + For our second test, we'll check that typing text in the filter will actually appropriately call the filter action and update the listings shown. -We'll add some additional functionality to our `filterByCity` action to additionally return a single rental, -represented by the variable `FILTERED_ITEMS` when any value is set. +We'll add some additional functionality to our `filterByCity` action to additionally return a single rental, represented by the variable `FILTERED_ITEMS` when any value is set. We force the action by generating a `keyUp` event on our input field, and then assert that only one item is rendered. @@ -467,10 +511,18 @@ test('should update with matching listings', function (assert) { }); ``` +Agora, ambos os cenários de teste de integração devem ser aprovados. +Você pode verificar isso iniciando nosso conjunto de testes digitando `ember t -s` na linha de comando. + Now both integration test scenarios should pass. You can verify this by starting up our test suite by typing `ember t -s` at the command line. -### Acceptance Tests +### Teste de aceitação + +Agora que testámos que o componente `list-filter` se comporta como esperado, vamos testar que a própria página também se comporta adequadamente com um teste de aceitação. +Verificaremos que um usuário que visite a página de aluguel pode inserir texto no campo de pesquisa e restringir a lista de aluguéis por cidade. + +Abra nosso teste de aceitação existente, `tests / acceptance / list-rentals-test.js` e implemente o teste rotulado" deve filtrar a lista de aluguéis por cidade ". Now that we've tested that the `list-filter` component behaves as expected, let's test that the page itself also behaves properly with an acceptance test. We'll verify that a user visiting the rentals page can enter text into the search field and narrow the list of rentals by city. @@ -489,6 +541,23 @@ test('should filter the list of rentals by city.', function (assert) { }); }); ``` +Apresentamos dois novos ajudantes neste teste, `fillIn` e` keyEvent`. + +* O [`fillIn`] (http://emberjs.com/api/classes/Ember.Test.html#method_fillIn) helper" preenche "o texto fornecido em um campo de entrada correspondente ao seletor fornecido. +* O auxiliar [`keyEvent`] (http://emberjs.com/api/classes/Ember.Test.html#method_keyEvent) envia um evento de traçado de tecla para a interface do usuário, simulando o usuário digitando uma chave. + +Em `app / components / list-filter.js`, temos como elemento de nível superior representado pelo componente uma classe chamada` list-filter`. +Localizamos a entrada de pesquisa dentro do componente usando o seletor `.list-filter input`, pois sabemos que existe apenas um elemento de entrada localizado no componente de filtro de lista. + +Nosso teste preenche "Seattle" como o critério de pesquisa no campo de pesquisa e, em seguida, envia um evento `keyup` para o mesmo campo com um código de` 69` (a chave `e`) para simular a digitação de um usuário. + +O teste localiza os resultados da pesquisa encontrando elementos com uma classe de 'listagem', que nós demos ao nosso componente 'lista de aluguel' na seção ["Construindo um Componente Simples"] (../ componente simples) o tutorial. + +Uma vez que nossos dados estão codificados em Mirage, sabemos que existe apenas um aluguel com um nome da cidade de "Seattle", por isso afirmamos que o número de listagens é um e que a localização exibida é chamada "Seattle". + +O teste verifica que depois de preencher a entrada de pesquisa com "Seattle", a lista de aluguel diminui de 3 para 1 e o item exibido mostra "Seattle" como a localização. + +Você deve fazer apenas 2 testes com falha: uma falha de teste de aceitação remanescente; e nosso teste ESLint que falha em um assertivo não utilizado para o nosso teste não implementado. We introduce two new helpers into this test, `fillIn` and `keyEvent`. @@ -496,20 +565,15 @@ We introduce two new helpers into this test, `fillIn` and `keyEvent`. * The [`keyEvent`](http://emberjs.com/api/classes/Ember.Test.html#method_keyEvent) helper sends a key stroke event to the UI, simulating the user typing a key. In `app/components/list-filter.js`, we have as the top-level element rendered by the component a class called `list-filter`. -We locate the search input within the component using the selector `.list-filter input`, -since we know that there is only one input element located in the list-filter component. +We locate the search input within the component using the selector `.list-filter input`, since we know that there is only one input element located in the list-filter component. -Our test fills out "Seattle" as the search criteria in the search field, -and then sends a `keyup` event to the same field with a code of `69` (the `e` key) to simulate a user typing. +Our test fills out "Seattle" as the search criteria in the search field, and then sends a `keyup` event to the same field with a code of `69` (the `e` key) to simulate a user typing. -The test locates the results of the search by finding elements with a class of `listing`, -which we gave to our `rental-listing` component in the ["Building a Simple Component"](../simple-component) section of the tutorial. +The test locates the results of the search by finding elements with a class of `listing`, which we gave to our `rental-listing` component in the ["Building a Simple Component"](../simple-component) section of the tutorial. -Since our data is hard-coded in Mirage, we know that there is only one rental with a city name of "Seattle", -so we assert that the number of listings is one and that the location it displays is named, "Seattle". +Since our data is hard-coded in Mirage, we know that there is only one rental with a city name of "Seattle", so we assert that the number of listings is one and that the location it displays is named, "Seattle". -The test verifies that after filling in the search input with "Seattle", the rental list reduces from 3 to 1, -and the item displayed shows "Seattle" as the location. +The test verifies that after filling in the search input with "Seattle", the rental list reduces from 3 to 1, and the item displayed shows "Seattle" as the location. You should be down to only 2 failing tests: One remaining acceptance test failure; and our ESLint test that fails on an unused assert for our unimplemented test. From 3525ba08aaedd4b354f75e9588609b83bf4ed885 Mon Sep 17 00:00:00 2001 From: Aurelio Saraiva Date: Sat, 9 Sep 2017 19:46:33 -0300 Subject: [PATCH 09/17] translated --- .../guides/tutorial/autocomplete-component.md | 66 ++++++------------- 1 file changed, 19 insertions(+), 47 deletions(-) diff --git a/source/guides/tutorial/autocomplete-component.md b/source/guides/tutorial/autocomplete-component.md index b27e81d..4be4555 100644 --- a/source/guides/tutorial/autocomplete-component.md +++ b/source/guides/tutorial/autocomplete-component.md @@ -136,7 +136,7 @@ export default Ember.Controller.extend({ Quando o usuário digitar no campo de texto em nosso component, a action `filterByCity` no controller será chamada. Essa action aceita a propriedade `value` e filtra os dados de `rental` de acordo com a cidade que o usuário digitou. -O resultado da consulta é retornado para quem o chamou. +O resultado da consulta é retornado para quem o chamou. #### Simulando um resultado @@ -203,21 +203,13 @@ Depois de atualizar as configurações do Mirage, devemos conseguir ver o result #### Manipulação de resultados que retornam em tempos diferentes -No nosso exemplo, você pode notar que, se você digitar rapidamente que os resultados podem ficar fora de sincronia com o texto de filtro atual inserido. -Isso ocorre porque nossa função de filtragem de dados é _synchronous_, o que significa que o código na função é agendado para mais tarde, enquanto o código que chama a função continua a ser executado. -Muitas vezes, o código que pode fazer pedidos de rede está configurado para ser assíncrono porque o servidor pode retornar suas respostas em horários variáveis. +Se você digitar rapidamente no campo de texto, você verá que o resultado apresentado é mostrado de forma confusa em tempo diferente. +Isso ocorre porque nossa função que faz a filtragem é _synchronous_, o que significa que o código na função é agendado para mais tarde, enquanto o código que chama a função continua a ser executado. +Muitas vezes, o código que faz solicitações na rede está configurado para ser assíncrono porque o servidor pode retornar as respostas em horários variáveis. -Permite adicionar algum código de proteção para garantir que nossos resultados não sejam sincronizados com a entrada do filtro. +Vamos adicionar um código simples para garantir que nossos resultados sejam sincronizados de acordo com o valor do filtro. Para fazer isso, simplesmente forneceremos o texto do filtro para a função de filtro, de modo que, quando os resultados retornarem, podemos comparar o valor do filtro original com o valor do filtro atual. -Vamos atualizar os resultados na tela somente se o valor do filtro original e o valor do filtro atual forem iguais. - -In our example, you might notice that if you type quickly that the results might get out of sync with the current filter text entered. -This is because our data filtering function is _asynchronous_, meaning that the code in the function gets scheduled for later, while the code that calls the function continues to execute. -Often code that may make network requests is set up to be asynchronous because the server may return its responses at varying times. - -Lets add some protective code to ensure our results do not get out of sync with our filter input. -To do this we'll simply provide the filter text to the filter function, so that when the results come back we can compare the original filter value with the current filter value. -We will update the results on screen only if the original filter value and the current filter value are the same. +Vamos atualizar o resultado na tela somente se o valor do filtro original e o valor do filtro atual forem iguais. ```app/controllers/rentals.js{-7,+8,+9,+10,+11,-13,+14,+15,+16,+17} import Ember from 'ember'; @@ -243,9 +235,7 @@ export default Ember.Controller.extend({ }); ``` -Na função `filterByCity` no controlador de aluguel acima, adicionamos uma nova propriedade chamada` query` aos resultados do filtro em vez de apenas retornar uma matriz de aluguéis como antes. - -In the `filterByCity` function in the rental controller above, we've added a new property called `query` to the filter results instead of just returning an array of rentals as before. +A action `filterByCity` no controller rental acima, adicionamos uma nova propriedade chamada` query` aos resultados do filtro em vez de apenas retornar um array de imóveis como antes. ```app/components/list-filter.js{+9,+10,+11,+19,+20,+21} import Ember from 'ember'; @@ -275,39 +265,23 @@ export default Ember.Component.extend({ }); ``` -No nosso componente de filtro de lista JavaScript, usamos a propriedade `query` para comparar a propriedade` value` do componente. -A propriedade `value` representa o estado mais recente do campo de entrada. -Portanto, verificamos se os resultados correspondem ao campo de entrada, garantindo que os resultados permanecerão em sincronia com a última coisa que o usuário digitou. - -Embora esta abordagem mantenha nossa ordem de resultados consistente, há outras coisas a considerar ao lidar com várias tarefas simultâneas, como [limitar o número de solicitações feitas ao servidor] (https://emberjs.com/api/classes/Ember .run.html # method_debounce). -Para criar um comportamento de autocompletar eficaz e robusto para seus aplicativos, recomendamos considerar o projeto de adição [`ember-concurrency`] (http://ember-concurrency.com/#/docs/introduction). - -Agora você pode continuar a implementar o [próximo recurso] (../ service /), ou continuar para testar nosso componente de filtro recém-criado. -In our list filter component JavaScript, we use the `query` property to compare to the `value` property of the component. -The `value` property represents the latest state of the input field. -Therefore we now check that results match the input field, ensuring that results will stay in sync with the last thing the user has typed. +No nosso component `list-filter`, usamos a propriedade `query` para comparar com a propriedade `value` do component. +A propriedade `value` representa o estado mais recente do filtro. +Portanto, verificamos se os resultados correspondem ao valor do filtro, garantindo que os resultados permanecerão em sincronia com a última coisa que o usuário digitou. +Embora esta abordagem mantenha nossa ordem de resultados consistente, há outras coisas a considerar ao lidar com várias tarefas simultâneas, como [limitar o número de solicitações feitas ao servidor](https://emberjs.com/api/classes/Ember.run.html#method_debounce). +Para criar um comportamento de autocomplete eficaz e robusto para seus aplicativos, recomendamos considerar utilizar o addon [`ember-concurrency`](http://ember-concurrency.com/#/docs/introduction). -While this approach will keep our results order consistent, there are other things to consider when dealing with multiple concurrent tasks, such as [limiting the number of requests made to the server](https://emberjs.com/api/classes/Ember.run.html#method_debounce). -To create effective and robust autocomplete behavior for your applications, we recommend considering the [`ember-concurrency`](http://ember-concurrency.com/#/docs/introduction) addon project. - - -You can now proceed on to implement the [next feature](../service/), or continue on to test our newly created filter component. +Agora você pode avançar para [próxima página](../service/) ou continuar nesta página e fazer os teste de integração e aceitação. ### Teste de integração -Agora que criamos um novo componente para filtrar uma lista, queremos criar uma prova para verificá-la. -Vamos usar um [teste de integração de componentes] (../../ testing / testing-components) para verificar o nosso comportamento de componentes, semelhante a [como testamos o nosso componente de listagem de aluguel mais cedo] (../ componente simples / # toc_teste- de-integra-o). - -Comece por abrir o teste de integração de componentes criado quando geramos nosso componente `list-filter`,` tests / integration / components / list-filter-test.js`. -Remova o teste padrão e crie um novo teste que verifique isso por padrão, o componente listará todos os itens. - -Now that we've created a new component for filtering a list, we want to create a test to verify it. -Let's use a [component integration test](../../testing/testing-components) to verify our component behavior, similar to [how we tested our rental listing component earlier](../simple-component/#toc_teste-de-integra-o). +Agora que criamos um novo component `list-filter`, precisamos criar testes para verificar que tudo funcione corretamente no futuro. +Vamos usar um [component integration test](../../testing/testing-components) para verificar o comportamento do component, semelhante ao teste criado para a [listagem de ímoveis](../simple-component/#toc_teste-de-integra-o). -Lets begin by opening the component integration test created when we generated our `list-filter` component, `tests/integration/components/list-filter-test.js`. -Remove the default test, and create a new test that verifies that by default, the component will list all items. +Comece abrindo o arquivo de teste do component `list-filter` criado anteriormente `tests/integration/components/list-filter-test.js`. +Remova o teste padrão e crie um novo teste que verifique se o component irá listar todos os ímoveis. ```tests/integration/components/list-filter-test.js import { moduleForComponent, test } from 'ember-qunit'; @@ -321,11 +295,9 @@ test('should initially load all listings', function (assert) { }); ``` -Nosso componente de filtro de lista toma uma função como um argumento, usado para encontrar a lista de aluguel de correspondência com base na string de filtro fornecida pelo usuário. -Nós fornecemos uma função de ação configurando-a para o escopo local do nosso teste, chamando `this.on`. +Nosso component `list-filter` recebe como argumento uma função, usado para retornar a lista de imóveis que corresponde a string digitada pelo usuário. -Our list-filter component takes a function as an argument, used to find the list of matching rentals based on the filter string provided by the user. -We provide an action function by setting it to the local scope of our test by calling `this.on`. +Para simular o comportamento da action `filterByCity` definida no controller `rental`, vamos criar uma action no escopo local usando `this.on`. ```tests/integration/components/list-filter-test.js{+3,+5,+6,+13,+14,+15,+16,+17} import { moduleForComponent, test } from 'ember-qunit'; From 6596aa740e597afa1e8cf226e08530b072faa0b9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aur=C3=A9lio=20Saraiva?= Date: Thu, 14 Sep 2017 09:30:07 -0300 Subject: [PATCH 10/17] Update autocomplete-component.md --- .../guides/tutorial/autocomplete-component.md | 60 +++++-------------- 1 file changed, 16 insertions(+), 44 deletions(-) diff --git a/source/guides/tutorial/autocomplete-component.md b/source/guides/tutorial/autocomplete-component.md index 4be4555..89fad12 100644 --- a/source/guides/tutorial/autocomplete-component.md +++ b/source/guides/tutorial/autocomplete-component.md @@ -320,29 +320,18 @@ test('should initially load all listings', function (assert) { }); ``` -`this.on` irá adicionar a função fornecida ao escopo local de teste como` filterByCity`, que podemos usar para fornecer ao componente. +`this.on` irá adicionar a função fornecida ao escopo local de teste como` filterByCity`, que podemos usar no component. -Nossa função `filterByCity` vai pretender ser a função de ação de nosso componente, que faz a filtragem real da lista de aluguel. +Nossa função `filterByCity` será a action que nosso compoente irá chamar para retornar a lista de imóveis filtrada. -Não estamos testando a filtragem real dos aluguéis neste teste, pois está focada apenas na capacidade do componente. -Vamos testar a lógica completa de filtragem em testes de aceitação, descritos na próxima seção. +Não estamos testando a filtragem real dos imóveis neste teste, pois estamos focando apenas no comportamento do component. +Vamos testar a lógica completa de filtragem nos testes de aceitação, descritos na próxima seção. -Uma vez que nosso componente está esperando que o processo do filtro seja assíncrono, retornamos as promessas do nosso filtro, usando a [Biblioteca RSVP da Ember] (http://emberjs.com/api/classes/RSVP.html). +Uma vez que nosso component está esperando que a filtragem seja assíncrona, retornaremos uma Promise com o filtro de imóveis, usando a [Ember RSVP library](http://emberjs.com/api/classes/RSVP.html). -Em seguida, adicionaremos a chamada para renderizar o componente para mostrar as cidades que fornecemos acima. +Em seguida, adicionaremos a chamada para renderizar o component e mostrar as cidades que fornecemos acima. -`this.on` will add the provided function to the test local scope as `filterByCity`, which we can use to provide to the component. - -Our `filterByCity` function is going to pretend to be the action function for our component, that does the actual filtering of the rental list. - -We are not testing the actual filtering of rentals in this test, since it is focused on only the capability of the component. -We will test the full logic of filtering in acceptance tests, described in the next section. - -Since our component is expecting the filter process to be asynchronous, we return promises from our filter, using [Ember's RSVP library](http://emberjs.com/api/classes/RSVP.html). - -Next, we'll add the call to render the component to show the cities we've provided above. - ```tests/integration/components/list-filter-test.js{+19,+20,+21,+22,+23,+24,+25,+26,+27,+28,+29,+30,+31,+32} import { moduleForComponent, test } from 'ember-qunit'; import hbs from 'htmlbars-inline-precompile'; @@ -379,21 +368,13 @@ test('should initially load all listings', function (assert) { }); ``` -Finalmente, adicionamos uma chamada de "espera" no final do nosso teste para afirmar os resultados. - -Ember's [wait helper] (../../ testing / testing-components / # toc_waiting-on-asynchronous-behavior) aguarda que todas as tarefas assíncronas sejam concluídas antes de executar o retorno da função dada. -Ele retorna uma promessa de que também retornamos do teste. +Finalmente, adicionamos uma chamada de `wait` no final do nosso teste para verificar os resultados. -Se você retornar uma promessa de um teste QUnit, o teste aguardará até terminar até que essa promessa seja resolvida. -Nesse caso, nosso teste é concluído quando o ajudante `wait` decide que o processamento está concluído, e a função que fornecemos que afirma que o estado resultante está concluído. +Ember [wait helper](../../testing/testing-components/#toc_waiting-on-asynchronous-behavior) aguarda que todas as tarefas assíncronas sejam concluídas antes de executar o retorno da função. +Ele retorna uma promise igual a que utilizamos no teste. -Finally we add a `wait` call at the end of our test to assert the results. - -Ember's [wait helper](../../testing/testing-components/#toc_waiting-on-asynchronous-behavior) waits for all asynchronous tasks to complete before running the given function callback. -It returns a promise that we also return from the test. - -If you return a promise from a QUnit test, the test will wait to finish until that promise is resolved. -In this case our test completes when the `wait` helper decides that processing is finished, and the function we provide that asserts the resulting state is completed. +Se você retornar uma promise de um teste QUnit, o teste aguardará até que a promise finalize. +Nesse caso, nosso teste é concluído quando o helper `wait` decide que o processamento está concluído, e a função que fornecemos que afirma que o estado resultante está concluído. ```tests/integration/components/list-filter-test.js{+3,+33,+34,+35,+36} import { moduleForComponent, test } from 'ember-qunit'; @@ -435,17 +416,11 @@ test('should initially load all listings', function (assert) { }); ``` -Para o nosso segundo teste, verificaremos que o texto de digitação no filtro realmente chamará adequadamente a ação do filtro e atualizará as listagens mostradas. - -Nós adicionaremos algumas funcionalidades adicionais à nossa ação `filterByCity` para retornar um único aluguel, representado pela variável `FILTERED_ITEMS` quando qualquer valor estiver definido. +Para o nosso segundo teste, verificaremos que o texto digitado no filtro realmente chamará adequadamente a action de filtragem e atualizará as listagens corretamente. -Forçamos a ação gerando um evento `keyUp` em nosso campo de entrada, e depois afirmamos que apenas um item é renderizado. +Nós adicionaremos algumas funcionalidades adicionais à nossa action `filterByCity` para retornar um único imóvel, representado pela variável `FILTERED_ITEMS` quando qualquer valor estiver definido. -For our second test, we'll check that typing text in the filter will actually appropriately call the filter action and update the listings shown. - -We'll add some additional functionality to our `filterByCity` action to additionally return a single rental, represented by the variable `FILTERED_ITEMS` when any value is set. - -We force the action by generating a `keyUp` event on our input field, and then assert that only one item is rendered. +Forçamos a action gerando um evento `keyUp` em nosso campo de pesquisa, e depois verificamos que apenas um item é renderizado. ```tests/integration/components/list-filter-test.js test('should update with matching listings', function (assert) { @@ -483,11 +458,8 @@ test('should update with matching listings', function (assert) { }); ``` -Agora, ambos os cenários de teste de integração devem ser aprovados. -Você pode verificar isso iniciando nosso conjunto de testes digitando `ember t -s` na linha de comando. - -Now both integration test scenarios should pass. -You can verify this by starting up our test suite by typing `ember t -s` at the command line. +Agora, ambos os cenários de teste de integração devem está aprovados. +Você pode verificar isso iniciando exeutando `ember t -s` no terminal. ### Teste de aceitação From 1206e2ae125ffd72bd3fd482c05e4e93fe869036 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aur=C3=A9lio=20Saraiva?= Date: Mon, 18 Sep 2017 09:56:40 -0300 Subject: [PATCH 11/17] Update autocomplete-component.md --- .../guides/tutorial/autocomplete-component.md | 41 ++++--------------- 1 file changed, 9 insertions(+), 32 deletions(-) diff --git a/source/guides/tutorial/autocomplete-component.md b/source/guides/tutorial/autocomplete-component.md index 89fad12..cc3d38d 100644 --- a/source/guides/tutorial/autocomplete-component.md +++ b/source/guides/tutorial/autocomplete-component.md @@ -464,15 +464,9 @@ Você pode verificar isso iniciando exeutando `ember t -s` no terminal. ### Teste de aceitação Agora que testámos que o componente `list-filter` se comporta como esperado, vamos testar que a própria página também se comporta adequadamente com um teste de aceitação. -Verificaremos que um usuário que visite a página de aluguel pode inserir texto no campo de pesquisa e restringir a lista de aluguéis por cidade. - -Abra nosso teste de aceitação existente, `tests / acceptance / list-rentals-test.js` e implemente o teste rotulado" deve filtrar a lista de aluguéis por cidade ". - -Now that we've tested that the `list-filter` component behaves as expected, let's test that the page itself also behaves properly with an acceptance test. -We'll verify that a user visiting the rentals page can enter text into the search field and narrow the list of rentals by city. - -Open our existing acceptance test, `tests/acceptance/list-rentals-test.js`, and implement the test labeled "should filter the list of rentals by city". +Verificaremos que um usuário que visite a página de imóveis pode digitar no campo de pesquisa e filtrar a lista de imóveis por cidade. +Abra nosso teste de aceitação existente, `tests/acceptance/list-rentals-test.js` e implemente o teste chamado "should filter the list of rentals by city". ```/tests/acceptance/list-rentals-test.js test('should filter the list of rentals by city.', function (assert) { @@ -485,40 +479,23 @@ test('should filter the list of rentals by city.', function (assert) { }); }); ``` -Apresentamos dois novos ajudantes neste teste, `fillIn` e` keyEvent`. +Apresentamos dois novos helper neste teste, `fillIn` e` keyEvent`. -* O [`fillIn`] (http://emberjs.com/api/classes/Ember.Test.html#method_fillIn) helper" preenche "o texto fornecido em um campo de entrada correspondente ao seletor fornecido. -* O auxiliar [`keyEvent`] (http://emberjs.com/api/classes/Ember.Test.html#method_keyEvent) envia um evento de traçado de tecla para a interface do usuário, simulando o usuário digitando uma chave. +* [`fillIn`](http://emberjs.com/api/classes/Ember.Test.html#method_fillIn) `prenche` o campo de texto correspondente ao seletor fornecido. +* [`keyEvent`](http://emberjs.com/api/classes/Ember.Test.html#method_keyEvent) envia um evento de tecla para a interface do usuário, simulando o usuário digitando o valor. -Em `app / components / list-filter.js`, temos como elemento de nível superior representado pelo componente uma classe chamada` list-filter`. +Em `app/components/list-filter.js`, temos como elemento de nível superior representado pelo component uma classe chamada `list-filter`. Localizamos a entrada de pesquisa dentro do componente usando o seletor `.list-filter input`, pois sabemos que existe apenas um elemento de entrada localizado no componente de filtro de lista. -Nosso teste preenche "Seattle" como o critério de pesquisa no campo de pesquisa e, em seguida, envia um evento `keyup` para o mesmo campo com um código de` 69` (a chave `e`) para simular a digitação de um usuário. +Nosso teste preenche "Seattle" como o critério de pesquisa no campo de pesquisa e, em seguida, envia um evento `keyup` para o mesmo campo com um código `69` (key `e`) para simular a digitação de um usuário. -O teste localiza os resultados da pesquisa encontrando elementos com uma classe de 'listagem', que nós demos ao nosso componente 'lista de aluguel' na seção ["Construindo um Componente Simples"] (../ componente simples) o tutorial. +O teste localiza os resultados da pesquisa encontrando elementos com uma classe de `listing`, que nós demos ao nosso component `rental-listing` na seção ["Construindo um Componente Simples"](../simple-component). -Uma vez que nossos dados estão codificados em Mirage, sabemos que existe apenas um aluguel com um nome da cidade de "Seattle", por isso afirmamos que o número de listagens é um e que a localização exibida é chamada "Seattle". +Uma vez que nossos dados estão codificados em Mirage, sabemos que existe apenas um imóvel na cidade de "Seattle", por isso afirmamos que o número de listagens é um e que a localização exibida é chamada "Seattle". O teste verifica que depois de preencher a entrada de pesquisa com "Seattle", a lista de aluguel diminui de 3 para 1 e o item exibido mostra "Seattle" como a localização. Você deve fazer apenas 2 testes com falha: uma falha de teste de aceitação remanescente; e nosso teste ESLint que falha em um assertivo não utilizado para o nosso teste não implementado. -We introduce two new helpers into this test, `fillIn` and `keyEvent`. - -* The [`fillIn`](http://emberjs.com/api/classes/Ember.Test.html#method_fillIn) helper "fills in" the given text into an input field matching the given selector. -* The [`keyEvent`](http://emberjs.com/api/classes/Ember.Test.html#method_keyEvent) helper sends a key stroke event to the UI, simulating the user typing a key. - -In `app/components/list-filter.js`, we have as the top-level element rendered by the component a class called `list-filter`. -We locate the search input within the component using the selector `.list-filter input`, since we know that there is only one input element located in the list-filter component. - -Our test fills out "Seattle" as the search criteria in the search field, and then sends a `keyup` event to the same field with a code of `69` (the `e` key) to simulate a user typing. - -The test locates the results of the search by finding elements with a class of `listing`, which we gave to our `rental-listing` component in the ["Building a Simple Component"](../simple-component) section of the tutorial. - -Since our data is hard-coded in Mirage, we know that there is only one rental with a city name of "Seattle", so we assert that the number of listings is one and that the location it displays is named, "Seattle". - -The test verifies that after filling in the search input with "Seattle", the rental list reduces from 3 to 1, and the item displayed shows "Seattle" as the location. - -You should be down to only 2 failing tests: One remaining acceptance test failure; and our ESLint test that fails on an unused assert for our unimplemented test. ![passing acceptance tests](../../images/autocomplete-component/passing-acceptance-tests.png) From 0e7e3a807e521208e7d65f602c6e0f8ff2fcdde3 Mon Sep 17 00:00:00 2001 From: Aurelio Saraiva Date: Mon, 18 Sep 2017 10:50:57 -0300 Subject: [PATCH 12/17] fixed --- .../guides/tutorial/autocomplete-component.md | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/source/guides/tutorial/autocomplete-component.md b/source/guides/tutorial/autocomplete-component.md index cc3d38d..4937fab 100644 --- a/source/guides/tutorial/autocomplete-component.md +++ b/source/guides/tutorial/autocomplete-component.md @@ -1,27 +1,27 @@ Quando nossos usuários estão procurando um imóvel, eles precisam filtrar a pesquisa por uma cidade especifica, por exemplo. -Nosso [primeiro component](../simple-component/) `rental-listing` apenas mostrava informações sobre o o imóvel, esse novo componente vai permitir que nosso usuário consiga filtrar os imóveis por critérios. +Nosso component [`rental-listing`](../simple-component/) apenas mostrava informações sobre o imóvel, esse novo component vai permitir que nosso usuário consiga filtrar imóveis por cidade. -Para começar, vamos gerar o nosso novo component. +Para começar, vamos gerar o novo component. Chamaremos esse component de `list-filter`, já que tudo o que precisamos é que ele filtre os imóveis disponivel. ```shell ember g component list-filter ``` -Assim como o component [`rental-listing` component](../simple-component), o comando "generate component" vai criar: +Assim como o component [`rental-listing`](../simple-component), o comando `ember generate component` vai criar: * um arquivo de template (`app/templates/components/list-filter.hbs`), * um arquivo JavaScript (`app/templates/components/list-filter.hbs`), -* and um arquivo contendo o teste de integração (`tests/integration/components/list-filter-test.js`). +* e um arquivo de teste de integração (`tests/integration/components/list-filter-test.js`). -#### Atualizando as declarações de componente +#### Atualizando as Marcações do Component Vamos adicionar nosso component `list-filter` em nosso arquivo `app/templates/rentals.hbs`. -Observe que vamos envolver nossa listagem de imóveis dentro do component `list-filter`, nas linhas 12 e 20. -Esse é um exemplo de [**block form**](../../components/wrapping-content-in-a-component), que permite que os template Handlebars seja renderizado _inside_, dentro do component `list-filter` na expressão `{{yield}}`. +Observe que vamos envolver nossa listagem de imóveis dentro do component `list-filter`, nas linhas **12** e **20**. +Esse é um exemplo de [**block form**](../../components/wrapping-content-in-a-component), que permite que o template Handlebars seja renderizado _inside_, dentro do component `list-filter` na expressão `{{yield}}`. -Neste caso, estamos passando (`yielding`), o resultado do nosso filtro para dentro da marcação interna, através da variável `rentals` (linha 14). +Neste caso, estamos passando `yielding`, o resultado do nosso filtro para dentro da marcação interna, através da variável `rentals` (linha 14). ```app/templates/rentals.hbs{+12,+13,+14,+15,+16,+17,+18,+19,+20,-21,-22,-23} @@ -61,12 +61,13 @@ Queremos que o component simplesmente tenha um campo (input) e envie o resultado placeholder="Filter By City"}} {{yield results}} ``` + Observer que nosso template agora possui um novo tipo de helper [`{{input}}`](../../templates/input-helpers), ele funciona como um campo de texto, no qual nosso usuário poderá digitar uma cidade e filtrar o resultado de imóveis. A propriedade `value` do` input` será sincronizada com a propriedade `value` do component. Outra maneira de dizer isso é que a propriedade `value` do `input` é [**bound**](../../object-model/bindings/) com a propriedade `value` do compenent. -A propriedade `key-up` será vinculada à ação` handleFilterEntry`. +A propriedade `key-up` será vinculada à action `handleFilterEntry`. Aqui está como nosso código JavaScript do component deve ficar: From 73bb5aea0fcf453da79e380a0b1b50b86579e9f3 Mon Sep 17 00:00:00 2001 From: Aurelio Saraiva Date: Mon, 18 Sep 2017 11:00:33 -0300 Subject: [PATCH 13/17] fixed typos --- scripts/aspell.en.pws | 9 +++++++++ .../guides/tutorial/autocomplete-component.md | 20 +++++++++---------- 2 files changed, 19 insertions(+), 10 deletions(-) diff --git a/scripts/aspell.en.pws b/scripts/aspell.en.pws index 36de40f..9f09313 100644 --- a/scripts/aspell.en.pws +++ b/scripts/aspell.en.pws @@ -320,3 +320,12 @@ statefuls container img src +ESLint +fillIn +filterByCity +handleFilterEntry +init +keyEvent +keyup +keyUp +QUnit diff --git a/source/guides/tutorial/autocomplete-component.md b/source/guides/tutorial/autocomplete-component.md index 4937fab..bbbbac3 100644 --- a/source/guides/tutorial/autocomplete-component.md +++ b/source/guides/tutorial/autocomplete-component.md @@ -2,7 +2,7 @@ Quando nossos usuários estão procurando um imóvel, eles precisam filtrar a pe Nosso component [`rental-listing`](../simple-component/) apenas mostrava informações sobre o imóvel, esse novo component vai permitir que nosso usuário consiga filtrar imóveis por cidade. Para começar, vamos gerar o novo component. -Chamaremos esse component de `list-filter`, já que tudo o que precisamos é que ele filtre os imóveis disponivel. +Chamaremos esse component de `list-filter`, já que tudo o que precisamos é que ele filtre os imóveis disponível. ```shell ember g component list-filter @@ -65,7 +65,7 @@ Queremos que o component simplesmente tenha um campo (input) e envie o resultado Observer que nosso template agora possui um novo tipo de helper [`{{input}}`](../../templates/input-helpers), ele funciona como um campo de texto, no qual nosso usuário poderá digitar uma cidade e filtrar o resultado de imóveis. A propriedade `value` do` input` será sincronizada com a propriedade `value` do component. -Outra maneira de dizer isso é que a propriedade `value` do `input` é [**bound**](../../object-model/bindings/) com a propriedade `value` do compenent. +Outra maneira de dizer isso é que a propriedade `value` do `input` é [**bound**](../../object-model/bindings/) com a propriedade `value` do component. A propriedade `key-up` será vinculada à action `handleFilterEntry`. @@ -108,8 +108,8 @@ Uma promise pode ou não ser executada no momento em que você a declara. Em nosso exemplo, fornecemos a função `then` que permite que seja executado somente quando na promise finalizar de processar o resultado. Para implementar a função `filter` para fazer a filtragem dos imóveis de acordo com a cidade, criaremos um controller chamado `rental`. -[Controllers](../../controllers/) contêm ações e propriedades disponiveis para nosso template. -Como Ember trabalha por conveção, ele saberá que um controller chamado `rental` coresponde a uma route com o mesmo nome. +[Controllers](../../controllers/) contêm ações e propriedades disponíveis para nosso template. +Como Ember trabalha por convenções, ele saberá que um controller chamado `rental` pertence a uma route com o mesmo nome. Crie um controller para a route `rental` executando o seguinte: @@ -279,10 +279,10 @@ Agora você pode avançar para [próxima página](../service/) ou continuar nest ### Teste de integração Agora que criamos um novo component `list-filter`, precisamos criar testes para verificar que tudo funcione corretamente no futuro. -Vamos usar um [component integration test](../../testing/testing-components) para verificar o comportamento do component, semelhante ao teste criado para a [listagem de ímoveis](../simple-component/#toc_teste-de-integra-o). +Vamos usar um [component integration test](../../testing/testing-components) para verificar o comportamento do component, semelhante ao teste criado para a [listagem de imóveis](../simple-component/#toc_teste-de-integra-o). Comece abrindo o arquivo de teste do component `list-filter` criado anteriormente `tests/integration/components/list-filter-test.js`. -Remova o teste padrão e crie um novo teste que verifique se o component irá listar todos os ímoveis. +Remova o teste padrão e crie um novo teste que verifique se o component irá listar todos os imóveis. ```tests/integration/components/list-filter-test.js import { moduleForComponent, test } from 'ember-qunit'; @@ -323,7 +323,7 @@ test('should initially load all listings', function (assert) { `this.on` irá adicionar a função fornecida ao escopo local de teste como` filterByCity`, que podemos usar no component. -Nossa função `filterByCity` será a action que nosso compoente irá chamar para retornar a lista de imóveis filtrada. +Nossa função `filterByCity` será a action que nosso component irá chamar para retornar a lista de imóveis filtrada. Não estamos testando a filtragem real dos imóveis neste teste, pois estamos focando apenas no comportamento do component. Vamos testar a lógica completa de filtragem nos testes de aceitação, descritos na próxima seção. @@ -460,11 +460,11 @@ test('should update with matching listings', function (assert) { ``` Agora, ambos os cenários de teste de integração devem está aprovados. -Você pode verificar isso iniciando exeutando `ember t -s` no terminal. +Você pode verificar isso iniciando executando `ember t -s` no terminal. ### Teste de aceitação -Agora que testámos que o componente `list-filter` se comporta como esperado, vamos testar que a própria página também se comporta adequadamente com um teste de aceitação. +Agora que testamos que o componente `list-filter` se comporta como esperado, vamos testar que a própria página também se comporta adequadamente com um teste de aceitação. Verificaremos que um usuário que visite a página de imóveis pode digitar no campo de pesquisa e filtrar a lista de imóveis por cidade. Abra nosso teste de aceitação existente, `tests/acceptance/list-rentals-test.js` e implemente o teste chamado "should filter the list of rentals by city". @@ -482,7 +482,7 @@ test('should filter the list of rentals by city.', function (assert) { ``` Apresentamos dois novos helper neste teste, `fillIn` e` keyEvent`. -* [`fillIn`](http://emberjs.com/api/classes/Ember.Test.html#method_fillIn) `prenche` o campo de texto correspondente ao seletor fornecido. +* [`fillIn`](http://emberjs.com/api/classes/Ember.Test.html#method_fillIn) `preenche` o campo de texto correspondente ao seletor fornecido. * [`keyEvent`](http://emberjs.com/api/classes/Ember.Test.html#method_keyEvent) envia um evento de tecla para a interface do usuário, simulando o usuário digitando o valor. Em `app/components/list-filter.js`, temos como elemento de nível superior representado pelo component uma classe chamada `list-filter`. From a03fb00d98c185e0889da45120593ed780fbe483 Mon Sep 17 00:00:00 2001 From: Aurelio Saraiva Date: Mon, 18 Sep 2017 11:11:35 -0300 Subject: [PATCH 14/17] fixed texts --- .../guides/tutorial/autocomplete-component.md | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/source/guides/tutorial/autocomplete-component.md b/source/guides/tutorial/autocomplete-component.md index bbbbac3..3d00891 100644 --- a/source/guides/tutorial/autocomplete-component.md +++ b/source/guides/tutorial/autocomplete-component.md @@ -96,24 +96,23 @@ export default Ember.Component.extend({ #### Filtrando os dados -No exemplo acima, usamos o hook `init` para criar nossas lista de imóveis iniciais ao chamar a função `filter` com um valor vazio. +No exemplo acima, usamos o metodo hook `init` para criar nossas lista de imóveis iniciais chamando a função `filter` com um valor vazio. Nossa action `handleFilterEntry` chama uma função chamada `filter` com base no valor do atributo `value`. A função `filter` foi passada como objeto. Este é um padrão conhecido como [closure actions](../../components/triggering-changes-with-actions/#toc_passing-the-action-to-the-component). Observe a função `then` chamada no resultado da função `filter`. -O código espera que a função `filter` responda uma promessa. -Uma [promise](http://emberjs.com/api/classes/RSVP.Promise.html) é um objeto JavaScript que representa o resultado de uma função assíncrona. +O código espera que a função `filter` responda uma Promise. +Uma [Promise](http://emberjs.com/api/classes/RSVP.Promise.html) é um objeto JavaScript que representa o resultado de uma função assíncrona. Uma promise pode ou não ser executada no momento em que você a declara. -Em nosso exemplo, fornecemos a função `then` que permite que seja executado somente quando na promise finalizar de processar o resultado. +Em nosso exemplo, fornecemos a função `then` que permite que seja executado somente quando a promise finalizar e devolver o resultado. -Para implementar a função `filter` para fazer a filtragem dos imóveis de acordo com a cidade, criaremos um controller chamado `rental`. -[Controllers](../../controllers/) contêm ações e propriedades disponíveis para nosso template. +Para que a função `filter` faça a filtragem dos imóveis de acordo com a cidade, criaremos um controller chamado `rental`. +[Controllers](../../controllers/) contêm actions e propriedades disponíveis para nosso template. Como Ember trabalha por convenções, ele saberá que um controller chamado `rental` pertence a uma route com o mesmo nome. Crie um controller para a route `rental` executando o seguinte: - ```shell ember g controller rentals ``` @@ -136,12 +135,12 @@ export default Ember.Controller.extend({ ``` Quando o usuário digitar no campo de texto em nosso component, a action `filterByCity` no controller será chamada. -Essa action aceita a propriedade `value` e filtra os dados de `rental` de acordo com a cidade que o usuário digitou. +Essa action aceita a propriedade `value` e filtra os dados de `rental` de acordo com a cidade que o usuário digitou. O resultado da consulta é retornado para quem o chamou. #### Simulando um resultado -Para que esta action funcione, precisamos substituir no arquivo `config.js` no Mirage com o seguinte, para que ele possa devolver o resultado de acordo com nossa consulta. +Para que esta action funcione, precisamos substituir no arquivo `mirage/config.js` no Mirage com o seguinte, para que ele possa devolver o resultado de acordo com nossa consulta. Em vez de simplesmente retornar a lista de imóveis, nosso manipulador Mirage HTTP GET `rentals` retornará os imóveis correspondente à string fornecida no parâmetro `city` na URL. ```mirage/config.js From dc658cea87c67647833dee2fdd4bda2bb89c1780 Mon Sep 17 00:00:00 2001 From: Aurelio Saraiva Date: Tue, 19 Sep 2017 09:21:05 -0300 Subject: [PATCH 15/17] fixed typos --- .../guides/tutorial/autocomplete-component.md | 35 ++++++++++--------- 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/source/guides/tutorial/autocomplete-component.md b/source/guides/tutorial/autocomplete-component.md index 3d00891..26cca06 100644 --- a/source/guides/tutorial/autocomplete-component.md +++ b/source/guides/tutorial/autocomplete-component.md @@ -235,7 +235,7 @@ export default Ember.Controller.extend({ }); ``` -A action `filterByCity` no controller rental acima, adicionamos uma nova propriedade chamada` query` aos resultados do filtro em vez de apenas retornar um array de imóveis como antes. +A action `filterByCity` no controller `rental` acima, adicionamos uma nova propriedade chamada` query` aos resultados do filtro em vez de apenas retornar um array de imóveis como antes. ```app/components/list-filter.js{+9,+10,+11,+19,+20,+21} import Ember from 'ember'; @@ -271,14 +271,14 @@ A propriedade `value` representa o estado mais recente do filtro. Portanto, verificamos se os resultados correspondem ao valor do filtro, garantindo que os resultados permanecerão em sincronia com a última coisa que o usuário digitou. Embora esta abordagem mantenha nossa ordem de resultados consistente, há outras coisas a considerar ao lidar com várias tarefas simultâneas, como [limitar o número de solicitações feitas ao servidor](https://emberjs.com/api/classes/Ember.run.html#method_debounce). -Para criar um comportamento de autocomplete eficaz e robusto para seus aplicativos, recomendamos considerar utilizar o addon [`ember-concurrency`](http://ember-concurrency.com/#/docs/introduction). +Para criar um comportamento de autocomplete eficaz e robusto para suas aplicações, recomendamos considerar utilizar o addon [`ember-concurrency`](http://ember-concurrency.com/#/docs/introduction). Agora você pode avançar para [próxima página](../service/) ou continuar nesta página e fazer os teste de integração e aceitação. ### Teste de integração Agora que criamos um novo component `list-filter`, precisamos criar testes para verificar que tudo funcione corretamente no futuro. -Vamos usar um [component integration test](../../testing/testing-components) para verificar o comportamento do component, semelhante ao teste criado para a [listagem de imóveis](../simple-component/#toc_teste-de-integra-o). +Vamos usar [component integration test](../../testing/testing-components) para verificar o comportamento do component, semelhante ao teste criado para a [listagem de imóveis](../simple-component/#toc_teste-de-integra-o). Comece abrindo o arquivo de teste do component `list-filter` criado anteriormente `tests/integration/components/list-filter-test.js`. Remova o teste padrão e crie um novo teste que verifique se o component irá listar todos os imóveis. @@ -295,7 +295,7 @@ test('should initially load all listings', function (assert) { }); ``` -Nosso component `list-filter` recebe como argumento uma função, usado para retornar a lista de imóveis que corresponde a string digitada pelo usuário. +Nosso component `list-filter` recebe como argumento uma função, usada para retornar a lista de imóveis que corresponde a cidade digitada pelo usuário. Para simular o comportamento da action `filterByCity` definida no controller `rental`, vamos criar uma action no escopo local usando `this.on`. @@ -320,7 +320,7 @@ test('should initially load all listings', function (assert) { }); ``` -`this.on` irá adicionar a função fornecida ao escopo local de teste como` filterByCity`, que podemos usar no component. +`this.on` irá adicionar a função fornecida ao escopo local de teste como `filterByCity`, que podemos usar no component. Nossa função `filterByCity` será a action que nosso component irá chamar para retornar a lista de imóveis filtrada. @@ -331,7 +331,6 @@ Uma vez que nosso component está esperando que a filtragem seja assíncrona, re Em seguida, adicionaremos a chamada para renderizar o component e mostrar as cidades que fornecemos acima. - ```tests/integration/components/list-filter-test.js{+19,+20,+21,+22,+23,+24,+25,+26,+27,+28,+29,+30,+31,+32} import { moduleForComponent, test } from 'ember-qunit'; import hbs from 'htmlbars-inline-precompile'; @@ -368,6 +367,7 @@ test('should initially load all listings', function (assert) { }); ``` + Finalmente, adicionamos uma chamada de `wait` no final do nosso teste para verificar os resultados. Ember [wait helper](../../testing/testing-components/#toc_waiting-on-asynchronous-behavior) aguarda que todas as tarefas assíncronas sejam concluídas antes de executar o retorno da função. @@ -416,7 +416,7 @@ test('should initially load all listings', function (assert) { }); ``` -Para o nosso segundo teste, verificaremos que o texto digitado no filtro realmente chamará adequadamente a action de filtragem e atualizará as listagens corretamente. +Para o nosso segundo teste, verificaremos que o texto digitado no filtro realmente chamará adequadamente a action de filtragem e atualizará a listagem corretamente. Nós adicionaremos algumas funcionalidades adicionais à nossa action `filterByCity` para retornar um único imóvel, representado pela variável `FILTERED_ITEMS` quando qualquer valor estiver definido. @@ -458,12 +458,13 @@ test('should update with matching listings', function (assert) { }); ``` -Agora, ambos os cenários de teste de integração devem está aprovados. -Você pode verificar isso iniciando executando `ember t -s` no terminal. + +Agora, ambos os cenários de teste de integração devem está passando. +Você pode verificar isso executando `ember t -s` no terminal. ### Teste de aceitação -Agora que testamos que o componente `list-filter` se comporta como esperado, vamos testar que a própria página também se comporta adequadamente com um teste de aceitação. +Agora que testamos que o component `list-filter` se comporta como esperado, vamos testar que a própria página também se comporte adequadamente com um teste de aceitação. Verificaremos que um usuário que visite a página de imóveis pode digitar no campo de pesquisa e filtrar a lista de imóveis por cidade. Abra nosso teste de aceitação existente, `tests/acceptance/list-rentals-test.js` e implemente o teste chamado "should filter the list of rentals by city". @@ -479,23 +480,23 @@ test('should filter the list of rentals by city.', function (assert) { }); }); ``` + Apresentamos dois novos helper neste teste, `fillIn` e` keyEvent`. -* [`fillIn`](http://emberjs.com/api/classes/Ember.Test.html#method_fillIn) `preenche` o campo de texto correspondente ao seletor fornecido. +* [`fillIn`](http://emberjs.com/api/classes/Ember.Test.html#method_fillIn) preenche o campo de texto com um valor, correspondente ao seletor fornecido. * [`keyEvent`](http://emberjs.com/api/classes/Ember.Test.html#method_keyEvent) envia um evento de tecla para a interface do usuário, simulando o usuário digitando o valor. Em `app/components/list-filter.js`, temos como elemento de nível superior representado pelo component uma classe chamada `list-filter`. -Localizamos a entrada de pesquisa dentro do componente usando o seletor `.list-filter input`, pois sabemos que existe apenas um elemento de entrada localizado no componente de filtro de lista. +Localizamos a entrada de pesquisa dentro do component usando o seletor `.list-filter input`, pois sabemos que existe apenas um campo de texto localizado no component `list-filter`. -Nosso teste preenche "Seattle" como o critério de pesquisa no campo de pesquisa e, em seguida, envia um evento `keyup` para o mesmo campo com um código `69` (key `e`) para simular a digitação de um usuário. +Nosso teste preenche "Seattle" como o critério no campo de pesquisa e, em seguida, envia um evento `keyup` para o mesmo campo com um código `69` para simular a digitação de um usuário. O teste localiza os resultados da pesquisa encontrando elementos com uma classe de `listing`, que nós demos ao nosso component `rental-listing` na seção ["Construindo um Componente Simples"](../simple-component). -Uma vez que nossos dados estão codificados em Mirage, sabemos que existe apenas um imóvel na cidade de "Seattle", por isso afirmamos que o número de listagens é um e que a localização exibida é chamada "Seattle". - -O teste verifica que depois de preencher a entrada de pesquisa com "Seattle", a lista de aluguel diminui de 3 para 1 e o item exibido mostra "Seattle" como a localização. +Uma vez que nossos dados estão codificados em Mirage, sabemos que existe apenas um imóvel na cidade de "Seattle", por isso afirmamos que o número de imóvel é um e que a localização exibida é chamada "Seattle". -Você deve fazer apenas 2 testes com falha: uma falha de teste de aceitação remanescente; e nosso teste ESLint que falha em um assertivo não utilizado para o nosso teste não implementado. +O teste verifica que depois de preencher a entrada de pesquisa com "Seattle", a lista de imóveis diminui de 3 para 1 e o item exibido mostra "Seattle" como a localização. +Você deve ter apenas 2 testes falhando: uma falha de teste de aceitação remanescente; e nosso teste ESLint que falha em um `assert` não utilizado. ![passing acceptance tests](../../images/autocomplete-component/passing-acceptance-tests.png) From 0d8db213cde07b7057f8e18afbddf3db06174cfb Mon Sep 17 00:00:00 2001 From: Aurelio Saraiva Date: Tue, 19 Sep 2017 09:21:37 -0300 Subject: [PATCH 16/17] fixed typos --- source/guides/tutorial/autocomplete-component.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/guides/tutorial/autocomplete-component.md b/source/guides/tutorial/autocomplete-component.md index 26cca06..5c7e9b7 100644 --- a/source/guides/tutorial/autocomplete-component.md +++ b/source/guides/tutorial/autocomplete-component.md @@ -491,7 +491,7 @@ Localizamos a entrada de pesquisa dentro do component usando o seletor `.list-fi Nosso teste preenche "Seattle" como o critério no campo de pesquisa e, em seguida, envia um evento `keyup` para o mesmo campo com um código `69` para simular a digitação de um usuário. -O teste localiza os resultados da pesquisa encontrando elementos com uma classe de `listing`, que nós demos ao nosso component `rental-listing` na seção ["Construindo um Componente Simples"](../simple-component). +O teste localiza os resultados da pesquisa encontrando elementos com uma classe de `listing`, que nós demos ao nosso component `rental-listing` na seção ["Construindo um Component Simples"](../simple-component). Uma vez que nossos dados estão codificados em Mirage, sabemos que existe apenas um imóvel na cidade de "Seattle", por isso afirmamos que o número de imóvel é um e que a localização exibida é chamada "Seattle". From 03cc7394bd0b4e58c90c46dd07b3e95650fb3a56 Mon Sep 17 00:00:00 2001 From: Aurelio Saraiva Date: Tue, 19 Sep 2017 09:23:47 -0300 Subject: [PATCH 17/17] fixed --- source/guides/tutorial/autocomplete-component.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/guides/tutorial/autocomplete-component.md b/source/guides/tutorial/autocomplete-component.md index 5c7e9b7..7dbf786 100644 --- a/source/guides/tutorial/autocomplete-component.md +++ b/source/guides/tutorial/autocomplete-component.md @@ -96,7 +96,7 @@ export default Ember.Component.extend({ #### Filtrando os dados -No exemplo acima, usamos o metodo hook `init` para criar nossas lista de imóveis iniciais chamando a função `filter` com um valor vazio. +No exemplo acima, usamos o método hook `init` para criar nossas lista de imóveis iniciais chamando a função `filter` com um valor vazio. Nossa action `handleFilterEntry` chama uma função chamada `filter` com base no valor do atributo `value`. A função `filter` foi passada como objeto. Este é um padrão conhecido como [closure actions](../../components/triggering-changes-with-actions/#toc_passing-the-action-to-the-component).