diff --git a/packages/ui/cypress/support/component.ts b/packages/ui/cypress/support/component.ts index 03fecb28..5e5bb460 100644 --- a/packages/ui/cypress/support/component.ts +++ b/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. diff --git a/packages/ui/src/components/general/loader/loader.cy.ts b/packages/ui/src/components/general/loader/loader.cy.ts index 230ded72..c8b211e1 100644 --- a/packages/ui/src/components/general/loader/loader.cy.ts +++ b/packages/ui/src/components/general/loader/loader.cy.ts @@ -35,6 +35,18 @@ const CustomLoaderWrapper = defineComponent({ ` }); +/** + * Wrapper for testing the loader with a custom variant + */ +const VariantLoaderWrapper = defineComponent({ + components: { ForgeLoader }, + + template: ` +
+ +
` +}); + /*************************************************** ************* 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 ******************** **************************************************/ diff --git a/packages/ui/src/styles/datepicker.scss b/packages/ui/src/styles/datepicker.scss index e3c6862a..a26c96a0 100644 --- a/packages/ui/src/styles/datepicker.scss +++ b/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] { diff --git a/packages/ui/src/styles/forge.scss b/packages/ui/src/styles/forge.scss index 7c6cdf70..f2ce519e 100644 --- a/packages/ui/src/styles/forge.scss +++ b/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 { diff --git a/packages/ui/src/styles/multiselect.scss b/packages/ui/src/styles/multiselect.scss index 96cd8344..12e0eae9 100644 --- a/packages/ui/src/styles/multiselect.scss +++ b/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;