@times-components/ssr 2.29.11 → 2.29.15

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.29.15](https://github.com/newsuk/times-components/compare/@times-components/ssr@2.29.14...@times-components/ssr@2.29.15) (2022-01-25)
+
+**Note:** Version bump only for package @times-components/ssr
+
+
+
+
+
+## [2.29.14](https://github.com/newsuk/times-components/compare/@times-components/ssr@2.29.13...@times-components/ssr@2.29.14) (2022-01-24)
+
+**Note:** Version bump only for package @times-components/ssr
+
+
+
+
+
+## [2.29.13](https://github.com/newsuk/times-components/compare/@times-components/ssr@2.29.12...@times-components/ssr@2.29.13) (2022-01-24)
+
+**Note:** Version bump only for package @times-components/ssr
+
+
+
+
+
+## [2.29.12](https://github.com/newsuk/times-components/compare/@times-components/ssr@2.29.11...@times-components/ssr@2.29.12) (2022-01-21)
+
+**Note:** Version bump only for package @times-components/ssr
+
+
+
+
+
 ## [2.29.11](https://github.com/newsuk/times-components/compare/@times-components/ssr@2.29.10...@times-components/ssr@2.29.11) (2022-01-21)
 
 **Note:** Version bump only for package @times-components/ssr

package/__tests__/cypress/plugins/index.js

@@ -1,7 +1,13 @@
-/* eslint-disable global-require */
+const {
+  addMatchImageSnapshotPlugin
+} = require("cypress-image-snapshot/plugin");
+
 const mockTpa = require("@times-components/mock-tpa-server");
 
-module.exports = on => {
+const failed = require("cypress-failed-log/src/failed");
+
+module.exports = (on, config) => {
+  addMatchImageSnapshotPlugin(on, config);
   on("task", {
     startMockServerWith(mockData) {
       return mockTpa.startWithMockData(mockData);
@@ -9,6 +15,8 @@ module.exports = on => {
     stopMockServer() {
       return mockTpa.stop();
     },
-    failed: require("cypress-failed-log/src/failed")()
+    failed: failed()
   });
+
+  return config;
 };

package/__tests__/cypress/support/commands.js

@@ -1,4 +1,11 @@
-/* eslint-disable no-unused-expressions */
+import { addMatchImageSnapshotCommand } from "cypress-image-snapshot/command";
+
+addMatchImageSnapshotCommand({
+  failureThreshold: 0.05,
+  failureThresholdType: "percent",
+  timeout: "60000"
+});
+
 Cypress.Commands.add("goToNextArticle", () => {
   cy.get('div[data-testid="pagination-button-next"]')
     .first()

package/__tests__/cypress/support/index.js

@@ -19,6 +19,7 @@ import "cypress-axe";
 
 // Alternatively you can use CommonJS syntax:
 require("cypress-failed-log");
+require("cypress-wait-until");
 
 Cypress.on("fail", error => {
   // debugger;
@@ -33,3 +34,63 @@ Cypress.on("uncaught:exception", err => {
   }
   return true;
 });
+
+export const checkDropCapChanges = path => {
+  cy.waitUntil(
+    () =>
+      cy
+        .get(path)
+        .should("be.visible") // yields <nav>
+        .should("have.css", "font-family") // yields 'sans-serif'
+        .and("match", /TimesModern-Regular/),
+    {
+      errorMsg: "Element is not found even after waiting",
+      timeout: 10000,
+      interval: 500
+    }
+  );
+};
+
+export const checkShareBarLoaded = path => {
+  cy.waitUntil(
+    () =>
+      cy
+        .get(path)
+        .should("have.css", "justify-content") // yields 'sans-serif'
+        .and("match", /space-between/),
+    {
+      errorMsg: "Element is not found even after waiting",
+      timeout: 10000,
+      interval: 500
+    }
+  );
+};
+
+export const waitUntilSelectorExists = (
+  skipDropCapCheck,
+  remainingAttempts
+) => {
+  let selector = '[class^="responsive__DropCap-sc-"]';
+  if (skipDropCapCheck) {
+    selector = '[data-testid="save-and-share-bar"]';
+  }
+  const $el = Cypress.$(selector);
+  if ($el.length) {
+    // At least one tag was found.
+    // Return a jQuery object.
+    return $el;
+  }
+
+  if (remainingAttempts - 1) {
+    cy.log(`Selector not found yet. Remaining attempts: ${remainingAttempts}`);
+
+    // Requesting the page to reload (F5)
+    cy.reload(true);
+
+    // Wait a second for the server to respond and the DOM to be updated.
+    return cy
+      .wait(1000)
+      .then(waitUntilSelectorExists(skipDropCapCheck, remainingAttempts));
+  }
+  throw Error("Selector was not found.");
+};

package/__tests__/helpers/article-helper.js

@@ -1,4 +1,9 @@
 import { MockArticle, MockUser } from "@times-components/fixture-generator";
+import {
+  checkDropCapChanges,
+  checkShareBarLoaded,
+  waitUntilSelectorExists
+} from "../cypress/support";
 
 const relatedArticleCount = 3;
 
@@ -18,7 +23,6 @@ const articleTemplateTest = (template, options = {}) => {
         .setRelatedArticles(relatedArticleCount)
         .setTemplate(template)
         .get();
-
       userWithBookmarks = new MockUser().setBookmarksTotal(3);
     });
 
@@ -106,6 +110,49 @@ const articleTemplateTest = (template, options = {}) => {
       cy.get("script[data-spotim-module]").should("not.exist");
     });
 
+    it("should match snapshots", () => {
+      const {
+        stickyElements = [],
+        blackoutElements = [],
+        attachFlags = false,
+        skipDropCapCheck = false,
+        skipSnapshotTest = false
+      } = options;
+      if (skipSnapshotTest) return; // we need to add docker to execute the snapshot testing as viewport is
+      // is mismatching while running the test cases on local server. Here is the link to the ticket
+      // in which docker server will be used.: https://nidigitalsolutions.jira.com/browse/TDP-1249
+      const articleProps =
+        (attachFlags && {
+          ...sundayTimesArticleWithThreeRelatedArticles,
+          dropcapsDisabled: false,
+          sharingEnabled: true,
+          savingEnabled: true
+        }) ||
+        sundayTimesArticleWithThreeRelatedArticles;
+      cy.task("startMockServerWith", {
+        Article: articleProps,
+        User: userWithBookmarks
+      })
+        .visit(pageUrl)
+        .then(() => {
+          if (attachFlags) {
+            waitUntilSelectorExists(skipDropCapCheck, 3);
+            if (!skipDropCapCheck)
+              checkDropCapChanges('[class^="responsive__DropCap-"]');
+            checkShareBarLoaded("[data-testid=save-and-share-bar]");
+          }
+
+          // changed the position of navigation bar element to absolute, so we don't see
+          // duplicate elements floating
+          stickyElements.forEach(selector => {
+            cy.get(selector).then(el => el.css("position", "absolute"));
+          });
+          cy.get("body").matchImageSnapshot({
+            blackout: blackoutElements
+          });
+        });
+    });
+
     it("should pass basic a11y test", () => {
       cy.task("startMockServerWith", {
         Article: sundayTimesArticleWithThreeRelatedArticles,

package/__tests__/helpers/author-profile-helper.js

@@ -63,5 +63,15 @@ export default (options = {}) => {
       });
       cy.checkA11y();
     });
+
+    it("should match snapshots", () => {
+      const { stickyElements = [] } = options;
+      // changed the position of navigation bar element to absolute, so we don't see
+      // duplicate elements floating
+      stickyElements.forEach(selector => {
+        cy.get(selector).then(el => el.css("position", "absolute"));
+      });
+      cy.matchImageSnapshot();
+    });
   });
 };

package/__tests__/integration/article-indepth.js

@@ -1,3 +1,11 @@
 import articleTests from "../helpers/article-helper";
 
-articleTests("indepth");
+articleTests("indepth", {
+  stickyElements: ["#nav"],
+  attachFlags: true,
+  blackoutElements: [
+    "[data-testid=save-and-share-bar]",
+    '[data-tc-sticky-container="true"]',
+    '[class^="sticky-save-and-share-bar__]'
+  ]
+});

package/__tests__/integration/article-magazinecomment.js

@@ -1,3 +1,11 @@
 import articleTests from "../helpers/article-helper";
 
-articleTests("magazinecomment");
+articleTests("magazinecomment", {
+  stickyElements: ["#nav"],
+  attachFlags: true,
+  blackoutElements: [
+    "[data-testid=save-and-share-bar]",
+    '[data-tc-sticky-container="true"]',
+    '[class^="sticky-save-and-share-bar__]'
+  ]
+});

package/__tests__/integration/article-magazinestandard.js

@@ -1,3 +1,11 @@
 import articleTests from "../helpers/article-helper";
 
-articleTests("magazinestandard");
+articleTests("magazinestandard", {
+  stickyElements: ["#nav"],
+  attachFlags: true,
+  blackoutElements: [
+    "[data-testid=save-and-share-bar]",
+    '[data-tc-sticky-container="true"]',
+    '[class^="sticky-save-and-share-bar__]'
+  ]
+});

package/__tests__/integration/article-maincomment.js

@@ -1,3 +1,11 @@
 import articleTests from "../helpers/article-helper";
 
-articleTests("maincomment");
+articleTests("maincomment", {
+  stickyElements: ["#nav"],
+  attachFlags: true,
+  blackoutElements: [
+    "[data-testid=save-and-share-bar]",
+    '[data-tc-sticky-container="true"]',
+    '[class^="sticky-save-and-share-bar__]'
+  ]
+});

package/__tests__/integration/article-mainstandard-default.js

@@ -1,3 +1,13 @@
 import articleTests from "../helpers/article-helper";
 
-articleTests("mainstandard");
+articleTests("mainstandard", {
+  stickyElements: ["#nav"],
+  attachFlags: true,
+  skipDropCapCheck: true,
+  skipSnapshotTest: true,
+  blackoutElements: [
+    "[data-testid=save-and-share-bar]",
+    '[data-tc-sticky-container="true"]',
+    '[class^="sticky-save-and-share-bar__]'
+  ]
+});

package/__tests__/integration/article-mainstandard-persisted-query.js

@@ -2,5 +2,14 @@ import articleTests from "../helpers/article-helper";
 
 articleTests("mainstandard", {
   qs: "?pq=1",
-  variant: "Persisted Query"
+  variant: "Persisted Query",
+  stickyElements: ["#nav"],
+  skipSnapshotTest: true,
+  blackoutElements: [
+    "[data-testid=save-and-share-bar]",
+    '[data-tc-sticky-container="true"]',
+    '[class^="sticky-save-and-share-bar__]'
+  ],
+  attachFlags: true,
+  skipDropCapCheck: true
 });

package/__tests__/integration/author-profile-default.js

@@ -1,4 +1,4 @@
 import authorProfileTests from "../helpers/author-profile-helper";
 
 // default
-authorProfileTests();
+authorProfileTests({ stickyElements: ["#nav"] });

package/__tests__/integration/author-profile-persisted-query.js

@@ -2,5 +2,6 @@ import authorProfileTests from "../helpers/author-profile-helper";
 
 authorProfileTests({
   qs: "?pq=1",
-  variant: "Persisted Query"
+  variant: "Persisted Query",
+  stickyElements: ["#nav"]
 });

package/__tests__/integration/topic-default.js

@@ -1,4 +1,4 @@
 import topicPageTests from "../helpers/author-profile-helper";
 
 // default
-topicPageTests();
+topicPageTests({ stickyElements: ["#nav"] });

package/__tests__/integration/topic-persisted-query.js

@@ -3,5 +3,6 @@ import topicPageTests from "../helpers/topic-helper";
 // persisted queries
 topicPageTests({
   qs: "?pq=1",
-  variant: "Persisted Query"
+  variant: "Persisted Query",
+  stickyElements: ["#nav"]
 });

package/cypress.json

@@ -5,5 +5,6 @@
   "pluginsFile": "__tests__/cypress/plugins",
   "screenshotsFolder": "__tests__/screenshots",
   "supportFile": "__tests__/cypress/support",
-  "video": false
+  "video": false,
+  "blockHosts": ["*spot.im"]
 }