web/satellite: rewrite VButton with composition API
This change updates VButton with composition API, updates .eslintrc.js to ignore resulting import errors, and fix resulting test failures. see: https://github.com/storj/storj/issues/5114 Change-Id: Iaf9e8323333c797936d3acb38dd32f6e27d1ed08
This commit is contained in:
Wilfred Asomani
Storj Robot
parent
0cfbd34da2
commit
b23b3e02e6
@ -64,6 +64,7 @@ module.exports = {
|
||||
],
|
||||
'newlines-between': 'always',
|
||||
}],
|
||||
|
||||
'no-duplicate-imports': 'error',
|
||||
'object-curly-spacing': ['error', 'always'],
|
||||
'quotes': ['error', 'single', { 'allowTemplateLiterals': true }],
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
width="203px"
|
||||
height="40px"
|
||||
:on-press="onDeleteClick"
|
||||
is-deletion="true"
|
||||
:is-deletion="true"
|
||||
/>
|
||||
<VButton
|
||||
v-else
|
||||
@ -45,7 +45,7 @@
|
||||
label="Learn More"
|
||||
width="auto"
|
||||
height="30px"
|
||||
is-transparent="true"
|
||||
:is-transparent="true"
|
||||
font-size="13px"
|
||||
class="access-grants__flows-area__learn-button"
|
||||
/>
|
||||
@ -78,7 +78,7 @@
|
||||
label="Learn More"
|
||||
width="auto"
|
||||
height="30px"
|
||||
is-transparent="true"
|
||||
:is-transparent="true"
|
||||
font-size="13px"
|
||||
class="access-grants__flows-area__learn-button"
|
||||
/>
|
||||
@ -111,7 +111,7 @@
|
||||
label="Learn More"
|
||||
width="auto"
|
||||
height="30px"
|
||||
is-transparent="true"
|
||||
:is-transparent="true"
|
||||
font-size="13px"
|
||||
class="access-grants__flows-area__learn-button"
|
||||
/>
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
width="50%"
|
||||
height="44px"
|
||||
:on-press="onCancelClick"
|
||||
is-white="true"
|
||||
:is-white="true"
|
||||
:is-disabled="isLoading"
|
||||
/>
|
||||
<VButton
|
||||
@ -73,14 +73,14 @@
|
||||
width="50%"
|
||||
height="44px"
|
||||
:on-press="onCancelClick"
|
||||
is-white="true"
|
||||
:is-white="true"
|
||||
:is-disabled="isLoading"
|
||||
/>
|
||||
<VButton
|
||||
label="Delete Access"
|
||||
width="50%"
|
||||
height="44px"
|
||||
is-solid-delete="true"
|
||||
:is-solid-delete="true"
|
||||
:on-press="onDeleteClick"
|
||||
:is-disabled="isLoading"
|
||||
/>
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
width="70px"
|
||||
height="44px"
|
||||
:on-press="onCancelClick"
|
||||
is-white="true"
|
||||
:is-white="true"
|
||||
:is-disabled="isLoading"
|
||||
/>
|
||||
<VButton
|
||||
@ -44,7 +44,7 @@
|
||||
height="44px"
|
||||
:on-press="onDeleteClick"
|
||||
:is-disabled="isLoading || confirmedInput !== selectedAccessGrants[0].name"
|
||||
is-solid-delete="true"
|
||||
:is-solid-delete="true"
|
||||
has-trash-icon="true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -191,7 +191,7 @@
|
||||
<v-button
|
||||
label="Learn More"
|
||||
height="48px"
|
||||
is-transparent="true"
|
||||
:is-transparent="true"
|
||||
font-size="14px"
|
||||
class="create-access__buttons__button"
|
||||
/>
|
||||
|
||||
@ -241,7 +241,7 @@
|
||||
<v-button
|
||||
label="Learn More"
|
||||
height="48px"
|
||||
is-transparent="true"
|
||||
:is-transparent="true"
|
||||
font-size="14px"
|
||||
class="grants__buttons__learn-more"
|
||||
/>
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
width="50%"
|
||||
height="48px"
|
||||
:on-press="onCancelClick"
|
||||
is-white="true"
|
||||
:is-white="true"
|
||||
:is-disabled="isLoading"
|
||||
/>
|
||||
<VButton
|
||||
|
||||
@ -66,14 +66,14 @@
|
||||
width="173px"
|
||||
height="44px"
|
||||
:on-press="toggleDisableMFAModal"
|
||||
is-deletion="true"
|
||||
:is-deletion="true"
|
||||
/>
|
||||
<VButton
|
||||
label="Regenerate Recovery Codes"
|
||||
width="240px"
|
||||
height="44px"
|
||||
:on-press="generateNewMFARecoveryCodes"
|
||||
is-blue-white="true"
|
||||
:is-blue-white="true"
|
||||
:is-disabled="isLoading"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
<VButton
|
||||
class="token__action-area__history-btn"
|
||||
label="See transactions"
|
||||
is-transparent="true"
|
||||
:is-transparent="true"
|
||||
height="32px"
|
||||
font-size="13px"
|
||||
border-radius="6px"
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
label="See transactions"
|
||||
width="120px"
|
||||
height="30px"
|
||||
is-transparent="true"
|
||||
:is-transparent="true"
|
||||
font-size="13px"
|
||||
class="token__base__transaction-button"
|
||||
:on-press="toggleTransactionsTable"
|
||||
@ -56,7 +56,7 @@
|
||||
label="Back"
|
||||
width="100px"
|
||||
height="30px"
|
||||
is-transparent="true"
|
||||
:is-transparent="true"
|
||||
font-size="13px"
|
||||
class="token__base__transaction-button"
|
||||
:on-press="toggleShowAddFunds"
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
label="Add STORJ"
|
||||
width="123px"
|
||||
height="46px"
|
||||
is-blue-white="true"
|
||||
:is-blue-white="true"
|
||||
:on-press="onAddSTORJ"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -57,7 +57,7 @@
|
||||
label="Back"
|
||||
width="250px"
|
||||
height="44px"
|
||||
is-blue-white="true"
|
||||
:is-blue-white="true"
|
||||
:on-press="toggleConfirmMessage"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -42,8 +42,8 @@
|
||||
label="Copy"
|
||||
width="66px"
|
||||
height="30px"
|
||||
is-blue-white="true"
|
||||
is-uppercase="true"
|
||||
:is-blue-white="true"
|
||||
:is-uppercase="true"
|
||||
:on-press="onCopyClick"
|
||||
/>
|
||||
</div>
|
||||
@ -80,7 +80,7 @@
|
||||
label="< Back"
|
||||
height="64px"
|
||||
border-radius="62px"
|
||||
is-blue-white="true"
|
||||
:is-blue-white="true"
|
||||
:on-press="onBackClick"
|
||||
:is-disabled="isLoading"
|
||||
/>
|
||||
|
||||
@ -22,7 +22,8 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
|
||||
import { computed, defineComponent } from 'vue';
|
||||
|
||||
import CopyIcon from '@/../static/images/common/copyButtonIcon.svg';
|
||||
import TrashIcon from '@/../static/images/accessGrants/trashIcon.svg';
|
||||
@ -30,81 +31,63 @@ import LockIcon from '@/../static/images/common/lockIcon.svg';
|
||||
import CreditCardIcon from '@/../static/images/common/creditCardIcon-white.svg';
|
||||
import DocumentIcon from '@/../static/images/common/documentIcon.svg';
|
||||
|
||||
/**
|
||||
* Custom button component with label.
|
||||
*/
|
||||
// @vue/component
|
||||
@Component({
|
||||
export default defineComponent({
|
||||
name: 'VButton',
|
||||
components: {
|
||||
CopyIcon,
|
||||
TrashIcon,
|
||||
LockIcon,
|
||||
CreditCardIcon,
|
||||
DocumentIcon,
|
||||
TrashIcon,
|
||||
},
|
||||
})
|
||||
export default class VButton extends Vue {
|
||||
@Prop({ default: 'Default' })
|
||||
private readonly label: string;
|
||||
@Prop({ default: 'inherit' })
|
||||
private readonly width: string;
|
||||
@Prop({ default: 'inherit' })
|
||||
private readonly height: string;
|
||||
@Prop({ default: '16px' })
|
||||
private readonly fontSize: string;
|
||||
@Prop({ default: '6px' })
|
||||
private readonly borderRadius: string;
|
||||
@Prop({ default: 'none' })
|
||||
private readonly icon: string;
|
||||
@Prop({ default: false })
|
||||
private readonly isWhite: boolean;
|
||||
@Prop({ default: false })
|
||||
private readonly isSolidDelete: boolean;
|
||||
@Prop({ default: false })
|
||||
private readonly isTransparent: boolean;
|
||||
@Prop({ default: false })
|
||||
private readonly isDeletion: boolean;
|
||||
@Prop({ default: false })
|
||||
private readonly isGreyBlue: boolean;
|
||||
@Prop({ default: false })
|
||||
private readonly isBlueWhite: boolean;
|
||||
@Prop({ default: false })
|
||||
private readonly isWhiteGreen: boolean;
|
||||
@Prop({ default: false })
|
||||
private readonly isGreenWhite: boolean;
|
||||
@Prop({ default: false })
|
||||
private isDisabled: boolean;
|
||||
@Prop({ default: false })
|
||||
private readonly isUppercase: boolean;
|
||||
@Prop({ default: () => () => {} })
|
||||
private readonly onPress: () => void;
|
||||
props: {
|
||||
label: { type: String, default: 'Default' },
|
||||
width: { type: String, default: 'inherit' },
|
||||
height: { type: String, default: 'inherit' },
|
||||
fontSize: { type: String, default: '16px' },
|
||||
borderRadius: { type: String, default: '6px' },
|
||||
icon: { type: String, default: 'none' },
|
||||
isWhite: Boolean,
|
||||
isSolidDelete: Boolean,
|
||||
isTransparent: Boolean,
|
||||
isDeletion: Boolean,
|
||||
isGreyBlue: Boolean,
|
||||
isBlueWhite: Boolean,
|
||||
isWhiteGreen: Boolean,
|
||||
isGreenWhite: Boolean,
|
||||
isDisabled: Boolean,
|
||||
isUppercase: Boolean,
|
||||
onPress: { type: Function as () => void, default: () => {} },
|
||||
},
|
||||
setup(props) {
|
||||
return {
|
||||
containerClassName: computed(() => {
|
||||
if (props.isDisabled) return 'container disabled';
|
||||
|
||||
public get style(): Record<string, unknown> {
|
||||
return { width: this.width, height: this.height, borderRadius: this.borderRadius, fontSize: this.fontSize };
|
||||
}
|
||||
if (props.isWhite) return 'container white';
|
||||
|
||||
public get containerClassName(): string {
|
||||
if (this.isDisabled) return 'container disabled';
|
||||
if (props.isSolidDelete) return 'container solid-red';
|
||||
|
||||
if (this.isWhite) return 'container white';
|
||||
if (props.isTransparent) return 'container transparent';
|
||||
|
||||
if (this.isSolidDelete) return 'container solid-red';
|
||||
if (props.isDeletion) return 'container red';
|
||||
|
||||
if (this.isTransparent) return 'container transparent';
|
||||
if (props.isGreyBlue) return 'container grey-blue';
|
||||
|
||||
if (this.isDeletion) return 'container red';
|
||||
if (props.isBlueWhite) return 'container blue-white';
|
||||
|
||||
if (this.isGreyBlue) return 'container grey-blue';
|
||||
if (props.isWhiteGreen) return 'container white-green';
|
||||
|
||||
if (this.isBlueWhite) return 'container blue-white';
|
||||
|
||||
if (this.isWhiteGreen) return 'container white-green';
|
||||
|
||||
if (this.isGreenWhite) return 'container green-white';
|
||||
if (props.isGreenWhite) return 'container green-white';
|
||||
|
||||
return 'container';
|
||||
}
|
||||
}
|
||||
}),
|
||||
style: computed(() => {
|
||||
return { width: props.width, height: props.height, borderRadius: props.borderRadius, fontSize: props.fontSize };
|
||||
}),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
:label="buttonLabel"
|
||||
height="42px"
|
||||
border-radius="52px"
|
||||
is-uppercase="true"
|
||||
:is-uppercase="true"
|
||||
:on-press="onClick"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -6,10 +6,10 @@
|
||||
<div class="projects-info-bar__info">
|
||||
<p class="projects-info-bar__info__message">
|
||||
You have used
|
||||
<VLoader v-if="isDataFetching" class="pr-info-loader" is-white="true" width="15px" height="15px" />
|
||||
<VLoader v-if="isDataFetching" class="pr-info-loader" :is-white="true" width="15px" height="15px" />
|
||||
<span v-else class="projects-info-bar__info__message__value">{{ projectsCount }}</span>
|
||||
of your
|
||||
<VLoader v-if="isDataFetching" class="pr-info-loader" is-white="true" width="15px" height="15px" />
|
||||
<VLoader v-if="isDataFetching" class="pr-info-loader" :is-white="true" width="15px" height="15px" />
|
||||
<span v-else class="projects-info-bar__info__message__value">{{ projectLimit }}</span>
|
||||
available projects.
|
||||
</p>
|
||||
|
||||
@ -50,7 +50,7 @@
|
||||
width="100%"
|
||||
height="48px"
|
||||
:on-press="closeModal"
|
||||
is-transparent="true"
|
||||
:is-transparent="true"
|
||||
/>
|
||||
<VButton
|
||||
label="Add Team Members"
|
||||
|
||||
@ -47,7 +47,7 @@
|
||||
width="100%"
|
||||
height="48px"
|
||||
:on-press="closeModal"
|
||||
is-transparent="true"
|
||||
:is-transparent="true"
|
||||
/>
|
||||
<VButton
|
||||
label="Update"
|
||||
|
||||
@ -41,7 +41,7 @@
|
||||
width="100%"
|
||||
height="48px"
|
||||
:on-press="closeModal"
|
||||
is-transparent="true"
|
||||
:is-transparent="true"
|
||||
/>
|
||||
<VButton
|
||||
label="Create Project"
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
label="Cancel"
|
||||
width="100%"
|
||||
height="44px"
|
||||
is-white="true"
|
||||
:is-white="true"
|
||||
:on-press="closeModal"
|
||||
/>
|
||||
<VButton
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
width="100%"
|
||||
height="48px"
|
||||
:on-press="closeModal"
|
||||
is-transparent="true"
|
||||
:is-transparent="true"
|
||||
/>
|
||||
<VButton
|
||||
label="Update"
|
||||
|
||||
@ -45,7 +45,7 @@
|
||||
label="Cancel"
|
||||
width="100%"
|
||||
height="44px"
|
||||
is-white="true"
|
||||
:is-white="true"
|
||||
:on-press="closeModal"
|
||||
/>
|
||||
<VButton
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
label="Log out"
|
||||
height="40px"
|
||||
font-size="13px"
|
||||
is-transparent="true"
|
||||
:is-transparent="true"
|
||||
class="modal__buttons__button logout"
|
||||
:on-press="withLoading(onLogout)"
|
||||
:disabled="isLoading"
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
width="100%"
|
||||
height="48px"
|
||||
:on-press="close"
|
||||
is-transparent="true"
|
||||
:is-transparent="true"
|
||||
/>
|
||||
<VButton
|
||||
label="Create Folder"
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
<VButton
|
||||
label="Cancel"
|
||||
height="48px"
|
||||
is-transparent="true"
|
||||
:is-transparent="true"
|
||||
:on-press="closeModal"
|
||||
:is-disabled="isLoading"
|
||||
/>
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
<VButton
|
||||
label="Back"
|
||||
height="48px"
|
||||
is-white="true"
|
||||
:is-white="true"
|
||||
:on-press="onBackClick"
|
||||
/>
|
||||
<VButton
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
<VButton
|
||||
label="Back"
|
||||
height="48px"
|
||||
is-white="true"
|
||||
:is-white="true"
|
||||
:on-press="onBackClick"
|
||||
:is-disabled="isLoading"
|
||||
/>
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
label="Copy"
|
||||
width="66px"
|
||||
height="30px"
|
||||
is-blue-white="true"
|
||||
:is-blue-white="true"
|
||||
:on-press="onCopyClick"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -42,7 +42,7 @@
|
||||
width="210px"
|
||||
height="48px"
|
||||
:on-press="onCancelClick"
|
||||
is-transparent="true"
|
||||
:is-transparent="true"
|
||||
/>
|
||||
<VButton
|
||||
label="Create Project +"
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
width="64px"
|
||||
height="28px"
|
||||
:on-press="toggleNameEditing"
|
||||
is-white="true"
|
||||
:is-white="true"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="isNameEditing" class="project-details__wrapper__container__name-editing">
|
||||
@ -43,7 +43,7 @@
|
||||
width="64px"
|
||||
height="28px"
|
||||
:on-press="toggleDescriptionEditing"
|
||||
is-white="true"
|
||||
:is-white="true"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="isDescriptionEditing" class="project-details__wrapper__container__description-editing">
|
||||
@ -72,7 +72,7 @@
|
||||
width="64px"
|
||||
height="28px"
|
||||
:on-press="toggleStorageLimitEditing"
|
||||
is-white="true"
|
||||
:is-white="true"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="isStorageLimitEditing" class="project-details__wrapper__container__limits__storagelimit-editing__section">
|
||||
@ -136,7 +136,7 @@
|
||||
width="64px"
|
||||
height="28px"
|
||||
:on-press="toggleBandwidthLimitEditing"
|
||||
is-white="true"
|
||||
:is-white="true"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="isBandwidthLimitEditing" class="project-details__wrapper__container__limits__bandwidthlimit-editing__section">
|
||||
|
||||
@ -45,7 +45,7 @@
|
||||
label="Cancel"
|
||||
width="122px"
|
||||
height="48px"
|
||||
is-transparent="true"
|
||||
:is-transparent="true"
|
||||
:on-press="onClearSelection"
|
||||
/>
|
||||
<span class="header-selected-members__info-text"><b>{{ selectedProjectMembersCount }}</b> users selected</span>
|
||||
@ -65,7 +65,7 @@
|
||||
label="Cancel"
|
||||
width="122px"
|
||||
height="48px"
|
||||
is-transparent="true"
|
||||
:is-transparent="true"
|
||||
:on-press="onClearSelection"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -39,7 +39,7 @@ const ANIMATION_COMPLETE_TIME = 600;
|
||||
|
||||
describe('PaymentMethods', () => {
|
||||
it('renders correctly without card', async (): Promise<void> => {
|
||||
const wrapper = mount(PaymentMethods, {
|
||||
const wrapper = shallowMount(PaymentMethods, {
|
||||
store,
|
||||
localVue,
|
||||
});
|
||||
@ -99,7 +99,7 @@ describe('PaymentMethods', () => {
|
||||
const card = new CreditCard('cardId', 12, 2100, 'test', '0000', true);
|
||||
store.commit(PAYMENTS_MUTATIONS.SET_CREDIT_CARDS, [card]);
|
||||
|
||||
const wrapper = mount(PaymentMethods, {
|
||||
const wrapper = shallowMount(PaymentMethods, {
|
||||
store,
|
||||
localVue,
|
||||
});
|
||||
|
||||
@ -135,23 +135,11 @@ exports[`PaymentMethods renders correctly with card 1`] = `
|
||||
<h1 aria-roledescription="title" class="payment-methods-area__functional-area__title">Payment Method</h1>
|
||||
<div class="payment-methods-area__functional-area__button-area">
|
||||
<div class="payment-methods-area__functional-area__button-area__default-buttons">
|
||||
<div class="add-storj-button container blue-white" style="width: 123px; height: 46px; border-radius: 6px; font-size: 16px;">
|
||||
<!---->
|
||||
<!----> <span class="label"><!----> <!----> <!----> <!----> <!----> <!---->Add STORJ</span>
|
||||
<vbutton-stub label="Add STORJ" width="123px" height="46px" fontsize="16px" borderradius="6px" icon="none" isbluewhite="true" onpress="[Function]" class="add-storj-button"></vbutton-stub>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="payments-bonus-container payment-methods-area__functional-area__bonus"><svg class="banner-logo-svg"></svg>
|
||||
<div class="payments-bonus-container__text-container">
|
||||
<p class="payments-bonus-container__text-container__main-text">
|
||||
Get free credits for paying in STORJ Token
|
||||
</p>
|
||||
<p class="payments-bonus-container__text-container__additional-text">
|
||||
Deposit STORJ Token to your account and receive a 10% bonus, or $10 for every $100.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<paymentsbonus-stub anycreditcards="true" class="payment-methods-area__functional-area__bonus"></paymentsbonus-stub>
|
||||
<!---->
|
||||
<!---->
|
||||
<div class="add-card-button">
|
||||
@ -162,23 +150,7 @@ exports[`PaymentMethods renders correctly with card 1`] = `
|
||||
<!---->
|
||||
<!---->
|
||||
<div class="payment-methods-area__existing-cards-container">
|
||||
<div class="payment-methods-container__card-container">
|
||||
<div class="payment-methods-container__card-container__info-area">
|
||||
<div class="payment-methods-container__card-container__info-area__card-logo"><svg></svg></div>
|
||||
<div class="payment-methods-container__card-container__info-area__info-container"><img src="@/../static/images/payments/cardStars.png" alt="Hidden card digits stars image">
|
||||
<h1 class="bold">0000</h1>
|
||||
</div>
|
||||
<div class="payment-methods-container__card-container__info-area__expire-container">
|
||||
<h2 class="medium">Expires</h2>
|
||||
<h1 class="bold">12/2100</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="payment-methods-container__card-container__button-area">
|
||||
<div class="payment-methods-container__card-container__default-button">
|
||||
<p class="payment-methods-container__card-container__default-button__label">Default</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<cardcomponent-stub creditcard="[object Object]"></cardcomponent-stub>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
@ -191,23 +163,11 @@ exports[`PaymentMethods renders correctly without card 1`] = `
|
||||
<h1 aria-roledescription="title" class="payment-methods-area__functional-area__title">Payment Method</h1>
|
||||
<div class="payment-methods-area__functional-area__button-area">
|
||||
<div class="payment-methods-area__functional-area__button-area__default-buttons">
|
||||
<div class="add-storj-button container blue-white" style="width: 123px; height: 46px; border-radius: 6px; font-size: 16px;">
|
||||
<!---->
|
||||
<!----> <span class="label"><!----> <!----> <!----> <!----> <!----> <!---->Add STORJ</span>
|
||||
<vbutton-stub label="Add STORJ" width="123px" height="46px" fontsize="16px" borderradius="6px" icon="none" isbluewhite="true" onpress="[Function]" class="add-storj-button"></vbutton-stub>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="payments-bonus-container payment-methods-area__functional-area__bonus"><svg class="banner-gift-svg"></svg>
|
||||
<div class="payments-bonus-container__text-container">
|
||||
<p class="payments-bonus-container__text-container__main-text">
|
||||
Add a Payment Method to Get Started
|
||||
</p>
|
||||
<p class="payments-bonus-container__text-container__additional-text">
|
||||
Your first 150GB are free. You will not be charged until you use more than 150GB.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<paymentsbonus-stub class="payment-methods-area__functional-area__bonus"></paymentsbonus-stub>
|
||||
<!---->
|
||||
<!---->
|
||||
<div class="add-card-button">
|
||||
|
||||
@ -3,36 +3,27 @@
|
||||
|
||||
import { mount, shallowMount } from '@vue/test-utils';
|
||||
|
||||
import Button from '@/components/common/VButton.vue';
|
||||
import VButton from '@/components/common/VButton.vue';
|
||||
|
||||
describe('Button.vue', () => {
|
||||
it('renders correctly', () => {
|
||||
const wrapper = shallowMount(Button, {
|
||||
propsData: {
|
||||
onPress: () => { return; },
|
||||
},
|
||||
});
|
||||
// VButton as never is not ideal. We will not need if after we upgrade from @vue/test-utils@1.3.0
|
||||
const wrapper = mount(VButton as never);
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders correctly with isWhite prop', () => {
|
||||
const wrapper = shallowMount(Button, {
|
||||
propsData: {
|
||||
isWhite: true,
|
||||
onPress: () => { return; },
|
||||
},
|
||||
const wrapper = shallowMount(VButton as never, {
|
||||
propsData: { isWhite: true },
|
||||
});
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders correctly with isDisabled prop', () => {
|
||||
const wrapper = shallowMount(Button, {
|
||||
propsData: {
|
||||
isDisabled: true,
|
||||
onPress: () => { return; },
|
||||
},
|
||||
const wrapper = shallowMount(VButton as never, {
|
||||
propsData: { isDisabled: true },
|
||||
});
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
@ -43,12 +34,11 @@ describe('Button.vue', () => {
|
||||
const width = '30px';
|
||||
const height = '20px';
|
||||
|
||||
const wrapper = shallowMount(Button, {
|
||||
const wrapper = shallowMount(VButton as never, {
|
||||
propsData: {
|
||||
label,
|
||||
width,
|
||||
height,
|
||||
onPress: () => { return; },
|
||||
},
|
||||
});
|
||||
|
||||
@ -59,11 +49,7 @@ describe('Button.vue', () => {
|
||||
});
|
||||
|
||||
it('renders correctly with default props', () => {
|
||||
const wrapper = shallowMount(Button, {
|
||||
propsData: {
|
||||
onPress: () => { return; },
|
||||
},
|
||||
});
|
||||
const wrapper = shallowMount(VButton as never);
|
||||
|
||||
const el = wrapper.element as HTMLElement;
|
||||
expect(el.style.width).toMatch('inherit');
|
||||
@ -73,11 +59,13 @@ describe('Button.vue', () => {
|
||||
|
||||
it('trigger onPress correctly', () => {
|
||||
const onPressSpy = jest.fn();
|
||||
const onPress = onPressSpy;
|
||||
const isDisabled = false;
|
||||
|
||||
const wrapper = mount(Button, {
|
||||
const wrapper = shallowMount(VButton as never, {
|
||||
propsData: {
|
||||
onPress: onPressSpy,
|
||||
isDisabled: false,
|
||||
onPress,
|
||||
isDisabled,
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
import Vuex from 'vuex';
|
||||
import { createLocalVue, mount } from '@vue/test-utils';
|
||||
import { createLocalVue, shallowMount } from '@vue/test-utils';
|
||||
|
||||
import { router } from '@/router';
|
||||
import { appStateModule } from '@/store/modules/appState';
|
||||
@ -16,7 +16,7 @@ const store = new Vuex.Store({ modules: { appStateModule } });
|
||||
|
||||
describe('OverviewStep.vue', (): void => {
|
||||
it('renders correctly', (): void => {
|
||||
const wrapper = mount(OverviewStep, {
|
||||
const wrapper = shallowMount(OverviewStep, {
|
||||
localVue,
|
||||
router,
|
||||
store,
|
||||
|
||||
@ -5,34 +5,11 @@ exports[`OverviewStep.vue renders correctly 1`] = `
|
||||
<h1 aria-roledescription="title" class="overview-area__title">Welcome to Storj </h1>
|
||||
<p class="overview-area__subtitle">Get started using the web browser, or the command line.</p>
|
||||
<div class="overview-area__routes">
|
||||
<div class="overview-container"><svg alt="web" class="overview-container__img"></svg>
|
||||
<p aria-roledescription="server-side-encryption-title" class="overview-container__enc">Server-side encrypted</p>
|
||||
<h2 class="overview-container__title">Start with web browser</h2>
|
||||
<p class="overview-container__info">Start uploading files in the browser and instantly see how your data gets distributed over the Storj network around the world.</p>
|
||||
<div class="container" style="width: 240px; height: 48px; border-radius: 8px; font-size: 16px;">
|
||||
<!---->
|
||||
<!----> <span class="label"><!----> <!----> <!----> <!----> <!----> <!---->Continue in web -></span>
|
||||
<overviewcontainer-stub isweb="true" title="Start with web browser" info="Start uploading files in the browser and instantly see how your data gets distributed over the Storj network around the world." buttonlabel="Continue in web ->" onclick="[Function]"></overviewcontainer-stub>
|
||||
<overviewcontainer-stub title="Start with Uplink CLI" info="The Uplink CLI is a command-line interface tool which allows you to upload and download files from the network, manage permissions and share files." buttonlabel="Continue in cli ->" onclick="[Function]"></overviewcontainer-stub>
|
||||
</div>
|
||||
<p class="overview-container__encryption-container">
|
||||
By using the web browser you are opting in to
|
||||
<a href="https://docs.storj.io/concepts/encryption-key/design-decision-server-side-encryption" target="_blank" rel="noopener noreferrer" aria-roledescription="server-side-encryption-link" class="overview-container__encryption-container__link">server-side encryption</a>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="overview-container"><svg alt="cli" class="overview-container__img"></svg>
|
||||
<p aria-roledescription="end-to-end-encryption-title" class="overview-container__enc">End-to-end encrypted</p>
|
||||
<h2 class="overview-container__title">Start with Uplink CLI</h2>
|
||||
<p class="overview-container__info">The Uplink CLI is a command-line interface tool which allows you to upload and download files from the network, manage permissions and share files.</p>
|
||||
<div class="container" style="width: 240px; height: 48px; border-radius: 8px; font-size: 16px;">
|
||||
<!---->
|
||||
<!----> <span class="label"><!----> <!----> <!----> <!----> <!----> <!---->Continue in cli -></span>
|
||||
</div>
|
||||
<p class="overview-container__encryption-container">
|
||||
The Uplink CLI uses
|
||||
<a href="https://docs.storj.io/concepts/encryption-key/design-decision-end-to-end-encryption" target="_blank" rel="noopener noreferrer" aria-roledescription="end-to-end-encryption-link" class="overview-container__encryption-container__link">end-to-end encryption</a> for object data, metadata and path data.
|
||||
</p>
|
||||
</div>
|
||||
</div> <a href="/project-dashboard" class="overview-area__skip-button">
|
||||
<router-link-stub to="/project-dashboard" tag="a" ariacurrentvalue="page" event="click" class="overview-area__skip-button">
|
||||
Skip and go directly to dashboard
|
||||
</a>
|
||||
</router-link-stub>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
import Vuex from 'vuex';
|
||||
import { createLocalVue, mount } from '@vue/test-utils';
|
||||
import { createLocalVue, shallowMount } from '@vue/test-utils';
|
||||
|
||||
import { ProjectsApiMock } from '../mock/api/projects';
|
||||
|
||||
@ -23,7 +23,7 @@ localVue.use(new NotificatorPlugin(store));
|
||||
|
||||
describe('CreateProject.vue', (): void => {
|
||||
it('renders correctly', (): void => {
|
||||
const wrapper = mount<CreateProject>(CreateProject, {
|
||||
const wrapper = shallowMount<CreateProject>(CreateProject, {
|
||||
store,
|
||||
localVue,
|
||||
});
|
||||
@ -32,7 +32,7 @@ describe('CreateProject.vue', (): void => {
|
||||
});
|
||||
|
||||
it('renders correctly with project name', async (): Promise<void> => {
|
||||
const wrapper = mount<CreateProject>(CreateProject, {
|
||||
const wrapper = shallowMount<CreateProject>(CreateProject, {
|
||||
store,
|
||||
localVue,
|
||||
});
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
import Vuex from 'vuex';
|
||||
import { createLocalVue, mount } from '@vue/test-utils';
|
||||
import { createLocalVue, shallowMount } from '@vue/test-utils';
|
||||
|
||||
import { ProjectsApiMock } from '../mock/api/projects';
|
||||
|
||||
@ -43,7 +43,7 @@ describe('EditProjectDetails.vue', () => {
|
||||
store.commit(PROJECTS_MUTATIONS.SELECT_PROJECT, project.id);
|
||||
store.commit(PROJECTS_MUTATIONS.SET_LIMITS, projectLimits);
|
||||
|
||||
const wrapper = mount<EditProjectDetails>(EditProjectDetails, {
|
||||
const wrapper = shallowMount<EditProjectDetails>(EditProjectDetails, {
|
||||
store,
|
||||
localVue,
|
||||
});
|
||||
@ -52,7 +52,7 @@ describe('EditProjectDetails.vue', () => {
|
||||
});
|
||||
|
||||
it('editing name works correctly', async (): Promise<void> => {
|
||||
const wrapper = mount<EditProjectDetails>(EditProjectDetails, {
|
||||
const wrapper = shallowMount<EditProjectDetails>(EditProjectDetails, {
|
||||
store,
|
||||
localVue,
|
||||
});
|
||||
@ -71,7 +71,7 @@ describe('EditProjectDetails.vue', () => {
|
||||
});
|
||||
|
||||
it('editing description works correctly', async (): Promise<void> => {
|
||||
const wrapper = mount<EditProjectDetails>(EditProjectDetails, {
|
||||
const wrapper = shallowMount<EditProjectDetails>(EditProjectDetails, {
|
||||
store,
|
||||
localVue,
|
||||
});
|
||||
|
||||
@ -5,47 +5,11 @@ exports[`CreateProject.vue renders correctly 1`] = `
|
||||
<div class="create-project__container">
|
||||
<div class="create-project__container__image-container"><img src="@/../static/images/project/createProject.png" alt="create project" class="create-project__container__image-container__img"></div>
|
||||
<h2 aria-roledescription="title" class="create-project__container__title">Create a Project</h2>
|
||||
<div aria-roledescription="input-container" class="input-container full-input">
|
||||
<div class="label-container">
|
||||
<div class="label-container__main">
|
||||
<!---->
|
||||
<h3 class="label-container__main__label">Project Name</h3>
|
||||
<h3 class="label-container__main__label add-label">Up To 20 Characters</h3>
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<h3 class="label-container__limit">0/20</h3>
|
||||
</div>
|
||||
<!---->
|
||||
<!----> <input id="Project Name" placeholder="Enter Project Name" maxlength="20" type="text" class="input" style="width: 100%; height: 48px;">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<div aria-roledescription="input-container" class="input-container full-input">
|
||||
<div class="label-container">
|
||||
<div class="label-container__main">
|
||||
<!---->
|
||||
<h3 class="label-container__main__label">Description</h3>
|
||||
<h3 class="label-container__main__label add-label">Optional</h3>
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<h3 class="label-container__limit">0/100</h3>
|
||||
</div>
|
||||
<!----> <textarea id="Description" placeholder="Enter Project Description" rows="5" cols="40" maxlength="100" wrap="hard" class="textarea" style="width: 100%; height: 100px;"></textarea>
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<vinput-stub additionallabel="Up To 20 Characters" currentlimit="0" islimitshown="true" initvalue="" label="Project Name" placeholder="Enter Project Name" height="48px" width="100%" error="" maxsymbols="20" roledescription="input-container" class="full-input"></vinput-stub>
|
||||
<vinput-stub additionallabel="Optional" currentlimit="0" islimitshown="true" ismultiline="true" initvalue="" label="Description" placeholder="Enter Project Description" height="100px" width="100%" error="" maxsymbols="100" roledescription="input-container" class="full-input"></vinput-stub>
|
||||
<div class="create-project__container__button-container">
|
||||
<div class="create-project__container__button-container__cancel container transparent" style="width: 210px; height: 48px; border-radius: 6px; font-size: 16px;">
|
||||
<!---->
|
||||
<!----> <span class="label"><!----> <!----> <!----> <!----> <!----> <!---->Cancel</span>
|
||||
</div>
|
||||
<div class="container disabled" style="width: 210px; height: 48px; border-radius: 6px; font-size: 16px;">
|
||||
<!---->
|
||||
<!----> <span class="label"><!----> <!----> <!----> <!----> <!----> <!---->Create Project +</span>
|
||||
</div>
|
||||
<vbutton-stub label="Cancel" width="210px" height="48px" fontsize="16px" borderradius="6px" icon="none" istransparent="true" onpress="[Function]" class="create-project__container__button-container__cancel"></vbutton-stub>
|
||||
<vbutton-stub label="Create Project +" width="210px" height="48px" fontsize="16px" borderradius="6px" icon="none" isdisabled="true" onpress="[Function]"></vbutton-stub>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
|
||||
@ -9,19 +9,13 @@ exports[`EditProjectDetails.vue editing description works correctly 1`] = `
|
||||
<p class="project-details__wrapper__container__label">Name</p>
|
||||
<div class="project-details__wrapper__container__name-area">
|
||||
<p class="project-details__wrapper__container__name-area__name">new name</p>
|
||||
<div class="container white" style="width: 64px; height: 28px; border-radius: 6px; font-size: 16px;">
|
||||
<!---->
|
||||
<!----> <span class="label"><!----> <!----> <!----> <!----> <!----> <!---->Edit</span>
|
||||
</div>
|
||||
<vbutton-stub label="Edit" width="64px" height="28px" fontsize="16px" borderradius="6px" icon="none" iswhite="true" onpress="[Function]"></vbutton-stub>
|
||||
</div>
|
||||
<!---->
|
||||
<p class="project-details__wrapper__container__label">Description</p>
|
||||
<!---->
|
||||
<div class="project-details__wrapper__container__description-editing"><input placeholder="Enter a description for your project" class="project-details__wrapper__container__description-editing__input"> <span class="project-details__wrapper__container__description-editing__limit">4/100</span>
|
||||
<div class="project-details__wrapper__container__description-editing__save-button container" style="width: 66px; height: 30px; border-radius: 6px; font-size: 16px;">
|
||||
<!---->
|
||||
<!----> <span class="label"><!----> <!----> <!----> <!----> <!----> <!---->Save</span>
|
||||
</div>
|
||||
<vbutton-stub label="Save" width="66px" height="30px" fontsize="16px" borderradius="6px" icon="none" onpress="[Function]" class="project-details__wrapper__container__description-editing__save-button"></vbutton-stub>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
@ -38,19 +32,13 @@ exports[`EditProjectDetails.vue editing description works correctly 2`] = `
|
||||
<p class="project-details__wrapper__container__label">Name</p>
|
||||
<div class="project-details__wrapper__container__name-area">
|
||||
<p class="project-details__wrapper__container__name-area__name">new name</p>
|
||||
<div class="container white" style="width: 64px; height: 28px; border-radius: 6px; font-size: 16px;">
|
||||
<!---->
|
||||
<!----> <span class="label"><!----> <!----> <!----> <!----> <!----> <!---->Edit</span>
|
||||
</div>
|
||||
<vbutton-stub label="Edit" width="64px" height="28px" fontsize="16px" borderradius="6px" icon="none" iswhite="true" onpress="[Function]"></vbutton-stub>
|
||||
</div>
|
||||
<!---->
|
||||
<p class="project-details__wrapper__container__label">Description</p>
|
||||
<div class="project-details__wrapper__container__description-area">
|
||||
<p class="project-details__wrapper__container__description-area__description">new description</p>
|
||||
<div class="container white" style="width: 64px; height: 28px; border-radius: 6px; font-size: 16px;">
|
||||
<!---->
|
||||
<!----> <span class="label"><!----> <!----> <!----> <!----> <!----> <!---->Edit</span>
|
||||
</div>
|
||||
<vbutton-stub label="Edit" width="64px" height="28px" fontsize="16px" borderradius="6px" icon="none" onpress="[Function]" class="" iswhite="true"></vbutton-stub>
|
||||
</div>
|
||||
<!---->
|
||||
<!---->
|
||||
@ -68,18 +56,12 @@ exports[`EditProjectDetails.vue editing name works correctly 1`] = `
|
||||
<p class="project-details__wrapper__container__label">Name</p>
|
||||
<!---->
|
||||
<div class="project-details__wrapper__container__name-editing"><input placeholder="Enter a name for your project" class="project-details__wrapper__container__name-editing__input"> <span class="project-details__wrapper__container__name-editing__limit">4/20</span>
|
||||
<div class="project-details__wrapper__container__name-editing__save-button container" style="width: 66px; height: 30px; border-radius: 6px; font-size: 16px;">
|
||||
<!---->
|
||||
<!----> <span class="label"><!----> <!----> <!----> <!----> <!----> <!---->Save</span>
|
||||
</div>
|
||||
<vbutton-stub label="Save" width="66px" height="30px" fontsize="16px" borderradius="6px" icon="none" onpress="[Function]" class="project-details__wrapper__container__name-editing__save-button"></vbutton-stub>
|
||||
</div>
|
||||
<p class="project-details__wrapper__container__label">Description</p>
|
||||
<div class="project-details__wrapper__container__description-area">
|
||||
<p class="project-details__wrapper__container__description-area__description">test</p>
|
||||
<div class="container white" style="width: 64px; height: 28px; border-radius: 6px; font-size: 16px;">
|
||||
<!---->
|
||||
<!----> <span class="label"><!----> <!----> <!----> <!----> <!----> <!---->Edit</span>
|
||||
</div>
|
||||
<vbutton-stub label="Edit" width="64px" height="28px" fontsize="16px" borderradius="6px" icon="none" iswhite="true" onpress="[Function]"></vbutton-stub>
|
||||
</div>
|
||||
<!---->
|
||||
<!---->
|
||||
@ -97,19 +79,13 @@ exports[`EditProjectDetails.vue editing name works correctly 2`] = `
|
||||
<p class="project-details__wrapper__container__label">Name</p>
|
||||
<div class="project-details__wrapper__container__name-area">
|
||||
<p class="project-details__wrapper__container__name-area__name">new name</p>
|
||||
<div class="container white" style="width: 64px; height: 28px; border-radius: 6px; font-size: 16px;">
|
||||
<!---->
|
||||
<!----> <span class="label"><!----> <!----> <!----> <!----> <!----> <!---->Edit</span>
|
||||
</div>
|
||||
<vbutton-stub label="Edit" width="64px" height="28px" fontsize="16px" borderradius="6px" icon="none" onpress="[Function]" class="" iswhite="true"></vbutton-stub>
|
||||
</div>
|
||||
<!---->
|
||||
<p class="project-details__wrapper__container__label">Description</p>
|
||||
<div class="project-details__wrapper__container__description-area">
|
||||
<p class="project-details__wrapper__container__description-area__description">test</p>
|
||||
<div class="container white" style="width: 64px; height: 28px; border-radius: 6px; font-size: 16px;">
|
||||
<!---->
|
||||
<!----> <span class="label"><!----> <!----> <!----> <!----> <!----> <!---->Edit</span>
|
||||
</div>
|
||||
<vbutton-stub label="Edit" width="64px" height="28px" fontsize="16px" borderradius="6px" icon="none" iswhite="true" onpress="[Function]"></vbutton-stub>
|
||||
</div>
|
||||
<!---->
|
||||
<!---->
|
||||
@ -127,19 +103,13 @@ exports[`EditProjectDetails.vue renders correctly 1`] = `
|
||||
<p class="project-details__wrapper__container__label">Name</p>
|
||||
<div class="project-details__wrapper__container__name-area">
|
||||
<p class="project-details__wrapper__container__name-area__name">test</p>
|
||||
<div class="container white" style="width: 64px; height: 28px; border-radius: 6px; font-size: 16px;">
|
||||
<!---->
|
||||
<!----> <span class="label"><!----> <!----> <!----> <!----> <!----> <!---->Edit</span>
|
||||
</div>
|
||||
<vbutton-stub label="Edit" width="64px" height="28px" fontsize="16px" borderradius="6px" icon="none" iswhite="true" onpress="[Function]"></vbutton-stub>
|
||||
</div>
|
||||
<!---->
|
||||
<p class="project-details__wrapper__container__label">Description</p>
|
||||
<div class="project-details__wrapper__container__description-area">
|
||||
<p class="project-details__wrapper__container__description-area__description">test</p>
|
||||
<div class="container white" style="width: 64px; height: 28px; border-radius: 6px; font-size: 16px;">
|
||||
<!---->
|
||||
<!----> <span class="label"><!----> <!----> <!----> <!----> <!----> <!---->Edit</span>
|
||||
</div>
|
||||
<vbutton-stub label="Edit" width="64px" height="28px" fontsize="16px" borderradius="6px" icon="none" iswhite="true" onpress="[Function]"></vbutton-stub>
|
||||
</div>
|
||||
<!---->
|
||||
<!---->
|
||||
|
||||
Loading…
Reference in New Issue
Block a user