@comicrelief/component-library 7.24.0 → 7.24.2

package/cypress/e2e/components/atoms/link.cy.js

@@ -1,190 +0,0 @@
-describe('Link component', () => {
-  before(() => {
-    // go to link component
-    cy.visit('/#link');
-  });
-
-  describe('props and methods section', () => {
-    beforeEach(() => {
-      cy.visit('/#link');
-      cy.get('[data-testid="Link-container"] button[name="rsg-usage"]')
-        .contains('Props & methods')
-        .as('propsBtn');
-
-      cy.get('@propsBtn')
-        .closest('[class^=rsg--tabs]')
-        .as('container');
-    });
-
-    it('is present', () => {
-      cy.get('@propsBtn').should('exist');
-    });
-
-    it('does not show table initially', () => {
-      cy.get('@container')
-        .find('table')
-        .should('not.exist');
-    });
-
-    it('shows the table on button click', () => {
-      cy.get('@propsBtn').click();
-      cy.get('@container')
-        .find('table')
-        .should('contain', 'Prop name');
-    });
-  });
-
-  describe('Link standard preview section', () => {
-    beforeEach(() => {
-      cy.visit('/#link');
-      cy.get('[data-testid="Link-example-0"]')
-        .as('container')
-        .find('[data-preview="Link"]')
-        .as('preview');
-
-      cy.get('@container')
-        .find('button')
-        .contains('View Code')
-        .as('viewCodeBtn');
-    });
-
-    it('renders link standard section', () => {
-      cy.get('[data-testid="Link-example-0"]')
-        .should('exist');
-
-      cy.get('[data-testid="Link-example-0"]')
-        .first()
-        .contains('Link standard')
-        .should('exist');
-      cy.get('[data-testid="Link-example-0"] div > div:nth-child(2) > a')
-        .contains('Link standard icon')
-        .should('exist');
-      cy.get('[data-testid="Link-example-0"] div > div:nth-child(2) > a > span > svg')
-        .should('exist');
-      cy.get('[data-testid="Link-example-0"] div > div:nth-child(3) > a')
-        .contains('Link standard white')
-        .should('exist')
-    });
-
-    it('has view code button', () => {
-      cy.get('@viewCodeBtn').should('exist');
-    });
-
-    it('shows code on click', () => {
-      cy.get('@viewCodeBtn').click();
-      cy.get('@container')
-        .find('textarea')
-        .should('exist');
-    });
-  });
-
-  describe('Iconography section', () => {
-    beforeEach(() => {
-      cy.visit('/#link');
-      cy.get('[data-testid="Link-example-2"]')
-        .as('container')
-        .find('[data-preview="Link"]')
-        .as('preview');
-
-      cy.get('@container')
-        .find('button')
-        .contains('View Code')
-        .as('viewCodeBtn');
-    });
-
-    it('renders link Iconography section', () => {
-      cy.get('[data-testid="Link-example-2"]')
-        .should('exist');
-
-      cy.get('[data-testid="Link-example-2"]')
-        .first()
-        .contains('Internal link')
-        .should('exist');
-      cy.get('[data-testid="Link-example-2"] div > div:nth-child(2) > a')
-        .contains('External link')
-        .should('exist');
-      //check icon exist
-      cy.get('[data-testid="Link-example-2"] div > div:nth-child(2) > a > span > svg')
-        .should('exist');
-      cy.get('[data-testid="Link-example-2"] div > div:nth-child(3) > a')
-        .contains('Download link')
-        .should('exist');
-      //check icon exist
-      cy.get('[data-testid="Link-example-2"] div > div:nth-child(3) > a > span > svg')
-        .should('exist');
-      cy.get('[data-testid="Link-example-2"] div > div:nth-child(4) > a')
-        .contains('Favourite link')
-        .should('exist');
-      //check icon exist
-      cy.get('[data-testid="Link-example-2"] div > div:nth-child(4) > a > span > svg')
-        .should('exist');
-    });
-
-    it('has view code button', () => {
-      cy.get('@viewCodeBtn').should('exist');
-    });
-
-    it('shows code on click', () => {
-      cy.get('@viewCodeBtn').click();
-      cy.get('@container')
-        .find('textarea')
-        .should('exist');
-    });
-  });
-
-  describe('Link as button section', () => {
-    beforeEach(() => {
-      cy.visit('/#link');
-      cy.get('[data-testid="Link-example-3"]')
-        .as('container')
-        .find('[data-preview="Link"]')
-        .as('preview');
-
-      cy.get('@container')
-        .find('button')
-        .contains('View Code')
-        .as('viewCodeBtn');
-    });
-
-    it('renders link as buttons section', () => {
-      cy.get('[data-testid="Link-example-3"]')
-        .should('exist');
-
-      //verify all button colors
-      cy.get('[data-testid="Link-example-3"] div > div:nth-child(1) > a[color="black"]')
-        .contains('Link as button')
-        .should('exist');
-      cy.get('[data-testid="Link-example-3"] div > div:nth-child(2) > a[color="red"]')
-        .contains('Link as button')
-        .and('exist');
-      cy.get('[data-testid="Link-example-3"] div > div:nth-child(3) > a[color="yellow"]')
-        .should('exist');
-      cy.get('[data-testid="Link-example-3"] div > div:nth-child(4) > a[color="yellow_light"]')
-        .contains('Link as button')
-        .should('exist');
-      cy.get('[data-testid="Link-example-3"] div > div:nth-child(5) > a[color="yellow_dark"]')
-        .contains('Link as button')
-        .should('exist');
-      cy.get('[data-testid="Link-example-3"] div:nth-child(6) > div:nth-child(1) > a[color="grey"] ')
-        .contains('Link as button')
-        .should('exist');
-      cy.get('[data-testid="Link-example-3"] div > div > div:nth-child(6) > a[color="transparent"]')
-        .contains('Link as transparent button')
-        .should('exist');
-      cy.get('[data-testid="Link-example-3"]  div:nth-child(3) > a[color="white"]')
-        .contains('White button')
-        .should('exist');
-    });
-
-    it('has view code button', () => {
-      cy.get('@viewCodeBtn').should('exist');
-    });
-
-    it('shows code on click', () => {
-      cy.get('@viewCodeBtn').click();
-      cy.get('@container')
-        .find('textarea')
-        .should('exist');
-    });
-  });
-});

