@salla.sa/twilight-components
Version:
Salla Web Component
328 lines (327 loc) • 14.1 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { newSpecPage } from "@stencil/core/testing";
import { SallaProductCard } from "../salla-product-card";
describe('salla-product-card', () => {
it("should build", () => {
expect(new SallaProductCard()).toBeTruthy();
});
describe("rendering and props", () => {
let page;
it("should be able to render component in dom", async () => {
page = await newSpecPage({
components: [SallaProductCard],
html: `<salla-product-card is-special show-uantity fit-image-height product='{
"id": 189738233870,
"name": "كرسي فلات جلد دائري",
"sku": "15504448-30000024230-",
"subtitle": "كرسي جامد جدا",
"url": "https://salla.design/ar/dev-db68v6oemahrmbhb/كرسي-فلات-جلد-دائري/p1897382870",
"promotion_title": "خصم ٥٠٪",
"discount_ends":"2023-08-10",
"status": "sale",
"type": "product",
"quantity": 30,
"max_quantity": 30,
"sold_quantity": null,
"price": "١٤٩ ر.س",
"regular_price": "٢٩٩ ر.س",
"sale_price": "١٤٩ ر.س",
"discount_percentage": "50.167224080268%",
"image": {
"alt": "كرسي فلات جلد دائري"
},
"weight": "٠٫١ كجم",
"donation": null,
"is_donation": false,
"is_in_wishlist": false,
"is_on_sale": true,
"is_out_of_stock": false,
"add_to_cart_label": "إضافة للسلة",
"show_availability": false
}'></salla-product-card>`
});
let productCard = await page.doc.querySelector("salla-product-card");
expect(productCard).not.toBeNull();
});
it("should show quantity as product badge", async () => {
page = await newSpecPage({
components: [SallaProductCard],
html: `<salla-product-card is-special show-quantity product='{
"id": 189738233870,
"name": "كرسي فلات جلد دائري",
"sku": "15504448-30000024230-",
"subtitle": "كرسي جامد جدا",
"url": "https://salla.design/ar/dev-db68v6oemahrmbhb/كرسي-فلات-جلد-دائري/p1897382870",
"discount_ends":"2023-08-10",
"status": "sale",
"type": "product",
"quantity": 30,
"max_quantity": 30,
"sold_quantity": null,
"price": "١٤٩ ر.س",
"regular_price": "٢٩٩ ر.س",
"sale_price": "١٤٩ ر.س",
"discount_percentage": "50.167224080268%",
"image": {
"url": "https://cdn.salla.sa/zBnEG/B1jy1WZ1cPnauT1KtlnhvkzsSLa0mTxBL21vWNgB.jpg",
"alt": "كرسي فلات جلد دائري"
},
"weight": "٠٫١ كجم",
"donation": null,
"is_donation": false,
"is_in_wishlist": false,
"is_on_sale": true,
"is_out_of_stock": false,
"add_to_cart_label": "إضافة للسلة",
"show_availability": false
}'></salla-product-card>`
});
let productCard = await page.doc.querySelector("salla-product-card");
productCard.fullImage = false;
productCard.minimal = false;
await page.waitForChanges();
let productCardQuantity = await page.doc.querySelector(".s-product-card-quantity");
expect(productCardQuantity).not.toBeNull();
});
it("should render out of stock badge", async () => {
page = await newSpecPage({
components: [SallaProductCard],
html: `<salla-product-card is-special show-quantity product='{
"id": 189738233870,
"name": "كرسي فلات جلد دائري",
"sku": "15504448-30000024230-",
"subtitle": "كرسي جامد جدا",
"url": "https://salla.design/ar/dev-db68v6oemahrmbhb/كرسي-فلات-جلد-دائري/p1897382870",
"discount_ends":"2023-08-10",
"status": "sale",
"type": "product",
"max_quantity": 30,
"sold_quantity": null,
"price": "١٤٩ ر.س",
"regular_price": "٢٩٩ ر.س",
"sale_price": "١٤٩ ر.س",
"discount_percentage": "50.167224080268%",
"image": {
"url": "https://cdn.salla.sa/zBnEG/B1jy1WZ1cPnauT1KtlnhvkzsSLa0mTxBL21vWNgB.jpg",
"alt": "كرسي فلات جلد دائري"
},
"weight": "٠٫١ كجم",
"donation": {"target_message":null,"target_date":"2023-04-18","target_end_date":"2023-04-18","target_amount":400,"collected_amount":380,"can_donate":true},
"rating": {"stars":4},
"is_donation": false,
"is_in_wishlist": false,
"is_on_sale": true,
"is_out_of_stock": true,
"add_to_cart_label": "إضافة للسلة",
"show_availability": false
}'></salla-product-card>`
});
let productCard = await page.doc.querySelector("salla-product-card");
productCard.fullImage = false;
productCard.minimal = false;
await page.waitForChanges();
let productCardQuantity = await page.doc.querySelector(".s-product-card-out-badge");
let productRatingStars = await page.doc.querySelector(".s-product-card-rating");
expect(productCardQuantity).not.toBeNull();
expect(productRatingStars).not.toBeNull();
});
it("should not render any badge", async () => {
page = await newSpecPage({
components: [SallaProductCard],
html: `<salla-product-card is-special show-quantity product='{
"id": 189738233870,
"name": "كرسي فلات جلد دائري",
"sku": "15504448-30000024230-",
"subtitle": "كرسي جامد جدا",
"url": "https://salla.design/ar/dev-db68v6oemahrmbhb/كرسي-فلات-جلد-دائري/p1897382870",
"discount_ends":"2023-08-10",
"status": "sale",
"type": "product",
"max_quantity": 30,
"sold_quantity": null,
"price": "١٤٩ ر.س",
"regular_price": "٢٩٩ ر.س",
"sale_price": "١٤٩ ر.س",
"starting_price": "١٤٩ ر.س",
"discount_percentage": "50.167224080268%",
"image": {
"url": "https://cdn.salla.sa/zBnEG/B1jy1WZ1cPnauT1KtlnhvkzsSLa0mTxBL21vWNgB.jpg",
"alt": "كرسي فلات جلد دائري"
},
"weight": "٠٫١ كجم",
"donation": null,
"is_donation": false,
"is_in_wishlist": false,
"is_on_sale": true,
"is_out_of_stock": false,
"add_to_cart_label": "إضافة للسلة",
"show_availability": false
}'></salla-product-card>`
});
let productCard = await page.doc.querySelector("salla-product-card");
productCard.fullImage = false;
productCard.minimal = false;
await page.waitForChanges();
let productCardPromotionTitle = await page.doc.querySelector(".s-product-card-promotion-title");
let productCardQuantity = await page.doc.querySelector(".s-product-card-quantity");
let productCardOutOfStock = await page.doc.querySelector(".s-product-card-out-badge");
expect(productCardPromotionTitle).toBeNull();
expect(productCardQuantity).toBeNull();
expect(productCardOutOfStock).toBeNull();
});
it("should render horizontal product card", async () => {
page = await newSpecPage({
components: [SallaProductCard],
html: `<salla-product-card horizontal full-image is-special show-quantity product='{
"id": 189738233870,
"name": "كرسي فلات جلد دائري",
"sku": "15504448-30000024230-",
"subtitle": "كرسي جامد جدا",
"url": "https://salla.design/ar/dev-db68v6oemahrmbhb/كرسي-فلات-جلد-دائري/p1897382870",
"discount_ends":"2023-08-10",
"status": "sale",
"type": "product",
"max_quantity": 30,
"sold_quantity": null,
"price": "١٤٩ ر.س",
"regular_price": "٢٩٩ ر.س",
"sale_price": "١٤٩ ر.س",
"starting_price": "١٤٩ ر.س",
"discount_percentage": "50.167224080268%",
"image": {
"url": "https://cdn.salla.sa/zBnEG/B1jy1WZ1cPnauT1KtlnhvkzsSLa0mTxBL21vWNgB.jpg",
"alt": "كرسي فلات جلد دائري"
},
"weight": "٠٫١ كجم",
"donation": null,
"is_donation": false,
"is_in_wishlist": false,
"is_on_sale": true,
"is_out_of_stock": false,
"add_to_cart_label": "إضافة للسلة",
"show_availability": false
}'></salla-product-card>`
});
let wishlistTogglerButtonAtTheFooter = await page.doc.querySelector(".s-product-card-content-footer .s-product-card-wishlist-btn");
expect(wishlistTogglerButtonAtTheFooter).not.toBeNull();
});
});
describe("Testing getProductPrice private method", () => {
it("should render product sales price", async () => {
let page = await newSpecPage({
components: [SallaProductCard],
html: `<salla-product-card is-special show-quantity product='{
"id": 189738233870,
"name": "كرسي فلات جلد دائري",
"sku": "15504448-30000024230-",
"subtitle": "كرسي جامد جدا",
"url": "https://salla.design/ar/dev-db68v6oemahrmbhb/كرسي-فلات-جلد-دائري/p1897382870",
"discount_ends":"2023-08-10",
"status": "sale",
"type": "product",
"quantity": 30,
"max_quantity": 30,
"sold_quantity": null,
"price": "١٤٩ ر.س",
"regular_price": "٢٩٩ ر.س",
"sale_price": "١٤٩ ر.س",
"discount_percentage": "50.167224080268%",
"image": {
"url": "https://cdn.salla.sa/zBnEG/B1jy1WZ1cPnauT1KtlnhvkzsSLa0mTxBL21vWNgB.jpg",
"alt": "كرسي فلات جلد دائري"
},
"weight": "٠٫١ كجم",
"donation": null,
"is_donation": false,
"is_in_wishlist": false,
"is_on_sale": true,
"is_out_of_stock": false,
"add_to_cart_label": "إضافة للسلة",
"show_availability": false
}'></salla-product-card>`
});
let salesPriceClass = await page.doc.querySelector(".s-product-card-sale-price");
expect(salesPriceClass).not.toBeNull();
});
it("should render product starting price", async () => {
let page = await newSpecPage({
components: [SallaProductCard],
html: `<salla-product-card is-special show-quantity product='{
"id": 189738233870,
"name": "كرسي فلات جلد دائري",
"sku": "15504448-30000024230-",
"subtitle": "كرسي جامد جدا",
"url": "https://salla.design/ar/dev-db68v6oemahrmbhb/كرسي-فلات-جلد-دائري/p1897382870",
"discount_ends":"2023-08-10",
"status": "sale",
"type": "product",
"quantity": 30,
"max_quantity": 30,
"sold_quantity": null,
"price": "١٤٩ ر.س",
"regular_price": "٢٩٩ ر.س",
"sale_price": "١٤٩ ر.س",
"starting_price": "١٤٩ ر.س",
"discount_percentage": "50.167224080268%",
"image": {
"url": "https://cdn.salla.sa/zBnEG/B1jy1WZ1cPnauT1KtlnhvkzsSLa0mTxBL21vWNgB.jpg",
"alt": "كرسي فلات جلد دائري"
},
"weight": "٠٫١ كجم",
"donation": null,
"is_donation": false,
"is_in_wishlist": false,
"is_on_sale": false,
"is_out_of_stock": false,
"add_to_cart_label": "إضافة للسلة",
"show_availability": false
}'></salla-product-card>`
});
let startingPriceClass = await page.doc.querySelector(".s-product-card-starting-price");
expect(startingPriceClass).not.toBeNull();
});
it("should render product normal price", async () => {
let page = await newSpecPage({
components: [SallaProductCard],
html: `<salla-product-card is-special show-quantity product='{
"id": 189738233870,
"name": "كرسي فلات جلد دائري",
"sku": "15504448-30000024230-",
"subtitle": "كرسي جامد جدا",
"url": "https://salla.design/ar/dev-db68v6oemahrmbhb/كرسي-فلات-جلد-دائري/p1897382870",
"discount_ends":"2023-08-10",
"status": "sale",
"type": "product",
"quantity": 30,
"max_quantity": 30,
"sold_quantity": null,
"price": "١٤٩ ر.س",
"regular_price": "٢٩٩ ر.س",
"sale_price": "١٤٩ ر.س",
"discount_percentage": "50.167224080268%",
"image": {
"url": "https://cdn.salla.sa/zBnEG/B1jy1WZ1cPnauT1KtlnhvkzsSLa0mTxBL21vWNgB.jpg",
"alt": "كرسي فلات جلد دائري"
},
"weight": "٠٫١ كجم",
"donation": null,
"is_donation": false,
"is_in_wishlist": false,
"is_on_sale": false,
"is_out_of_stock": false,
"add_to_cart_label": "إضافة للسلة",
"show_availability": false
}'></salla-product-card>`
});
let normalPrice = await page.doc.querySelector(".s-product-card-price");
let startingPriceClass = await page.doc.querySelector(".s-product-card-starting-price");
let salesPriceClass = await page.doc.querySelector(".s-product-card-sale-price");
expect(normalPrice).not.toBeNull();
expect(startingPriceClass).toBeNull();
expect(salesPriceClass).toBeNull();
});
});
});
//# sourceMappingURL=salla-product-card.spec.js.map