@comicrelief/component-library 7.19.0 → 7.19.2

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

@@ -0,0 +1,89 @@
+describe('SelectField component', () => {
+  before(() => {
+    // go to selectfield text component
+    cy.visit('/#selectfield');
+  });
+
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Select-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('Select Field section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Select-example-1"]')
+        .as('container')
+        .find('[data-preview="Select"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('should check select field functionality', () => {
+      //first dropdown
+      cy.get('@container')
+        .find('h4')
+        .should('exist')
+        .contains('DROPDOWN MENU');
+      cy.get('@container')
+        .find('label:nth-child(2)')
+        .first()
+        .click();
+
+      //second dropdown
+      cy.get('@container')
+        .find('label:nth-child(4) > span')
+        .should('exist')
+        .contains('This is an error message');
+      cy.get('@container')
+        .find('label:nth-child(4)')
+        .first()
+        .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/text.spec.js

@@ -0,0 +1,180 @@
+describe('Text component', () => {
+  before(() => {
+    // go to text component
+    cy.visit('/#text');
+  });
+
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Text-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('Text section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Text-example-0"]')
+        .as('container')
+        .find('[data-preview="Text"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders text section', () => {
+      //H1
+      cy.get('@container')
+        .find('h1')
+        .should('exist')
+        .contains('family: Anton weight: Regular size: 80px / 5rem / super');
+      //H2
+      cy.get('@container')
+        .find('h2')
+        .should('exist')
+        .contains('family: Anton weight: Regular size: 64px / 4rem / big');
+      //H3
+      cy.get('@container')
+        .find('h3')
+        .should('exist')
+        .contains('family: Anton weight: Regular size: 48px / 3rem / xxl');
+      //H4
+      cy.get('@container')
+        .find('h4')
+        .should('exist')
+        .contains('family: Anton weight: Regular size: 32px / 2rem / xl');
+      //H5
+      cy.get('@container')
+        .find('h4')
+        .should('exist')
+        .contains('family: Anton weight: Regular size: 24px / 1.5rem / l');
+      //Body1
+      cy.get('@container')
+        .find('p')
+        .should('exist')
+        .contains('family: Montserrat weight: Regular size: 20px / 1.25rem / m');
+      //Body2
+      cy.get('@container')
+        .find('p')
+        .should('exist')
+        .contains('family: Montserrat weight: Regular size: 16px / 1rem / s');
+    });
+
+    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('Text section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Text-example-2"]')
+        .as('container')
+        .find('[data-preview="Text"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders Sport Relief text section', () => {
+      //H1
+      cy.get('@container')
+        .find('h1')
+        .should('exist')
+        .contains('Heading 1');
+      //H2
+      cy.get('@container')
+        .find('h2')
+        .should('exist')
+        .contains('Heading 2');
+      //H3
+      cy.get('@container')
+        .find('h3')
+        .should('exist')
+        .contains('Heading 3');
+      //H4
+      cy.get('@container')
+        .find('h4')
+        .should('exist')
+        .contains('Heading 4');
+      //H5
+      cy.get('@container')
+        .find('h4')
+        .should('exist')
+        .contains('Heading 5');
+      //Body1
+      cy.get('@container')
+        .find('p')
+        .should('exist')
+        .contains('Body 1');
+      //Body2
+      cy.get('@container')
+        .find('p')
+        .should('exist')
+        .contains('Body 2');
+      //Bold and uppercase
+      cy.get('@container')
+        .find('p')
+        .should('exist')
+        .contains('Bold and Uppercase');
+    });
+
+    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/textArea.spec.js

@@ -0,0 +1,91 @@
+describe('TextArea component', () => {
+  before(() => {
+    // go to text area component
+    cy.visit('/#textarea');
+  });
+
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="TextArea-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('Text Area section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="TextArea-example-1"]')
+        .as('container')
+        .find('[data-preview="TextArea"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    //Long copy/Message field
+    it('renders Long copy/Message field section', () => {
+      cy.get('@container')
+        .find('h4')
+        .should('exist')
+        .contains('Long copy/Message field');
+      cy.get('@container')
+        .find('label:nth-child(2) > textarea')
+        .should('exist')
+        .type('This is a test text');
+    });
+
+    //Long copy/Message field with error message
+    it('renders Long copy/Message field with error message', () => {
+      cy.get('@container')
+        .find('h4')
+        .should('exist')
+        .contains('Long copy/Message field');
+      cy.get('@container')
+        .find('label:nth-child(4) > span')
+        .should('exist')
+        .contains('This is an error message');
+      cy.get('@container')
+        .find('label:nth-child(4) > textarea')
+        .type('This is a test text 2')
+    });
+
+    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();
+    });
+  });
+});

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

@@ -0,0 +1,78 @@
+describe('Text Input With Dropdown component', () => {
+  before(() => {
+    // go to textinputwithdropdown component
+    cy.visit('/#textinputwithdropdown');
+  });
+
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="TextInputWithDropdown-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('TextInputWithDropdown section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="TextInputWithDropdown-examples"]')
+        .as('container')
+        .find('[data-preview="TextInputWithDropdown"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders text input with dropdown field section', () => {
+      cy.get('@container')
+        .find('h1')
+        .should('exist')
+        .contains('TextInputWithDropdown');
+      cy.get('@container')
+        .find('#input-with-dropdown')
+        .should('exist')
+        .type('This is a test text');
+      cy.get('@container')
+        .find('ul > li:nth-child(2)') // first option
+        .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();
+    });
+  });
+});