package/cypress/e2e/components/atoms/logo.cy.js

@@ -1,132 +0,0 @@
-describe('Logo component', () => {
-  before(() => {
-    // go to logo component
-    cy.visit('/#logo');
-  });
-
-  describe('props and methods section', () => {
-    beforeEach(() => {
-      cy.visit('/#logo');
-      cy.get('[data-testid="Logo-container"] button[name="rsg-usage"]')
-        .contains('Props & methods')
-        .as('propsBtn');
-
-      cy.get('@propsBtn')
-        .closest('[class^=rsg--tabs]')
-        .as('container');
-    });
-
-    it('is present', () => {
-      cy.get('@propsBtn').should('exist');
-    });
-
-    it('does not show table initially', () => {
-      cy.get('@container')
-        .find('table')
-        .should('not.exist');
-    });
-
-    it('shows the table on button click', () => {
-      cy.get('@propsBtn').click();
-      cy.get('@container')
-        .find('table')
-        .should('contain', 'Prop name');
-    });
-  });
-
-  describe('CR logo section', () => {
-    beforeEach(() => {
-      cy.visit('/#logo');
-      cy.get('[data-testid="Logo-example-1"]')
-        .as('container')
-        .find('[data-preview="Logo"]')
-        .as('preview');
-
-      cy.get('@container')
-        .find('button')
-        .contains('View Code')
-        .as('viewCodeBtn');
-    });
-
-    it('should check CR logo', () => {
-      cy.get('[data-testid="Logo-examples"] h1[id="comic-relief-logo"]')
-        .should('exist')
-        .contains('Comic Relief Logo')
-    });
-
-    it('has view code button', () => {
-      cy.get('@viewCodeBtn').should('exist');
-    });
-
-    it('shows code on click', () => {
-      cy.get('@viewCodeBtn').click();
-      cy.get('@container')
-        .find('textarea')
-        .should('exist');
-    });
-  });
-
-  describe('SR logo section', () => {
-    beforeEach(() => {
-      cy.visit('/#logo');
-      cy.get('[data-testid="Logo-example-3"]')
-        .as('container')
-        .find('[data-preview="Logo"]')
-        .as('preview');
-
-      cy.get('@container')
-        .find('button')
-        .contains('View Code')
-        .as('viewCodeBtn');
-    });
-
-    it('should check SR logo', () => {
-      cy.get('[data-testid="Logo-examples"] h1[id="sport-relief-logo"]')
-        .should('exist')
-        .contains('Sport Relief Logo')
-    });
-
-    it('has view code button', () => {
-      cy.get('@viewCodeBtn').should('exist');
-    });
-
-    it('shows code on click', () => {
-      cy.get('@viewCodeBtn').click();
-      cy.get('@container')
-        .find('textarea')
-        .should('exist');
-    });
-  });
-
-  describe('SR game on logo section', () => {
-    beforeEach(() => {
-      cy.visit('/#logo');
-      cy.get('[data-testid="Logo-example-5"]')
-        .as('container')
-        .find('[data-preview="Logo"]')
-        .as('preview');
-
-      cy.get('@container')
-        .find('button')
-        .contains('View Code')
-        .as('viewCodeBtn');
-    });
-
-    it('should check SR game on logo', () => {
-      cy.get('[data-testid="Logo-examples"] h1[id="sport-relief-game-on-logo"]')
-        .should('exist')
-        .contains('Sport Relief Game On Logo');
-    });
-
-    it('has view code button', () => {
-      cy.get('@viewCodeBtn').should('exist');
-    });
-
-    it('shows code on click', () => {
-      cy.get('@viewCodeBtn').click();
-      cy.get('@container')
-        .find('textarea')
-        .should('exist');
-    });
-  });
-});

