mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
Merge pull request #2577 from gradido/2560-style-and-design-send-link
refactor(frontend): link send result style
This commit is contained in:
Alexander Friedland
GitHub
commit
d7c970063f
2
.github/workflows/test.yml
vendored
2
.github/workflows/test.yml
vendored
@ -437,7 +437,7 @@ jobs:
|
||||
report_name: Coverage Frontend
|
||||
type: lcov
|
||||
result_path: ./coverage/lcov.info
|
||||
min_coverage: 92
|
||||
min_coverage: 93
|
||||
token: ${{ github.token }}
|
||||
|
||||
##############################################################################
|
||||
|
||||
@ -1,17 +1,31 @@
|
||||
<template>
|
||||
<div class="clipboard-copy">
|
||||
<div v-if="canCopyLink" size="lg" class="mb-5">
|
||||
<div class="d-flex">
|
||||
<div>
|
||||
<label>{{ $t('gdd_per_link.copy-link') }}</label>
|
||||
<div class="pointer text-center bg-secondary gradido-border-radius p-4" @click="copyLink">
|
||||
{{ link }}
|
||||
<div v-if="canCopyLink" class="mb-5">
|
||||
<div>
|
||||
<label>{{ $t('gdd_per_link.copy-link') }}</label>
|
||||
<div
|
||||
class="pointer text-center bg-secondary gradido-border-radius p-3"
|
||||
@click="copyLink"
|
||||
data-test="copyLink"
|
||||
>
|
||||
{{ link }}
|
||||
<div>
|
||||
<b-button class="p-4">
|
||||
<b-icon icon="link45deg"></b-icon>
|
||||
</b-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-5">
|
||||
<label>{{ $t('gdd_per_link.copy-link-with-text') }}</label>
|
||||
</div>
|
||||
<div class="mt-5">
|
||||
<label>{{ $t('gdd_per_link.copy-link-with-text') }}</label>
|
||||
<div
|
||||
class="pointer text-center bg-secondary gradido-border-radius p-3"
|
||||
data-test="copyLinkWithText"
|
||||
@click="copyLinkWithText"
|
||||
>
|
||||
{{ linkText }}
|
||||
<div>
|
||||
<b-button @click="copyLinkWithText" class="p-4">
|
||||
<b-button class="p-4">
|
||||
<b-icon icon="link45deg"></b-icon>
|
||||
</b-button>
|
||||
</div>
|
||||
|
||||
@ -10,6 +10,12 @@ const mocks = {
|
||||
$tc: jest.fn((tc) => tc),
|
||||
$t: jest.fn((t) => t),
|
||||
$d: jest.fn((d) => d),
|
||||
$store: {
|
||||
state: {
|
||||
firstName: 'Bibi',
|
||||
lastName: 'Bloxberg',
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const propsData = {
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
:memo="memo"
|
||||
:validUntil="validUntil"
|
||||
></clipboard-copy>
|
||||
<label>{{ $t('qrCode') }}</label>
|
||||
<div class="text-center">
|
||||
<div><figure-qr-code :link="link" /></div>
|
||||
<div>
|
||||
|
||||
@ -17,6 +17,12 @@ const mocks = {
|
||||
$apollo: {
|
||||
query: apolloQueryMock,
|
||||
},
|
||||
$store: {
|
||||
state: {
|
||||
firstName: 'Bibi',
|
||||
lastName: 'Bloxberg',
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const propsData = {
|
||||
@ -102,10 +108,10 @@ describe('TransactionLinkSummary', () => {
|
||||
|
||||
describe('click on transaction links', () => {
|
||||
beforeEach(async () => {
|
||||
wrapper.find('div.transaction-slot-link').trigger('click')
|
||||
wrapper.find('div.row').trigger('click')
|
||||
})
|
||||
|
||||
it.skip('calls the API to get the list transaction links', () => {
|
||||
it('calls the API to get the list transaction links', () => {
|
||||
expect(apolloQueryMock).toBeCalledWith({
|
||||
query: listTransactionLinks,
|
||||
variables: {
|
||||
@ -115,14 +121,14 @@ describe('TransactionLinkSummary', () => {
|
||||
})
|
||||
})
|
||||
|
||||
it.skip('has four transactionLinks', () => {
|
||||
it('has four transactionLinks', () => {
|
||||
expect(wrapper.vm.transactionLinks).toHaveLength(4)
|
||||
})
|
||||
|
||||
describe('close transaction link details', () => {
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks()
|
||||
wrapper.find('div.transaction-slot-link').trigger('click')
|
||||
wrapper.find('div.row').trigger('click')
|
||||
})
|
||||
|
||||
it('does not call the API', () => {
|
||||
@ -136,10 +142,10 @@ describe('TransactionLinkSummary', () => {
|
||||
describe('reopen transaction link details', () => {
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks()
|
||||
wrapper.find('div.transaction-slot-link').trigger('click')
|
||||
wrapper.find('div.row').trigger('click')
|
||||
})
|
||||
|
||||
it.skip('calls the API to get the list transaction links', () => {
|
||||
it('calls the API to get the list transaction links', () => {
|
||||
expect(apolloQueryMock).toBeCalledWith({
|
||||
query: listTransactionLinks,
|
||||
variables: {
|
||||
@ -149,7 +155,7 @@ describe('TransactionLinkSummary', () => {
|
||||
})
|
||||
})
|
||||
|
||||
it.skip('has four transactionLinks', () => {
|
||||
it('has four transactionLinks', () => {
|
||||
expect(wrapper.vm.transactionLinks).toHaveLength(4)
|
||||
})
|
||||
})
|
||||
@ -215,7 +221,7 @@ describe('TransactionLinkSummary', () => {
|
||||
})
|
||||
|
||||
it('has eight transactionLinks', () => {
|
||||
expect(wrapper.vm.transactionLinks).toHaveLength(4)
|
||||
expect(wrapper.vm.transactionLinks).toHaveLength(8)
|
||||
})
|
||||
|
||||
it('loads more transaction links', () => {
|
||||
@ -230,19 +236,19 @@ describe('TransactionLinkSummary', () => {
|
||||
|
||||
describe('close transaction link list', () => {
|
||||
beforeEach(async () => {
|
||||
wrapper.find('div.transaction-slot-link').trigger('click')
|
||||
wrapper.find('div.row').trigger('click')
|
||||
})
|
||||
describe('reopen transaction link list', () => {
|
||||
beforeEach(async () => {
|
||||
jest.clearAllMocks()
|
||||
wrapper.find('div.transaction-slot-link').trigger('click')
|
||||
wrapper.find('div.row').trigger('click')
|
||||
})
|
||||
|
||||
it.skip('calls the API once', () => {
|
||||
it('calls the API once', () => {
|
||||
expect(apolloQueryMock).toBeCalledTimes(1)
|
||||
})
|
||||
|
||||
it.skip('calls the API with current page one', () => {
|
||||
it('calls the API with current page one', () => {
|
||||
expect(apolloQueryMock).toBeCalledWith({
|
||||
query: listTransactionLinks,
|
||||
variables: {
|
||||
@ -289,10 +295,10 @@ describe('TransactionLinkSummary', () => {
|
||||
})
|
||||
})
|
||||
|
||||
describe.skip('loads transaction links with error', () => {
|
||||
describe('loads transaction links with error', () => {
|
||||
beforeEach(() => {
|
||||
apolloQueryMock.mockRejectedValue({ message: 'OUCH!' })
|
||||
wrapper.find('div.transaction-slot-link').trigger('click')
|
||||
wrapper.find('div.row').trigger('click')
|
||||
})
|
||||
|
||||
it('toasts an error message', () => {
|
||||
|
||||
@ -24,15 +24,7 @@ export const copyLinks = {
|
||||
},
|
||||
copyLinkWithText() {
|
||||
navigator.clipboard
|
||||
.writeText(
|
||||
`${this.link}
|
||||
${this.$store.state.firstName} ${this.$t('transaction-link.send_you')} ${this.amount} Gradido.
|
||||
"${this.memo}"
|
||||
${this.$t('gdd_per_link.credit-your-gradido')} ${this.$t('gdd_per_link.validUntilDate', {
|
||||
date: this.$d(new Date(this.validUntil), 'short'),
|
||||
})}
|
||||
${this.$t('gdd_per_link.link-hint')}`,
|
||||
)
|
||||
.writeText(this.linkText)
|
||||
.then(() => {
|
||||
this.toastSuccess(this.$t('gdd_per_link.link-and-text-copied'))
|
||||
})
|
||||
@ -42,4 +34,15 @@ ${this.$t('gdd_per_link.link-hint')}`,
|
||||
})
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
linkText() {
|
||||
return `${this.link}
|
||||
${this.$store.state.firstName} ${this.$t('transaction-link.send_you')} ${this.amount} Gradido.
|
||||
"${this.memo}"
|
||||
${this.$t('gdd_per_link.credit-your-gradido')} ${this.$t('gdd_per_link.validUntilDate', {
|
||||
date: this.$d(new Date(this.validUntil), 'short'),
|
||||
})}
|
||||
${this.$t('gdd_per_link.link-hint')}`
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
@ -254,7 +254,7 @@ describe('Send', () => {
|
||||
describe('copy link with success', () => {
|
||||
beforeEach(async () => {
|
||||
navigatorClipboardMock.mockResolvedValue()
|
||||
await wrapper.find('.pointer').trigger('click')
|
||||
await wrapper.find('div[data-test="copyLink"]').trigger('click')
|
||||
})
|
||||
|
||||
it('should call clipboard.writeText', () => {
|
||||
@ -270,7 +270,7 @@ describe('Send', () => {
|
||||
describe('copy link with error', () => {
|
||||
beforeEach(async () => {
|
||||
navigatorClipboardMock.mockRejectedValue()
|
||||
await wrapper.find('.clipboard-copy').find('.btn-secondary').trigger('click')
|
||||
await wrapper.find('div[data-test="copyLink"]').trigger('click')
|
||||
})
|
||||
|
||||
it('toasts error message', () => {
|
||||
@ -292,7 +292,7 @@ describe('Send', () => {
|
||||
describe('copy link and text with success', () => {
|
||||
beforeEach(async () => {
|
||||
navigatorClipboardMock.mockResolvedValue()
|
||||
await wrapper.findAll('button').at(0).trigger('click')
|
||||
await wrapper.find('div[data-test="copyLinkWithText"]').trigger('click')
|
||||
})
|
||||
|
||||
it('should call clipboard.writeText', () => {
|
||||
@ -312,7 +312,7 @@ describe('Send', () => {
|
||||
describe('copy link and text with error', () => {
|
||||
beforeEach(async () => {
|
||||
navigatorClipboardMock.mockRejectedValue()
|
||||
await wrapper.findAll('button').at(0).trigger('click')
|
||||
await wrapper.find('div[data-test="copyLinkWithText"]').trigger('click')
|
||||
})
|
||||
|
||||
it('toasts error message', () => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user