JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: rewrite VButton with composition API

Browse Source 
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 2022-09-28 23:51:19 +00:00 committed by Storj Robot
parent 0cfbd34da2
commit b23b3e02e6
41 changed files with 144 additions and 301 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/satellite/.eslintrc.js
View File

@ -64,6 +64,7 @@ module.exports = {
],
'newlines-between': 'always',
}],
'no-duplicate-imports': 'error',
'object-curly-spacing': ['error', 'always'],
'quotes': ['error', 'single', { 'allowTemplateLiterals': true }],

2
web/satellite/jest.setup.ts
View File

@ -11,4 +11,4 @@ customGlobal.fetchMock = customGlobal.fetch;
// Disallow warnings and errors from console.
customGlobal.console.warn = (message) => { throw new Error(message); };
customGlobal.console.error = (message) => { throw new Error(message); };
customGlobal.console.error = (message) => { throw new Error(message); };

8
web/satellite/src/components/accessGrants/AccessGrants.vue
View File

@ -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"
/>

10
web/satellite/src/components/accessGrants/ConfirmDeletePopup.vue
View File

@ -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"
/>
@ -152,7 +152,7 @@ export default class ConfirmDeletePopup extends Vue {
}
/**
* Checks for new access grant flag
*/
*/
public get isNewAccessGrantFlow(): boolean {
const isNewAccessGrantFlow = MetaUtils.getMetaContent('new-access-grant-flow');
return isNewAccessGrantFlow === 'true';
@ -294,4 +294,4 @@ export default class ConfirmDeletePopup extends Vue {
.cancel-button {
margin-right: 15px;
}
</style>
</style>

6
web/satellite/src/components/accessGrants/ConfirmDeletePopup2.vue
View File

@ -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>
@ -256,4 +256,4 @@ export default class ConfirmDeletePopup extends Vue {
.cancel-button {
margin-right: 15px;
}
</style>
</style>

2
web/satellite/src/components/accessGrants/modals/CreateForm.vue
View File

@ -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"
/>

2
web/satellite/src/components/accessGrants/modals/GrantCreatedForm.vue
View File

@ -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"
/>

2
web/satellite/src/components/accessGrants/steps/NameStep.vue
View File

@ -19,7 +19,7 @@
width="50%"
height="48px"
:on-press="onCancelClick"
is-white="true"
:is-white="true"
:is-disabled="isLoading"
/>
<VButton

4
web/satellite/src/components/account/SettingsArea.vue
View File

@ -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>

2
web/satellite/src/components/account/billing/paymentMethods/AddTokenCardNative.vue
View File

@ -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"

4
web/satellite/src/components/account/billing/paymentMethods/BalanceTokenCard.vue
View File

@ -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"

2
web/satellite/src/components/account/billing/paymentMethods/PaymentMethods.vue
View File

@ -13,7 +13,7 @@
label="Add STORJ"
width="123px"
height="46px"
is-blue-white="true"
:is-blue-white="true"
:on-press="onAddSTORJ"
/>
</div>

2
web/satellite/src/components/common/AddCouponCodeInput.vue
View File

@ -57,7 +57,7 @@
label="Back"
width="250px"
height="44px"
is-blue-white="true"
:is-blue-white="true"
:on-press="toggleConfirmMessage"
/>
</div>

6
web/satellite/src/components/common/GeneratePassphrase.vue
View File

@ -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"
/>

105
web/satellite/src/components/common/VButton.vue
View File

@ -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 (props.isGreenWhite) return 'container green-white';
if (this.isWhiteGreen) return 'container white-green';
if (this.isGreenWhite) return 'container green-white';
return 'container';
}
}
return 'container';
}),
style: computed(() => {
return { width: props.width, height: props.height, borderRadius: props.borderRadius, fontSize: props.fontSize };
}),
};
},
});
</script>
<style scoped lang="scss">

2
web/satellite/src/components/common/VInfo.vue
View File

@ -15,7 +15,7 @@
:label="buttonLabel"
height="42px"
border-radius="52px"
is-uppercase="true"
:is-uppercase="true"
:on-press="onClick"
/>
</div>

4
web/satellite/src/components/infoBars/ProjectInfoBar.vue
View File

@ -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>

2
web/satellite/src/components/modals/AddTeamMemberModal.vue
View File

@ -50,7 +50,7 @@
width="100%"
height="48px"
:on-press="closeModal"
is-transparent="true"
:is-transparent="true"
/>
<VButton
label="Add Team Members"

2
web/satellite/src/components/modals/ChangePasswordModal.vue
View File

