@comicrelief/component-library 7.19.1 → 7.19.2

package/cypress/integration/components/atoms/logo.spec.js

@@ -0,0 +1,149 @@
+describe('Logo component', () => {
+  before(() => {
+    // go to logo component
+    cy.visit('/#logo');
+  });
+
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      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.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');
+    });
+
+    it('closes code on click', () => {
+      cy.get('@viewCodeBtn').click();
+      cy.get('@container')
+        .find('textarea')
+        .should('not.exist');
+    });
+  });
+
+  describe('SR logo section', () => {
+    beforeEach(() => {
+      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');
+    });
+
+    it('closes code on click', () => {
+      cy.get('@viewCodeBtn').click();
+      cy.get('@container')
+        .find('textarea')
+        .should('not.exist');
+    });
+  });
+
+  describe('SR game on logo section', () => {
+    beforeEach(() => {
+      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');
+    });
+
+    it('closes code on click', () => {
+      cy.get('@viewCodeBtn').click();
+      cy.get('@container')
+        .find('textarea')
+        .should('not.exist');
+    });
+  });
+});

package/cypress/integration/components/atoms/pagination.spec.js

@@ -0,0 +1,214 @@
+describe('Pagination component', () => {
+  before(() => {
+  // go to pagination component
+    cy.visit('/#pagination');
+  });
+
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      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.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');
+    });
+
+    it('closes code on click', () => {
+      cy.get('@viewCodeBtn').click();
+      cy.get('@container')
+        .find('textarea')
+        .should('not.exist');
+    });
+  });
+
+  describe('Pagination full size section', () => {
+    beforeEach(() => {
+      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');
+    });
+
+    it('closes code on click', () => {
+      cy.get('@viewCodeBtn').click();
+      cy.get('@container')
+        .find('textarea')
+        .should('not.exist');
+    });
+  });
+
+  describe('Pagination custom style section', () => {
+    beforeEach(() => {
+      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');
+    });
+
+    it('closes code on click', () => {
+      cy.get('@viewCodeBtn').click();
+      cy.get('@container')
+        .find('textarea')
+        .should('not.exist');
+    });
+  });
+
+  describe('Pagination custom labels section', () => {
+    beforeEach(() => {
+      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');
+    });
+
+    it('closes code on click', () => {
+      cy.get('@viewCodeBtn').click();
+      cy.get('@container')
+        .find('textarea')
+        .should('not.exist');
+    });
+  });
+});

package/cypress/integration/components/atoms/picture.spec.js

@@ -0,0 +1,147 @@
+describe('Picture component', () => {
+  before(() => {
+    // go to picture component
+    cy.visit('/#picture');
+    cy.wait(2500)
+  });
+
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      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.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');
+    });
+
+    it('closes code on click', () => {
+      cy.get('@viewCodeBtn').click();
+      cy.get('@container')
+        .find('textarea')
+        .should('not.exist');
+    });
+  });
+
+  describe('custom size picture section', () => {
+    beforeEach(() => {
+      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');
+    });
+
+    it('closes code on click', () => {
+      cy.get('@viewCodeBtn').click();
+      cy.get('@container')
+        .find('textarea')
+        .should('not.exist');
+    });
+  });
+
+  describe('Single image section', () => {
+    beforeEach(() => {
+      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');
+    });
+
+    it('closes code on click', () => {
+      cy.get('@viewCodeBtn').click();
+      cy.get('@container')
+        .find('textarea')
+        .should('not.exist');
+    });
+  });
+});

package/cypress/integration/components/atoms/radioButton.spec.js

@@ -0,0 +1,81 @@
+describe('Radio Button component', () => {
+  before(() => {
+    // go to radio button component
+    cy.visit('/#radiobutton');
+    cy.wait(2500)
+  });
+
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="RadioButton-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('Radio button section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="RadioButton-example-1"]')
+        .as('container')
+        .find('[data-preview="RadioButton"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders radio button preview', () => {
+      cy.get('@container')
+        .find('label')
+        .first()
+        .click();
+      cy.get('@container')
+        .find('label:nth-child(2)')
+        .click();
+      cy.get('@container')
+        .find('label:nth-child(3)')
+        .click();
+    });
+
+    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');
+    });
+
+    it('closes code on click', () => {
+      cy.get('@viewCodeBtn').click();
+      cy.get('@container')
+        .find('textarea')
+        .should('not.exist');
+    });
+  });
+});

package/cypress/integration/components/atoms/richText.spec.js

@@ -0,0 +1,75 @@
+describe('RichText component', () => {
+  before(() => {
+    // go to rich text component
+    cy.visit('/#richtext');
+    cy.wait(2500)
+  });
+
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="RichText-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('Rich text section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="RichText-example-1"]')
+        .as('container')
+        .find('[data-preview="RichText"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('should check rich text section', () => {
+      cy.get('@container')
+        .find('p')
+        .should('exist')
+        .contains('Some strong test markup')
+    });
+
+    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');
+    });
+
+    it('closes code on click', () => {
+      cy.get('@viewCodeBtn').click();
+      cy.get('@container')
+        .find('textarea')
+        .should('not.exist');
+    });
+  });
+});