From 17a8ef5aa217b4781fec3010d84e2b3c5c45e9c5 Mon Sep 17 00:00:00 2001
From: Razvan Stoenescu <razvan.stoenescu@gmail.com>
Date: Wed, 24 Apr 2024 19:35:01 +0300
Subject: [PATCH] feat(vite-plugin/testing): add sass/scss transform tests

---
 vite-plugin/playground/src/App.vue            |  7 +++--
 .../src/components/SassTransform.vue          | 17 +++++++++++
 .../sass-transform/ColorOverride.vue          |  8 +++++
 .../sass-transform/ColorSassUse.vue           | 16 ++++++++++
 .../sass-transform/ColorScssUse.vue           | 17 +++++++++++
 .../components/sass-transform/PaddingTest.vue | 15 ++++++++++
 .../playground/src/quasar-variables.sass      |  7 ++++-
 .../runtime/tests/sass-transform.test.js      | 29 +++++++++++++++++++
 vite-plugin/testing/runtime/vitest.config.js  |  2 +-
 9 files changed, 113 insertions(+), 5 deletions(-)
 create mode 100644 vite-plugin/playground/src/components/SassTransform.vue
 create mode 100644 vite-plugin/playground/src/components/sass-transform/ColorOverride.vue
 create mode 100644 vite-plugin/playground/src/components/sass-transform/ColorSassUse.vue
 create mode 100644 vite-plugin/playground/src/components/sass-transform/ColorScssUse.vue
 create mode 100644 vite-plugin/playground/src/components/sass-transform/PaddingTest.vue
 create mode 100644 vite-plugin/testing/runtime/tests/sass-transform.test.js

diff --git a/vite-plugin/playground/src/App.vue b/vite-plugin/playground/src/App.vue
index c05870f900d..02c5359fd99 100755
--- a/vite-plugin/playground/src/App.vue
+++ b/vite-plugin/playground/src/App.vue
@@ -1,4 +1,6 @@
 <template>
+  <SassTransform />
+
   <AssetTransform />
 
   <JsScriptSetup />
@@ -8,12 +10,11 @@
   <TsScript />
 
   <JsPug />
-
-  <!-- TODO: Add tests for 'pascal' and 'combined' too -->
-  <!-- TODO: Add SCSS Transforms -->
 </template>
 
 <script setup>
+import SassTransform from './components/SassTransform.vue'
+
 import AssetTransform from './components/AssetTransform.vue'
 
 import JsScriptSetup from './components/JsScriptSetup.vue'
