From 5ca01db4eb5a6bfbf60b5ddfd0b06690b5b79905 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Fri, 17 Jan 2020 15:41:29 +0100 Subject: [PATCH] Fix types --- .../views/ProductList/filters.test.ts | 87 +------------------ src/products/views/ProductList/fixtures.ts | 86 ++++++++++++++++++ .../stories/products/ProductListPage.tsx | 23 +---- 3 files changed, 92 insertions(+), 104 deletions(-) create mode 100644 src/products/views/ProductList/fixtures.ts diff --git a/src/products/views/ProductList/filters.test.ts b/src/products/views/ProductList/filters.test.ts index 6c5460dac..f5960b563 100644 --- a/src/products/views/ProductList/filters.test.ts +++ b/src/products/views/ProductList/filters.test.ts @@ -2,20 +2,13 @@ import { createIntl } from "react-intl"; import { stringify as stringifyQs } from "qs"; import { ProductListUrlFilters } from "@saleor/products/urls"; -import { - createFilterStructure, - ProductStatus -} from "@saleor/products/components/ProductListPage"; +import { createFilterStructure } from "@saleor/products/components/ProductListPage"; import { getFilterQueryParams } from "@saleor/utils/filters"; import { getExistingKeys, setFilterOptsStatus } from "@test/filters"; import { config } from "@test/intl"; import { StockAvailability } from "@saleor/types/globalTypes"; -import { categories } from "@saleor/categories/fixtures"; -import { fetchMoreProps, searchPageProps } from "@saleor/fixtures"; -import { collections } from "@saleor/collections/fixtures"; -import { productTypes } from "@saleor/productTypes/fixtures"; -import { attributes } from "@saleor/attributes/fixtures"; import { getFilterVariables, getFilterQueryParam } from "./filters"; +import { productListFilterOpts } from "./fixtures"; describe("Filtering query params", () => { it("should be empty object if no params given", () => { @@ -41,81 +34,7 @@ describe("Filtering query params", () => { describe("Filtering URL params", () => { const intl = createIntl(config); - const filters = createFilterStructure(intl, { - attributes: attributes.map(attr => ({ - active: false, - choices: attr.values.map(val => ({ - label: val.name, - value: val.slug - })), - name: attr.name, - slug: attr.slug, - value: [attr.values[0].slug, attr.values[2].slug] - })), - categories: { - ...fetchMoreProps, - ...searchPageProps, - active: false, - choices: categories.slice(5).map(category => ({ - label: category.name, - value: category.id - })), - displayValues: [ - { - label: categories[5].name, - value: categories[5].id - } - ], - value: [categories[5].id] - }, - collections: { - ...fetchMoreProps, - ...searchPageProps, - active: false, - choices: collections.slice(5).map(category => ({ - label: category.name, - value: category.id - })), - displayValues: [ - { - label: collections[5].name, - value: collections[5].id - } - ], - value: [collections[5].id] - }, - price: { - active: false, - value: { - max: "20", - min: "10" - } - }, - productType: { - ...fetchMoreProps, - ...searchPageProps, - active: false, - choices: productTypes.slice(3).map(category => ({ - label: category.name, - value: category.id - })), - displayValues: [ - { - label: productTypes[3].name, - value: productTypes[3].id - } - ], - value: [productTypes[4].id] - }, - status: { - active: false, - value: ProductStatus.PUBLISHED - }, - stockStatus: { - active: false, - value: StockAvailability.IN_STOCK - } - }); + const filters = createFilterStructure(intl, productListFilterOpts); it("should be empty if no active filters", () => { const filterQueryParams = getFilterQueryParams( diff --git a/src/products/views/ProductList/fixtures.ts b/src/products/views/ProductList/fixtures.ts new file mode 100644 index 000000000..82c5812f5 --- /dev/null +++ b/src/products/views/ProductList/fixtures.ts @@ -0,0 +1,86 @@ +import { + ProductListFilterOpts, + ProductStatus +} from "@saleor/products/components/ProductListPage"; +import { attributes } from "@saleor/attributes/fixtures"; +import { fetchMoreProps, searchPageProps } from "@saleor/fixtures"; +import { categories } from "@saleor/categories/fixtures"; +import { collections } from "@saleor/collections/fixtures"; +import { productTypes } from "@saleor/productTypes/fixtures"; +import { StockAvailability } from "@saleor/types/globalTypes"; + +export const productListFilterOpts: ProductListFilterOpts = { + attributes: attributes.map(attr => ({ + active: false, + choices: attr.values.map(val => ({ + label: val.name, + value: val.slug + })), + name: attr.name, + slug: attr.slug, + value: [attr.values[0].slug, attr.values.length > 2 && attr.values[2].slug] + })), + categories: { + ...fetchMoreProps, + ...searchPageProps, + active: false, + choices: categories.slice(5).map(category => ({ + label: category.name, + value: category.id + })), + displayValues: [ + { + label: categories[5].name, + value: categories[5].id + } + ], + value: [categories[5].id] + }, + collections: { + ...fetchMoreProps, + ...searchPageProps, + active: false, + choices: collections.slice(5).map(category => ({ + label: category.name, + value: category.id + })), + displayValues: [ + { + label: collections[5].name, + value: collections[5].id + } + ], + value: [collections[5].id] + }, + price: { + active: false, + value: { + max: "20", + min: "10" + } + }, + productType: { + ...fetchMoreProps, + ...searchPageProps, + active: false, + choices: productTypes.slice(3).map(category => ({ + label: category.name, + value: category.id + })), + displayValues: [ + { + label: productTypes[3].name, + value: productTypes[3].id + } + ], + value: [productTypes[4].id] + }, + status: { + active: false, + value: ProductStatus.PUBLISHED + }, + stockStatus: { + active: false, + value: StockAvailability.IN_STOCK + } +}; diff --git a/src/storybook/stories/products/ProductListPage.tsx b/src/storybook/stories/products/ProductListPage.tsx index 4e6cc84fb..483084f10 100644 --- a/src/storybook/stories/products/ProductListPage.tsx +++ b/src/storybook/stories/products/ProductListPage.tsx @@ -7,7 +7,7 @@ import { products as productListFixture } from "@saleor/products/fixtures"; import { ProductListUrlSortField } from "@saleor/products/urls"; import { attributes } from "@saleor/productTypes/fixtures"; import { ListViews } from "@saleor/types"; -import { StockAvailability } from "@saleor/types/globalTypes"; +import { productListFilterOpts } from "@saleor/products/views/ProductList/fixtures"; import { fetchMoreProps, filterPageProps, @@ -16,8 +16,7 @@ import { sortPageProps } from "../../../fixtures"; import ProductListPage, { - ProductListPageProps, - ProductStatus + ProductListPageProps } from "../../../products/components/ProductListPage"; import Decorator from "../../Decorator"; @@ -38,23 +37,7 @@ const props: ProductListPageProps = { activeAttributeSortId: undefined, availableInGridAttributes: attributes, defaultSettings: defaultListSettings[ListViews.PRODUCT_LIST], - filterOpts: { - price: { - active: false, - value: { - max: "30", - min: "10" - } - }, - status: { - active: false, - value: ProductStatus.PUBLISHED - }, - stockStatus: { - active: false, - value: StockAvailability.IN_STOCK - } - }, + filterOpts: productListFilterOpts, gridAttributes: attributes, products, settings: {