package/cypress/e2e/components/atoms/pagination.cy.js

@@ -1,191 +0,0 @@
-describe('Pagination component', () => {
-  before(() => {
-  // go to pagination component
-    cy.visit('/#pagination');
-  });
-
-  describe('props and methods section', () => {
-    beforeEach(() => {
-      cy.visit('/#pagination');
-      cy.get('[data-testid="Pagination-container"] button[name="rsg-usage"]')
-        .contains('Props & methods')
-        .as('propsBtn');
-
-      cy.get('@propsBtn')
-        .closest('[class^=rsg--tabs]')
-        .as('container');
-    });
-
-    it('is present', () => {
-      cy.get('@propsBtn').should('exist');
-    });
-
-    it('does not show table initially', () => {
-      cy.get('@container')
-        .find('table')
-        .should('not.exist');
-    });
-
-    it('shows the table on button click', () => {
-      cy.get('@propsBtn').click();
-      cy.get('@container')
-        .find('table')
-        .should('contain', 'Prop name');
-    });
-  });
-
-  describe('Pagination minimalist section', () => {
-    beforeEach(() => {
-      cy.visit('/#pagination');
-      cy.get('[data-testid="Pagination-example-1"]')
-        .as('container')
-        .find('[data-preview="Pagination"]')
-        .as('preview');
-
-      cy.get('@container')
-        .find('button')
-        .contains('View Code')
-        .as('viewCodeBtn');
-    });
-
-    it('should check minimalist section', () => {
-      cy.get('[data-testid="Pagination-example-1"]')
-        .should('exist');
-      cy.get('[data-testid="Pagination-example-1"] ul')
-        .should('exist');
-    });
-
-    it('has view code button', () => {
-      cy.get('@viewCodeBtn').should('exist');
-    });
-
-    it('shows code on click', () => {
-      cy.get('@viewCodeBtn').click();
-      cy.get('@container')
-        .find('textarea')
-        .should('exist');
-    });
-  });
-
-  describe('Pagination full size section', () => {
-    beforeEach(() => {
-      cy.visit('/#pagination');
-      cy.get('[data-testid="Pagination-example-3"]')
-        .as('container')
-        .find('[data-preview="Pagination"]')
-        .as('preview');
-
-      cy.get('@container')
-        .find('button')
-        .contains('View Code')
-        .as('viewCodeBtn');
-    });
-
-    it('verifies full size pagination', () => {
-      cy.get('[data-testid="Pagination-example-3"]')
-        .should('exist');
-      cy.get('[data-testid="Pagination-example-3"] ul')
-        .should('exist');
-      cy.get('[data-testid="Pagination-example-3"] [aria-label="First page"]')
-        .should('exist');
-      cy.get('[data-testid="Pagination-example-3"] [aria-label="Previous page"]')
-        .should('exist');
-      cy.get('[data-testid="Pagination-example-3"] [aria-label="Next page"]')
-        .should('exist');
-      cy.get('[data-testid="Pagination-example-3"] [aria-label="Last page"]')
-    });
-
-    it('has view code button', () => {
-      cy.get('@viewCodeBtn').should('exist');
-    });
-
-    it('shows code on click', () => {
-      cy.get('@viewCodeBtn').click();
-      cy.get('@container')
-        .find('textarea')
-        .should('exist');
-    });
-  });
-
-  describe('Pagination custom style section', () => {
-    beforeEach(() => {
-      cy.visit('/#pagination');
-      cy.get('[data-testid="Pagination-example-5"]')
-        .as('container')
-        .find('[data-preview="Pagination"]')
-        .as('preview');
-
-      cy.get('@container')
-        .find('button')
-        .contains('View Code')
-        .as('viewCodeBtn');
-    });
-
-    it('should check custom style section exist', () => {
-      cy.get('[data-testid="Pagination-example-5"]')
-        .should('exist');
-      cy.get('[data-testid="Pagination-example-5"] ul')
-        .should('exist');
-      cy.get('[data-testid="Pagination-example-5"] [aria-label="First page"]')
-        .should('exist');
-      cy.get('[data-testid="Pagination-example-5"] [aria-label="Previous page"]')
-        .should('exist');
-      cy.get('[data-testid="Pagination-example-5"] [aria-label="Last page"]')
-        .should('exist');
-      cy.get('[data-testid="Pagination-example-5"] [aria-label="Next page"]')
-        .should('exist');
-    });
-
-    it('has view code button', () => {
-      cy.get('@viewCodeBtn').should('exist');
-    });
-
-    it('shows code on click', () => {
-      cy.get('@viewCodeBtn').click();
-      cy.get('@container')
-        .find('textarea')
-        .should('exist');
-    });
-  });
-
-  describe('Pagination custom labels section', () => {
-    beforeEach(() => {
-      cy.visit('/#pagination');
-      cy.get('[data-testid="Pagination-example-7"]')
-        .as('container')
-        .find('[data-preview="Pagination"]')
-        .as('preview');
-
-      cy.get('@container')
-        .find('button')
-        .contains('View Code')
-        .as('viewCodeBtn');
-    });
-
-    it('should check custom style section exist', () => {
-      cy.get('[data-testid="Pagination-example-7"]')
-        .should('exist');
-      cy.get('[data-testid="Pagination-example-7"] ul')
-        .should('exist');
-      cy.get('[data-testid="Pagination-example-7"] [aria-label="First page"]')
-        .should('exist');
-      cy.get('[data-testid="Pagination-example-7"] [aria-label="Previous page"]')
-        .should('exist');
-      cy.get('[data-testid="Pagination-example-7"] [aria-label="Last page"]')
-        .should('exist');
-      cy.get('[data-testid="Pagination-example-7"] [aria-label="Next page"]')
-        .should('exist');
-    });
-
-    it('has view code button', () => {
-      cy.get('@viewCodeBtn').should('exist');
-    });
-
-    it('shows code on click', () => {
-      cy.get('@viewCodeBtn').click();
-      cy.get('@container')
-        .find('textarea')
-        .should('exist');
-    });
-  });
-});

