@comicrelief/component-library 7.19.0 → 7.19.2

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

@@ -0,0 +1,71 @@
+describe('infobanner component', () => {
+  before(() => {
+    // go to infobanner component
+    cy.visit('/#infobanner');
+  });
+
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="InfoBanner-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('Infobanner section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="InfoBanner-example-1"]')
+        .as('container')
+        .find('[data-preview="InfoBanner"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders Infobanner preview', () => {
+      cy.get('@container')
+        .find('h3')
+        .should('exist')
+        .contains('Project Name')
+    });
+
+    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/partnerLink.spec.js

@@ -0,0 +1,70 @@
+describe('PartnerLink component', () => {
+  before(() => {
+    // go to partnerLink component
+    cy.visit('/#partnerlink');
+  });
+
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="PartnerLink-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('Partnerlink section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="PartnerLink-example-1"]')
+        .as('container')
+        .find('[data-preview="PartnerLink"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders Partnerlink preview', () => {
+      cy.get('@container')
+        .find('span')
+        .contains('Find out more')
+    });
+
+    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/promo.spec.js

@@ -0,0 +1,76 @@
+describe('Promo component', () => {
+  before(() => {
+    // go to promo component
+    cy.visit('/#promo');
+  });
+
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Promo-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('Promo section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Promo-example-1"]')
+        .as('container')
+        .find('[data-preview="Promo"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders Promo preview', () => {
+      cy.get('@container')
+        .find('h1')
+        .should('exist');
+      cy.get('@container')
+        .find('p')
+        .should('exist');
+      cy.get('@container')
+        .find('span')
+        .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/SchoolLookup.spec.js → molecules/schoolLookup.spec.js}

@@ -74,5 +74,11 @@ describe('School Lookup component', () => {
         .contains('View Code')
         .as('viewCodeBtn');
     });
+
+    it('it should show address when school postcode is entered', () => {
+      cy.get('@preview')
+        .find('input#school-lookup')
+        .should('exist');
+    });
   });
 });

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

@@ -0,0 +1,74 @@
+describe('Search Input component', () => {
+  before(() => {
+    // go to search input component
+    cy.visit('/#searchinput');
+  });
+
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="SearchInput-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('Search Input section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="SearchInput-example-1"]')
+        .as('container')
+        .find('[data-preview="SearchInput"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders search input preview', () => {
+      cy.get('@container')
+        .find('span')
+        .should('exist')
+        .contains('Search');
+      cy.get('@container')
+        .find('input')
+        .type('test search');
+    });
+
+    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/searchResult.spec.js

@@ -0,0 +1,202 @@
+describe('Search Result component', () => {
+  before(() => {
+    // go to search input component
+    cy.visit('/#searchresult');
+  });
+
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="SearchResult-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('Search Result Minimalist section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="SearchResult-example-1"]')
+        .as('container')
+        .find('[data-preview="SearchResult"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders minimalist preview', () => {
+      cy.get('@container')
+        .find('img')
+        .should('exist');
+      cy.get('@container')
+        .find('h3')
+        .contains('News article');
+    });
+
+    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('Search Result with copy section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="SearchResult-example-3"]')
+        .as('container')
+        .find('[data-preview="SearchResult"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders with copy preview', () => {
+      cy.get('@container')
+        .find('img')
+        .should('exist');
+      cy.get('@container')
+        .find('h3')
+        .contains('News article');
+      cy.get('@container')
+        .find('p')
+        .contains('News article copy');
+    });
+
+    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('Search Result with date section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="SearchResult-example-5"]')
+        .as('container')
+        .find('[data-preview="SearchResult"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders with date preview', () => {
+      cy.get('@container')
+        .find('img')
+        .should('exist');
+      cy.get('@container')
+        .find('span')
+        .contains(' 01 July 2019');
+      cy.get('@container')
+        .find('h3')
+        .contains('News article');
+      cy.get('@container')
+        .find('p')
+        .should('not.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('Search Result with date and type section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="SearchResult-example-5"]')
+        .as('container')
+        .find('[data-preview="SearchResult"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders with date and type preview', () => {
+      cy.get('@container')
+        .find('img')
+        .should('exist');
+      cy.get('@container')
+        .find('span')
+        .contains(' 01 July 2019');
+      cy.get('@container')
+        .find('h3')
+        .contains('News article');
+      cy.get('@container')
+        .find('p')
+        .should('not.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/shareButton.spec.js

@@ -0,0 +1,78 @@
+describe('Share Button component', () => {
+  before(() => {
+    // go to share button component
+    cy.visit('/#sharebutton');
+  });
+
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="ShareButton-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('Share Button section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="ShareButton-example-0"]')
+        .as('container')
+        .find('[data-preview="ShareButton"]')
+        .as('preview');
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders Share Button preview', () => {
+      cy.get('@container')
+        .find('p')
+        .contains('Share with:');
+      cy.get('@container')
+        .find('ul > li:nth-child(1) > a')
+        .should('exist');
+      cy.get('@container')
+        .find('ul > li:nth-child(2) > a')
+        .should('exist');
+      cy.get('@container')
+        .find('div:nth-child(2) > p')
+        .contains('Share some other 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();
+    });
+  });
+});

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

@@ -0,0 +1,84 @@
+describe('SimpleSchoolLookup component', () => {
+  before(() => {
+    // go to simpleschoollookup component
+    cy.visit('/#simpleschoollookup');
+  });
+
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="SimpleSchoolLookup-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('view code section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="SimpleSchoolLookup-examples"]')
+        .as('container');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    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('Simple School lookup functionality', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="SimpleSchoolLookup-example-0"]')
+        .as('container')
+        .find('[data-preview="SimpleSchoolLookup"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('it should show address when school postcode is entered', () => {
+      cy.get('@container')
+        .find('input#school_lookup')
+        .type('RG1 4JJ')
+        .get('[data-preview="SimpleSchoolLookup"] div > div > button')
+        .should('exist');
+    });
+  });
+});