Merge pull request #1577 from NationalSecurityAgency/t#1576/cypress_u…

…pgrade

T#1576/cypress upgrade

.github/workflows/build-and-test.yml

@@ -161,12 +161,13 @@ jobs:
     - name: Prep Services for Cypress tests
       run: |
         cd e2e-tests
+        ls
         npm install
         npm run cyServices:start
         cd ..
 
     - name: Run Cypress tests
-      uses: cypress-io/github-action@v2
+      uses: cypress-io/github-action@v4
       with:
         working-directory: e2e-tests
         record: true

dashboard/src/components/myProgress/MyProjectSkillsPage.vue

@@ -15,7 +15,10 @@ limitations under the License.
 */
 <template>
 <div>
-  <skills-display
+  <div v-if="isLoadingSettings" class="d-flex justify-content-center mt-1">
+    <b-spinner variant="primary" type="grow" label="Spinning"></b-spinner>
+  </div>
+  <skills-display v-if="!isLoadingSettings"
     :options="options"
     :version="skillsVersion"
     :theme="themeObj"
@@ -27,8 +30,8 @@ limitations under the License.
 <script>
   import { SkillsDisplay } from '@skilltree/skills-client-vue';
   import MyProgressService from '@/components/myProgress/MyProgressService';
-  import SkillsDisplayOptionsMixin from './SkillsDisplayOptionsMixin';
-  import SettingsService from '../settings/SettingsService';
+  import SkillsDisplayOptionsMixin from '@/components/myProgress/SkillsDisplayOptionsMixin';
+  import SettingsService from '@/components/settings/SettingsService';
 
   export default {
     name: 'MyProjectSkillsPage',
@@ -38,6 +41,7 @@ limitations under the License.
     },
     data() {
       return {
+        isLoadingSettings: true,
         projectId: this.$route.params.projectId,
         projectDisplayName: 'PROJECT',
         skillsVersion: 2147483647, // max int
@@ -100,6 +104,7 @@ limitations under the License.
       };
     },
     mounted() {
+      this.isLoadingSettings = true;
       SettingsService.getClientDisplayConfig(this.projectId).then((response) => {
         this.projectDisplayName = response.projectDisplayName?.toUpperCase();
         if (!this.$route.params.name) {
@@ -111,6 +116,8 @@ limitations under the License.
         } else {
           this.$set(this.theme, 'landingPageTitle', `${this.projectDisplayName}: ${this.$route.params.name}`);
         }
+      }).finally(() => {
+        this.isLoadingSettings = false;
       });
     },
     computed: {

e2e-tests/cypress.config.js

@@ -0,0 +1,29 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  projectId: '7kivjf',
+  requestTimeout: 10000,
+  defaultCommandTimeout: 10000,
+  numTestsKeptInMemory: 50,
+  chromeWebSecurity: false,
+  retries: {
+    runMode: 2,
+    openMode: 0,
+  },
+  lighthouse: {
+    performance: 85,
+    accessibility: 90,
+    'best-practices': 85,
+    seo: 50,
+    pwa: 50,
+  },
+  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:8080',
+    specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
+  },
+})