How to get cypress.io to swipe ionic ion-item-sliding to the left?

user_2988111 0
Viewed 673

I have a small ionic 4 (vue) app with an ion-list which includes ion-item-sliding: here is how the code looks

HTML

<ion-item-sliding v-for="day in month.days" v-bind:key="day.day">
    <ion-item
      :id="'times-item-'+day.day+'-'+month.name.toLowerCase()+'-'+month.year"
      @click="openAddEditModal(day)"
    >
      <ion-grid>
        <ion-row>
          <ion-col size="4">
            <ion-label :color="switchLabelColor(day)">
              <div id="times-item-day-weekday">{{ day.weekday }}.</div>
              <div id="times-item-day-day" class="bigger">
                {{ day.day }}
              </div>
            </ion-label>
          </ion-col>

          <ion-col size="4" v-if="getDayEntry(day)">
            <ion-text
              id="times-item-start-end-time"
              v-if="isWork(getDayEntry(day).type)"
            >
              {{ formatTime(getDayEntry(day).start) }} -
              {{ formatTime(getDayEntry(day).end) }}
            </ion-text>
          </ion-col>

          <ion-col
            id="times-item-stats"
            size="4"
            class="ion-text-end"
            v-if="getDayEntry(day)"
          >
            {{ formatDuration(getDayEntry(day).worktime) }}<br />
            <ion-text
              id="times-item-overtime"
              :color="switchOvertimeColor(getDayEntry(day).overtime)"
              >{{ getDayEntry(day).overtime.toString() }}</ion-text
            >
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-item>
    <ion-item-options side="end">
      <ion-item-option
        id="times-item-delete-button"
        v-if="day.entry"
        ion-item-option
        color="danger"
        expandable
        @click="deleteEntryForDay(day)"
        >Delete</ion-item-option
      >
    </ion-item-options>
  </ion-item-sliding>

I'm doing end-to-end testing of the app with cypress.io but I can't get cypress to swipe the ion-item-sliding to the left side.

I tried it on the ion-item-sliding and also on the ion-item with various mouse events such as down, move, up, pointer. I also tried with touch event but nothing worked.

The last thing I tried was this test script:

test typescript

it("Delete today entry", () => {
    //GIVEN
    const today = new Date();
    const todayString: string = createItemSelectorTextForDate(today);

    //WHEN
    cy.get("#times-item-"+todayString)
    .trigger('mousedown', {force: true})
    .trigger('mousemove', {clientX: -80, force: true})
    .trigger('mouseup', {force: true});
})

Does Someone know how to get cypress.io to work with Ionic components```

ionic4 ionic-framework cypress vue.js typescript
1 Answers

I had the same problem with ion-item-sliding and after trying all the mouse, pointer, touch events that I can imagine nothing worked, but then I found 2 ways to click the hidden button.

1st solution

Faster one, click the hidden button directly:

 cy.get('ion-item-sliding.item-wrapper')
    .find('button[color="danger"]')
    .click({force:true});

This will not make the animation, the slider and button will not be visible but will call the button action.

2nd solution

Make the animation yourself. The events in the ion-item-sliding when swipe add a class and a style insertion. Insert that with cypress:

cy.get('ion-item-sliding.item-wrapper')
   .invoke('addClass', 'active-slide active-options-right')
   .find('.item')
   .invoke('attr', 'style', 'transform: translate3d(-184px, 0px, 0px);')

The previous code was for Ionic 3 for more new versions only need to change the classes.

Newest Ionic

Tested with latest example code to date

cy.get('ion-item-sliding')
    .invoke('addClass', 'item-sliding-active-slide item-sliding-active-options-end')
    .find('.item')
    .invoke('attr', 'style', 'transform: translate3d(-72px, 0px, 0px);')
user_14391650
Related