package/cypress/integration/components/molecules/accordion.spec.js

@@ -0,0 +1,72 @@
+describe('Accordion component', () => {
+  before(() => {
+    // go to accordion component
+    cy.visit('/#accordion');
+  });
+
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Accordion-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('Accordion section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Accordion-example-1"]')
+        .as('container')
+        .find('[data-preview="Accordion"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('clicking svg dropdown icon should element p', () => {
+      cy.get('[data-testid="Accordion-example-1"] button > div').click();
+      cy.get('p').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/molecules/articleTeaser.spec.js

@@ -0,0 +1,110 @@
+describe('ArticleTeaser component', () => {
+  before(() => {
+    // go to articleteaser component
+    cy.visit('/#articleteaser');
+  });
+
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="ArticleTeaser-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('Article Teaser section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="ArticleTeaser-example-1"]')
+        .as('container')
+        .find('[data-preview="ArticleTeaser"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    //ArticleTeaser 1
+    it('renders article teaser', () => {
+      cy.get('@container')
+        .find('span')
+        .should('exist')
+        .contains(' 01 July 2019');
+      cy.get('@container')
+        .find('h3')
+        .should('exist')
+        .contains('News article');
+      cy.get('@container')
+        .find('span')
+        .should('exist')
+        .contains('4 min read');
+
+      //article teaser 2
+      cy.get('@container')
+        .find('div:nth-child(2) > article > a')
+        .as('container2')
+        .should('exist')
+        .contains('01 July 2019');
+      cy.get('@container2')
+        .find('h3')
+        .should('exist')
+        .contains('News article News article');
+      cy.get('@container2')
+        .find('span')
+        .should('exist')
+        .contains('4 min read');
+    });
+
+    //ArticleTeaser: Press Release
+    it('renders article teaser : press release', () => {
+      cy.get('[data-testid="ArticleTeaser-example-3"]')
+        .find('span')
+        .should('exist')
+        .contains('01 July 2019');
+      cy.get('[data-testid="ArticleTeaser-example-3"]')
+        .find('h3')
+        .should('exist')
+        .contains('Press Release');
+    });
+
+    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/molecules/banner.spec.js

@@ -0,0 +1,72 @@
+describe('Banner component', () => {
+  before(() => {
+    // go to banner component
+    cy.visit('/#banner');
+  });
+
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Banner-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('Banner section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Banner-example-1"]')
+        .as('container')
+        .find('[data-preview="Banner"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('should show element p with text', () => {
+      cy.get('@container')
+        .find('p').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');
+    });
+  });
+});