[aform, atable] update test coverage for Stonecrop packages (#117)

.github/workflows/change.yml

@@ -16,7 +16,7 @@ jobs:
         name: Install Node.js
         with:
           cache-dependency-path: '**/config/rush/pnpm-lock.yaml'
-          registry-url: https://npm.pkg.github.com/
+          registry-url: https://registry.npmjs.org/
 
       - name: Verify Changes
         run: node common/scripts/install-run-rush.js change --verify

.github/workflows/lint.yml

@@ -41,7 +41,7 @@ jobs:
         name: Install Node.js
         with:
           cache-dependency-path: '**/config/rush/pnpm-lock.yaml'
-          registry-url: https://npm.pkg.github.com/
+          registry-url: https://registry.npmjs.org/
 
       - name: Install Rush
         run: node common/scripts/install-run-rush.js install

.github/workflows/tests.yml

@@ -44,10 +44,13 @@ jobs:
       uses: actions/setup-node@v4
       with:
         cache-dependency-path: '**/config/rush/pnpm-lock.yaml'
-        registry-url: https://npm.pkg.github.com/
+        registry-url: https://registry.npmjs.org/
 
-    - name: Install Rush
-      run: node common/scripts/install-run-rush.js install && node common/scripts/install-run-rush.js build
+    - name: Rush Install
+      run: node common/scripts/install-run-rush.js install
+
+    - name: Rush Build
+      run: node common/scripts/install-run-rush.js rebuild --verbose
 
     - name: Run Tests
       working-directory: ./aform
@@ -83,10 +86,13 @@ jobs:
       uses: actions/setup-node@v4
       with:
         cache-dependency-path: '**/config/rush/pnpm-lock.yaml'
-        registry-url: https://npm.pkg.github.com/
+        registry-url: https://registry.npmjs.org/
+
+    - name: Rush Install
+      run: node common/scripts/install-run-rush.js install
 
-    - name: Install Rush
-      run: node common/scripts/install-run-rush.js install && node common/scripts/install-run-rush.js build
+    - name: Rush Build
+      run: node common/scripts/install-run-rush.js rebuild --verbose
 
     - name: Run Tests
       working-directory: ./atable

.gitignore

@@ -71,6 +71,9 @@ jspm_packages/
 .idea/
 *.iml
 
+# Vitest output files
+.vite/
+
 # Rush temporary files
 common/deploy/
 common/temp/

aform/package.json

@@ -55,18 +55,18 @@
 		"@typescript-eslint/eslint-plugin": "^7.6.0",
 		"@typescript-eslint/parser": "^7.6.0",
 		"@vitejs/plugin-vue": "^5.0.4",
-		"@vitest/coverage-v8": "^1.5.0",
-		"@vitest/ui": "^1.5.0",
-		"@vue/test-utils": "^2.3.2",
+		"@vitest/coverage-istanbul": "^1.6.0",
+		"@vitest/ui": "^1.6.0",
+		"@vue/test-utils": "^2.4.6",
 		"cypress": "^12.11.0",
-		"eslint": "^8.40.0",
 		"eslint-config-prettier": "^8.8.0",
 		"eslint-plugin-vue": "^9.11.1",
+		"eslint": "^8.40.0",
 		"histoire": "^0.17.17",
-		"jsdom": "^22.0.0",
+		"jsdom": "^24.0.0",
 		"typescript": "^5.4.5",
 		"vite": "^5.2.9",
-		"vitest": "^1.5.0",
+		"vitest": "^1.6.0",
 		"vue-router": "^4"
 	},
 	"peerDependencies": {

aform/src/components/form/ADate.vue

@@ -18,13 +18,14 @@ import { ref } from 'vue'
 
 withDefaults(
 	defineProps<{
-		label: string
+		label?: string
 		required?: boolean
 		readonly?: boolean
 		uuid?: string
 		validation?: Record<string, any>
 	}>(),
 	{
+		label: 'Date',
 		validation: () => ({ errorMessage: '&nbsp;' }),
 	}
 )
@@ -34,7 +35,12 @@ const dateRef = ref<HTMLInputElement | null>(null)
 
 const showPicker = () => {
 	if (dateRef.value) {
-		dateRef.value.showPicker()
+		if ('showPicker' in HTMLInputElement.prototype) {
+			// https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker
+			// TODO: re-check browser support and compatibility; figure out alternative ways
+			// to spawn the native datepicker and eventually replace with ADatepicker
+			dateRef.value.showPicker()
+		}
 	}
 }
 </script>

aform/src/components/form/ADatePicker.vue

@@ -2,9 +2,9 @@
 	<div class="adatepicker" tabindex="0" ref="adatepicker">
 		<table>
 			<tr>
-				<td @click="previousMonth" :tabindex="-1">&lt;</td>
+				<td id="previous-month-btn" @click="previousMonth" :tabindex="-1">&lt;</td>
 				<th colspan="5" :tabindex="-1">{{ monthAndYear }}</th>
-				<td @click="nextMonth" :tabindex="-1">&gt;</td>
+				<td id="next-month-btn" @click="nextMonth" :tabindex="-1">&gt;</td>
 			</tr>
 			<tr class="days-header">
 				<td>M</td>
@@ -18,6 +18,7 @@
 			<tr v-for="rowNo in numberOfRows" :key="rowNo">
 				<td
 					v-for="colNo in numberOfColumns"
+					ref="celldate"
 					:key="getCurrentCell(rowNo, colNo)"
 					:contenteditable="false"
 					:spellcheck="false"

aform/src/components/form/ADropdown.vue

@@ -10,6 +10,7 @@
 				@keydown.down="onArrowDown"
 				@keydown.up="onArrowUp"
 				@keydown.enter="onEnter" />
+
 			<ul id="autocomplete-results" v-show="isOpen" class="autocomplete-results">
 				<li class="loading autocomplete-result" v-if="isLoading">Loading results...</li>
 				<li
@@ -27,111 +28,95 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-export default defineComponent({
-	name: 'ADropdown',
-	props: {
-		modelValue: {
-			type: String,
-			required: false,
-			default: '',
-		},
-		label: {
-			type: String,
-			required: true,
-		},
-		value: String,
-		items: {
-			type: Array,
-			required: false,
-			default: () => [],
-		},
-		isAsync: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-	},
-	emits: ['update:modelValue', 'filterChanged'],
-	data() {
-		return {
-			results: [],
-			search: this.modelValue,
-			isLoading: false,
-			arrowCounter: 0,
-			isOpen: false,
-		}
-	},
-	watch: {
-		items: function (value, oldValue) {
-			this.isLoading = false
-			this.results = value
-		},
-	},
-	mounted() {
-		document.addEventListener('click', this.handleClickOutside)
-		this.filterResults()
-	},
-	destroyed() {
-		document.removeEventListener('click', this.handleClickOutside)
-	},
-	methods: {
-		setResult(result) {
-			this.search = result
-			this.closeResults()
-		},
-		filterResults() {
-			this.results = this.items.filter(item => {
-				return item.toLowerCase().indexOf(this.search.toLowerCase()) > -1
-			})
-		},
-		onChange() {
-			this.isOpen = true
-			if (this.isAsync) {
-				this.isLoading = true
-				this.$emit('filterChanged', this.search)
-			} else {
-				this.filterResults()
-			}
-		},
-		handleClickOutside(event) {
-			if (!this.$el.contains(event.target)) {
-				this.closeResults()
-				this.arrowCounter = 0
-			}
-		},
-		closeResults() {
-			this.isOpen = false
-
-			if (!this.items.includes(this.search)) {
-				this.search = ''
-			}
-
-			this.$emit('update:modelValue', this.search)
-		},
-		onArrowDown() {
-			if (this.arrowCounter < this.results.length) {
-				this.arrowCounter = this.arrowCounter + 1
-			}
-		},
-		onArrowUp() {
-			if (this.arrowCounter > 0) {
-				this.arrowCounter = this.arrowCounter - 1
-			}
-		},
-		onEnter() {
-			this.search = this.results[this.arrowCounter]
-			this.closeResults()
-			this.arrowCounter = 0
-		},
-		openWithSearch() {
-			this.search = ''
-			this.onChange()
-			this.$refs.mopInput.focus()
-		},
-	},
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue'
+
+const props = defineProps<{
+	label: string
+	items?: string[]
+	isAsync?: boolean
+}>()
+
+const emit = defineEmits(['filterChanged'])
+
+const results = ref(props.items)
+const search = defineModel<string>()
+const isLoading = ref(false)
+const arrowCounter = ref(0)
+const isOpen = ref(false)
+const mopInput = ref(null)
+
+onMounted(() => {
+	document.addEventListener('click', handleClickOutside)
+	filterResults()
+})
+
+onUnmounted(() => {
+	document.removeEventListener('click', handleClickOutside)
 })
+
+const setResult = result => {
+	search.value = result
+	closeResults()
+}
+
+const filterResults = () => {
+	if (!search.value) {
+		results.value = props.items
+	} else {
+		results.value = props.items.filter(item => {
+			return item.toLowerCase().indexOf(search.value.toLowerCase()) > -1
+		})
+	}
+}
+
+const onChange = () => {
+	isOpen.value = true
+	if (props.isAsync) {
+		isLoading.value = true
+		emit('filterChanged', search.value)
+	} else {
+		filterResults()
+	}
+}
+
+const handleClickOutside = (event: MouseEvent) => {
+	closeResults()
+	arrowCounter.value = 0
+}
+
+const closeResults = () => {
+	isOpen.value = false
+
+	// TODO: (test) when would this occur? how should this be tested?
+	if (!props.items.includes(search.value)) {
+		search.value = ''
+	}
+}
+
+const onArrowDown = () => {
+	if (arrowCounter.value < results.value.length) {
+		arrowCounter.value = arrowCounter.value + 1
+	}
+}
+
+const onArrowUp = () => {
+	if (arrowCounter.value > 0) {
+		arrowCounter.value = arrowCounter.value - 1
+	}
+}
+
+const onEnter = () => {
+	search.value = results.value[arrowCounter.value]
+	closeResults()
+	arrowCounter.value = 0
+}
+
+// const openWithSearch = () => {
+// 	search.value = ''
+// 	onChange()
+// 	mopInput.value.focus()
+// }
 </script>
 
 <style>

aform/src/components/form/AFieldset.vue

@@ -25,8 +25,8 @@ const props = defineProps<{
 }>()
 
 const formData = ref(props.data || [])
-let collapsed = ref(false)
-let collapsible = ref(props.collapsible)
+const collapsed = ref(false)
+const collapsible = ref(props.collapsible)
 
 const formSchema = ref(props.schema)
 function toggleCollapse(event: Event) {