@ -47,7 +47,7 @@
width="100%"
height="48px"
:on-press="closeModal"
is-transparent="true"
:is-transparent="true"
/>
<VButton
label="Update"

2
web/satellite/src/components/modals/CreateProjectModal.vue
View File

@ -41,7 +41,7 @@
width="100%"
height="48px"
:on-press="closeModal"
is-transparent="true"
:is-transparent="true"
/>
<VButton
label="Create Project"

2
web/satellite/src/components/modals/DisableMFAModal.vue
View File

@ -24,7 +24,7 @@
label="Cancel"
width="100%"
height="44px"
is-white="true"
:is-white="true"
:on-press="closeModal"
/>
<VButton

2
web/satellite/src/components/modals/EditProfileModal.vue
View File

@ -24,7 +24,7 @@
width="100%"
height="48px"
:on-press="closeModal"
is-transparent="true"
:is-transparent="true"
/>
<VButton
label="Update"

2
web/satellite/src/components/modals/EnableMFAModal.vue
View File

@ -45,7 +45,7 @@
label="Cancel"
width="100%"
height="44px"
is-white="true"
:is-white="true"
:on-press="closeModal"
/>
<VButton

2
web/satellite/src/components/modals/InactivityModal.vue
View File

@ -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"

4
web/satellite/src/components/modals/NewFolderModal.vue
View File

@ -19,7 +19,7 @@
width="100%"
height="48px"
:on-press="close"
is-transparent="true"
:is-transparent="true"
/>
<VButton
label="Create Folder"
@ -124,7 +124,7 @@ export default class NewFolderModal extends Vue {
*/
public async createFolder(): Promise<void> {
if (this.isLoading) return;
this.isLoading = true;
if (!this.createFolderEnabled) {

2
web/satellite/src/components/modals/OpenBucketModal.vue
View File

@ -30,7 +30,7 @@
<VButton
label="Cancel"
height="48px"
is-transparent="true"
:is-transparent="true"
:on-press="closeModal"
:is-disabled="isLoading"
/>

2
web/satellite/src/components/onboardingTour/steps/cliFlow/SuccessScreen.vue
View File

@ -17,7 +17,7 @@
<VButton
label="Back"
height="48px"
is-white="true"
:is-white="true"
:on-press="onBackClick"
/>
<VButton

2
web/satellite/src/components/onboardingTour/steps/common/CLIFlowContainer.vue
View File

@ -10,7 +10,7 @@
<VButton
label="Back"
height="48px"
is-white="true"
:is-white="true"
:on-press="onBackClick"
:is-disabled="isLoading"
/>

2
web/satellite/src/components/onboardingTour/steps/common/ValueWithCopy.vue
View File

@ -9,7 +9,7 @@
label="Copy"
width="66px"
height="30px"
is-blue-white="true"
:is-blue-white="true"
:on-press="onCopyClick"
/>
</div>

2
web/satellite/src/components/project/CreateProject.vue
View File

@ -42,7 +42,7 @@
width="210px"
height="48px"
:on-press="onCancelClick"
is-transparent="true"
:is-transparent="true"
/>
<VButton
label="Create Project +"

8
web/satellite/src/components/project/EditProjectDetails.vue
View File

@ -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">

4
web/satellite/src/components/team/HeaderArea.vue
View File

@ -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>

6
web/satellite/tests/unit/account/billing/paymentMethods/PaymentMethods.spec.ts
View File

@ -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,
});
@ -108,4 +108,4 @@ describe('PaymentMethods', () => {
expect(wrapper).toMatchSnapshot();
});
});
});

50
web/satellite/tests/unit/account/billing/paymentMethods/__snapshots__/PaymentMethods.spec.ts.snap
View File

@ -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>
</div>
<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 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>
</div>
<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 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">

40
web/satellite/tests/unit/common/VButton.spec.ts
View File

@ -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,
},
});

4
web/satellite/tests/unit/onboardingTour/steps/OverviewStep.spec.ts
View File

@ -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,

33
web/satellite/tests/unit/onboardingTour/steps/__snapshots__/OverviewStep.spec.ts.snap
View File

@ -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 -&gt;</span>
</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 -&gt;</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">
<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>
<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>
`;

6
web/satellite/tests/unit/project/CreateProject.spec.ts
View File

@ -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,
});

8
web/satellite/tests/unit/project/EditProjectDetails.spec.ts
View File

@ -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,
});

44
web/satellite/tests/unit/project/__snapshots__/CreateProject.spec.ts.snap
View File

@ -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>

50
web/satellite/tests/unit/project/__snapshots__/EditProjectDetails.spec.ts.snap
View File

@ -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>
<!---->
<!---->