MT#64311 Migrate Alert Components to Vue3

- Migrated 6 alert components from Vue 2
  Options API to Vue 3 Composition API with
  <script setup> syntax
- Added simple tests to verify component rendering,
  prop handling, slot content, CSS classes, and
  edge cases. Tests use Quasar component stubs to
  avoid Vue warnings.

Change-Id: I6d7e664e7aeb94c4ae80c6532c199ec91e70359d

src/components/CscAlertError.vue

@@ -19,15 +19,6 @@
     </div>
 </template>
 
-<script>
-export default {
-    name: 'CscAlertError',
-    data () {
-        return {}
-    }
-}
-</script>
-
 <style lang="sass" rel="stylesheet/sass">
     .csc-alert-error
         background-color: $negative

src/components/CscAlertInfo.vue

@@ -19,15 +19,6 @@
     </div>
 </template>
 
-<script>
-export default {
-    name: 'CscAlertInfo',
-    data () {
-        return {}
-    }
-}
-</script>
-
 <style lang="sass" rel="stylesheet/sass">
     .csc-alert-info
         background-color: $info

src/components/CscInlineAlert.vue

@@ -26,10 +26,10 @@
     </q-banner>
 </template>
 
-<script>
-export default {
-    name: 'CscInlineAlert',
-    props: {
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
     icon: {
         type: String,
         default: null
@@ -38,11 +38,9 @@ export default {
         type: String,
         default: 'primary'
     }
-    },
-    computed: {
-        bannerClasses () {
-            return ['text-weight-bold', 'text-dark', `bg-${this.color}`, 'content-start']
-        }
-    }
-}
+})
+
+const bannerClasses = computed(() => {
+    return ['text-weight-bold', 'text-dark', `bg-${props.color}`, 'content-start']
+})
 </script>

src/components/CscInlineAlertAlert.vue

@@ -15,12 +15,6 @@
     </csc-inline-alert>
 </template>
 
-<script>
+<script setup>
 import CscInlineAlert from 'components/CscInlineAlert'
-export default {
-    name: 'CscInlineAlertAlert',
-    components: {
-        CscInlineAlert
-    }
-}
 </script>

src/components/CscInlineAlertInfo.vue

@@ -15,12 +15,6 @@
     </csc-inline-alert>
 </template>
 
-<script>
+<script setup>
 import CscInlineAlert from 'components/CscInlineAlert'
-export default {
-    name: 'CscInlineAlertInfo',
-    components: {
-        CscInlineAlert
-    }
-}
 </script>

src/components/CscInlineAlertWarning.vue

@@ -15,12 +15,6 @@
     </csc-inline-alert>
 </template>
 
-<script>
+<script setup>
 import CscInlineAlert from 'components/CscInlineAlert'
-export default {
-    name: 'CscInlineAlertWarning',
-    components: {
-        CscInlineAlert
-    }
-}
 </script>

test/jest/__tests__/components/CscAlertError.spec.js

@@ -0,0 +1,72 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { mount } from '@vue/test-utils'
+import CscAlertError from 'src/components/CscAlertError'
+
+const globalConfig = {
+    global: {
+        stubs: {
+            QIcon: true
+        }
+    }
+}
+
+describe('CscAlertError', () => {
+    it('should render the component', () => {
+        const wrapper = mount(CscAlertError, globalConfig)
+        expect(wrapper.exists()).toBe(true)
+        expect(wrapper.classes()).toContain('csc-alert-error')
+    })
+
+    it('should render error icon with correct attributes', () => {
+        const wrapper = mount(CscAlertError, globalConfig)
+        const html = wrapper.html()
+        expect(html).toContain('name="error"')
+        expect(html).toContain('size="32px"')
+        expect(html).toContain('color="white"')
+    })
+
+    it('should render slot content', () => {
+        const wrapper = mount(CscAlertError, {
+            ...globalConfig,
+            slots: {
+                default: '<div class="test-content">Error message</div>'
+            }
+        })
+        expect(wrapper.find('.test-content').exists()).toBe(true)
+        expect(wrapper.text()).toContain('Error message')
+    })
+
+    it('should render empty without crashing when no slot provided', () => {
+        const wrapper = mount(CscAlertError, globalConfig)
+        const textContainer = wrapper.find('.csc-alert-error-text')
+        expect(textContainer.exists()).toBe(true)
+        expect(textContainer.text()).toBe('')
+    })
+
+    it('should have correct styling classes', () => {
+        const wrapper = mount(CscAlertError, globalConfig)
+        expect(wrapper.classes()).toContain('row')
+        expect(wrapper.classes()).toContain('no-vert-gutter')
+        expect(wrapper.classes()).toContain('no-wrap')
+    })
+
+    it('should have error text container', () => {
+        const wrapper = mount(CscAlertError, globalConfig)
+        const textContainer = wrapper.find('.csc-alert-error-text')
+        expect(textContainer.exists()).toBe(true)
+    })
+
+    it('should render complex HTML content in slot', () => {
+        const wrapper = mount(CscAlertError, {
+            ...globalConfig,
+            slots: {
+                default: '<p>Error: <strong>Something went wrong</strong></p><ul><li>Detail 1</li></ul>'
+            }
+        })
+        expect(wrapper.html()).toContain('<strong>Something went wrong</strong>')
+        expect(wrapper.html()).toContain('<li>Detail 1</li>')
+    })
+})

