@comicrelief/component-library 7.19.1 → 7.20.0

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

@@ -0,0 +1,112 @@
+describe('Box component', () => {
+  before(() => {
+    // go to box component
+    cy.visit('/#box');
+  });
+
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Box-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('Box example 1 section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Box-example-1"]')
+        .as('container')
+        .find('[data-preview="Box"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders box preview', () => {
+      cy.get('@container')
+        .find('h3')
+        .should('exist')
+        .contains('Title');
+      cy.get('@container')
+        .find('p')
+        .should('exist')
+        .contains('Text body copy description');
+    });
+
+    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();
+    });
+  });
+
+  describe('Box example 3 section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Box-example-3"]')
+        .as('container')
+        .find('[data-preview="Box"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders box preview', () => {
+      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/molecules/card.spec.js

@@ -0,0 +1,113 @@
+describe('Card component', () => {
+  before(() => {
+    // go to card component
+    cy.visit('/#card');
+    cy.wait(2500)
+  });
+
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Card-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('Card example 1 section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Card-example-1"]')
+        .as('container')
+        .find('[data-preview="Card"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders card preview', () => {
+      cy.get('@container')
+        .find('h3')
+        .should('exist')
+        .contains('Title');
+      cy.get('@container')
+        .find('p')
+        .should('exist')
+        .contains('Text body copy description');
+    });
+
+    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();
+    });
+  });
+
+  describe('Card no body section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Card-example-3"]')
+        .as('container')
+        .find('[data-preview="Card"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders card no body preview', () => {
+      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/molecules/chip.spec.js

@@ -0,0 +1,70 @@
+describe('Chip component', () => {
+  before(() => {
+    // go to chip component
+    cy.visit('/#chip');
+    cy.wait(2500)
+  });
+
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Chip-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('Chip section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Chip-example-1"]')
+        .as('container')
+        .find('[data-preview="Chip"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('chip component should have label element', () => {
+      cy.get('@container')
+        .find('label').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();
+    });
+  });
+});

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

@@ -0,0 +1,73 @@
+describe('Countdown component', () => {
+  before(() => {
+    // go to countdown component
+    cy.visit('/#countdown');
+    cy.wait(2500)
+  });
+
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Countdown-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('Countdown section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Countdown-examples"]')
+        .find('p')
+        .contains('Limit is 365 days');
+      cy.get('[data-testid="Countdown-example-1"]')
+        .as('container')
+        .find('[data-preview="Countdown"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('countdown component', () => {
+      cy.get('@container')
+        .find('h2').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();
+    });
+  });
+});

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

@@ -0,0 +1,147 @@
+describe('Descriptor component', () => {
+  before(() => {
+    // go to descriptor component
+    cy.visit('/#descriptor');
+    cy.wait(2500)
+  });
+
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Descriptor-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('Descriptor section: Descriptor-example-1', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Descriptor-examples"]')
+        .find('h3')
+        .contains('Descriptor Component');
+      cy.get('[data-testid="Descriptor-example-1"]')
+        .as('container')
+        .find('[data-preview="Descriptor"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('should have necessary elements under Descriptor-example-1', () => {
+      cy.get('@container')
+        .find('span')
+        .contains('15/06/2020')
+        .should('exist');
+      cy.get('[data-testid="Descriptor-example-1"]')
+        .find('img:nth-child(1)[alt]')
+        .should('exist');
+      cy.get('@container')
+        .find('img:nth-child(2)[alt]')
+        .should('exist');
+      cy.get('@container')
+        .find('span')
+        .should('exist');
+      cy.get('@container')
+        .find('h3')
+        .should('exist');
+      cy.get('@container')
+        .find('div:nth-child(4)')
+        .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();
+    });
+  });
+
+  describe('Descriptor section: Descriptor-example-2', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Descriptor-examples"]')
+        .find('h3')
+        .contains('Descriptor Component');
+      cy.get('[data-testid="Descriptor-example-2"]')
+        .as('container')
+        .find('[data-preview="Descriptor"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('should have necessary elements under Descriptor-example-2', () => {
+      cy.get('@container')
+        .find('span')
+        .contains('15/06/2020')
+        .should('exist');
+      cy.get('@container')
+        .find('img:nth-child(1)[alt]')
+        .should('exist');
+      cy.get('@container')
+        .find('img:nth-child(2)[alt]')
+        .should('exist');
+      cy.get('@container')
+        .find('img:nth-child(3)[alt]')
+        .should('exist');
+      cy.get('@container')
+        .find('span')
+        .should('exist');
+      cy.get('@container')
+        .find('h3')
+        .should('exist');
+      cy.get('@container')
+        .find('div:nth-child(4)')
+        .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();
+    });
+  });
+});

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

@@ -0,0 +1,81 @@
+describe('DoubleCopy component', () => {
+  before(() => {
+    // go to double copy component
+    cy.visit('/#doublecopy');
+  });
+
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="DoubleCopy-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('DoubleCopy section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="DoubleCopy-example-1"]')
+        .as('container')
+        .find('[data-preview="DoubleCopy"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders doublecopy preview', () => {
+      cy.get('@container')
+        .find('h1')
+        .should('exist')
+        .contains('Left Copy');
+      cy.get('@container')
+        .find('p')
+        .should('exist');
+      cy.get('@container')
+        .find('div:nth-child(2) > div > h1')
+        .should('exist')
+        .contains('Right Copy');
+      cy.get('@container')
+        .find('div:nth-child(2) > div > 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();
+    });
+  });
+});

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

@@ -0,0 +1,71 @@
+describe('Herobanner component', () => {
+  before(() => {
+    // go to herobanner component
+    cy.visit('/#herobanner');
+  });
+
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="HeroBanner-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('HeroBanner section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="HeroBanner-example-1"]')
+        .as('container')
+        .find('[data-preview="HeroBanner"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders HeroBanner preview', () => {
+      cy.get('@container')
+        .find('h1')
+        .should('exist')
+        .contains('Change Please')
+    });
+
+    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();
+    });
+  });
+});