Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

@cypress/vue - Global component does only include CSS in first test #19721

Closed
netfly opened this issue Jan 15, 2022 · 4 comments · Fixed by #21291
Closed

@cypress/vue - Global component does only include CSS in first test #19721

netfly opened this issue Jan 15, 2022 · 4 comments · Fixed by #21291
Labels
CT Issue related to component testing

Comments

@netfly
Copy link

netfly commented Jan 15, 2022

Current behavior

I use a global component for my FontAwesomeIcon (@fortawesome/vue-fontawesome).

When I import component and configure it in my mount statement then the CSS of this Component is only available in my first Test. All other test will miss the CSS.

Only when I import the CSS file directly, then it's available in all tests.

Desired behavior

The CSS should be loaded in all tests.

Test code to reproduce

import Sidebar from '@/components/ui/Sidebar.vue'
import { mount } from '@cypress/vue'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

import router from '@/router/index'
import i18n from '@/lib/i18n'
import { createPinia } from 'pinia'

import '@/styles/index.css'
// import '@fortawesome/fontawesome-svg-core/styles.css'

function wrapperFactory() {
  const pinia = createPinia()

  return mount(Sidebar, {
    extensions: {
      components: {
        FontAwesomeIcon: FontAwesomeIcon,
      },
      plugins: [i18n, pinia, router]
    }
  })
}

it('Sidebar is visible', () => {
  wrapperFactory()
    .get('#sidebar .sidebar')
    .should('be.visible')
})

it('Toggle Sidebar', () => {
  const wrapper = wrapperFactory()

  // open sidebar
  wrapper
    .get('#sidebar .toggle-button')
    .click()

  wrapper
    .get('#sidebar .sidebar')
    .invoke('outerWidth')
    .should('be.gt', 100)

  // close sidebar
  wrapper
    .get('#sidebar .toggle-button')
    .click()

  wrapper
    .get('#sidebar .sidebar')
    .invoke('outerWidth')
    .should('be.lt', 100)
})

Cypress Version

9.2.1

Other

"@cypress/vite-dev-server": "^2.2.2",
"@cypress/vue": "^3.1.0",
"cypress": "^9.2.1",
"vite": "^2.7.10",
"vue": "^3.2.26",
@tbiethman tbiethman added stage: needs investigating Someone from Cypress needs to look at this component testing labels Jan 25, 2022
@littlejon85
Copy link

I work around this problem by importing the styles in support/index.ts.

@cypress-bot cypress-bot bot added stage: backlog and removed stage: needs investigating Someone from Cypress needs to look at this labels Apr 29, 2022
@Akryum
Copy link
Contributor

Akryum commented May 2, 2022 •
edited
Loading

It affects local components too. This is caused by the <head>'s innerHTML being reset here:

cypress/npm/vue/src/index.ts

Line 67 in 2d866f3

document.head.innerHTML = initialInnerHtml

Which overrides the new <style> elements created by Vite when additional components are loaded.

https://github.com/vitejs/vite/blob/bf40e5c88db4281b035f67d1789cccf66333ce23/packages/vite/src/node/plugins/css.ts#L339-L350

https://github.com/vitejs/vite/blob/bf40e5c88db4281b035f67d1789cccf66333ce23/packages/vite/src/client/client.ts#L237-L269

Akryum added a commit to Akryum/cypress that referenced this issue May 2, 2022
@Akryum
fix: head content reset, fix cypress-io#19721
3b16afd
@Akryum Akryum mentioned this issue May 2, 2022
Closed
5 tasks
@cypress-bot cypress-bot bot added stage: needs review The PR code is done & tested, needs review and removed stage: backlog labels May 2, 2022
@Akryum Akryum mentioned this issue May 2, 2022
Merged
5 tasks
@cypress-bot cypress-bot bot added stage: pr in progress and removed stage: needs review The PR code is done & tested, needs review labels May 2, 2022
ZachJW34 pushed a commit that referenced this issue May 2, 2022
@Akryum @ZachJW34
fix: head content reset, fix #19721
418ce34
Akryum added a commit to Akryum/cypress that referenced this issue May 2, 2022
@Akryum
fix: head content reset, fix cypress-io#19721
7fb9ef9
@cypress-bot
Copy link
Contributor

cypress-bot bot commented May 3, 2022

The code for this is done in cypress-io/cypress#21291, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

ZachJW34 added a commit that referenced this issue May 3, 2022
@Akryum @ZachJW34
fix: head content reset, fix #19721 (#21291)
77ab6a5 
Co-authored-by: Zachary Williams <ZachJW34@gmail.com>
@Akryum
Copy link
Contributor

Akryum commented May 4, 2022

I can confirm the issue is resolved for me with @cypress/vue@3.1.2. 🙌

@mjhenkes mjhenkes closed this as completed May 4, 2022
@lmiller1990 lmiller1990 added CT Issue related to component testing and removed component testing labels Aug 15, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
CT Issue related to component testing
Projects
None yet
Milestone
No milestone
7 participants
@netfly @mjhenkes @tbiethman @Akryum @ryanthemanuel @littlejon85 @lmiller1990