@comicrelief/component-library 7.19.1 → 7.19.2

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

@@ -1,69 +0,0 @@
-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/Link.spec.js

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

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

@@ -1,155 +0,0 @@
-describe('Logo component', () => {
-    before(() => {
-        // go to logo component
-        cy.visit('/#logo');
-    });
-
-    describe('props and methods section', () => {
-        beforeEach(() => {
-            cy.get('[data-testid="Logo-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('CR logo section', () => {
-        beforeEach(() => {
-            cy.get('[data-testid="Logo-example-1"]')
-                .as('container')
-                .find('[data-preview="Logo"]')
-                .as('preview');
-
-            cy.get('@container')
-                .find('button')
-                .contains('View Code')
-                .as('viewCodeBtn');
-        });
-
-        it('should check CR logo', () => {
-            cy.get('[data-testid="Logo-examples"] h1[id="comic-relief-logo"]')
-                .should('exist')
-                .contains('Comic Relief Logo')
-
-        });
-
-        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('SR logo section', () => {
-        beforeEach(() => {
-            cy.get('[data-testid="Logo-example-3"]')
-                .as('container')
-                .find('[data-preview="Logo"]')
-                .as('preview');
-
-            cy.get('@container')
-                .find('button')
-                .contains('View Code')
-                .as('viewCodeBtn');
-        });
-
-        it('should check SR logo', () => {
-            cy.get('[data-testid="Logo-examples"] h1[id="sport-relief-logo"]')
-                .should('exist')
-                .contains('Sport Relief Logo')
-
-        });
-
-        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('SR game on logo section', () => {
-        beforeEach(() => {
-            cy.get('[data-testid="Logo-example-5"]')
-                .as('container')
-                .find('[data-preview="Logo"]')
-                .as('preview');
-
-            cy.get('@container')
-                .find('button')
-                .contains('View Code')
-                .as('viewCodeBtn');
-        });
-
-        it('should check SR game on logo', () => {
-            cy.get('[data-testid="Logo-examples"] h1[id="sport-relief-game-on-logo"]')
-                .should('exist')
-                .contains('Sport Relief Game On Logo');
-        });
-
-        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/Pagination.spec.js

@@ -1,217 +0,0 @@
-describe('Pagination component', () => {
-    before(() => {
-        // go to pagination component
-        cy.visit('/#pagination');
-    });
-
-    describe('props and methods section', () => {
-        beforeEach(() => {
-            cy.get('[data-testid="Pagination-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('Pagination minimalist section', () => {
-        beforeEach(() => {
-            cy.get('[data-testid="Pagination-example-1"]')
-                .as('container')
-                .find('[data-preview="Pagination"]')
-                .as('preview');
-
-            cy.get('@container')
-                .find('button')
-                .contains('View Code')
-                .as('viewCodeBtn');
-        });
-
-        it('should check minimalist section', () => {
-            cy.get('[data-testid="Pagination-example-1"]')
-                .should('exist');
-            cy.get('[data-testid="Pagination-example-1"] ul')
-                .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('Pagination full size section', () => {
-        beforeEach(() => {
-            cy.get('[data-testid="Pagination-example-3"]')
-                .as('container')
-                .find('[data-preview="Pagination"]')
-                .as('preview');
-
-            cy.get('@container')
-                .find('button')
-                .contains('View Code')
-                .as('viewCodeBtn');
-        });
-
-        it('verifies full size pagination', () => {
-            cy.get('[data-testid="Pagination-example-3"]')
-                .should('exist');
-            cy.get('[data-testid="Pagination-example-3"] ul')
-                .should('exist');
-            cy.get('[data-testid="Pagination-example-3"] [aria-label="First page"]')
-                .should('exist');
-            cy.get('[data-testid="Pagination-example-3"] [aria-label="Previous page"]')
-                .should('exist');
-            cy.get('[data-testid="Pagination-example-3"] [aria-label="Next page"]')
-                .should('exist');
-            cy.get('[data-testid="Pagination-example-3"] [aria-label="Last 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();
-            cy.get('@container')
-                .find('textarea')
-                .should('not.exist');
-        });
-
-    });
-
-    describe('Pagination custom style section', () => {
-        beforeEach(() => {
-            cy.get('[data-testid="Pagination-example-5"]')
-                .as('container')
-                .find('[data-preview="Pagination"]')
-                .as('preview');
-
-            cy.get('@container')
-                .find('button')
-                .contains('View Code')
-                .as('viewCodeBtn');
-        });
-
-        it('should check custom style section exist', () => {
-            cy.get('[data-testid="Pagination-example-5"]')
-                .should('exist');
-            cy.get('[data-testid="Pagination-example-5"] ul')
-                .should('exist');
-            cy.get('[data-testid="Pagination-example-5"] [aria-label="First page"]')
-                .should('exist');
-            cy.get('[data-testid="Pagination-example-5"] [aria-label="Previous page"]')
-                .should('exist');
-            cy.get('[data-testid="Pagination-example-5"] [aria-label="Last page"]')
-                .should('exist');
-            cy.get('[data-testid="Pagination-example-5"] [aria-label="Next page"]')
-                .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('Pagination custom labels section', () => {
-        beforeEach(() => {
-            cy.get('[data-testid="Pagination-example-7"]')
-                .as('container')
-                .find('[data-preview="Pagination"]')
-                .as('preview');
-
-            cy.get('@container')
-                .find('button')
-                .contains('View Code')
-                .as('viewCodeBtn');
-        });
-
-        it('should check custom style section exist', () => {
-            cy.get('[data-testid="Pagination-example-7"]')
-                .should('exist');
-            cy.get('[data-testid="Pagination-example-7"] ul')
-                .should('exist');
-            cy.get('[data-testid="Pagination-example-7"] [aria-label="First page"]')
-                .should('exist');
-            cy.get('[data-testid="Pagination-example-7"] [aria-label="Previous page"]')
-                .should('exist');
-            cy.get('[data-testid="Pagination-example-7"] [aria-label="Last page"]')
-                .should('exist');
-            cy.get('[data-testid="Pagination-example-7"] [aria-label="Next page"]')
-                .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');
-        });
-    });
-});