finish the recipe

examples/testing-dom__select2/README.md

@@ -1,4 +1,14 @@
 # testing-dom__select2
-> Testing Select2 widget
+> Testing select elements and Select2 widgets
 
-[Select2 site](https://select2.org/)
+This example shows how end-to-end tests work with plain `<select>` HTML elements and with  [Select2](https://select2.org/) widgets.
+
+Find all tests in the [cypress/integration/spec.js](cypress/integration/spec.js) file
+
+- selecting a single value using `<select>`
+- selecting multiple values using `<select>`
+- selecting a single value using `Select2`
+- selecting multiple values using `Select2`
+- removing one of the selected values using `Select2`
+
+![demo](images/demo.gif)

examples/testing-dom__select2/cypress/integration/spec.js

@@ -1,4 +1,6 @@
 /// <reference types="cypress" />
+import 'cypress-pipe'
+
 beforeEach(() => {
   cy.visit('index.html')
 })
@@ -95,10 +97,14 @@ describe('select2', () => {
         expect(list[2].title).to.equal('Vermont')
       })
 
-      // TODO find a shorter way to express the assertion?
-      // .should('have.length', 3)
-      // .then((list) => list.map((k, el) => el.title))
-      // .should('deep.equal', ['Connecticut', 'Massachusetts', 'Vermont'])
+      // alternative: extract titles and then make an assertion
+      // and use https://github.com/NicholasBoll/cypress-pipe
+      // to preserve http://on.cypress.io/retry-ability
+      const getTitles = (list) => Cypress._.map(list, (li) => li.title)
+
+      cy.get('#states + .select2 .select2-selection__choice')
+      .pipe(getTitles)
+      .should('deep.equal', ['Connecticut', 'Massachusetts', 'Vermont'])
     })
 
     it('adds several states by typing', () => {