Skip to content

Commit

Permalink
Add new VueJS 2 tests from inertiajs#1876
Browse files Browse the repository at this point in the history
  • Loading branch information
@jamesst20
jamesst20 committed May 28, 2024
1 parent 22cb8d8 commit 5759b5a
Show file tree
Hide file tree
Showing 5 changed files with 116 additions and 8 deletions.
6 changes: 6 additions & 0 deletions packages/vue3/tests/app/Pages/Links/PartialReloads.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,12 @@
<inertia-link href="/links/partial-reloads" :only="['headers', 'baz']" :data="{ foo }" class="baz"
>'Only' baz</inertia-link
>
<inertia-link href="/links/partial-reloads" :except="['foo', 'bar']" :data="{ foo }" class="except-foo-bar"
>'Except' foo + bar</inertia-link
>
<inertia-link href="/links/partial-reloads" :except="['baz']" :data="{ foo }" class="except-baz"
>'Except' baz</inertia-link
>
</div>
</template>
<script>
Expand Down
38 changes: 38 additions & 0 deletions packages/vue3/tests/app/Pages/Visits/PartialReloads.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,14 @@
<span @click="partialReloadVisit" class="visit">Update All (visit)</span>
<span @click="partialReloadVisitFooBar" class="visit-foo-bar">'Only' foo + bar (visit)</span>
<span @click="partialReloadVisitBaz" class="visit-baz">'Only' baz (visit)</span>
<span @click="partialReloadVisitExceptFooBar" class="visit-except-foo-bar">'Except' foo + bar (visit)</span>
<span @click="partialReloadVisitExceptBaz" class="visit-except-baz">'Except' baz (visit)</span>

<span @click="partialReloadGet" class="get">Update All (GET)</span>
<span @click="partialReloadGetFooBar" class="get-foo-bar">'Only' foo + bar (GET)</span>
<span @click="partialReloadGetBaz" class="get-baz">'Only' baz (GET)</span>
<span @click="partialReloadGetExceptFooBar" class="get-except-foo-bar">'Except' foo + bar (GET)</span>
<span @click="partialReloadGetExceptBaz" class="get-except-baz">'Except' baz (GET)</span>
</div>
</template>
<script>
Expand Down Expand Up @@ -47,6 +51,18 @@ export default {
only: ['headers', 'baz'],
})
},
partialReloadVisitExceptFooBar() {
this.$inertia.visit('/visits/partial-reloads', {
data: { foo: this.foo },
except: ['foo', 'bar'],
})
},
partialReloadVisitExceptBaz() {
this.$inertia.visit('/visits/partial-reloads', {
data: { foo: this.foo },
except: ['baz'],
})
},
partialReloadGet() {
this.$inertia.get('/visits/partial-reloads', {
foo: this.foo,
Expand Down Expand Up @@ -74,6 +90,28 @@ export default {
},
)
},
partialReloadGetExceptFooBar() {
this.$inertia.get(
'/visits/partial-reloads',
{
foo: this.foo,
},
{
except: ['foo', 'bar'],
},
)
},
partialReloadGetExceptBaz() {
this.$inertia.get(
'/visits/partial-reloads',
{
foo: this.foo,
},
{
except: ['baz'],
},
)
},
},
}
</script>
13 changes: 6 additions & 7 deletions packages/vue3/tests/app/helpers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,14 @@ module.exports = {
}

const partialDataHeader = req.headers['x-inertia-partial-data'] || ''
const partialExceptHeader = req.headers['x-inertia-partial-except'] || ''
const partialComponentHeader = req.headers['x-inertia-partial-component'] || ''

const isPartial = partialComponentHeader && partialComponentHeader === data.component

data.props = Object.keys(data.props)
.filter(
(key) =>
!partialComponentHeader ||
partialComponentHeader !== data.component ||
!partialDataHeader ||
partialDataHeader.split(',').indexOf(key) > -1,
)
.filter((key) => !isPartial || !partialDataHeader || partialDataHeader.split(',').indexOf(key) > -1)
.filter((key) => !isPartial || !partialExceptHeader || partialExceptHeader.split(',').indexOf(key) == -1)
.reduce((carry, key) => {
carry[key] = typeof data.props[key] === 'function' ? data.props[key](data.props) : data.props[key]

Expand Down
14 changes: 14 additions & 0 deletions packages/vue3/tests/cypress/integration/links.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1002,6 +1002,20 @@ describe('Links', () => {
cy.get('.bar-text').should('have.text', 'Bar is now 4')
cy.get('.baz-text').should('have.text', 'Baz is now 5')
})

it('it only updates props that are not passed through "except"', () => {
cy.get('.except-foo-bar').click()
cy.url().should('eq', Cypress.config().baseUrl + '/links/partial-reloads')
cy.get('.foo-text').should('have.text', 'Foo is now 1')
cy.get('.bar-text').should('have.text', 'Bar is now 2')
cy.get('.baz-text').should('have.text', 'Baz is now 4')

cy.get('.except-baz').click()
cy.url().should('eq', Cypress.config().baseUrl + '/links/partial-reloads')
cy.get('.foo-text').should('have.text', 'Foo is now 2')
cy.get('.bar-text').should('have.text', 'Bar is now 3')
cy.get('.baz-text').should('have.text', 'Baz is now 4')
})
})

