Merge pull request #290 from ably/chore/upgrade-cypress

[CHORE] Upgrade to Cypress 13

.circleci/config.yml

@@ -1,5 +1,9 @@
 version: 2.1
 
+orbs:
+  browser-tools: circleci/[email protected]
+  node: circleci/[email protected]
+
 executors:
   default:
     description: Image for running rails with cypress
@@ -10,28 +14,31 @@ executors:
         default: latest
     docker:
       - image: cimg/ruby:<< parameters.tag >>-browsers
-      - image: circleci/postgres:12
+      - image: cimg/postgres:14.9
         environment:
           POSTGRES_USER: ably_db_user
           POSTGRES_PASSWORD: password
-      - image: circleci/redis:6
     environment:
-      - BUNDLER_VERSION: 2.2.11
+      - BUNDLER_VERSION: 2.3.8
       - BUNDLE_JOBS: 4
       - BUNDLE_PATH: vendor/bundle
       - BUNDLE_RETRY: 3
       - PGHOST: 127.0.0.1
       - PG_USER: ably_db_user
       - PG_PASSWORD: password
       - RAILS_ENV: test
-      - NODE_VERSION: 14.15.4
+      - NODE_VERSION: 16.17.0
       - YARN_VERSION: 1.22.10
 
 caches:
   - &bundle_cache ably-ui-preview-bundle-v1-{{ checksum "Gemfile.lock" }}-{{ checksum "preview/Gemfile.lock" }}
   - &yarn_cache ably-ui-preview-yarn-v1-{{ checksum "yarn.lock" }}-{{ checksum "preview/yarn.lock" }}
 
 commands:
+  install_browser:
+    description: Install browser
+    steps:
+      - browser-tools/install-chrome
   save_bundle_cache:
     description: Save bundle cache
     steps:
@@ -136,6 +143,7 @@ jobs:
     working_directory: ~/ably-ui/preview
     steps:
       - checkout
+      - install_browser
       - bundle_install
       - yarn_install
       - precompile_assets
@@ -151,6 +159,7 @@ jobs:
           name: Executes Cypress end-to-end tests
           command: |
             yarn cypress run \
+              --browser chrome \
               --reporter junit \
               --reporter-options "mochaFile=test-results/cypress-[hash].xml,toConsole=true"
       - store_test_results:

cypress.config.js

@@ -0,0 +1,24 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  env: {
+    "cypress-plugin-snapshots": {
+      autoCleanUp: true,
+      imageConfig: {
+        createDiffImage: true,
+        resizeDevicePixelRatio: false,
+        threshold: 0.0001,
+        thresholdType: "percent",
+      },
+    },
+  },
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      return require("./cypress/plugins/index.js")(on, config);
+    },
+    baseUrl: "http://localhost:5000",
+    excludeSpecPattern: ["**/__snapshots__/*", "**/__image_snapshots__/*"],
+  },
+});

cypress/integration/core/contact_footer/__snapshots__/snapshots.js.snap → cypress/e2e/core/contact_footer/__snapshots__/snapshots.cy.js.snap

