Skip to content
Merged
Show file tree
Hide file tree
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ jobs:

strategy:
matrix:
node-version: [18.x, 20.x, 22.x]
node-version: [20.x, 22.x]

steps:
- uses: actions/checkout@v4
Expand Down
16 changes: 9 additions & 7 deletions .github/workflows/publish.yml
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@ on:
release:
types: [created]

permissions:
contents: read
id-token: write

jobs:
publish:
runs-on: ubuntu-latest

permissions:
contents: read
id-token: write

steps:
- uses: actions/checkout@v4

Expand All @@ -22,6 +22,10 @@ jobs:
registry-url: 'https://registry.npmjs.org'
cache: 'npm'

# Ensure npm 11.5.1 or later is installed
- name: Update npm
run: npm install -g npm@latest

- name: Install dependencies
run: npm ci

Expand All @@ -32,6 +36,4 @@ jobs:
run: npm run build

- name: Publish to NPM
run: npm publish --provenance --access public
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
run: npm publish --access public
1 change: 1 addition & 0 deletions .nvmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
20.19.5
54 changes: 40 additions & 14 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,32 @@ Build the TypeScript source to JavaScript:
npm run build
```

### Local testing of stub functions using another project

Ensure package is not already installed in the project testing the changes.

```bash
npm uninstall @sourceallies/vue-testing-library-stubs
```

Ensure Vue Testing Library Stubs project is using the same node version as the project testing the changes.

```bash
node -v
```

Create a symlink for the project testing the changes to connect to.

```bash
npm link
```

In project testing the changes link the package

```bash
npm link @sourceallies/vue-testing-library-stubs
```

The compiled output will be in the `dist/` directory.

### Project Structure
Expand All @@ -70,7 +96,7 @@ Create a simple stub component for testing:

```typescript
import { mount } from '@vue/test-utils';
import { getStub } from 'vue-testing-library-stubs';
import { getStub } from '@sourceallies/vue-testing-library-stubs';

const wrapper = mount(MyParentComponent, {
global: {
Expand All @@ -88,7 +114,7 @@ expect(wrapper.text()).toContain('ChildComponent-stub');

```typescript
import { render, screen } from '@testing-library/vue';
import { getStub } from 'vue-testing-library-stubs';
import { getStub } from '@sourceallies/vue-testing-library-stubs';

render(MyParentComponent, {
global: {
Expand All @@ -110,7 +136,7 @@ Test components that pass props to child components:

```typescript
import { mount } from '@vue/test-utils';
import { getStubWithProps } from 'vue-testing-library-stubs';
import { getStubWithProps } from '@sourceallies/vue-testing-library-stubs';

const wrapper = mount(MyParentComponent, {
global: {
Expand All @@ -129,7 +155,7 @@ expect(wrapper.text()).toContain('count-42');

```typescript
import { render, screen } from '@testing-library/vue';
import { getStubWithProps } from 'vue-testing-library-stubs';
import { getStubWithProps } from '@sourceallies/vue-testing-library-stubs';

render(MyParentComponent, {
global: {
Expand All @@ -152,7 +178,7 @@ Test components that listen to child component events:

```typescript
import { mount } from '@vue/test-utils';
import { getEmittingStub } from 'vue-testing-library-stubs';
import { getEmittingStub } from '@sourceallies/vue-testing-library-stubs';

const wrapper = mount(MyParentComponent, {
global: {
Expand All @@ -176,7 +202,7 @@ expect(wrapper.emitted('save')?.[0]).toEqual([{ id: 123 }]);
```typescript
import { render, screen } from '@testing-library/vue';
import userEvent from '@testing-library/user-event';
import { getEmittingStub } from 'vue-testing-library-stubs';
import { getEmittingStub } from '@sourceallies/vue-testing-library-stubs';

const { emitted } = render(MyParentComponent, {
global: {
Expand All @@ -203,7 +229,7 @@ Combine props and event emission:

```typescript
import { mount } from '@vue/test-utils';
import { getEmittingStubWithProps } from 'vue-testing-library-stubs';
import { getEmittingStubWithProps } from '@sourceallies/vue-testing-library-stubs';

const wrapper = mount(MyParentComponent, {
global: {
Expand Down Expand Up @@ -233,7 +259,7 @@ expect(wrapper.emitted('update')?.[0]).toEqual([{ newValue: 'test' }]);
```typescript
import { render, screen } from '@testing-library/vue';
import userEvent from '@testing-library/user-event';
import { getEmittingStubWithProps } from 'vue-testing-library-stubs';
import { getEmittingStubWithProps } from '@sourceallies/vue-testing-library-stubs';

const { emitted } = render(MyParentComponent, {
global: {
Expand Down Expand Up @@ -269,7 +295,7 @@ Test components with multiple event handlers:

```typescript
import { mount } from '@vue/test-utils';
import { getMultiEmittingStubWithProps, type EmittedEvent } from 'vue-testing-library-stubs';
import { getMultiEmittingStubWithProps, type EmittedEvent } from '@sourceallies/vue-testing-library-stubs';

const events: EmittedEvent[] = [
{ name: 'save', value: { id: 1 } },
Expand Down Expand Up @@ -302,7 +328,7 @@ expect(wrapper.emitted('cancel')?.[0]).toEqual([undefined]);
```typescript
import { render, screen } from '@testing-library/vue';
import userEvent from '@testing-library/user-event';
import { getMultiEmittingStubWithProps, type EmittedEvent } from 'vue-testing-library-stubs';
import { getMultiEmittingStubWithProps, type EmittedEvent } from '@sourceallies/vue-testing-library-stubs';

const events: EmittedEvent[] = [
{ name: 'save', value: { id: 1 } },
Expand Down Expand Up @@ -339,7 +365,7 @@ Test parent components that call child validation methods:

```typescript
import { mount } from '@vue/test-utils';
import { getExposedValidateStub } from 'vue-testing-library-stubs';
import { getExposedValidateStub } from '@sourceallies/vue-testing-library-stubs';

const wrapper = mount(MyFormComponent, {
global: {
Expand All @@ -357,7 +383,7 @@ expect(wrapper.text()).toContain('InputComponent-stub-validated-true');

```typescript
import { render, screen } from '@testing-library/vue';
import { getExposedValidateStub } from 'vue-testing-library-stubs';
import { getExposedValidateStub } from '@sourceallies/vue-testing-library-stubs';

render(MyFormComponent, {
global: {
Expand All @@ -379,7 +405,7 @@ Test components that use child component's exposed functions:

```typescript
import { mount } from '@vue/test-utils';
import { getTemplateComponentForExposedFunction } from 'vue-testing-library-stubs';
import { getTemplateComponentForExposedFunction } from '@sourceallies/vue-testing-library-stubs';

const props = { value: 'test', enabled: true };

Expand All @@ -402,7 +428,7 @@ await wrapper.find('button').trigger('click');
```typescript
import { render, screen } from '@testing-library/vue';
import userEvent from '@testing-library/user-event';
import { getTemplateComponentForExposedFunction } from 'vue-testing-library-stubs';
import { getTemplateComponentForExposedFunction } from '@sourceallies/vue-testing-library-stubs';

const props = { value: 'test', enabled: true };

Expand Down
2 changes: 1 addition & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
},
"homepage": "https://github.com/sourceallies/vue-testing-library-stubs#readme",
"engines": {
"node": ">=18.0.0"
"node": ">=20"
},
"peerDependencies": {
"vue": ">=3.0.0"
Expand Down