attempt at loading css for cypress tests

Signed-off-by: Polymeta <[email protected]>

Author: Polymeta

packages/ui/cypress/support/component.ts

@@ -21,6 +21,7 @@ import "./commands";
 // require('./commands')
 
 import { mount as mount2 } from "cypress/vue2";
+import "../../src/styles/main.scss";
 
 // Augment the Cypress namespace to include type definitions for
 // your custom command.

packages/ui/src/components/general/loader/loader.cy.ts

@@ -35,6 +35,18 @@ const CustomLoaderWrapper = defineComponent({
       </div>`
 });
 
+/**
+ * Wrapper for testing the loader with a custom variant
+ */
+const VariantLoaderWrapper = defineComponent({
+  components: { ForgeLoader },
+
+  template: `
+      <div>
+        <forge-loader id="testLoader" variant="info" />
+      </div>`
+});
+
 /***************************************************
  ************* END OF WRAPPER SETUP ****************
  **************************************************/
@@ -66,6 +78,17 @@ it("mounts custom loader", () => {
   cy.get(".sr-only").should("have.text", CustomLoadingMessage);
 });
 
+/**
+ * Tests the custom loader mounts correctly with valid custom text
+ */
+it("mounts custom loader", () => {
+  cy.wait(500);
+  mount(VariantLoaderWrapper as any);
+  cy.get("#testLoader").should("exist");
+  cy.get("#testLoader").should("be.visible");
+  cy.get("#testLoader > span").should("have.class", "text-info");
+});
+
 /***************************************************
  ***************** END OF TESTS ********************
  **************************************************/

packages/ui/src/styles/datepicker.scss

@@ -1,4 +1,4 @@
-@import 'node_modules/flatpickr/dist/flatpickr.min';
+@import 'flatpickr/dist/flatpickr.min';
 
 input.flatpickr-input[readonly],
 .flatpickr-wrapper input.form-control[readonly] {

packages/ui/src/styles/forge.scss

@@ -1,6 +1,6 @@
 @import "variables";
-@import 'node_modules/bootstrap/scss/bootstrap';
-@import 'node_modules/bootstrap-vue/src/index.scss';
+@import 'bootstrap/scss/bootstrap';
+@import 'bootstrap-vue/src/index.scss';
 
 
 @each $color, $value in $grays {

packages/ui/src/styles/multiselect.scss

@@ -1,4 +1,4 @@
-@import 'node_modules/vue-multiselect/dist/vue-multiselect.min';
+@import 'vue-multiselect/dist/vue-multiselect.min';
 
 .multiselect {
   box-sizing: content-box;