@@ -11,18 +11,6 @@ exports[`Chat button state > react > the button is inactive without Hubspot widg
 </button>
 `;
 
-exports[`Chat button state > react > the button is inactive without Hubspot widget #1`] = `
-<button
-  type="button"
-  class="ui-btn-secondary p-btn-small mt-16 opacity-30"
-  data-unavailable="Live chat unavailable"
-  data-id="open-chat-widget"
-  disabled="true"
->
-  Live chat unavailable
-</button>
-`;
-
 exports[`Chat button state > vw > the button is inactive without Hubspot widget #0`] = `
 <button
   type="button"

cypress/e2e/core/flash/__snapshots__/snapshot.cy.js.snap

@@ -0,0 +1,129 @@
+exports[`Flash Snapshot Test > renders correcty #0`] = `
+<div
+  class="ui-flash-message ui-grid-px ui-flash-message-enter"
+  data-id="ui-flash"
+>
+  <div
+    class="bg-zingy-green p-32 flex align-center rounded shadow-container-subtle"
+  >
+    <svg
+      class="text-cool-black mr-16 self-baseline"
+      style="width: 1.5rem; height: 1.5rem;"
+    >
+      <use xlink:href="#sprite-icon-gui-tick"></use>
+    </svg>
+    <p class="ui-flash-text text-cool-black">
+      Congratulations! You've won the Oscar
+    </p>
+    <button type="button" class="p-0 ml-auto self-start focus:outline-none">
+      <svg
+        class="text-cool-black transition-colors"
+        style="width: 1.5rem; height: 1.5rem;"
+      >
+        <use xlink:href="#sprite-icon-gui-close"></use>
+      </svg>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Flash Snapshot Test > renders correcty #1`] = `
+<div
+  class="ui-flash-message ui-grid-px ui-flash-message-enter"
+  data-id="ui-flash"
+>
+  <div
+    class="bg-electric-cyan p-32 flex align-center rounded shadow-container-subtle"
+  >
+    <svg
+      class="text-cool-black mr-16 self-baseline"
+      style="width: 1.5rem; height: 1.5rem;"
+    >
+      <use xlink:href="#sprite-icon-gui-ably-badge"></use>
+    </svg>
+    <p class="ui-flash-text text-cool-black">This is a notice</p>
+    <button type="button" class="p-0 ml-auto self-start focus:outline-none">
+      <svg
+        class="text-cool-black transition-colors"
+        style="width: 1.5rem; height: 1.5rem;"
+      >
+        <use xlink:href="#sprite-icon-gui-close"></use>
+      </svg>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Flash Snapshot Test > renders correcty #2`] = `
+<div
+  class="ui-flash-message ui-grid-px ui-flash-message-enter"
+  data-id="ui-flash"
+>
+  <div
+    class="bg-gui-error p-32 flex align-center rounded shadow-container-subtle"
+  >
+    <svg
+      class="text-white mr-16 self-baseline"
+      style="width: 1.5rem; height: 1.5rem;"
+    >
+      <use xlink:href="#sprite-icon-gui-warning"></use>
+    </svg>
+    <p class="ui-flash-text text-white">This is an error, very bad</p>
+    <button type="button" class="p-0 ml-auto self-start focus:outline-none">
+      <svg
+        class="text-white transition-colors"
+        style="width: 1.5rem; height: 1.5rem;"
+      >
+        <use xlink:href="#sprite-icon-gui-close"></use>
+      </svg>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Flash Snapshot Test > renders correcty #3`] = `
+<div
+  class="ui-flash-message ui-grid-px ui-flash-message-enter"
+  data-id="ui-flash"
+>
+  <div
+    class="bg-active-orange p-32 flex align-center rounded shadow-container-subtle"
+  >
+    <svg
+      class="text-white mr-16 self-baseline"
+      style="width: 1.5rem; height: 1.5rem;"
+    >
+      <use xlink:href="#sprite-icon-gui-warning"></use>
+    </svg>
+    <p class="ui-flash-text text-white">This is an alert</p>
+    <button type="button" class="p-0 ml-auto self-start focus:outline-none">
+      <svg
+        class="text-white transition-colors"
+        style="width: 1.5rem; height: 1.5rem;"
+      >
+        <use xlink:href="#sprite-icon-gui-close"></use>
+      </svg>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Flash Snapshot Test > renders correcty #4`] = `
+<div
+  class="ui-flash-message ui-grid-px ui-flash-message-enter"
+  data-id="ui-flash"
+>
+  <div
+    class="bg-electric-cyan p-32 flex align-center rounded shadow-container-subtle"
+  >
+    <p class="ui-flash-text text-cool-black">
+      Some useful information, you are welcome
+    </p>
+    <button type="button" class="p-0 ml-auto self-start focus:outline-none">
+      <svg class=" transition-colors" style="width: 1.5rem; height: 1.5rem;">
+        <use xlink:href="#sprite-icon-gui-close"></use>
+      </svg>
+    </button>
+  </div>
+</div>
+`;