diff --git a/vite-plugin/playground/src/components/SassTransform.vue b/vite-plugin/playground/src/components/SassTransform.vue
new file mode 100644
index 00000000000..65f6ec09784
--- /dev/null
+++ b/vite-plugin/playground/src/components/SassTransform.vue
@@ -0,0 +1,17 @@
+<template>
+  <h4>Sass Transform</h4>
+
+  <div>
+    <ColorOverride />
+    <ColorSassUse />
+    <ColorScssUse />
+    <PaddingTest />
+  </div>
+</template>
+
+<script setup>
+import ColorOverride from './sass-transform/ColorOverride.vue'
+import ColorSassUse from './sass-transform/ColorSassUse.vue'
+import ColorScssUse from './sass-transform/ColorScssUse.vue'
+import PaddingTest from './sass-transform/PaddingTest.vue'
+</script>
diff --git a/vite-plugin/playground/src/components/sass-transform/ColorOverride.vue b/vite-plugin/playground/src/components/sass-transform/ColorOverride.vue
new file mode 100644
index 00000000000..5c4ed02e90c
--- /dev/null
+++ b/vite-plugin/playground/src/components/sass-transform/ColorOverride.vue
@@ -0,0 +1,8 @@
+<template>
+  <h6>Color Override</h6>
+
+  <div>
+    <q-icon name="map" color="primary" size="50px" />
+    <q-btn icon="map" color="secondary" round />
+  </div>
+</template>
diff --git a/vite-plugin/playground/src/components/sass-transform/ColorSassUse.vue b/vite-plugin/playground/src/components/sass-transform/ColorSassUse.vue
new file mode 100644
index 00000000000..fabba934735
--- /dev/null
+++ b/vite-plugin/playground/src/components/sass-transform/ColorSassUse.vue
@@ -0,0 +1,16 @@
+<template>
+  <h6>Color Use (Sass)</h6>
+
+  <div class="row justify-center">
+    <div class="my-colored-div rounded-borders">
+      &nbsp;
+    </div>
+  </div>
+</template>
+
+<style lang="sass" scoped>
+.my-colored-div
+  background-color: $primary
+  width: 50px
+  height: 50px
+</style>
diff --git a/vite-plugin/playground/src/components/sass-transform/ColorScssUse.vue b/vite-plugin/playground/src/components/sass-transform/ColorScssUse.vue
new file mode 100644
index 00000000000..55dd83d9fbc
--- /dev/null
+++ b/vite-plugin/playground/src/components/sass-transform/ColorScssUse.vue
@@ -0,0 +1,17 @@
+<template>
+  <h6>Color Use (Scss)</h6>
+
+  <div class="row justify-center">
+    <div class="my-colored-div rounded-borders">
+      &nbsp;
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.my-colored-div {
+  background-color: $primary;
+  width: 50px;
+  height: 50px;
+}
+</style>
diff --git a/vite-plugin/playground/src/components/sass-transform/PaddingTest.vue b/vite-plugin/playground/src/components/sass-transform/PaddingTest.vue
new file mode 100644
index 00000000000..9316f40b696
--- /dev/null
+++ b/vite-plugin/playground/src/components/sass-transform/PaddingTest.vue
@@ -0,0 +1,15 @@
+<template>
+  <h6>Padding with $toolbar-padding</h6>
+
+  <div class="row justify-center">
+    <div class="my-div">
+      &nbsp;
+    </div>
+  </div>
+</template>
+
+<style lang="sass" scoped>
+.my-div
+  padding: $toolbar-padding
+  background-color: $secondary
+</style>
diff --git a/vite-plugin/playground/src/quasar-variables.sass b/vite-plugin/playground/src/quasar-variables.sass
index 541eadd762f..b97335aa636 100755
--- a/vite-plugin/playground/src/quasar-variables.sass
+++ b/vite-plugin/playground/src/quasar-variables.sass
@@ -1,6 +1,8 @@
 // $primary   : #1976D2
 $primary: #388310
-$secondary : #26A69A
+// $secondary : #26A69A
+$secondary : #a62659
+
 $accent    : #9C27B0
 
 $dark      : #1D1D1D
@@ -9,3 +11,6 @@ $positive  : #21BA45
 $negative  : #C10015
 $info      : #31CCEC
 $warning   : #F2C037
+
+// $toolbar-padding: 0 12px
+$toolbar-padding: 100px
diff --git a/vite-plugin/testing/runtime/tests/sass-transform.test.js b/vite-plugin/testing/runtime/tests/sass-transform.test.js
new file mode 100644
index 00000000000..f0df91b2109
--- /dev/null
+++ b/vite-plugin/testing/runtime/tests/sass-transform.test.js
@@ -0,0 +1,29 @@
+import { describe, expect, test } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+import 'quasar/src/css/index.sass'
+
+import { QToolbar } from 'quasar'
+import PaddingTest from 'playground/sass-transform/PaddingTest.vue'
+
+describe('Sass Transform', () => {
+  test('variables file is taken into account', () => {
+    const wrapper = mount(QToolbar)
+
+    const { element } = wrapper.get('div')
+    expect(
+      window.getComputedStyle(element)
+        .getPropertyValue('padding')
+    ).toBe('100px')
+  })
+
+  test('correctly uses sass variables', () => {
+    const wrapper = mount(PaddingTest)
+
+    const { element } = wrapper.get('div.my-div')
+    expect(
+      window.getComputedStyle(element)
+        .getPropertyValue('padding')
+    ).toBe('100px')
+  })
+})
diff --git a/vite-plugin/testing/runtime/vitest.config.js b/vite-plugin/testing/runtime/vitest.config.js
index f2bbcf6d8f3..bdb15cc61a5 100644
--- a/vite-plugin/testing/runtime/vitest.config.js
+++ b/vite-plugin/testing/runtime/vitest.config.js
@@ -18,7 +18,7 @@ export default defineConfig(() => {
 
       quasar({
         devTreeshaking: true,
-        sassVariables: false,
+        sassVariables: resolve('src/quasar-variables.sass'),
         autoImportComponentCase: 'combined'
       })
     ],