test/jest/__tests__/components/CscAlertInfo.spec.js

@@ -0,0 +1,75 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { mount } from '@vue/test-utils'
+import CscAlertInfo from 'src/components/CscAlertInfo'
+
+const globalConfig = {
+    global: {
+        stubs: {
+            QIcon: true
+        }
+    }
+}
+
+describe('CscAlertInfo', () => {
+    it('should render the component', () => {
+        const wrapper = mount(CscAlertInfo, globalConfig)
+        expect(wrapper.exists()).toBe(true)
+        expect(wrapper.classes()).toContain('csc-alert-info')
+    })
+
+    it('should render info icon with correct attributes', () => {
+        const wrapper = mount(CscAlertInfo, globalConfig)
+        const html = wrapper.html()
+        expect(html).toContain('name="info"')
+        expect(html).toContain('size="32px"')
+        expect(html).toContain('color="white"')
+    })
+
+    it('should render slot content', () => {
+        const wrapper = mount(CscAlertInfo, {
+            ...globalConfig,
+            slots: {
+                default: '<div class="test-content">Info message</div>'
+            }
+        })
+        expect(wrapper.find('.test-content').exists()).toBe(true)
+        expect(wrapper.text()).toContain('Info message')
+    })
+
+    it('should render empty without crashing when no slot provided', () => {
+        const wrapper = mount(CscAlertInfo, globalConfig)
+        const textContainer = wrapper.find('.csc-alert-info-text')
+        expect(textContainer.exists()).toBe(true)
+        expect(textContainer.text()).toBe('')
+    })
+
+    it('should have correct styling classes', () => {
+        const wrapper = mount(CscAlertInfo, globalConfig)
+        expect(wrapper.classes()).toContain('row')
+        expect(wrapper.classes()).toContain('no-vert-gutter')
+        expect(wrapper.classes()).toContain('no-wrap')
+    })
+
+    it('should have icon and text containers with correct column classes', () => {
+        const wrapper = mount(CscAlertInfo, globalConfig)
+        const iconContainer = wrapper.find('.csc-alert-icon')
+        const textContainer = wrapper.find('.csc-alert-info-text')
+        expect(iconContainer.exists()).toBe(true)
+        expect(textContainer.exists()).toBe(true)
+        expect(textContainer.classes()).toContain('col-10')
+    })
+
+    it('should render complex HTML content in slot', () => {
+        const wrapper = mount(CscAlertInfo, {
+            ...globalConfig,
+            slots: {
+                default: '<div><span class="label">Note:</span> <em>Important info</em></div>'
+            }
+        })
+        expect(wrapper.html()).toContain('<span class="label">Note:</span>')
+        expect(wrapper.html()).toContain('<em>Important info</em>')
+    })
+})

test/jest/__tests__/components/CscInlineAlert.spec.js

