fix(vitest): add more QLayout injections (fix #269)

[mpont91]

What kind of change does this PR introduce? (check at least one)

• [x] Bugfix
• [ ] New test runner
• [ ] Documentation
• [ ] Feature
• [ ] Code style update
• [ ] Refactor
• [ ] Build-related changes
• [ ] Other, please describe:

If you are adding a new test runner, have you...? (check all)

• [ ] Created an issue first?
• [ ] Registered it in /packages/base/runners.json?
• [ ] Added it to /README.md?
• [ ] Included one test that runs baseline.spec.vue?
• [ ] Added and updated documentation?
• [ ] Included a recipe folder with properly building quasar project?

Does this PR introduce a breaking change? (check one)

• [ ] Yes
• [x] No

If yes, please describe the impact and migration path for existing applications:

The PR fulfills these requirements:

• [x] It's submitted to the dev branch and not the master branch
• [x] When resolving a specific issue, it's referenced in the PR's title (e.g. fix: #xxx[,#xxx], where "xxx" is the issue number)
• [ ] It's been tested on Windows
• [ ] It's been tested on Linux
• [x] It's been tested on MacOS
• [ ] Any necessary documentation has been added or updated in the docs (for faster update click on "Suggest an edit on GitHub" at bottom of page) or explained in the PR's description.

If adding a new feature, the PR's description includes:

• [ ] A convincing reason for adding this feature (to avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it)

Other information:

[IlCallo]

Thanks for contributing 😁

If you have some spare time, could you add a test into test-app-vite project which verifies that the problem is solved, based on your use case? I'll take care of moving it into Vitest AE scaffolding templates so everyone have that example ready when installing the AE

We started adding tests recently and it could be beneficial for everyone if every fix we land has a corresponding test, to avoid regressions

[mpont91]

Thanks for contributing 😁

If you have some spare time, could you add a test into test-app-vite project which verifies that the problem is solved, based on your use case? I'll take care of moving it into Vitest AE scaffolding templates so everyone have that example ready when installing the AE

We started adding tests recently and it could be beneficial for everyone if every fix we land has a corresponding test, to avoid regressions

Yes of course, I've updated the existing commit.

The thing is, if the component tested already includes the QLayoutcomponent as a parent, it doesn't need these injections I commited. But in my use case I have isolated components that make the entire layout of my application.

So when I test them, I need to test a component which only uses QHeader or QFooter components.

For this reason I created an example component LayoutComponent which has QHeader and QFooter without QLayout.

If you think should be properly to create two tests: HeaderComponent and FooterComponent I'll do it 😄

[Evertvdw]

@mpont91 Thanks for the PR. I checked it out, I still got some Vue warnings in the output of watcher not being able to watch objects. The keys you define with { value : ... } should be a ref instead, because Quasar is also watching some of those values. You can just import ref from 'vue' at the top inside the file like this:

import { vi } from 'vitest';
import { ref } from 'vue';

/**
 * Injections for Components with a QPage root Element
 */
export function qLayoutInjections() {
  return {
    // pageContainerKey
    _q_pc_: true,
    // layoutKey
    _q_l_: {
      header: { size: 0, offset: 0, space: false },
      right: { size: 300, offset: 0, space: false },
      footer: { size: 0, offset: 0, space: false },
      left: { size: 300, offset: 0, space: false },
      isContainer: ref(false),
      view: ref('lHh Lpr lff'),
      rows: ref({ top: 'lHh', middle: 'Lpr', bottom: 'lff' }),
      height: ref(900),
      instances: {},
      update: vi.fn(),
      animate: vi.fn(),
      totalWidth: ref(1200),
      scroll: ref({ position: 0, direction: 'up' }),
      scrollbarWidth: ref(125),
    },
  };
}

Doing this also requires adding "skipLibCheck": true to the compilerOptions inside tsconfig.json of the unit-vitest package, otherwise I got some errors on Vue types when compiling there. Can you make those changes in your PR, other than that it's ok with me. @IlCallo you agree?

[mpont91]

Hi @Evertvdw, actually I've already tried to define these values with refs but I got an error while compiling and didn't know how to solve it. I will try it with "skipLibCheck": true. Thanks!