feat(core): basic unit test for raycasters

packages/tres/package.json

@@ -60,6 +60,7 @@
     "@vitest/ui": "^0.28.5",
     "@vue/test-utils": "^2.3.0",
     "happy-dom": "^8.7.1",
+    "jsdom": "^21.1.0",
     "kolorist": "^1.7.0",
     "pathe": "^1.1.0",
     "rollup-plugin-analyzer": "^4.0.0",

packages/tres/src/App.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { CameraType, useCamera } from './core'
 import TheEnvironment from '/@/components/TheEnvironment.vue'
 </script>
 
 <template>
   <Suspense>
-    <!--   <TheEnvironment /> -->
+    <TheEnvironment />
   </Suspense>
 </template>

packages/tres/src/components/TheExperience.vue

@@ -15,9 +15,14 @@ import {
 } from 'three'
 import { reactive, ref } from 'vue'
 import { OrbitControls, useTweakPane, TransformControls } from '../../../cientos/src/'
+import { useCamera } from '../core'
 import { TresCanvas } from '../core/useRenderer/component'
 /* import { OrbitControls, GLTFModel } from '@tresjs/cientos' */
 
+const { updateCamera } = useCamera()
+
+updateCamera
+
 const state = reactive({
   clearColor: '#201919',
   shadows: true,

packages/tres/src/core/useRaycaster/index.ts

@@ -1,12 +1,42 @@
 import { Raycaster, Vector2 } from 'three'
-import { onUnmounted, provide, ref, shallowRef } from 'vue'
+import { onUnmounted, provide, Ref, ref, ShallowRef, shallowRef } from 'vue'
 import { useTres } from '/@/core'
 
 const raycaster = shallowRef(new Raycaster())
 const pointer = ref(new Vector2())
 const currentInstance = ref(null)
 
-export function useRaycaster() {
+/**
+ * Raycaster composable return type
+ *
+ * @export
+ * @interface UseRaycasterReturn
+ */
+export interface UseRaycasterReturn {
+  /**
+   * Raycaster instance
+   *
+   * @type {ShallowRef<Raycaster>}
+   * @memberof UseRaycasterReturn
+   */
+  raycaster: ShallowRef<Raycaster>
+  /**
+   * Pointer position
+   *
+   * @type {Ref<Vector2>}
+   * @memberof UseRaycasterReturn
+   */
+  pointer: Ref<Vector2>
+}
+
+/**
+ * Composable to provide raycaster support and pointer information
+ *
+ * @see https://threejs.org/docs/index.html?q=raycas#api/en/core/Raycaster
+ * @export
+ * @return {*} {UseRaycasterReturn}
+ */
+export function useRaycaster(): UseRaycasterReturn {
   const { setState } = useTres()
   setState('raycaster', raycaster.value)
   setState('pointer', pointer)

packages/tres/src/core/useRaycaster/useRaycaster.test.ts

@@ -0,0 +1,22 @@
+import { Raycaster, Vector2 } from 'three'
+import { useRaycaster } from '.'
+import { withSetup } from '/@/utils/test-utils'
+import { Window } from 'happy-dom'
+
+const [composable, app] = withSetup(() => useRaycaster())
+
+describe('useRaycaster', () => {
+  afterEach(() => {
+    app.unmount()
+  })
+  test('provides raycaster', () => {
+    const { raycaster } = composable
+    expect(raycaster).toBeDefined()
+    expect(raycaster.value).toBeInstanceOf(Raycaster)
+  })
+  test('provides pointer', () => {
+    const { pointer } = composable
+    expect(pointer).toBeDefined()
+    expect(pointer.value).toBeInstanceOf(Vector2)
+  })
+})

packages/tres/vite.config.ts

@@ -43,7 +43,7 @@ export default defineConfig({
     Inspect(),
   ],
   test: {
-    environment: 'happy-dom',
+    environment: 'jsdom',
     globals: true,
     threads: false,
     alias: {