Sebin/task/#2284 upgrade cypress to the latest ricardo (#2331)

* install the latest version / cypress.json to cypress.config.js

* add experimentalRunAllSpecs in the config

* fix the style-linter err

* makes sure all test-suites pass

* increase the timeout limit for large-group test-suite

* fix docIframe related err

* fix linter er

* update comment

* IN_GITHUB_ACTIONS env variable for GA

* remove bypassUI to track down what exactly happens

* some test line for JOINED_GROUP constant

* revert all

* Debug

* Debug 2

* Locale logging

* Fix locale

* Remove unsafe .clear().type() chaining

* Remove unsafe .clear().type() chaining, take 2

* Add force: true

* Remove debug logging and deprecated Cypress option

---------

Co-authored-by: SebinSong <[email protected]>

.flowconfig

@@ -7,6 +7,7 @@
 # - https://flowtype.org/docs/objects.html
 # - https://flowtype.org/docs/functions.html
 .*/Gruntfile.js
+.*/cypress.config.js
 .*/Gruntfile.dashboard.js
 .*/dist/.*
 .*/dist-dashboard/.*

cypress.config.js

@@ -0,0 +1,29 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  viewportWidth: 1201,
+  viewportHeight: 900,
+  defaultCommandTimeout: 45000,
+  fixturesFolder: 'test/cypress/fixtures',
+  screenshotsFolder: 'test/cypress/screenshots',
+  videosFolder: 'test/cypress/videos',
+  video: true,
+  trashAssetsBeforeRuns: true,
+  projectId: 'q6whky',
+  experimentalMemoryManagement: true,
+  // NOTE: When running 'cypress open' on a browser, high memory usage often leads to crashing the browser.
+  //       So setting 'numTestsKeptInMemory' to 0 here. (reference: https://docs.cypress.io/guides/references/configuration#Global)
+  numTestsKeptInMemory: 0,
+  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('./test/cypress/plugins')(on, config)
+    },
+    baseUrl: 'http://localhost:8000',
+    specPattern: 'test/cypress/integration/**/*.{js,jsx,ts,tsx}',
+    supportFile: 'test/cypress/support/index.js',
+    testIsolation: false,
+    experimentalRunAllSpecs: true // reference: https://www.cypress.io/blog/check-out-our-experimental-release-of-run-all-specs
+  }
+})

frontend/assets/style/components/_cards.scss

@@ -75,14 +75,16 @@
 }
 
 @mixin removeTopCardPadding {
-  margin-top: -1.5rem;
-
-  @include tablet {
+  & { // reference: https://sass-lang.com/documentation/breaking-changes/mixed-decls/
     margin-top: -1.5rem;
-  }
 
-  @include desktop {
-    margin-top: -2.5rem;
+    @include tablet {
+      margin-top: -1.5rem;
+    }
+
+    @include desktop {
+      margin-top: -2.5rem;
+    }
   }
 }
 

frontend/model/contracts/shared/time.js

@@ -174,13 +174,14 @@ export function humanDate (
   date: number | Date | string,
   options?: Intl$DateTimeFormatOptions = { month: 'short', day: 'numeric' }
 ): string {
+  const fallback = 'en-US-POSIX'
   const locale = typeof navigator === 'undefined'
     // Fallback for Mocha tests.
-    ? 'en-US'
+    ? fallback
     // Flow considers `navigator.languages` to be of type `$ReadOnlyArray<string>`,
     // which is not compatible with the `string[]` expected by `.toLocaleDateString()`.
     // Casting to `string[]` through `any` as a workaround.
-    : ((navigator.languages: any): string[]) ?? navigator.language
+    : ((navigator.languages: any): string[]) ?? navigator.language ?? fallback
   // NOTE: `.toLocaleDateString()` automatically takes local timezone differences into account.
   // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString
   return new Date(date).toLocaleDateString(locale, options)

frontend/views/containers/navigation/Navigation.vue

@@ -2,6 +2,7 @@
 nav.c-navigation(
   :aria-label='L("Main")'
   :class='{ "is-active": ephemeral.isActive }'
+  data-test='navMenu'
 )
   toggle(@toggle='toggleMenu' element='navigation' :aria-expanded='ephemeral.isActive' data-test='NavigationToggleBtn')
     badge.c-toggle-badge(v-if='totalUnreadNotificationCount' data-test='dashboardBadge') {{ totalUnreadNotificationCount }}