@comicrelief/component-library 7.19.1 → 7.19.2

package/cypress/integration/components/Atoms/Picture.spec.js

@@ -1,147 +0,0 @@
-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

@@ -1,81 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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');
-        });
-    });
-});

package/cypress/integration/components/Atoms/Select.spec.js

@@ -1,89 +0,0 @@
-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

@@ -1,180 +0,0 @@
-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

@@ -1,91 +0,0 @@
-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();
-        });
-    });
-});