refactor selectors

auto-mat · Sep 4, 2024 · 07ad5e0 · 07ad5e0
1 parent 8792d24
commit 07ad5e0
Showing 1 changed file with 36 additions and 14 deletions.
diff --git a/src/components/__tests__/NewsletterFeature.cy.js b/src/components/__tests__/NewsletterFeature.cy.js
@@ -7,11 +7,21 @@ const { getPaletteColor } = colors;
 const grey10 = getPaletteColor('grey-10');
 const primary = getPaletteColor('primary');
 
+// selectors
+const selectorSectionHeadingTitle = 'section-heading-title';
+const selectorSectionHeadingPerex = 'section-heading-perex';
+const selectorNewsletterFeatureImage = 'newsletter-feature-image';
+const selectorNewsletterFeatureItem = 'newsletter-feature-item';
+const selectorNewsletterFeatureSeparator = 'newsletter-feature-separator';
+const selectorNewsletterColImage = 'newsletter-col-image';
+const selectorNewsletterColContent = 'newsletter-col-content';
+
 // variables
 const fontSizeTitle = '24px';
 const fontWeightBold = '700';
 const fontSizePerex = '14px';
 const fontWeightRegular = '400';
+const marginMd = '16px';
 const props = {
   title: 'Custom title',
   description: 'Custom description',
@@ -47,11 +57,11 @@ describe('<NewsletterFeature>', () => {
 
     it('renders image', () => {
       cy.window().then(() => {
-        cy.dataCy('newsletter-feature-image')
+        cy.dataCy(selectorNewsletterFeatureImage)
           .should('be.visible')
           .find('img')
           .should('be.visible');
-        cy.dataCy('newsletter-feature-image').matchImageSnapshot({
+        cy.dataCy(selectorNewsletterFeatureImage).matchImageSnapshot({
           failureThreshold: 0.5,
           failureThresholdType: 'percent',
         });
@@ -60,7 +70,7 @@ describe('<NewsletterFeature>', () => {
 
     it('renders correct number of items', () => {
       cy.window().then(() => {
-        cy.dataCy('newsletter-feature-item')
+        cy.dataCy(selectorNewsletterFeatureItem)
           .should('have.length', 3)
           .each(($item) => {
             cy.wrap($item).should('be.visible');
@@ -70,18 +80,24 @@ describe('<NewsletterFeature>', () => {
 
     it('renders divider between items', () => {
       cy.window().then(() => {
-        cy.dataCy('newsletter-feature-separator')
+        cy.dataCy(selectorNewsletterFeatureSeparator)
           .should('be.visible')
           .and('have.length', 2)
-          .and('have.css', 'margin-top', '16px')
-          .and('have.css', 'margin-bottom', '16px');
+          .and('have.css', 'margin-top', marginMd)
+          .and('have.css', 'margin-bottom', marginMd);
       });
     });
 
     it('renders grid', () => {
       cy.window().then(() => {
-        cy.testElementPercentageWidth(cy.dataCy('newsletter-col-image'), 25);
-        cy.testElementPercentageWidth(cy.dataCy('newsletter-col-content'), 75);
+        cy.testElementPercentageWidth(
+          cy.dataCy(selectorNewsletterColImage),
+          25,
+        );
+        cy.testElementPercentageWidth(
+          cy.dataCy(selectorNewsletterColContent),
+          75,
+        );
       });
     });
   });
@@ -95,11 +111,14 @@ describe('<NewsletterFeature>', () => {
     });
 
     it('renders title', () => {
-      cy.dataCy('section-heading-title').should('contain', props.title);
+      cy.dataCy(selectorSectionHeadingTitle).should('contain', props.title);
     });
 
     it('renders description', () => {
-      cy.dataCy('section-heading-perex').should('contain', props.description);
+      cy.dataCy(selectorSectionHeadingPerex).should(
+        'contain',
+        props.description,
+      );
     });
   });
 
@@ -115,13 +134,16 @@ describe('<NewsletterFeature>', () => {
 
     it('does not render image', () => {
       cy.window().then(() => {
-        cy.dataCy('newsletter-feature-image').should('not.be.visible');
+        cy.dataCy(selectorNewsletterFeatureImage).should('not.be.visible');
       });
     });
 
     it('renders grid', () => {
       cy.window().then(() => {
-        cy.testElementPercentageWidth(cy.dataCy('newsletter-col-content'), 100);
+        cy.testElementPercentageWidth(
+          cy.dataCy(selectorNewsletterColContent),
+          100,
+        );
       });
     });
   });
@@ -130,7 +152,7 @@ describe('<NewsletterFeature>', () => {
 function coreTests() {
   it('renders title', () => {
     cy.window().then(() => {
-      cy.dataCy('section-heading-title')
+      cy.dataCy(selectorSectionHeadingTitle)
         .should('have.css', 'font-size', fontSizeTitle)
         .and('have.css', 'font-weight', fontWeightBold)
         .and('have.color', primary)
@@ -145,7 +167,7 @@ function coreTests() {
 
   it('renders description', () => {
     cy.window().then(() => {
-      cy.dataCy('section-heading-perex')
+      cy.dataCy(selectorSectionHeadingPerex)
         .should('have.css', 'font-size', fontSizePerex)
         .and('have.css', 'font-weight', fontWeightRegular)
         .and('have.color', grey10)