I am currently working on a small ionic 4 (vue) app that includes an ion-list with ion-item-sliding. Here is a snippet of the code:
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>
While testing the app with cypress.io, I encountered difficulties trying to swipe the ion-item-sliding component to the left side.
I experimented with various mouse events such as down, move, up, and pointer on both the ion-item-sliding and ion-item. I also tried touch events but none of them worked.
The last test script I attempted was this:
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});
})
If anyone knows how to make cypress.io work with Ionic components, please share your insights!