package/cypress/e2e/components/atoms/picture.cy.js

@@ -1,130 +0,0 @@
-describe('Picture component', () => {
-  before(() => {
-    // go to picture component
-    cy.visit('/#picture');
-    cy.wait(2500)
-  });
-
-  describe('props and methods section', () => {
-    beforeEach(() => {
-      cy.visit('/#picture');
-      cy.get('[data-testid="Picture-container"] button[name="rsg-usage"]')
-        .contains('Props & methods')
-        .as('propsBtn');
-
-      cy.get('@propsBtn')
-        .closest('[class^=rsg--tabs]')
-        .as('container');
-    });
-
-    it('is present', () => {
-      cy.get('@propsBtn').should('exist');
-    });
-
-    it('does not show table initially', () => {
-      cy.get('@container')
-        .find('table')
-        .should('not.exist');
-    });
-
-    it('shows the table on button click', () => {
-      cy.get('@propsBtn').click();
-      cy.get('@container')
-        .find('table')
-        .should('contain', 'Prop name');
-    });
-  });
-
-  describe('Picture section', () => {
-    beforeEach(() => {
-      cy.visit('/#picture');
-      cy.get('[data-testid="Picture-example-1"]')
-        .as('container')
-        .find('[data-preview="Picture"]')
-        .as('preview');
-
-      cy.get('@container')
-        .find('button')
-        .contains('View Code')
-        .as('viewCodeBtn');
-    });
-
-    it('render picture section', () => {
-      cy.get('@container')
-        .should('exist')
-    });
-
-    it('has view code button', () => {
-      cy.get('@viewCodeBtn').should('exist');
-    });
-
-    it('shows code on click', () => {
-      cy.get('@viewCodeBtn').click();
-      cy.get('@container')
-        .find('textarea')
-        .should('exist');
-    });
-  });
-
-  describe('custom size picture section', () => {
-    beforeEach(() => {
-      cy.visit('/#picture');
-      cy.get('[data-testid="Picture-example-3"]')
-        .as('container')
-        .find('[data-preview="Picture"]')
-        .as('preview');
-
-      cy.get('@container')
-        .find('button')
-        .contains('View Code')
-        .as('viewCodeBtn');
-    });
-
-    it('should check custom size section', () => {
-      cy.get('@container')
-        .should('exist');
-    });
-
-    it('has view code button', () => {
-      cy.get('@viewCodeBtn').should('exist');
-    });
-
-    it('shows code on click', () => {
-      cy.get('@viewCodeBtn').click();
-      cy.get('@container')
-        .find('textarea')
-        .should('exist');
-    });
-  });
-
-  describe('Single image section', () => {
-    beforeEach(() => {
-      cy.visit('/#picture');
-      cy.get('[data-testid="Picture-example-5"]')
-        .as('container')
-        .find('[data-preview="Picture"]')
-        .as('preview');
-
-      cy.get('@container')
-        .find('button')
-        .contains('View Code')
-        .as('viewCodeBtn');
-    });
-
-    it('should check custom size picture section', () => {
-      cy.get('@container')
-        .should('exist');
-    });
-
-    it('has view code button', () => {
-      cy.get('@viewCodeBtn').should('exist');
-    });
-
-    it('shows code on click', () => {
-      cy.get('@viewCodeBtn').click();
-      cy.get('@container')
-        .find('textarea')
-        .should('exist');
-    });
-  });
-});