describe('Redirects', () => {
Expand Down
53 changes: 52 additions & 1 deletion packages/vue3/tests/cypress/integration/manual-visits.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1291,7 +1291,7 @@ describe('Manual Visits', () => {
})
})

it('has headers specific to partial reloads', () => {
it('has headers specific to "only" partial reloads', () => {
cy.get('.visit-foo-bar').click()
cy.url().should('eq', Cypress.config().baseUrl + '/visits/partial-reloads')

Expand All @@ -1314,6 +1314,29 @@ describe('Manual Visits', () => {
})
})

it('has headers specific to "except" partial reloads', () => {
cy.get('.visit-except-foo-bar').click()
cy.url().should('eq', Cypress.config().baseUrl + '/visits/partial-reloads')

cy.window().should('have.property', '_inertia_props')
cy.window()
.then((window) => window._inertia_props)
.then(({ headers }) => {
expect(headers).to.contain.keys([
'accept',
'x-requested-with',
'x-inertia',
'x-inertia-partial-component',
'x-inertia-partial-except',
])
expect(headers['accept']).to.eq('text/html, application/xhtml+xml')
expect(headers['x-requested-with']).to.eq('XMLHttpRequest')
expect(headers['x-inertia']).to.eq('true')
expect(headers['x-inertia-partial-except']).to.eq('foo,bar')
expect(headers['x-inertia-partial-component']).to.eq('Visits/PartialReloads')
})
})

it('it updates all props when the feature is not being used', () => {
cy.get('.visit').click()
cy.url().should('eq', Cypress.config().baseUrl + '/visits/partial-reloads')
Expand Down Expand Up @@ -1342,6 +1365,20 @@ describe('Manual Visits', () => {
cy.get('.bar-text').should('have.text', 'Bar is now 4')
cy.get('.baz-text').should('have.text', 'Baz is now 5')
})

it('it only updates props that are not passed through "except"', () => {
cy.get('.visit-except-foo-bar').click()
cy.url().should('eq', Cypress.config().baseUrl + '/visits/partial-reloads')
cy.get('.foo-text').should('have.text', 'Foo is now 1')
cy.get('.bar-text').should('have.text', 'Bar is now 2')
cy.get('.baz-text').should('have.text', 'Baz is now 4')

cy.get('.visit-except-baz').click()
cy.url().should('eq', Cypress.config().baseUrl + '/visits/partial-reloads')
cy.get('.foo-text').should('have.text', 'Foo is now 2')
cy.get('.bar-text').should('have.text', 'Bar is now 3')
cy.get('.baz-text').should('have.text', 'Baz is now 4')
})
})

describe('GET-method', () => {
Expand Down Expand Up @@ -1408,6 +1445,20 @@ describe('Manual Visits', () => {
cy.get('.bar-text').should('have.text', 'Bar is now 4')
cy.get('.baz-text').should('have.text', 'Baz is now 5')
})

it('it only updates props that are not passed through "except"', () => {
cy.get('.get-except-foo-bar').click()
cy.url().should('eq', Cypress.config().baseUrl + '/visits/partial-reloads')
cy.get('.foo-text').should('have.text', 'Foo is now 1')
cy.get('.bar-text').should('have.text', 'Bar is now 2')
cy.get('.baz-text').should('have.text', 'Baz is now 4')

cy.get('.get-except-baz').click()
cy.url().should('eq', Cypress.config().baseUrl + '/visits/partial-reloads')
cy.get('.foo-text').should('have.text', 'Foo is now 2')
cy.get('.bar-text').should('have.text', 'Bar is now 3')
cy.get('.baz-text').should('have.text', 'Baz is now 4')
})
})
})

Expand Down

0 comments on commit 5759b5a

Please sign in to comment.