@comicrelief/component-library 7.19.0 → 7.19.2

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

@@ -0,0 +1,113 @@
+describe('Button component', () => {
+  before(() => {
+    // go to button component
+    cy.visit('/#button');
+  });
+
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Button-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('Plain Button: Button-example-0', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Button-example-0"')
+        .as('container')
+        .find('[class^=rsg--preview]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders button as a span', () => {
+      //verify button as a span
+      cy.get('[data-testid="Button-example-0"]')
+        .contains('My 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');
+    });
+
+    it('closes code on click', () => {
+      cy.get('@viewCodeBtn').click();
+      cy.get('@container')
+        .find('textarea')
+        .should('not.exist');
+    });
+  });
+
+  describe('Button as a span: Button-example-1', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Button-example-1"]')
+        .as('container')
+        .find('[class^=rsg--preview]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders button as a span', () => {
+        //verify button as a span
+      cy.get('[data-testid="Button-example-1"]')
+        .contains('My button as a 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();
+      cy.get('@container')
+        .find('textarea')
+        .should('not.exist');
+    });
+  });
+});

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

@@ -0,0 +1,53 @@
+describe('Button With States component', () => {
+  before(() => {
+      // go to Button With States component
+      cy.visit('/#button');
+  });
+
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="ButtonWithStates-container"]')
+        .as('container')
+        .find('[class^=rsg--preview]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    // button with Disabled and loading
+    it('renders button with states', () => {
+      cy.get('[data-testid="ButtonWithStates-examples"]')
+        .find('h2')
+        .contains('Disabled and loading')
+        .should('exist');
+    });
+
+    it('renders button as disabled', () => {
+      //verify button as a span
+      cy.get('[data-testid="ButtonWithStates-example-1"]')
+        .contains('Loading')
+        .should('be.disabled')
+    });
+
+    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/checkbox.spec.js

@@ -0,0 +1,68 @@
+describe('Checkbox component', () => {
+  before(() => {
+    // go to checkbox component
+    cy.visit('/#checkbox');
+  });
+
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Checkbox-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('Checkbox section', () => {
+    beforeEach(() => {
+      cy.get('[data-preview="Checkbox"]')
+        .as('preview');
+    });
+
+    it('should click checkboxes', () => {
+      cy.get('[data-preview="Checkbox"] p').contains('List of checkboxes');
+      cy.get('[data-testid="Checkbox-example-1"] div > label:nth-child(2)')
+        .contains('Tennis')
+        .click();
+      cy.get('[data-testid="Checkbox-example-1"] div > label:nth-child(3)')
+        .contains('Basketball')
+        .click();
+      cy.get('[data-testid="Checkbox-example-1"] div > label:nth-child(4)')
+        .contains('Cycling')
+        .click();
+      cy.get('[data-testid="Checkbox-example-1"] div > label:nth-child(5)')
+        .contains('Football')
+        .click();
+    });
+
+    it('has view code button', () => {
+      cy.get('[data-testid="Checkbox-examples"] [name="rsg-code-editor"]').should('exist');
+    });
+
+    it('shows code on click', () => {
+      cy.get('[data-testid="Checkbox-examples"] [name="rsg-code-editor"]').contains('View Code')
+        .click();
+      cy.get('[data-testid="Checkbox-examples"] div > textarea').should('be.visible');
+    });
+  });
+});

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

@@ -0,0 +1,52 @@
+describe('Confetti component', () => {
+  before(() => {
+    // go to confetti component
+    cy.visit('/#confetti');
+  });
+
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Confetti-container"]')
+        .as('container')
+        .find('[class^=rsg--preview]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders button with states', () => {
+      cy.get('[data-testid="Confetti-examples"]')
+        .find('h1')
+        .contains('Confetti')
+        .should('exist');
+    });
+
+    it('renders confetti when "trigger confetti" is clicked', () => {
+      //verify button as a span
+      cy.get('[data-testid="Confetti-example-1"]')
+        .contains('trigger confetti')
+        .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/errorText.spec.js

@@ -0,0 +1,51 @@
+describe('ErrorText component', () => {
+  before(() => {
+    // go to errortext component
+    cy.visit('/#errortext');
+  });
+
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="ErrorText-container"]')
+        .as('container')
+        .find('[class^=rsg--preview]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('error message should exist', () => {
+      cy.get('[data-testid="ErrorText-examples"]')
+        .find('h1')
+        .contains('ErrorText')
+        .should('exist');
+    });
+
+    it('displays error message', () => {
+      cy.get('[data-testid="ErrorText-example-1"] span')
+        .contains('This is an error')
+        .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/label.spec.js

@@ -0,0 +1,104 @@
+describe('Label component', () => {
+  before(() => {
+    // go to label component
+    cy.visit('/#label');
+  });
+
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Label-container"]')
+        .as('container')
+        .find('[class^=rsg--preview]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('label should exist', () => {
+      cy.get('[data-testid="Label-examples"]')
+        .find('label')
+        .should('exist');
+    });
+  });
+
+  describe('Wrapping a basic text input: Label-example-0', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Label-example-0"')
+        .as('container')
+        .find('[class^=rsg--preview]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders label Wrapping a basic text input', () => {
+      cy.get('[data-testid="Label-example-0"]')
+        .find('label')
+        .contains('Wrapping a basic text input')
+        .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('Wrapping a styled input: Label-example-1', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Label-example-1"]')
+        .as('container')
+        .find('[class^=rsg--preview]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders label wrapping a styled input', () => {
+      cy.get('[data-testid="Label-example-1"]')
+        .find('label')
+        .contains('Wrapping a styled input')
+        .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/link.spec.js

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