@@ -0,0 +1,122 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { mount } from '@vue/test-utils'
+import CscInlineAlert from 'src/components/CscInlineAlert'
+
+const globalConfig = {
+    global: {
+        stubs: {
+            QIcon: true,
+            QBanner: true
+        }
+    }
+}
+
+describe('CscInlineAlert', () => {
+    it('should render the component', () => {
+        const wrapper = mount(CscInlineAlert, globalConfig)
+        expect(wrapper.exists()).toBe(true)
+    })
+
+    it('should apply default color prop', () => {
+        const wrapper = mount(CscInlineAlert, globalConfig)
+        const html = wrapper.html()
+        // Component should render with default color styling
+        expect(html).toContain('bg-primary')
+    })
+
+    it('should apply custom color prop', () => {
+        const wrapper = mount(CscInlineAlert, {
+            ...globalConfig,
+            props: {
+                color: 'negative'
+            }
+        })
+        const html = wrapper.html()
+        expect(html).toContain('bg-negative')
+    })
+
+    it('should apply multiple banner classes', () => {
+        const wrapper = mount(CscInlineAlert, {
+            ...globalConfig,
+            props: {
+                color: 'warning'
+            }
+        })
+        const html = wrapper.html()
+        expect(html).toContain('text-weight-bold')
+        expect(html).toContain('text-dark')
+        expect(html).toContain('bg-warning')
+        expect(html).toContain('content-start')
+    })
+
+    it('should accept icon prop', () => {
+        const wrapper = mount(CscInlineAlert, {
+            ...globalConfig,
+            props: {
+                icon: 'warning',
+                color: 'warning'
+            }
+        })
+        // Component should accept icon prop without errors
+        expect(wrapper.exists()).toBe(true)
+        expect(wrapper.props('icon')).toBe('warning')
+    })
+
+    it('should accept null icon prop', () => {
+        const wrapper = mount(CscInlineAlert, {
+            ...globalConfig,
+            props: {
+                icon: null
+            }
+        })
+        expect(wrapper.exists()).toBe(true)
+        expect(wrapper.props('icon')).toBeNull()
+    })
+
+    it('should render default slot content', () => {
+        const wrapper = mount(CscInlineAlert, {
+            global: {
+                stubs: {
+                    QIcon: true,
+                    QBanner: { template: '<div><slot /></div>' }
+                }
+            },
+            slots: {
+                default: '<div class="test-content">Alert message</div>'
+            }
+        })
+        expect(wrapper.find('.test-content').exists()).toBe(true)
+        expect(wrapper.text()).toContain('Alert message')
+    })
+
+    it('should accept action slot without errors', () => {
+        const wrapper = mount(CscInlineAlert, {
+            global: {
+                stubs: {
+                    QIcon: true,
+                    QBanner: { template: '<div><slot /><slot name="action" /></div>' }
+                }
+            },
+            slots: {
+                default: 'Message',
+                action: '<button class="test-action-btn">Close</button>'
+            }
+        })
+        // Component accepts action slot without throwing
+        expect(wrapper.exists()).toBe(true)
+        expect(wrapper.text()).toContain('Message')
+    })
+
+    it('should support v-bind attrs', () => {
+        const wrapper = mount(CscInlineAlert, {
+            ...globalConfig,
+            attrs: {
+                'data-test-id': 'custom-alert'
+            }
+        })
+        expect(wrapper.attributes('data-test-id')).toBe('custom-alert')
+    })
+})

test/jest/__tests__/components/CscInlineAlertAlert.spec.js

@@ -0,0 +1,71 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { mount } from '@vue/test-utils'
+import CscInlineAlert from 'src/components/CscInlineAlert'
+import CscInlineAlertAlert from 'src/components/CscInlineAlertAlert'
+
+const globalConfig = {
+    global: {
+        components: { CscInlineAlert },
+        stubs: {
+            QIcon: true,
+            QBanner: true
+        }
+    }
+}
+
+describe('CscInlineAlertAlert', () => {
+    it('should render the component', () => {
+        const wrapper = mount(CscInlineAlertAlert, globalConfig)
+        expect(wrapper.exists()).toBe(true)
+    })
+
+    it('should use CscInlineAlert component', () => {
+        const wrapper = mount(CscInlineAlertAlert, globalConfig)
+        const inlineAlert = wrapper.findComponent(CscInlineAlert)
+        expect(inlineAlert.exists()).toBe(true)
+    })
+
+    it('should pass correct props to CscInlineAlert', () => {
+        const wrapper = mount(CscInlineAlertAlert, globalConfig)
+        const inlineAlert = wrapper.findComponent(CscInlineAlert)
+        expect(inlineAlert.props('icon')).toBe('error')
+        expect(inlineAlert.props('color')).toBe('negative')
+    })
+
+    it('should render with negative color class', () => {
+        const wrapper = mount(CscInlineAlertAlert, globalConfig)
+        const html = wrapper.html()
+        expect(html).toContain('bg-negative')
+    })
+
+    it('should render slot content', () => {
+        const wrapper = mount(CscInlineAlertAlert, {
+            global: {
+                components: { CscInlineAlert },
+                stubs: {
+                    QIcon: true,
+                    QBanner: { template: '<div><slot /></div>' }
+                }
+            },
+            slots: {
+                default: '<div class="test-content">Error alert message</div>'
+            }
+        })
+        expect(wrapper.find('.test-content').exists()).toBe(true)
+        expect(wrapper.text()).toContain('Error alert message')
+    })
+
+    it('should support v-bind attrs', () => {
+        const wrapper = mount(CscInlineAlertAlert, {
+            ...globalConfig,
+            attrs: {
+                'data-test': 'alert'
+            }
+        })
+        const inlineAlert = wrapper.findComponent(CscInlineAlert)
+        expect(inlineAlert.attributes('data-test')).toBe('alert')
+    })
+})

test/jest/__tests__/components/CscInlineAlertInfo.spec.js

