CW-178 Infinite slideshow testing (#99)

* CW-178 Init testing file for InfiniteSlideshow

* CW-178 Add testing for the InfiniteSlideshow component

Since Cypress is not tuned for visual testing, we are going to ensure that the banners are present and that the css animation properties are set.

Author: sergiomercado19

frontend/cypress/integration/components/infiniteSlideshow.spec.js

@@ -0,0 +1,21 @@
+describe('InfiniteSlideshow Landing Page', () => {
+  beforeEach(() => {
+    cy.visit('/');
+  });
+
+  it('finds whether the banners are displayed', () => {
+    // Check if banners exist on each slot
+    cy.get('[data-cy=infinite-slideshow]').each(($is) => {
+      // Check if it is animated
+      cy.wrap($is).should('have.css', 'animation-name');
+      // Check if the animation is infinite
+      cy.wrap($is).should('have.css', 'animation-iteration-count').and('eq', 'infinite');
+      // Check if the animation is running
+      cy.wrap($is).should('have.css', 'animation-play-state').and('eq', 'running');
+      // Each slot should have at least 1 item in it
+      cy.wrap($is).children().each(($slot) => {
+        cy.wrap($slot).children().should('have.length.gt', 0);
+      });
+    });
+  });
+});

frontend/src/components/InfiniteSlideshow.vue

@@ -13,7 +13,7 @@
 
 <template>
   <div class="is-container">
-    <div class="is-element" :style="settings">
+    <div class="is-element" :style="settings" data-cy="infinite-slideshow">
       <div class="is-section">
         <slot></slot>
       </div>