chore: Add translations and validations to Contentful test

e2e-tests/contentful/cypress/integration/boolean.js

@@ -3,21 +3,38 @@ describe(`boolean`, () => {
     cy.visit("/boolean").waitForRouteChange()
   })
   it(`boolean: No`, () => {
-    cy.get('[data-cy-id="boolean-no"] [data-cy-value]').should(
+    cy.get('[data-cy-id="default-boolean-no"] [data-cy-value]').should(
       "have.text",
       "false"
     )
   })
   it(`boolean: Null`, () => {
-    cy.get('[data-cy-id="boolean-null"] [data-cy-value]').should(
+    cy.get('[data-cy-id="default-boolean-null"] [data-cy-value]').should(
       "have.text",
       "null"
     )
   })
   it(`boolean: Yes`, () => {
-    cy.get('[data-cy-id="boolean-yes"] [data-cy-value]').should(
+    cy.get('[data-cy-id="default-boolean-yes"] [data-cy-value]').should(
       "have.text",
       "true"
     )
   })
 })
+describe(`boolean localized`, () => {
+  beforeEach(() => {
+    cy.visit("/boolean").waitForRouteChange()
+  })
+  it(`boolean localized: English`, () => {
+    cy.get('[data-cy-id="english-boolean-localized"] [data-cy-value]').should(
+      "have.text",
+      "true"
+    )
+  })
+  it(`boolean localized: German`, () => {
+    cy.get('[data-cy-id="german-boolean-localized"] [data-cy-value]').should(
+      "have.text",
+      "false"
+    )
+  })
+})

e2e-tests/contentful/cypress/integration/content-reference.js

@@ -3,27 +3,59 @@ describe(`content-reference`, () => {
     cy.visit("/content-reference").waitForRouteChange()
   })
   it(`content-reference-many-2nd-level-loop`, () => {
-    cy.get('[data-cy-id="content-reference-many-2nd-level-loop"]').snapshot()
+    cy.get(
+      '[data-cy-id="default-content-reference-many-2nd-level-loop"]'
+    ).snapshot()
   })
   it(`content-reference-many-loop-a-greater-b`, () => {
-    cy.get('[data-cy-id="content-reference-many-loop-a-greater-b"]').snapshot()
+    cy.get(
+      '[data-cy-id="default-content-reference-many-loop-a-greater-b"]'
+    ).snapshot()
   })
   it(`content-reference-many-loop-b-greater-a`, () => {
-    cy.get('[data-cy-id="content-reference-many-loop-b-greater-a"]').snapshot()
+    cy.get(
+      '[data-cy-id="default-content-reference-many-loop-b-greater-a"]'
+    ).snapshot()
   })
   it(`content-reference-many-self-reference`, () => {
-    cy.get('[data-cy-id="content-reference-many-self-reference"]').snapshot()
+    cy.get(
+      '[data-cy-id="default-content-reference-many-self-reference"]'
+    ).snapshot()
   })
   it(`content-reference-one`, () => {
-    cy.get('[data-cy-id="content-reference-one"]').snapshot()
+    cy.get('[data-cy-id="default-content-reference-one"]').snapshot()
   })
   it(`content-reference-one-loop-a-greater-b`, () => {
-    cy.get('[data-cy-id="content-reference-one-loop-a-greater-b"]').snapshot()
+    cy.get(
+      '[data-cy-id="default-content-reference-one-loop-a-greater-b"]'
+    ).snapshot()
   })
   it(`content-reference-one-loop-b-greater-a`, () => {
-    cy.get('[data-cy-id="content-reference-one-loop-b-greater-a"]').snapshot()
+    cy.get(
+      '[data-cy-id="default-content-reference-one-loop-b-greater-a"]'
+    ).snapshot()
   })
   it(`content-reference-one-self-reference`, () => {
-    cy.get('[data-cy-id="content-reference-one-self-reference"]').snapshot()
+    cy.get(
+      '[data-cy-id="default-content-reference-one-self-reference"]'
+    ).snapshot()
+  })
+})
+
+describe(`content-reference localized`, () => {
+  beforeEach(() => {
+    cy.visit("/content-reference").waitForRouteChange()
+  })
+  it(`english-content-reference-one-localized`, () => {
+    cy.get('[data-cy-id="english-content-reference-one-localized"]').snapshot()
+  })
+  it(`english-content-reference-many-localized`, () => {
+    cy.get('[data-cy-id="english-content-reference-many-localized"]').snapshot()
+  })
+  it(`german-content-reference-one-localized`, () => {
+    cy.get('[data-cy-id="german-content-reference-one-localized"]').snapshot()
+  })
+  it(`german-content-reference-many-localized`, () => {
+    cy.get('[data-cy-id="german-content-reference-many-localized"]').snapshot()
   })
 })

e2e-tests/contentful/cypress/integration/date.js

@@ -26,4 +26,20 @@ describe(`date`, () => {
       )
     })
   })
