done jumpToFirst tests

Author: smastrom

tests/App.cy.ts

@@ -38,15 +38,33 @@ it('Should not jump to last target', () => {
 		.should('not.have.class', 'active');
 });
 
-it('Should set active clicked links without scroll interferences', () => {
-	const targetsLength = 20;
+it('Should jump to first target', () => {
+	cy.mount(App, {
+		props: {
+			jumpToFirst: true,
+			marginTop: 300,
+		},
+	});
 
+	cy.get('a').eq(0).should('have.class', 'active');
+});
+
+it('Should not jump to first target', () => {
 	cy.mount(App, {
 		props: {
-			targetsLength,
+			jumpToFirst: false,
+			marginTop: 300,
 		},
 	});
 
+	cy.get('a').eq(0).should('not.have.class', 'active');
+});
+
+it('Should set active clicked links without scroll interferences', () => {
+	const targetsLength = 20;
+
+	cy.mount(App);
+
 	const randomIndices = getRandomSequence(targetsLength);
 
 	randomIndices.forEach((index) => {
@@ -57,12 +75,9 @@ it('Should set active clicked links without scroll interferences', () => {
 });
 
 it('Should update targets on cancel while scrolling from click', () => {
-	const targetsLength = 20;
-
 	cy.mount(App, {
 		props: {
 			jumpToLast: true,
-			targetsLength,
 		},
 	});
 
@@ -78,9 +93,3 @@ it('Should update targets on cancel while scrolling from click', () => {
 		cy.wait(1000);
 	}
 });
-
-/* it('Should jump to first target', () => {});
-
-it('Should jump to last target', () => {});
-
-it('Should toggle functionalities below minWidth', () => {}); */

tests/App.vue

@@ -4,21 +4,23 @@ import { useFakeData } from '../demo/useFakeData';
 import { useActive } from '../src/useActive';
 
 const props = defineProps<{
-	targetsLength: number;
 	jumpToLast: boolean;
+	jumpToFirst: boolean;
+	marginTop: number;
 }>();
 
-const { sections, menuItems } = useFakeData(props.targetsLength);
+const { sections, menuItems } = useFakeData(20);
 
 const targets = computed(() => sections.map(({ id }) => id));
 const { setActive, isActive } = useActive(targets, {
 	jumpToLast: props.jumpToLast,
+	jumpToFirst: props.jumpToFirst,
 });
 </script>
 
 <template>
 	<div class="Wrapper">
-		<div class="Content">
+		<div class="Content" :style="`margin-top: ${marginTop || 0}px`">
 			<section v-for="section in sections" :key="section.id">
 				<h1 :id="section.id">{{ section.title }}</h1>
 				<p>{{ section.text }}</p>