@comicrelief/component-library 7.20.0 → 7.21.0

package/cypress/{integration/components/atoms/button.spec.js → e2e/components/atoms/button.cy.js}

@@ -6,6 +6,7 @@ describe('Button component', () => {
 
   describe('props and methods section', () => {
     beforeEach(() => {
+      cy.visit('/#button');
       cy.get('[data-testid="Button-container"] button[name="rsg-usage"]')
         .contains('Props & methods')
         .as('propsBtn');
@@ -35,6 +36,7 @@ describe('Button component', () => {
 
   describe('Plain Button: Button-example-0', () => {
     beforeEach(() => {
+      cy.visit('/#button');
       cy.get('[data-testid="Button-example-0"')
         .as('container')
         .find('[class^=rsg--preview]')
@@ -63,17 +65,11 @@ describe('Button component', () => {
         .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.visit('/#button');
       cy.get('[data-testid="Button-example-1"]')
         .as('container')
         .find('[class^=rsg--preview]')
@@ -86,7 +82,7 @@ describe('Button component', () => {
     });
 
     it('renders button as a span', () => {
-        //verify button as a span
+        // verify button as a span
       cy.get('[data-testid="Button-example-1"]')
         .contains('My button as a span')
         .should('exist');
@@ -102,12 +98,5 @@ describe('Button component', () => {
         .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 → e2e/components/atoms/buttonWithStates.cy.js}

@@ -1,11 +1,12 @@
 describe('Button With States component', () => {
   before(() => {
-      // go to Button With States component
-      cy.visit('/#button');
+    // go to Button With States component
+    cy.visit('/#button');
   });
 
   describe('props and methods section', () => {
     beforeEach(() => {
+      cy.visit('/#button');
       cy.get('[data-testid="ButtonWithStates-container"]')
         .as('container')
         .find('[class^=rsg--preview]')
@@ -26,10 +27,10 @@ describe('Button With States component', () => {
     });
 
     it('renders button as disabled', () => {
-      //verify button as a span
+      // verify button as a span
       cy.get('[data-testid="ButtonWithStates-example-1"]')
         .contains('Loading')
-        .should('be.disabled')
+        .should('be.disabled');
     });
 
     it('has view code button', () => {
@@ -42,12 +43,5 @@ describe('Button With States component', () => {
         .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 → e2e/components/atoms/checkbox.cy.js}

@@ -6,6 +6,7 @@ describe('Checkbox component', () => {
 
   describe('props and methods section', () => {
     beforeEach(() => {
+      cy.visit('/#checkbox');
       cy.get('[data-testid="Checkbox-container"] button[name="rsg-usage"]')
         .contains('Props & methods')
         .as('propsBtn');
@@ -35,6 +36,7 @@ describe('Checkbox component', () => {
 
   describe('Checkbox section', () => {
     beforeEach(() => {
+      cy.visit('/#checkbox');
       cy.get('[data-preview="Checkbox"]')
         .as('preview');
     });

package/cypress/{integration/components/atoms/confetti.spec.js → e2e/components/atoms/confetti.cy.js}

@@ -6,6 +6,7 @@ describe('Confetti component', () => {
 
   describe('props and methods section', () => {
     beforeEach(() => {
+      cy.visit('/#confetti');
       cy.get('[data-testid="Confetti-container"]')
         .as('container')
         .find('[class^=rsg--preview]')
@@ -25,7 +26,7 @@ describe('Confetti component', () => {
     });
 
     it('renders confetti when "trigger confetti" is clicked', () => {
-      //verify button as a span
+      // verify button as a span
       cy.get('[data-testid="Confetti-example-1"]')
         .contains('trigger confetti')
         .click()
@@ -41,12 +42,5 @@ describe('Confetti component', () => {
         .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 → e2e/components/atoms/errorText.cy.js}

@@ -6,6 +6,7 @@ describe('ErrorText component', () => {
 
   describe('props and methods section', () => {
     beforeEach(() => {
+      cy.visit('/#errortext');
       cy.get('[data-testid="ErrorText-container"]')
         .as('container')
         .find('[class^=rsg--preview]')
@@ -40,12 +41,5 @@ describe('ErrorText component', () => {
         .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/input.spec.js → e2e/components/atoms/input.cy.js}

@@ -6,6 +6,7 @@ describe('Input component', () => {
 
   describe('props and methods section', () => {
     beforeEach(() => {
+      cy.visit('/#input');
       cy.get('[data-testid="Input-container"] button[name="rsg-usage"]')
         .contains('Props & methods')
         .as('propsBtn');
@@ -35,6 +36,7 @@ describe('Input component', () => {
 
   describe('Input preview section: required with label and hint', () => {
     beforeEach(() => {
+      cy.visit('/#input');
       cy.get('[data-testid="Input-example-0"]')
         .as('container')
         .find('[class^=rsg--preview]')
@@ -69,17 +71,11 @@ describe('Input component', () => {
         .find('textarea')
         .should('exist');
     });
-
-    it('closes code on click', () => {
-      cy.get('@viewCodeBtn').click();
-      cy.get('@container')
-        .find('textarea')
-        .should('not.exist');
-    });
   });
 
   describe('Input preview section: with error message', () => {
     beforeEach(() => {
+      cy.visit('/#input');
       cy.get('[data-testid="Input-example-1"]')
         .as('container')
         .find('[data-preview="Input"]')
@@ -126,6 +122,7 @@ describe('Input component', () => {
 
   describe('Input preview section: with simple input(optional)', () => {
     beforeEach(() => {
+      cy.visit('/#input');
       cy.get('[data-testid="Input-example-2"]')
         .as('container')
         .find('[class^=rsg--preview]')
@@ -156,12 +153,5 @@ describe('Input component', () => {
         .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 → e2e/components/atoms/label.cy.js}

@@ -6,6 +6,7 @@ describe('Label component', () => {
 
   describe('props and methods section', () => {
     beforeEach(() => {
+      cy.visit('/#label');
       cy.get('[data-testid="Label-container"]')
         .as('container')
         .find('[class^=rsg--preview]')
@@ -26,6 +27,7 @@ describe('Label component', () => {
 
   describe('Wrapping a basic text input: Label-example-0', () => {
     beforeEach(() => {
+      cy.visit('/#label');
       cy.get('[data-testid="Label-example-0"')
         .as('container')
         .find('[class^=rsg--preview]')
@@ -54,17 +56,11 @@ describe('Label component', () => {
         .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.visit('/#label');
       cy.get('[data-testid="Label-example-1"]')
         .as('container')
         .find('[class^=rsg--preview]')
@@ -93,12 +89,5 @@ describe('Label component', () => {
         .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 → e2e/components/atoms/link.cy.js}

@@ -6,6 +6,7 @@ describe('Link component', () => {
 
   describe('props and methods section', () => {
     beforeEach(() => {
+      cy.visit('/#link');
       cy.get('[data-testid="Link-container"] button[name="rsg-usage"]')
         .contains('Props & methods')
         .as('propsBtn');
@@ -35,6 +36,7 @@ describe('Link component', () => {
 
   describe('Link standard preview section', () => {
     beforeEach(() => {
+      cy.visit('/#link');
       cy.get('[data-testid="Link-example-0"]')
         .as('container')
         .find('[data-preview="Link"]')
@@ -74,17 +76,11 @@ describe('Link component', () => {
         .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.visit('/#link');
       cy.get('[data-testid="Link-example-2"]')
         .as('container')
         .find('[data-preview="Link"]')
@@ -134,17 +130,11 @@ describe('Link component', () => {
         .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.visit('/#link');
       cy.get('[data-testid="Link-example-3"]')
         .as('container')
         .find('[data-preview="Link"]')
@@ -196,12 +186,5 @@ describe('Link component', () => {
         .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 → e2e/components/atoms/logo.cy.js}

@@ -6,6 +6,7 @@ describe('Logo component', () => {
 
   describe('props and methods section', () => {
     beforeEach(() => {
+      cy.visit('/#logo');
       cy.get('[data-testid="Logo-container"] button[name="rsg-usage"]')
         .contains('Props & methods')
         .as('propsBtn');
@@ -35,6 +36,7 @@ describe('Logo component', () => {
 
   describe('CR logo section', () => {
     beforeEach(() => {
+      cy.visit('/#logo');
       cy.get('[data-testid="Logo-example-1"]')
         .as('container')
         .find('[data-preview="Logo"]')
@@ -62,17 +64,11 @@ describe('Logo component', () => {
         .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.visit('/#logo');
       cy.get('[data-testid="Logo-example-3"]')
         .as('container')
         .find('[data-preview="Logo"]')
@@ -100,17 +96,11 @@ describe('Logo component', () => {
         .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.visit('/#logo');
       cy.get('[data-testid="Logo-example-5"]')
         .as('container')
         .find('[data-preview="Logo"]')
@@ -138,12 +128,5 @@ describe('Logo component', () => {
         .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 → e2e/components/atoms/pagination.cy.js}

@@ -6,6 +6,7 @@ describe('Pagination component', () => {
 
   describe('props and methods section', () => {
     beforeEach(() => {
+      cy.visit('/#pagination');
       cy.get('[data-testid="Pagination-container"] button[name="rsg-usage"]')
         .contains('Props & methods')
         .as('propsBtn');
@@ -35,6 +36,7 @@ describe('Pagination component', () => {
 
   describe('Pagination minimalist section', () => {
     beforeEach(() => {
+      cy.visit('/#pagination');
       cy.get('[data-testid="Pagination-example-1"]')
         .as('container')
         .find('[data-preview="Pagination"]')
@@ -63,17 +65,11 @@ describe('Pagination component', () => {
         .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.visit('/#pagination');
       cy.get('[data-testid="Pagination-example-3"]')
         .as('container')
         .find('[data-preview="Pagination"]')
@@ -109,17 +105,11 @@ describe('Pagination component', () => {
         .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.visit('/#pagination');
       cy.get('[data-testid="Pagination-example-5"]')
         .as('container')
         .find('[data-preview="Pagination"]')
@@ -156,17 +146,11 @@ describe('Pagination component', () => {
         .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.visit('/#pagination');
       cy.get('[data-testid="Pagination-example-7"]')
         .as('container')
         .find('[data-preview="Pagination"]')
@@ -203,12 +187,5 @@ describe('Pagination component', () => {
         .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/picture.spec.js → e2e/components/atoms/picture.cy.js}

@@ -7,6 +7,7 @@ describe('Picture component', () => {
 
   describe('props and methods section', () => {
     beforeEach(() => {
+      cy.visit('/#picture');
       cy.get('[data-testid="Picture-container"] button[name="rsg-usage"]')
         .contains('Props & methods')
         .as('propsBtn');
@@ -36,6 +37,7 @@ describe('Picture component', () => {
 
   describe('Picture section', () => {
     beforeEach(() => {
+      cy.visit('/#picture');
       cy.get('[data-testid="Picture-example-1"]')
         .as('container')
         .find('[data-preview="Picture"]')
@@ -62,17 +64,11 @@ describe('Picture component', () => {
         .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.visit('/#picture');
       cy.get('[data-testid="Picture-example-3"]')
         .as('container')
         .find('[data-preview="Picture"]')
@@ -99,17 +95,11 @@ describe('Picture component', () => {
         .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.visit('/#picture');
       cy.get('[data-testid="Picture-example-5"]')
         .as('container')
         .find('[data-preview="Picture"]')
@@ -136,12 +126,5 @@ describe('Picture component', () => {
         .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 → e2e/components/atoms/radioButton.cy.js}

@@ -7,6 +7,7 @@ describe('Radio Button component', () => {
 
   describe('props and methods section', () => {
     beforeEach(() => {
+      cy.visit('/#radiobutton');
       cy.get('[data-testid="RadioButton-container"] button[name="rsg-usage"]')
         .contains('Props & methods')
         .as('propsBtn');
@@ -36,6 +37,7 @@ describe('Radio Button component', () => {
 
   describe('Radio button section', () => {
     beforeEach(() => {
+      cy.visit('/#radiobutton');
       cy.get('[data-testid="RadioButton-example-1"]')
         .as('container')
         .find('[data-preview="RadioButton"]')
@@ -70,12 +72,5 @@ describe('Radio Button component', () => {
         .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 → e2e/components/atoms/richText.cy.js}

@@ -7,6 +7,7 @@ describe('RichText component', () => {
 
   describe('props and methods section', () => {
     beforeEach(() => {
+      cy.visit('/#richtext');
       cy.get('[data-testid="RichText-container"] button[name="rsg-usage"]')
         .contains('Props & methods')
         .as('propsBtn');
@@ -36,6 +37,7 @@ describe('RichText component', () => {
 
   describe('Rich text section', () => {
     beforeEach(() => {
+      cy.visit('/#richtext');
       cy.get('[data-testid="RichText-example-1"]')
         .as('container')
         .find('[data-preview="RichText"]')
@@ -64,12 +66,5 @@ describe('RichText component', () => {
         .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 → e2e/components/atoms/select.cy.js}

@@ -6,6 +6,7 @@ describe('SelectField component', () => {
 
   describe('props and methods section', () => {
     beforeEach(() => {
+      cy.visit('/#selectfield');
       cy.get('[data-testid="Select-container"] button[name="rsg-usage"]')
         .contains('Props & methods')
         .as('propsBtn');
@@ -35,6 +36,7 @@ describe('SelectField component', () => {
 
   describe('Select Field section', () => {
     beforeEach(() => {
+      cy.visit('/#selectfield');
       cy.get('[data-testid="Select-example-1"]')
         .as('container')
         .find('[data-preview="Select"]')
@@ -78,12 +80,5 @@ describe('SelectField component', () => {
         .find('textarea')
         .should('exist');
     });
-
-    it('closes code on click', () => {
-      cy.get('@viewCodeBtn').click();
-      cy.get('@container')
-        .find('textarea')
-        .should('not.exist');
-    });
   });
 });