@@ -0,0 +1,71 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { mount } from '@vue/test-utils'
+import CscInlineAlert from 'src/components/CscInlineAlert'
+import CscInlineAlertInfo from 'src/components/CscInlineAlertInfo'
+
+const globalConfig = {
+    global: {
+        components: { CscInlineAlert },
+        stubs: {
+            QIcon: true,
+            QBanner: true
+        }
+    }
+}
+
+describe('CscInlineAlertInfo', () => {
+    it('should render the component', () => {
+        const wrapper = mount(CscInlineAlertInfo, globalConfig)
+        expect(wrapper.exists()).toBe(true)
+    })
+
+    it('should use CscInlineAlert component', () => {
+        const wrapper = mount(CscInlineAlertInfo, globalConfig)
+        const inlineAlert = wrapper.findComponent(CscInlineAlert)
+        expect(inlineAlert.exists()).toBe(true)
+    })
+
+    it('should pass correct props to CscInlineAlert', () => {
+        const wrapper = mount(CscInlineAlertInfo, globalConfig)
+        const inlineAlert = wrapper.findComponent(CscInlineAlert)
+        expect(inlineAlert.props('icon')).toBe('info')
+        expect(inlineAlert.props('color')).toBe('info')
+    })
+
+    it('should render with info color class', () => {
+        const wrapper = mount(CscInlineAlertInfo, globalConfig)
+        const html = wrapper.html()
+        expect(html).toContain('bg-info')
+    })
+
+    it('should render slot content', () => {
+        const wrapper = mount(CscInlineAlertInfo, {
+            global: {
+                components: { CscInlineAlert },
+                stubs: {
+                    QIcon: true,
+                    QBanner: { template: '<div><slot /></div>' }
+                }
+            },
+            slots: {
+                default: '<div class="test-content">Info alert message</div>'
+            }
+        })
+        expect(wrapper.find('.test-content').exists()).toBe(true)
+        expect(wrapper.text()).toContain('Info alert message')
+    })
+
+    it('should support v-bind attrs', () => {
+        const wrapper = mount(CscInlineAlertInfo, {
+            ...globalConfig,
+            attrs: {
+                'data-test': 'info'
+            }
+        })
+        const inlineAlert = wrapper.findComponent(CscInlineAlert)
+        expect(inlineAlert.attributes('data-test')).toBe('info')
+    })
+})

test/jest/__tests__/components/CscInlineAlertWarning.spec.js

@@ -0,0 +1,71 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { mount } from '@vue/test-utils'
+import CscInlineAlert from 'src/components/CscInlineAlert'
+import CscInlineAlertWarning from 'src/components/CscInlineAlertWarning'
+
+const globalConfig = {
+    global: {
+        components: { CscInlineAlert },
+        stubs: {
+            QIcon: true,
+            QBanner: true
+        }
+    }
+}
+
+describe('CscInlineAlertWarning', () => {
+    it('should render the component', () => {
+        const wrapper = mount(CscInlineAlertWarning, globalConfig)
+        expect(wrapper.exists()).toBe(true)
+    })
+
+    it('should use CscInlineAlert component', () => {
+        const wrapper = mount(CscInlineAlertWarning, globalConfig)
+        const inlineAlert = wrapper.findComponent(CscInlineAlert)
+        expect(inlineAlert.exists()).toBe(true)
+    })
+
+    it('should pass correct props to CscInlineAlert', () => {
+        const wrapper = mount(CscInlineAlertWarning, globalConfig)
+        const inlineAlert = wrapper.findComponent(CscInlineAlert)
+        expect(inlineAlert.props('icon')).toBe('warning')
+        expect(inlineAlert.props('color')).toBe('warning')
+    })
+
+    it('should render with warning color class', () => {
+        const wrapper = mount(CscInlineAlertWarning, globalConfig)
+        const html = wrapper.html()
+        expect(html).toContain('bg-warning')
+    })
+
+    it('should render slot content', () => {
+        const wrapper = mount(CscInlineAlertWarning, {
+            global: {
+                components: { CscInlineAlert },
+                stubs: {
+                    QIcon: true,
+                    QBanner: { template: '<div><slot /></div>' }
+                }
+            },
+            slots: {
+                default: '<div class="test-content">Warning alert message</div>'
+            }
+        })
+        expect(wrapper.find('.test-content').exists()).toBe(true)
+        expect(wrapper.text()).toContain('Warning alert message')
+    })
+
+    it('should support v-bind attrs', () => {
+        const wrapper = mount(CscInlineAlertWarning, {
+            ...globalConfig,
+            attrs: {
+                'data-test': 'warning'
+            }
+        })
+        const inlineAlert = wrapper.findComponent(CscInlineAlert)
+        expect(inlineAlert.attributes('data-test')).toBe('warning')
+    })
+})