@jetshop/template-trend 5.9.0 → 5.10.0

package/src/components/StartPage/Content/Row.js

@@ -2,9 +2,6 @@ import React from 'react';
 import MaxWidth from '../../Layout/MaxWidth';
 import { styled } from 'linaria/react';
 import { theme } from '../../Theme';
-import { ReactComponent as Caret } from '@jetshop/ui/svg/Carrot.svg';
-import { Above } from '@jetshop/ui/Breakpoints';
-import { useAnimation, swipeEffect } from '@jetshop/ui/hooks';
 
 const Container = styled('div')`
   position: relative;
@@ -37,40 +34,6 @@ const ItemsContainer = styled('div')`
   }
 `;
 
-const Button = styled('button')`
-  position: absolute;
-  font-family: initial;
-  margin: 0 10px;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 2;
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.2);
-
-  &:focus,
-  &:active {
-    outline: none;
-  }
-
-  &:hover {
-    background: rgba(255, 255, 255, 0.6);
-  }
-
-  &.left svg {
-    transform: rotateZ(90deg);
-  }
-
-  &.right {
-    right: 0;
-
-    svg {
-      transform: rotateZ(-90deg);
-    }
-  }
-`;
-
 const Row = ({ header, children }) => {
   return (
     <MaxWidth>

package/cypress/constants.js

@@ -1,5 +0,0 @@
-export const PRODUCT_URL = 'se/accessories/watches/watch-classic-504';
-export const OUT_OF_STOCK_PRODUCT_URL = 'se/preview?articlenumber=224733';
-export const CATEGORY_URL = 'se/accessories/watches';
-export const ARTICLENUMBER_URL = 'se/articlenumber/6952315';
-export const US_ARTICLENUMBER_URL = 'int/articlenumber/6952315';

package/cypress/integration/addToCart/addToCart.spec.js

@@ -1,27 +0,0 @@
-import { PRODUCT_URL, OUT_OF_STOCK_PRODUCT_URL } from '../../constants';
-
-describe('Add to cart tests', () => {
-  it('Will add add a basic product to the cart', () => {
-    cy.visit(PRODUCT_URL);
-    cy.get('button[data-testid="add-to-cart"]').click();
-    cy.get('[data-testid="product-toast"]').should('exist');
-    cy.get('[data-testid="cart-button"]').click();
-    cy.get('[data-testid="item-name"]').should('not.be.empty');
-    cy.get('[data-testid="increment-quantity"]').click();
-    cy.get('[data-testid="item-quantity"]').should('contain', 2);
-    cy.get('[data-testid="remove-from-cart"]').click();
-    cy.get('[data-testid="item-name"]').should('not.exist');
-  });
-  it('Add to cart button is disabled if product is out of stock', () => {
-    cy.visit(OUT_OF_STOCK_PRODUCT_URL);
-    cy.get('button[data-testid="add-to-cart"]').should('be.disabled');
-  });
-  it('Checkout button is linked to the checkout', () => {
-    cy.visit(PRODUCT_URL);
-    cy.get('button[data-testid="add-to-cart"]').click();
-    cy.get('button[data-testid="cart-button"]').click();
-    cy.get('[data-testid="checkout-button"]')
-      .should('have.attr', 'href')
-      .and('include', 'externalcheckout');
-  });
-});

package/cypress/integration/addToCart/disabledVariations.spec.js

@@ -1,17 +0,0 @@
-const PRODUCT_WITH_INVALID_VARIATIONS_URL = '/furniture/toldbod-pendant';
-describe('Disabled variations', () => {
-  it('Will add a product with attributes if they have been selected', () => {
-    cy.visit(PRODUCT_WITH_INVALID_VARIATIONS_URL);
-    cy.get('button[data-testid="add-to-cart"]').click();
-    cy.get('[data-testid="product-toast"]').should('not.exist');
-    cy.findByText('Ø 250').click();
-    cy.get('#option-Color').click();
-    cy.findByText('White', { selector: 'li[role=menuitem]' }).click();
-    cy.get('button[data-testid="add-to-cart"]').should('be.disabled');
-    cy.get('#option-Color').click();
-    cy.findByText('Black', { selector: 'li[role=menuitem]' }).click();
-    cy.findByText('Ø 250').click();
-    cy.get('button[data-testid="add-to-cart"]').click();
-    cy.get('[data-testid="product-toast"]').should('exist');
-  });
-});

package/cypress/integration/addToCart/newslettersubscriber.spec.js

@@ -1,24 +0,0 @@
-describe('Notify when back test', () => {
-  it('Subscribes to newsletter with a random email', () => {
-    cy.visit('/');
-    cy.get(
-      '[data-testid="newsletter-subscription-input"]'
-    ).type('edgardavids@glasses.com', { force: true });
-    cy.get('button[data-testid="newsletter-subscription-submit"]').click();
-    cy.get('p[data-testid="newsletter-subscription-success"]').should(
-      'contain',
-      'You are now subscribed'
-    );
-  });
-
-  it('Cannot subscribe with an invalid email', () => {
-    cy.visit('/');
-    cy.get(
-      '[data-testid="newsletter-subscription-input"]'
-    ).type('edgardavids.com', { force: true });
-    cy.get('button[data-testid="newsletter-subscription-submit"]').click();
-    cy.get('p[data-testid="newsletter-subscription-success"]').should(
-      'not.exist'
-    );
-  });
-});

package/cypress/integration/addToCart/notifyWhenBackInStock.spec.js

@@ -1,20 +0,0 @@
-const PRODUCT_URL = 'accessories/glasses-black';
-
-describe('Notify when back test', () => {
-  it('Will fill out notify when back with a test email', () => {
-    cy.visit(PRODUCT_URL);
-    cy.get('button[data-testid="add-to-cart"]').should('not.exist');
-    cy.get('button[data-testid="notify-when-back-button"]').click();
-    cy.get('input[data-testid="notify-when-back-input"]').type(
-      'test@example.com',
-      {
-        force: true
-      }
-    );
-    cy.get('button[data-testid="notify-when-back-ok"]').click({ force: true });
-    cy.get('p[data-testid="notify-when-back-success"]').should(
-      'contain',
-      'You are now subscribed'
-    );
-  });
-});

package/cypress/integration/addToCart/productConfigurations.spec.js

@@ -1,35 +0,0 @@
-const PRODUCT_URL = 'furniture/black-leather-sofa';
-
-describe('Add to cart product configuration tests', () => {
-  it('Will add add a product with configurations', () => {
-    cy.visit(PRODUCT_URL);
-
-    cy.get('.price').should('contain', '420');
-
-    cy.get('#option-Head').click();
-    cy.findAllByRole('menuitem', { name: 'putter' }).click();
-    cy.get('#option-Head').should('contain', 'putter');
-
-    cy.get('.price').should('contain', '370');
-
-    cy.get('#option-stick').click();
-    cy.findAllByRole('menuitem', { name: 'shiny' }).click();
-    cy.get('#option-stick').should('contain', 'shiny');
-
-    cy.get('.price').should('contain', '470');
-
-    cy.get('#option-grip').click();
-    cy.findAllByRole('menuitem', { name: 'plastic' }).click();
-    cy.get('#option-grip').should('contain', 'plastic');
-
-    cy.get('.price').should('contain', '455');
-
-    cy.findByRole('button', { name: /add to cart/i }).click();
-
-    cy.get('[data-testid="product-toast"]').should('exist');
-    cy.get('[data-testid="cart-button"]').click();
-    cy.get('[data-testid="item-name"]').should('not.be.empty');
-    cy.get('[data-testid="item-price"]').should('contain', '455');
-    cy.get('[data-testid="cart-button"]').click();
-  });
-});

package/cypress/integration/addToCart/productVariations.spec.js

@@ -1,42 +0,0 @@
-const PRODUCT_WITH_VARIATIONS_URL = 'furniture/armchair-lord';
-
-describe('Product variants', () => {
-  it('can be successfully selected and added to cart', () => {
-    cy.visit(PRODUCT_WITH_VARIATIONS_URL);
-
-    cy.get('button[data-testid="add-to-cart"]').click();
-    cy.get('[data-testid="product-toast"]').should('not.exist');
-    cy.findByText('Small').click();
-    cy.findByText('JA').click();
-    cy.get('button[data-testid="add-to-cart"]').click();
-    cy.get('[data-testid="product-toast"]').should('not.exist');
-    cy.get('input[data-testid="Skriv in ditt önskade tryck här-input"]').type(
-      'Hello, World'
-    );
-    cy.get('button[data-testid="add-to-cart"]').click();
-    cy.get('[data-testid="product-toast"]').should('exist');
-    cy.get('[data-testid="cart-button"]').click();
-    cy.get('[data-testid="item-name"]').should('not.be.empty');
-    cy.get('[data-testid="increment-quantity"]').click();
-    cy.get('[data-testid="item-quantity"]').should('contain', 2);
-    cy.get('[data-testid="remove-from-cart"]').click();
-    cy.get('[data-testid="item-name"]').should('not.exist');
-  });
-
-  describe('Preselection', () => {
-    it('preselects variant when included in the url', () => {
-      cy.visit('accessories/belts/belt-light?att=Mzg=');
-      cy.get('[aria-pressed="true"]').should('contain', '38');
-    });
-
-    it('preselects the cheapest variant by default', () => {
-      cy.visit('accessories/belts/belt-light');
-      cy.get('[aria-pressed="true"]').should('contain', '37');
-
-      cy.visit('/furniture/aj-floor-lamp');
-      cy.get('[aria-pressed="true"]')
-        .should('contain', 'Black')
-        .should('contain', '140');
-    });
-  });
-});

package/cypress/integration/addToCart/sizePriceChange.spec.js

@@ -1,20 +0,0 @@
-const PRODUCT_URL = 'accessories/belt-light';
-
-describe('Produce price', () => {
-  it('changes when variant is changed', () => {
-    cy.visit(PRODUCT_URL);
-    cy.get('.new-price').should('contain', '499');
-    cy.findByText('36').click();
-    cy.get('.new-price').should('contain', '563');
-    cy.findByText('38').click();
-    cy.get('.new-price').should('contain', '500');
-    cy.get('button[data-testid="add-to-cart"]').click();
-    cy.get('[data-testid="product-toast"]').should('exist');
-    cy.get('[data-testid="cart-button"]').click();
-    cy.get('[data-testid="item-name"]').should('not.be.empty');
-    cy.get('.price')
-      .first()
-      .should('contain', '500');
-    cy.get('[data-testid="cart-button"]').click();
-  });
-});

package/cypress/integration/analytics/gtag.spec.js

@@ -1,87 +0,0 @@
-import { callsTo } from '../../support/dataLayer';
-import { PRODUCT_URL, CATEGORY_URL } from '../../constants';
-const eventMatcher = eventName => [
-  function eventMatcher(calls) {
-    return calls.find(call => call[0] === 'event' && call[1] === eventName);
-  },
-  `Event ${eventName} is pushed to dataLayer`
-];
-
-const pageviewMatcher = path => [
-  function pageviewMatcher(calls) {
-    const pageViewCall = calls.find(
-      call => call[0] === 'event' && call[1] === 'page_view'
-    );
-    return pageViewCall.length > 0;
-  },
-  `Page View for "${path}" is pushed to dataLayer`
-];
-
-describe('Analytics: GTAG – Google Analytics', () => {
-  it('Start Page: Should trigger view events', () => {
-    cy.visit('/');
-    cy.get('@gtm_dataLayer_push').should(push => {
-      expect(callsTo(push)).to.satisfy(...eventMatcher('view_item_list'));
-      expect(callsTo(push)).to.satisfy(...pageviewMatcher('/'));
-    });
-  });
-
-  it('Category Page: Should trigger view events', () => {
-    cy.visit(CATEGORY_URL);
-    cy.get('@gtm_dataLayer_push').should(push => {
-      expect(callsTo(push)).to.satisfy(...eventMatcher('view_item_list'));
-      expect(callsTo(push)).to.satisfy(...pageviewMatcher(CATEGORY_URL));
-    });
-  });
-
-  it('Category Page: Should trigger click events', () => {
-    cy.visit(CATEGORY_URL);
-
-    cy.findAllByTestId('product').first().click();
-
-    cy.get('@gtm_dataLayer_push').should(push => {
-      expect(callsTo(push)).to.satisfy(...eventMatcher('select_content'));
-    });
-  });
-
-  it('Product Page: Should trigger view events', () => {
-    cy.visit(PRODUCT_URL);
-    cy.get('@gtm_dataLayer_push').should(push => {
-      expect(callsTo(push)).to.satisfy(...eventMatcher('view_item'));
-      expect(callsTo(push)).to.satisfy(...pageviewMatcher(PRODUCT_URL));
-    });
-  });
-
-  it('Product Page: Should trigger cart events', () => {
-    cy.visit(PRODUCT_URL);
-
-    // Add to cart
-    cy.findByTestId('add-to-cart').click({ force: true });
-    cy.get('@gtm_dataLayer_push').should(push => {
-      expect(callsTo(push)).to.satisfy(...eventMatcher('add_to_cart'));
-    });
-
-    // Remove from to cart
-    cy.findByTestId('cart-button').click({ force: true });
-    cy.findByTestId('remove-from-cart').first().click();
-    cy.get('@gtm_dataLayer_push').should(push => {
-      expect(callsTo(push)).to.satisfy(...eventMatcher('remove_from_cart'));
-    });
-  });
-
-  it('Product Page: Attribute click events to the appropriate list and apppropriate currency', () => {
-    cy.visit(CATEGORY_URL);
-
-    cy.findAllByTestId('product').first().click();
-
-    cy.findByTestId('add-to-cart').click({ force: true });
-    cy.get('@gtm_dataLayer_push').should(push => {
-      const addToCartEvent = callsTo(push).find(
-        ev => Array.isArray(ev) && ev[1] === 'add_to_cart'
-      );
-      expect(addToCartEvent[2].currency).to.equal('SEK');
-      expect(addToCartEvent[2].items[0].list_name).to.equal('Watches');
-      expect(callsTo(push)).to.satisfy(...eventMatcher('add_to_cart'));
-    });
-  });
-});

package/cypress/integration/analytics/releware.spec.js

@@ -1,95 +0,0 @@
-import { PRODUCT_URL } from '../../constants';
-
-// const BASE_EVENT = {
-//   itemId: '155',
-//   accountId: 'jetshop',
-//   siteId: 'localhost'
-// };
-
-function getRelewareCalls(spy) {
-  return spy
-    .getCalls()
-    .filter(call => call.args[0].indexOf('log.releware.net') > -1)
-    .map(call => {
-      const query = new URL(call.args[0]).searchParams;
-      return {
-        itemId: query.get('_item_id'),
-        accountId: query.get('aid'),
-        event: query.get('o'),
-        siteId: query.get('sid')
-      };
-    });
-}
-
-describe('Analytics: Releware', () => {
-  beforeEach(function() {
-    // Stub window.fetch before any app code runs
-    cy.on('window:before:load', win => {
-      const doFetch = win.fetch;
-      cy.stub(win, 'fetch', (path, options) => {
-        if (path.indexOf('log.releware.net') > -1) {
-          return Promise.resolve();
-        }
-        return doFetch(path, options);
-      }).as('fetch');
-    });
-  });
-
-  // FIXME: The heed_recommendation event is not implemented in this template
-  //        yet. This test (modified to target the correct list) should pass
-  //        once it is.
-  //
-  // it('Category Page: Should trigger click events for recommendations', () => {
-  //   cy.visit(CATEGORY_URL);
-
-  //   cy.getByTestId('product')
-  //     .first()
-  //     .click();
-
-  //   cy.get('@fetch').should(spy => {
-  //     const calls = getRelewareCalls(spy);
-
-  //     expect(calls).to.have.lengthOf(1);
-  //     expect(calls).to.deep.equal([
-  //       { ...BASE_EVENT, event: 'heed_recommendation' }
-  //     ]);
-  //   });
-  // });
-
-  it('Product Page: Should trigger view events', () => {
-    cy.visit(PRODUCT_URL);
-    cy.get('@fetch').should(spy => {
-      const calls = getRelewareCalls(spy);
-
-      expect(calls).to.have.lengthOf(1);
-      expect(calls[0].event).to.equal('view_item');
-    });
-  });
-
-  it('Product Page: Should trigger cart events', () => {
-    cy.visit(PRODUCT_URL);
-    cy.findByTestId('add-to-cart').click();
-
-    cy.get('@fetch').should(spy => {
-      const calls = getRelewareCalls(spy);
-      expect(calls).to.have.lengthOf(2);
-      expect(calls[1].event).to.equal('pick_item');
-    });
-
-    // FIXME: How to implement this is not mentioned in any of the releware
-    //        docs, it might be so that they only track add events.
-    //
-    // cy.getByTestId('header-cart')
-    //   .click({ force: true })
-    //   .getByTestId('remove-from-cart')
-    //   .first()
-    //   .click();
-    // cy.get('@fetch').should(spy => {
-    //   const calls = getRelewareCalls(spy);
-    //   expect(calls).to.have.lengthOf(3);
-    //   expect(calls.slice(2)).to.deep.equal([
-    //     { ...BASE_EVENT, event: '???' }
-    //   ]);
-    // });
-  });
-});

package/cypress/integration/auth/login.spec.js

@@ -1,18 +0,0 @@
-describe('Log In', () => {
-  it('Will show an error when the user enters bad credentials', () => {
-    cy.visit('/se/login');
-    cy.get('#email').type('test@test.com');
-    cy.get('#password').type('iamanonsensepassword');
-    cy.get('button[type="submit"]').contains('Log in').click();
-    cy.findByText('Login failed. Please try again').should('exist');
-  });
-
-  it('Will log a user in with correct credentials', () => {
-    cy.visit('/se/login');
-    cy.get('#email').type('wolverine@jetshop.se');
-    cy.get('#password').type('jetshop');
-    cy.get('button[type="submit"]').contains('Log in').click();
-    cy.findByText('Login failed. Please try again').should('not.exist');
-    cy.url().should('contain', 'my-pages');
-  });
-});

package/cypress/integration/auth/signup.spec.js

@@ -1,98 +0,0 @@
-function randomString() {
-  return Math.random().toString(25);
-}
-
-describe('User can sign up', () => {
-  it('as a private customer', () => {
-    cy.visit('/se/signup');
-
-    cy.get("input[name='pid']").type('test');
-    cy.get("input[name='firstName']").type('Private');
-    cy.get("input[name='lastName']").type('Customer');
-    cy.get("input[name='streetName']").type('test');
-    cy.get("input[name='postalCode']").type('51234');
-    cy.get("input[name='city']").type('test');
-    cy.get("input[name='emailAddress']").type(`${randomString()}@test.com`);
-    cy.get("input[name='password']").type('cypresstest');
-    cy.get('[data-testid="sign-up-button"]').click();
-
-    cy.get('h2[data-testid="customer-name"]').should(
-      'contain',
-      'Private Customer'
-    );
-
-    cy.get('a[href="/se/my-pages/profile"]').click();
-
-    cy.get('input[type="checkbox"][name="confirm"]').click({ force: true });
-
-    cy.get('button[type="submit"]').contains('Delete account').click();
-  });
-  it('as a business customer', () => {
-    cy.visit('/se/signup');
-
-    cy.get('input[type="radio"][value="company"]').click({ force: true });
-    cy.get("input[name='organizationNumber']").type('test');
-    cy.get("input[name='company']").type('test');
-    cy.get("input[name='companyAtt']").type('test');
-    cy.get("input[name='department']").type('test');
-    cy.get("input[name='firstName']").type('test');
-    cy.get("input[name='lastName']").type('test');
-    cy.get("input[name='streetName']").type('test');
-    cy.get("input[name='postalCode']").type('51234');
-    cy.get("input[name='city']").type('test');
-    cy.get("input[name='emailAddress']").type(
-      `${randomString()}@business-test.com`
-    );
-    cy.get("input[name='password']").type('cypresstest');
-    cy.get('[data-testid="sign-up-button"]').click();
-
-    cy.get('a[href="/se/my-pages/profile"]').click();
-
-    cy.get('input[type="checkbox"][name="confirm"]').click({ force: true });
-
-    cy.get('button[type="submit"]').contains('Delete account').click();
-
-    cy.get('span').contains('Log in').should('be.visible');
-  });
-  it('with encrypted values', () => {
-    cy.visit('/se/signup');
-
-    cy.get("input[name='pid']").type('test');
-    cy.get("input[name='firstName']").type('eTZ7FGaVn/RAThBesp3unQ==');
-    cy.get("input[name='lastName']").type('Pehrers');
-    cy.get("input[name='streetName']").type('test');
-    cy.get("input[name='postalCode']").type('51234');
-    cy.get("input[name='city']").type('test');
-    cy.get("input[name='emailAddress']").type(`${randomString()}@test.com`);
-    cy.get("input[name='password']").type('cypresstest');
-    cy.get('[data-testid="sign-up-button"]').click();
-
-    cy.get('a[href="/se/my-pages/profile"]').click();
-    cy.get('h2[data-testid="customer-name"]').should('contain', 'Erik Pehrers');
-
-    cy.get('input[type="checkbox"][name="confirm"]').click({ force: true });
-
-    cy.get('button[type="submit"]').contains('Delete account').click();
-
-    cy.get('span').contains('Log in').should('be.visible');
-  });
-
-  it('Displays email validation error', () => {
-    cy.visit('/se/signup');
-
-    cy.get("input[name='pid']").type('test');
-    cy.get("input[name='firstName']").type('integrationtest');
-    cy.get("input[name='lastName']").type('E god');
-    cy.get("input[name='streetName']").type('test');
-    cy.get("input[name='postalCode']").type('51234');
-    cy.get("input[name='city']").type('test');
-    cy.get("input[name='emailAddress']").type('kantarellen@egod.com');
-    cy.get("input[name='password']").type('cypresstest');
-    cy.get('[data-testid="sign-up-button"]').click();
-
-    cy.get('div[data-testid="validation-error"]').should(
-      'contain',
-      'The specified e-mail address is already registered.'
-    );
-  });
-});

package/cypress/integration/category_page_spec.js

@@ -1,73 +0,0 @@
-import { CATEGORY_URL } from '../constants';
-
-const ACCESSORIES_URL = '/accessories';
-const FURNITURE_URL = '/furniture';
-const CAMPAIGN_URL = '/campaigns';
-
-describe('Category Page', () => {
-  beforeEach(() => cy.visit(`${ACCESSORIES_URL}?channelCountry=US`));
-  it('Loads the right header', () => {
-    cy.findByTestId('page-header').should('contain', 'Accessories');
-  });
-
-  it('Can handle pagination', () => {
-    cy.visit(`${ACCESSORIES_URL}?channelCountry=US&standardPagination=true`);
-    cy.get('a')
-      .contains('Next')
-      .click();
-    cy.url().should('contain', 'page=2');
-    cy.get('#root').should('contain', 'Page 2 of 2');
-    cy.get('a')
-      .contains('Prev')
-      .click();
-    cy.url().should('not.contain', 'page=2');
-  });
-});
-
-describe('Infinite pagination', () => {
-  it('has non moving scroll position on fetch', () => {
-    let yOffset;
-    cy.visit(CAMPAIGN_URL);
-    cy.scrollTo('bottom');
-    cy.window()
-      .then(win => {
-        yOffset = win.pageYOffset;
-      })
-      .then(() => {
-        cy.get('a')
-          .contains('Show more')
-          .click();
-        cy.wait(2000);
-        cy.window()
-          .its('pageYOffset')
-          .should('equal', yOffset);
-      });
-  });
-  it('paginates correctly when retreiving more products', () => {
-    cy.visit(FURNITURE_URL);
-    cy.get('a')
-      .contains('Show more')
-      .click();
-    cy.wait(2000);
-    cy.scrollTo('bottom');
-    cy.url().should('contain', 'page=2');
-    cy.scrollTo('top');
-    cy.url().should('not.contain', 'page=2');
-  });
-});
-
-describe('product browsing', () => {
-  describe('news category', () => {
-    beforeEach(() => cy.visit(`${CATEGORY_URL}?channelCountry=US`));
-
-    it('contains a category description', () => {
-      cy.findByTestId('category-description');
-    });
-
-    it('contains a product grid with products', () => {
-      cy.findByTestId('product-grid').within(() =>
-        cy.findAllByTestId('product')
-      );
-    });
-  });
-});