테스트에서 vue.js 전환을 비활성화하려면 어떻게 해야 합니까?

테스트에서 vue.js 전환을 비활성화하려면 어떻게 해야 합니까?

vue.js 컴포넌트를 사용하여<transition>숨김/표시할 요소를 선택합니다.

테스트 속도를 높이기 위해 애니메이션을 해제하고 싶습니다.내가 어떻게 그럴 수 있을까?

* { transition: none !important }https://github.com/vuejs/vue/issues/463 를 추천합니다만, 그 차이는 없는 것 같습니다.

여기에 바이올린을 만들었습니다.https://jsfiddle.net/z11fe07p/2268/

"test"를 실행하면 마지막 출력은 "3"입니다.표시는 "없음"이어야 합니다. 즉, "블록"입니다.타임아웃을 100으로 늘리거나<transition>"3"의 예상 출력을 얻을 수 있습니다.디스플레이는 "없음"이어야 합니다. 즉, "없음"입니다.

그럼 어떻게 하면 애니메이션을 비활성화 시킬 수 있을까요?setTimeout전화요?

편집:

모든 css 스타일링을 제거하려고 했지만 여전히 문제가 있습니다.이 문제는 단순히 이 시스템이<transition>요소.

편집 2:

바이올린을 업데이트하여 스타일링 없이<transition>요소.전화도 포함되어 있습니다.$nextTick()그게 이상한 행동을 한 이유가 아닌지 확인하려고요

콜을 로 변경합니다.wait100로.wait10그 대신에, 테스트가 실패하기 시작하는 것을 알 수 있습니다.

https://jsfiddle.net/z11fe07p/2270/

편집 3:

누구나 쉽게 다룰 수 있도록 예제 코드를 여기에 입력:)

new Vue({
  el: '#app',
  template: `
    <span>
      <button @click="test()">Run test</button>
      <transition>
        <p v-show="show">Hello, world!</p>
      </transition>
    </span>
  `,
  data() {
    return {
      show: false,
    };
  },
  methods: {
    test() {
      const wait10 = _ => new Promise(resolve => setTimeout(resolve, 10));
      const wait100 = _ => new Promise(resolve => setTimeout(resolve, 100));
      const showParagraph = _ => this.show = true;
      const hideParagraph = _ => this.show = false;
      const p = document.querySelector('p');

      showParagraph();

      this.$nextTick()
        .then(wait10)
        .then(() => {
          const display = getComputedStyle(p).display;
          assertEqual(display, 'block');
        })
        .then(hideParagraph)
        .then(this.$nextTick)
        .then(wait100)
        .then(() => {
          const display = getComputedStyle(p).display;
          assertEqual(display, 'none');
        });
    }
  }
});

function assertEqual(a, b) { 
  if (a !== b) {
    console.error('Expected "' + a + '" to equal "' + b + '"');
  }
};

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app"></div>

나는 근본적으로 모든 내 모든 것을 바꾼다.transition그리고.transition-groupenv가 다음과 같은 경우 렌더링 기능을 가진 div로 s를 변환합니다.testing.

if (process.env.NODE_ENV === 'testing') {
  const div = {
    functional: true,
    render: (h, { data, children }) => h('div', data, children),
  }

  Vue.component('transition', div)
  Vue.component('transition-group', div)
}

나는 이 문제에 부딪쳤다<transition-group>저의 해결책은 다음 코드를 사용하여 테스트 중에 교체하는 것이었습니다.

Vue.component('transition-group', {
    props: ['tag'],
    render(createElement) {
        return createElement(this.tag || this.$vnode.data.tag || 'span', this.$slots.default);
    },
});

이 정도만 돌리면 됩니다.<transition-group>의 거울에 비추어<slot>(옵션으로 다이내믹하게 정의된 태그)를 사용합니다.

저도 아마 같은 일을 해야 할 것 같습니다.<transition>만약 그렇다면, 더 쉬울지도 몰라요.<transition>태그 받침이 없습니다.

테스트를 나타내도록 Vue에 변수를 설정하고 테스트 중인 경우 전환 후크를 중단하도록 설정할 수 있습니다.

예를 들어, 확인란을 사용하여 테스트 변수의 값을 제어할 수 있습니다.첫 번째 테스트 결과는 어떤 일이 일어나기 전의 상태를 나타내므로 이전 주행의 세 번째 테스트 결과와 동일합니다.그 외에는 매번 테스트 스위치를 뒤집어 예상 결과를 얻을 수 있습니다.

fade Transition을 슬롯이 있는 다른 컴포넌트로 분리하기 위해 코드를 수정했지만 템플릿에 추가된 마크업을 삭제할 방법은 찾지 못했습니다.

new Vue({
  el: '#app',
  template: `
    <span>
      <input type="checkbox" v-model="Vue.testing"> Testing<br>
      <button @click="test()">Run test</button>
      <fade-transition>
        <p id="transition" v-show="show">Hello, world!</p>
      </fade-transition>
    </span>
  `,
  components: {
    fadeTransition: {
      template: `
      <transition name="fade"
        @enter="killTransition"
        @leave="killTransition"
      ><slot></slot>
      </transition>
      `,
      methods: {
        killTransition(el, done) {
          if (Vue.testing) done();
        }
      }
    }
  },
  data() {
    return {
      show: false,
      testing: true
    };
  },
  methods: {
    test() {
      const p = document.querySelector('#transition');

      let display = getComputedStyle(p).display;
      console.log('1. Display should be "none", it is:', display);

      this.show = true;
      this.$nextTick(() => {
        display = getComputedStyle(p).display;
        console.log('2. Display should be "block", it is:', display);

        this.show = false;

        this.$nextTick(() => {
          display = getComputedStyle(p).display;
          console.log('3. Display should be "none", it is:', display);
        });
      });
    }
  }
});

.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0
}

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app"></div>

사용 사례는 약간 달랐지만 요건은 동일했습니다.모바일 화면에서 특정 전환 효과를 비활성화하고자 했습니다.

제 해결책은 그냥 컴포넌트로 감싸는 것이었습니다.이것은 테스트에도 유효합니다('disable'이 process.env와 같이 설정되어 있는 경우).NODE_ENV === '오류').

<template>
  <transition v-if="!disable" :name="name" :mode="mode">
    <slot></slot>
  </transition>
  <div v-else>
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    disable: Boolean,
    name: String,
    mode: String,
  },
};
</script>

순수하게 테스트하기 위해서라면, 저는 빌 크리스웰의 대답이 아마도 가장 깨끗하다고 생각합니다.

가장 쉬운 테스트 방법은 아니지만 다른 시나리오에서는 v-bind를 사용하여 CSS 전환이 연결되지 않은 전환 이름을 바인딩하는 것을 고려할 수 있습니다.

v-var:name="my-var"

this.myVar = "없음"

언급URL : https://stackoverflow.com/questions/44826850/how-do-i-disable-vue-js-transitions-for-tests