video.js issue with an element not visible in the test suite

[vlad-platformq]

Missing elements from wrapper

We are using video.js and are pragmatically "hiding" elements if a condition passes. Apparently, one of the classes is not visible by the test suite.

Steps to reproduce

create a video component with this as the logic

    <template>
         <video
             ref="video"
             class="video-js vjs-big-play-centered"
             playsinline
          />
   </template>

<script lang="ts">
    @Ref('video') video!: HTMLVideoElement
   
   mounted() {
     this.player = videojs(this.video)
     const htmlPlayer = (this.player as any).el_
     htmlPlayer.getElementsByClassName('vjs-progress-control')[0].style.visibility = 'hidden'
      // this line will throw
      htmlPlayer.getElementsByClassName('vjs-picture-in-picture-control')[0].style.display = 'none'
   }
</script>

shallowMount the component in a unit test

Expected behaviour

The element should be visible in the test suite

Actual behaviour

When using wrapper.html() the element with that classname does not exist

in addition the test fails with this error

    TypeError: Cannot read property 'style' of undefined

      138 |     /* istanbul ignore next */
      139 |     if (this.disablePip === 'true') {
    > 140 |       htmlPlayer.getElementsByClassName('vjs-picture-in-picture-control')[0].style.display = 'none'
          | ^
      141 |     }

Possible Solution

I tried creating the element with that specified classname, but was unseccessful

[ebisbe]

@vlad-platformq can you provide a proper reproduction link in a repository or codesandbox so we can have a look easier?