+  it(`date: Localization`, () => {
+    cy.get('[data-cy-id="date-english"]').within(() => {
+      cy.get(`[data-cy-value]`).should("have.text", "2021-05-24T12:45+00:00")
+      cy.get(`[data-cy-value-formatted]`).should(
+        "have.text",
+        "24.5.2021 - 12:45:00"
+      )
+    })
+    cy.get('[data-cy-id="date-german"]').within(() => {
+      cy.get(`[data-cy-value]`).should("have.text", "2021-05-23T16:20+02:00")
+      cy.get(`[data-cy-value-formatted]`).should(
+        "have.text",
+        "23.5.2021 - 14:20:00"
+      )
+    })
+  })
 })

e2e-tests/contentful/cypress/integration/gatsby-image.js

@@ -31,8 +31,9 @@ function testGatsbyImage(type, testPlaceholder) {
       })
   }
 
-  cy.get(`[data-cy="${type}"]`).scrollIntoView()
-  // Wait for load
+  cy.get(`[data-cy="${type}"]`).scrollIntoView({ duration: 500 })
+
+  // Wait images for load
   cy.wait(1000)
 
   cy.get(`[data-cy="${type}"]`)
@@ -53,4 +54,19 @@ describe(`gatsby-image`, () => {
   it(`webp`, testConfig, () => testGatsbyImage(`webp`, hasJPEGPlaceholder))
   it(`traced`, testConfig, () => testGatsbyImage(`traced`, hasSVGPlaceholder))
   it(`sqip`, testConfig, () => testGatsbyImage(`sqip`, hasSVGPlaceholder))
+
+  it(`english`, testConfig, () => {
+    testGatsbyImage(`english`, hasJPEGPlaceholder)
+    cy.get(`[data-cy="english"] p strong`).should(
+      "have.text",
+      "Locale - American English (png)"
+    )
+  })
+  it(`german`, testConfig, () => {
+    testGatsbyImage(`german`, hasJPEGPlaceholder)
+    cy.get(`[data-cy="german"] p strong`).should(
+      "have.text",
+      "Locale - German (png)"
+    )
+  })
 })

e2e-tests/contentful/cypress/integration/gatsby-plugin-image.js

@@ -43,7 +43,7 @@ function testGatsbyPluginImage(type, testPlaceholder) {
 
   cy.get(`[data-cy="${type}"]`).scrollIntoView({ duration: 500 })
 
-  // Wait for load
+  // Wait images for load
   cy.wait(1000)
 
   cy.get(`[data-cy="${type}"]`)
@@ -80,4 +80,19 @@ describe(`gatsby-plugin-image`, () => {
     testGatsbyPluginImage(`blurred`, hasJPEGPlaceholder)
   )
   it(`sqip`, testConfig, () => testGatsbyPluginImage(`sqip`, hasSVGPlaceholder))
+
+  it(`english`, testConfig, () => {
+    testGatsbyPluginImage(`english`, hasColorPlaceholder)
+    cy.get(`[data-cy="english"] p strong`).should(
+      "have.text",
+      "Locale - American English (png)"
+    )
+  })
+  it(`german`, testConfig, () => {
+    testGatsbyPluginImage(`german`, hasColorPlaceholder)
+    cy.get(`[data-cy="german"] p strong`).should(
+      "have.text",
+      "Locale - German (png)"
+    )
+  })
 })

e2e-tests/contentful/cypress/integration/json.js

@@ -13,4 +13,16 @@ describe(`json`, () => {
     cy.get('[data-cy-id="complex"] > div:first-child').snapshot()
     cy.get('[data-cy-id="complex"] > div:last-child').snapshot()
   })
+  it(`json: Localized`, () => {
+    cy.get('[data-cy-id="english"]').within(() => {
+      cy.get(`[data-cy-value-name]`).should("have.text", "Name: John")
+      cy.get(`[data-cy-value-city]`).should("have.text", "City: New York")
+      cy.get(`[data-cy-value-age]`).should("have.text", "Age: 31")
+    })
+    cy.get('[data-cy-id="german"]').within(() => {
+      cy.get(`[data-cy-value-name]`).should("have.text", "Name: Max")
+      cy.get(`[data-cy-value-city]`).should("have.text", "City: Berlin")
+      cy.get(`[data-cy-value-age]`).should("have.text", "Age: 25")
+    })
+  })
 })

e2e-tests/contentful/cypress/integration/location.js

@@ -12,4 +12,22 @@ describe(`location`, () => {
       "13.3777"
     )
   })
+  it(`location localized`, () => {
+    cy.get('[data-cy-id="english"] [data-cy-value-lat]').should(
+      "have.text",
+      "37.79176"
+    )
+    cy.get('[data-cy-id="english"] [data-cy-value-lon]').should(
+      "have.text",
+      "-122.393"
+    )
+    cy.get('[data-cy-id="german"] [data-cy-value-lat]').should(
+      "have.text",
+      "52.53907"
+    )
+    cy.get('[data-cy-id="german"] [data-cy-value-lon]').should(
+      "have.text",
+      "13.38405"
+    )
+  })
 })

