Improve value stream form spec jest tests

Description

Currently the jest tests in ee/spec/frontend/analytics/cycle_analytics/components/value_stream_form_spec.js rely on checking the wrapper.vm object for correct values.

This goes against our testing guidelines of don't test the library. We should instead test against the rendered output and make use of finders where it makes sense.

Implementation Guide

• Replace wrapper.vm.$nextTick() calls with nextTick()
• Convert tests that rely on emitted events to use async/await
• Introduce additional finders for selecting stages, for example

const findDefaultStages = () => wrapper.findAllComponents(DefaultStageFields);
const findCustomStages = () => wrapper.findAllComponents(CustomStageFields);

For example:

diff --git a/ee/spec/frontend/analytics/cycle_analytics/components/value_stream_form_spec.js b/ee/spec/frontend/analytics/cycle_analytics/components/value_stream_form_spec.js
index 199362d8ff9..ffe93f56553 100644
--- a/ee/spec/frontend/analytics/cycle_analytics/components/value_stream_form_spec.js
+++ b/ee/spec/frontend/analytics/cycle_analytics/components/value_stream_form_spec.js
@@ -1,6 +1,7 @@
 import { GlModal, GlFormInput } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
+import { nextTick } from 'vue';
 import Vuex from 'vuex';
 import {
   i18n,
@@ -116,6 +117,9 @@ describe('ValueStreamForm', () => {
   const expectStageTransitionKeys = (stages) =>
     stages.forEach((stage) => expect(stage.transitionKey).toContain('stage-'));
 
+  const findDefaultStages = () => wrapper.findAllComponents(DefaultStageFields);
+  const findCustomStages = () => wrapper.findAllComponents(CustomStageFields);
+
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
@@ -139,16 +143,20 @@ describe('ValueStreamForm', () => {
         expect(findPresetSelector().exists()).toBe(true);
       });
 
-      it('will toggle between the blank and default templates', () => {
-        expect(wrapper.vm.stages).toHaveLength(defaultStageConfig.length);
+      it('will toggle between the blank and default templates', async () => {
+        // we can check the length of the wrappers instead of the internal `vm.stages` field
+        expect(findDefaultStages()).toHaveLength(defaultStageConfig.length);
+        expect(findCustomStages()).toHaveLength(0);
 
-        findPresetSelector().vm.$emit('input', PRESET_OPTIONS_BLANK);
+        await findPresetSelector().vm.$emit('input', PRESET_OPTIONS_BLANK);
 
-        expect(wrapper.vm.stages).toHaveLength(1);
+        // check the length of the wrappers
+        expect(findDefaultStages()).toHaveLength(0);
+        expect(findCustomStages()).toHaveLength(1);
 
-        findPresetSelector().vm.$emit('input', PRESET_OPTIONS_DEFAULT);
+        await findPresetSelector().vm.$emit('input', PRESET_OPTIONS_DEFAULT);
 
-        expect(wrapper.vm.stages).toHaveLength(defaultStageConfig.length);
+        expect(findDefaultStages()).toHaveLength(defaultStageConfig.length);
       });
     });
 

Background

The following discussion from !55133 (merged) should be addressed:

• @oregand started a discussion: (+1 comment)

  thought

  It would be cool to check the IO of the component here instead of accessing wrapper.vm, but this was not introduced in this merge so it's not a blocker for this work 😄

  const findStages ....
  const findNameErrors ....
  
  expect(findNameErrors()).toBe('Name is required');
  expect(findNameErrors().at(0)).toHaveLength(1);
  ...etc