Skip to content

Commit

Permalink
fix(supercomponent): add fetchMock and mock api v6 in jest
Browse files Browse the repository at this point in the history 
ref: MANAGER-11620

Signed-off-by: Alex Boungnaseng <[email protected]>
  • Loading branch information
@aboungnaseng-ovhcloud
aboungnaseng-ovhcloud committed Jul 26, 2023
1 parent 661dcd1 commit 8a0b6b0
Show file tree
Hide file tree
Showing 5 changed files with 415 additions and 147 deletions.
2 changes: 1 addition & 1 deletion packages/super-components/components/msc-billing-tile/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
"postcss-nested": "^6.0.0",
"puppeteer": "^10.0.0",
"typedoc": "0.22.10",
"typescript": "^4.3.2"
"typescript": "~4.3.5"
},
"peerDependencies": {
"@ovhcloud/ods-core": "^13.0.1",
Expand Down
182 changes: 77 additions & 105 deletions ...es/super-components/components/msc-billing-tile/src/msc-billing-tile/msc-billing-tile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,8 @@ import {
OdsButtonVariant,
} from '@ovhcloud/ods-core';
import { HTMLStencilElement } from '@stencil/core/internal';
import { i18n, createInstance } from 'i18next';
import Backend from 'i18next-http-backend';
import apiClient from '@ovh-ux/manager-core-api';

const ovhLocaleToI18next = (ovhLocale = '') => ovhLocale.replace('_', '-');
const i18nextLocaleToOvh = (i18nextLocale = '') =>
i18nextLocale.replace('-', '_');

export interface IMscBillingTile {
offer?: string;
dataTracking?: string;
Expand Down Expand Up @@ -60,6 +54,8 @@ export class MscBillingTile implements IMscBillingTile {
/** service path for the API */
@Prop() public servicePath = '';

@State() localStrings: { [key: string]: string };

@State() private tabIndex = 0;

@State() i18nLoaded = false;
Expand Down Expand Up @@ -98,49 +94,41 @@ export class MscBillingTile implements IMscBillingTile {
this.showTooltipContact = !this.showTooltipContact;
}

private i18nInstance: i18n;

componentWillLoad() {
this.i18nInstance = createInstance();

return new Promise<void>((resolve) => {
this.i18nInstance.use(Backend).init(
{
lng: ovhLocaleToI18next(this.language),
fallbackLng: this.language,
debug: true,
backend: {
loadPath: (lngs: string) => {
const [lng] = lngs;
if (lng.length < 3) return ``;
return `translations/Messages_${i18nextLocaleToOvh(lng)}.json`;
},
allowMultiLoading: true,
},
},
(err, t) => {
console.log('err translation', err, t);
// After initialization completed, set loaded flag to true
this.i18nLoaded = true;
resolve();
async componentWillLoad() {
this.localStrings = await this.fetchLocaleStringsForComponent();
await this.fetchServiceId();
}

ovhLocaleToI18next() {
return this.language?.replace('-', '_') || '';
}

async fetchLocaleStringsForComponent(): Promise<any> {
return new Promise((resolve, reject): void => {
fetch(`translations/Messages_${this.ovhLocaleToI18next()}.json`).then(
(result) => {
if (result.ok) {
resolve(result.clone().json());
} else reject();
},
() => reject(),
);

this.fetchServiceId();
});
}

getTranslation(key: string, options?: Record<string, any>): string {
if (!this.i18nLoaded) return key;
const translation = this.i18nInstance.t(key, {
...options,
lng: this.language,
});
if (!translation) return key;
return translation;
console.info('options : ', options);
return 'To replace'; /* A remplacer car on peut faire sans le I18n instance */
// const translation = this.i18nInstance.t(key, {
// ...options,
// lng: this.language,
// });
// if (!translation) return key;
// return translation;
}

fetchServiceId() {
async fetchServiceId() {
apiClient.v6
.get(`${this.servicePath}/serviceInfos`)
.then((response) => {
Expand Down Expand Up @@ -186,7 +174,7 @@ export class MscBillingTile implements IMscBillingTile {
});
}

fetchServiceDetails(serviceId: string) {
async fetchServiceDetails(serviceId: string) {
apiClient.v6
.get(`/services/${serviceId}`)
.then((response) => {
Expand Down Expand Up @@ -255,25 +243,19 @@ export class MscBillingTile implements IMscBillingTile {
const getText = () => {
switch (status) {
case 'deleteAtExpiration':
return this.getTranslation(
'manager_billing_service_status_delete_at_expiration',
);
return this.localStrings
.manager_billing_service_status_delete_at_expiration;
case 'automatic':
return this.getTranslation(
'manager_billing_service_status_automatic',
);
return this.localStrings.manager_billing_service_status_automatic;
case 'manualPayment':
return this.getTranslation(
'manager_billing_service_status_manualPayment',
);
return this.localStrings
.manager_billing_service_status_manualPayment;
case 'expired':
return this.getTranslation(
'manager_billing_service_status_expired',
);
return this.localStrings.manager_billing_service_status_expired;
default:
return this.getTranslation(
`manager_billing_service_status_${status}`,
);
return this.localStrings[
`manager_billing_service_status_${status}`
];
}
};

Expand All @@ -285,7 +267,7 @@ export class MscBillingTile implements IMscBillingTile {
color={OdsThemeColorIntent.primary}
href={`https://eu.ovh.com/fr/cgi-bin/order/renew.cgi?domainChooser=${this.getServiceName}`}
>
{this.getTranslation('billing_services_actions_menu_renew')}
{this.localStrings.billing_services_actions_menu_renew}
<osds-icon
class="link-icon"
size={OdsIconSize.xxs}
Expand All @@ -312,25 +294,22 @@ export class MscBillingTile implements IMscBillingTile {
href={`https://www.ovh.com/manager/#/dedicated/billing/autorenew/delete?serviceId=${this.getServiceName()}&serviceType=${this.getServiceType()}`}
color={OdsThemeColorIntent.primary}
>
{this.getTranslation(
'billing_services_actions_menu_manage_renew',
)}
{this.localStrings.billing_services_actions_menu_manage_renew}
</osds-link>
<osds-link
href={`https://www.ovh.com/manager/#/dedicated/${this.servicePath}/commitment`}
color={OdsThemeColorIntent.primary}
>
{this.getTranslation(
'billing_services_actions_menu_anticipate_renew',
)}
{
this.localStrings
.billing_services_actions_menu_anticipate_renew
}
</osds-link>
<osds-link
href={`https://www.ovh.com/manager/#/dedicated/billing/autorenew/delete?serviceId=${this.getServiceName()}&serviceType=${this.getServiceType()}`}
color={OdsThemeColorIntent.primary}
>
{this.getTranslation(
'billing_services_actions_menu_resiliate',
)}
{this.localStrings.billing_services_actions_menu_resiliate}
</osds-link>
</div>
);
Expand All @@ -342,25 +321,22 @@ export class MscBillingTile implements IMscBillingTile {
href={`https://www.ovh.com/manager/#/dedicated/billing/autorenew/delete?serviceId=${this.getServiceName()}&serviceType=${this.getServiceType()}`}
color={OdsThemeColorIntent.primary}
>
{this.getTranslation(
'billing_services_actions_menu_manage_renew',
)}
{this.localStrings.billing_services_actions_menu_manage_renew}
</osds-link>
<osds-link
href={`https://www.ovh.com/manager/#/${this.servicePath}/commitment`}
color={OdsThemeColorIntent.primary}
>
{this.getTranslation(
'billing_services_actions_menu_anticipate_renew',
)}
{
this.localStrings
.billing_services_actions_menu_anticipate_renew
}
</osds-link>
<osds-link
href={`https://www.ovh.com/manager/#/dedicated/billing/autorenew/delete?serviceId=${this.getServiceName()}&serviceType=${this.getServiceType()}`}
color={OdsThemeColorIntent.primary}
>
{this.getTranslation(
'billing_services_actions_menu_resiliate',
)}
{this.localStrings.billing_services_actions_menu_resiliate}
</osds-link>
</div>
);
Expand Down Expand Up @@ -501,9 +477,10 @@ export class MscBillingTile implements IMscBillingTile {
size={OdsChipSize.sm}
variant={OdsChipVariant.flat}
>
{this.getTranslation(
'manager_billing_subscription_engagement_status_none',
)}
{
this.localStrings
.manager_billing_subscription_engagement_status_none
}
</osds-chip>
<div>
<osds-link
Expand All @@ -512,9 +489,10 @@ export class MscBillingTile implements IMscBillingTile {
href={'#'}
target={OdsHTMLAnchorElementTarget._blank}
>
{this.getTranslation(
'manager_billing_subscription_engagement_commit',
)}
{
this.localStrings
.manager_billing_subscription_engagement_commit
}
<osds-icon
class="link-icon"
size={OdsIconSize.xxs}
Expand All @@ -536,14 +514,13 @@ export class MscBillingTile implements IMscBillingTile {
href={`https://www.ovh.com/manager/#/dedicated/contacts/services?serviceName=${this.getServiceName()}`}
color={OdsThemeColorIntent.primary}
>
{this.getTranslation(
'manager_billing_subscription_contacts_management',
)}
{
this.localStrings
.manager_billing_subscription_contacts_management
}
</osds-link>
<osds-link href={``} color={OdsThemeColorIntent.primary}>
{this.getTranslation(
'billing_services_actions_menu_change_owner',
)}
{this.localStrings.billing_services_actions_menu_change_owner}
<osds-icon
class="link-icon"
size={OdsIconSize.xxs}
Expand All @@ -552,9 +529,10 @@ export class MscBillingTile implements IMscBillingTile {
/>
</osds-link>
<osds-link href={``} color={OdsThemeColorIntent.primary}>
{this.getTranslation(
'billing_services_actions_menu_configuration_update_owner',
)}
{
this.localStrings
.billing_services_actions_menu_configuration_update_owner
}
</osds-link>
</div>
);
Expand Down Expand Up @@ -591,21 +569,15 @@ export class MscBillingTile implements IMscBillingTile {
>
<div>
{this.contactAdmin}{' '}
{this.getTranslation(
'manager_billing_subscription_contacts_admin',
)}
{this.localStrings.manager_billing_subscription_contacts_admin}
</div>
<div>
{this.contactTech}{' '}
{this.getTranslation(
'manager_billing_subscription_contacts_tech',
)}
{this.localStrings.manager_billing_subscription_contacts_tech}
</div>
<div>
{this.contactBilling}{' '}
{this.getTranslation(
'manager_billing_subscription_contacts_billing',
)}
{this.localStrings.manager_billing_subscription_contacts_billing}
</div>
</osds-text>
</>
Expand All @@ -625,7 +597,7 @@ export class MscBillingTile implements IMscBillingTile {
size={OdsThemeTypographySize._300}
color={OdsThemeColorIntent.text}
>
{this.getTranslation('manager_billing_subscription')}
{this.localStrings.manager_billing_subscription}
</osds-text>
{/* OFFER */}
{this.offer && (
Expand All @@ -637,7 +609,7 @@ export class MscBillingTile implements IMscBillingTile {
size={OdsThemeTypographySize._200}
color={OdsThemeColorIntent.text}
>
{this.getTranslation('manager_billing_subscription_offer')}
{this.localStrings.manager_billing_subscription_offer}
</osds-text>
<osds-text
class="tile-description"
Expand All @@ -657,7 +629,7 @@ export class MscBillingTile implements IMscBillingTile {
size={OdsThemeTypographySize._200}
color={OdsThemeColorIntent.text}
>
{this.getTranslation('manager_billing_subscription_creation')}
{this.localStrings.manager_billing_subscription_creation}
</osds-text>
<osds-text
class="tile-description"
Expand All @@ -675,7 +647,7 @@ export class MscBillingTile implements IMscBillingTile {
size={OdsThemeTypographySize._200}
color={OdsThemeColorIntent.text}
>
{this.getTranslation('manager_billing_subscription_next_due_date')}
{this.localStrings.manager_billing_subscription_next_due_date}
</osds-text>
{RenewalContent()}
{/* COMMITMENT */}
Expand All @@ -686,7 +658,7 @@ export class MscBillingTile implements IMscBillingTile {
size={OdsThemeTypographySize._200}
color={OdsThemeColorIntent.text}
>
{this.getTranslation('manager_billing_subscription_engagement')}
{this.localStrings.manager_billing_subscription_engagement}
</osds-text>
<osds-text
class="tile-description"
Expand All @@ -704,7 +676,7 @@ export class MscBillingTile implements IMscBillingTile {
size={OdsThemeTypographySize._200}
color={OdsThemeColorIntent.text}
>
{this.getTranslation('manager_billing_subscription_contacts')}
{this.localStrings.manager_billing_subscription_contacts}
</osds-text>
<div>{ContactContent()}</div>
{/* removed link using menu
Expand Down
Loading

0 comments on commit 8a0b6b0

Please sign in to comment.