e2e-tests/contentful/cypress/integration/media-reference.js

@@ -4,25 +4,56 @@ describe(`media-reference`, () => {
   })
   it(`media-reference: many`, () => {
     cy.get('[data-cy-id="media-reference-many"]').within(() => {
-      cy.get(".gatsby-image-wrapper").should("have.length", 2)
-      cy.get(".gatsby-image-wrapper > img")
-        .should("have.attr", "src")
-        .should("match", /^data:image\//)
-      cy.get(".gatsby-image-wrapper picture img")
+      cy.get("img")
+        .should("have.length", 2)
         .should("have.attr", "src")
         .should("match", /^\/\/images\.ctfassets\.net/)
     })
   })
 
   it(`media-reference: one`, () => {
     cy.get('[data-cy-id="media-reference-one"]').within(() => {
-      cy.get(".gatsby-image-wrapper").should("have.length", 1)
-      cy.get(".gatsby-image-wrapper > img")
-        .should("have.attr", "src")
-        .should("match", /^data:image\//)
-      cy.get(".gatsby-image-wrapper picture img")
+      cy.get("img")
         .should("have.attr", "src")
         .should("match", /^\/\/images\.ctfassets\.net/)
     })
   })
 })
+
+describe(`media-reference localized`, () => {
+  beforeEach(() => {
+    cy.visit("/media-reference")
+  })
+  it(`media-reference: many with localized field`, () => {
+    cy.get(
+      '[data-cy-id="english-media-reference-many-localized-field"]'
+    ).snapshot()
+    cy.get(
+      '[data-cy-id="german-media-reference-many-localized-field"]'
+    ).snapshot()
+  })
+  it(`media-reference: many with localized asset`, () => {
+    cy.get(
+      '[data-cy-id="english-media-reference-many-with-localized-asset"]'
+    ).snapshot()
+    cy.get(
+      '[data-cy-id="german-media-reference-many-with-localized-asset"]'
+    ).snapshot()
+  })
+  it(`media-reference: one with localized asset`, () => {
+    cy.get(
+      '[data-cy-id="english-media-reference-one-localized-asset"]'
+    ).snapshot()
+    cy.get(
+      '[data-cy-id="german-media-reference-one-localized-asset"]'
+    ).snapshot()
+  })
+  it(`media-reference: one with localized field`, () => {
+    cy.get(
+      '[data-cy-id="english-media-reference-one-localized-field"]'
+    ).snapshot()
+    cy.get(
+      '[data-cy-id="german-media-reference-one-localized-field"]'
+    ).snapshot()
+  })
+})

e2e-tests/contentful/cypress/integration/number.js

@@ -14,4 +14,20 @@ describe(`number`, () => {
       "42"
     )
   })
+  it(`number: Decimal Localized`, () => {
+    cy.get(
+      '[data-cy-id="english-number-decimal-localized"] [data-cy-value]'
+    ).should("have.text", "76.26")
+    cy.get(
+      '[data-cy-id="german-number-decimal-localized"] [data-cy-value]'
+    ).should("have.text", "95.31")
+  })
+  it(`number: Integer Localized`, () => {
+    cy.get(
+      '[data-cy-id="english-number-integer-localized"] [data-cy-value]'
+    ).should("have.text", "8673000")
+    cy.get(
+      '[data-cy-id="german-number-integer-localized"] [data-cy-value]'
+    ).should("have.text", "6046000")
+  })
 })

e2e-tests/contentful/cypress/integration/rich-text.js

@@ -45,4 +45,8 @@ describe(`rich-text`, () => {
       `[data-cy-id="rich-text-inline-entry-with-reference-loop"]`
     ).snapshot()
   })
+  it(`rich-text: Localized`, () => {
+    cy.get(`[data-cy-id="english-rich-text-localized"]`).snapshot()
+    cy.get(`[data-cy-id="german-rich-text-localized"]`).snapshot()
+  })
 })

e2e-tests/contentful/cypress/integration/text.js

@@ -29,4 +29,13 @@ describe(`text`, () => {
   it(`text: Long Markdown Complex`, () => {
     cy.get(`[data-cy-id="long-markdown-complex"]`).snapshot()
   })
+
+  it(`text: Short Localized`, () => {
+    cy.get(`[data-cy-id="english-short"]`).should("have.text", "Short text")
+    cy.get(`[data-cy-id="german-short"]`).should("have.text", "Kurzer Text")
+  })
+  it(`text: Long Localized`, () => {
+    cy.get(`[data-cy-id="english-long"]`).snapshot()
+    cy.get(`[data-cy-id="german-long"]`).snapshot()
+  })
 })

e2e-tests/contentful/cypress/support/index.js

@@ -21,7 +21,7 @@ addMatchImageSnapshotCommand({
   customDiffConfig: {
     threshold: 0.1,
   },
-  failureThreshold: 0.04,
+  failureThreshold: 0.08,
   failureThresholdType: `percent`,
 })