test: scaffold unit tests in composables and api client package

package.json

@@ -64,7 +64,6 @@
     "husky": "^7.0.4",
     "jest": "^27.4.7",
     "jest-date-mock": "^1.0.8",
-    "jest-environment-jsdom-sixteen": "^2.0.0",
     "jest-localstorage-mock": "^2.4.18",
     "jest-silent-reporter": "^0.5.0",
     "jest-transform-stub": "^2.0.0",

packages/api-client/__tests__/api/storeConfig/storeConfig.spec.ts

@@ -0,0 +1,70 @@
+import request from '../../setup/request';
+import {STORE_CONFIG_MOCK_RESP} from './../../mockData/api/storeConfig'
+
+describe('[Magento-API-Client] storeConfig', () => {
+  it('Fetching the storeConfig', async () => {
+    const res = await request({
+      body: JSON.stringify({
+        query: `
+          query {
+            storeConfig {
+              allow_guests_to_write_product_reviews
+              allow_items
+              allow_order
+              base_currency_code
+              catalog_default_sort_by
+              category_fixed_product_tax_display_setting
+              cms_home_page
+              cms_no_cookies
+              cms_no_route
+              configurable_thumbnail_source
+              copyright
+              default_description
+              default_display_currency_code
+              default_keywords
+              default_title
+              grid_per_page
+              grid_per_page_values
+              head_shortcut_icon
+              header_logo_src
+              is_default_store
+              is_default_store_group
+              list_mode
+              list_per_page
+              list_per_page_values
+              locale
+              logo_alt
+              logo_height
+              logo_width
+              magento_wishlist_general_is_enabled
+              minimum_password_length
+              no_route
+              product_fixed_product_tax_display_setting
+              product_reviews_enabled
+              required_character_classes_number
+              root_category_uid
+              sales_fixed_product_tax_display_setting
+              store_code
+              store_group_code
+              store_group_name
+              store_name
+              store_sort_order
+              timezone
+              title_prefix
+              title_separator
+              title_suffix
+              use_store_in_url
+              website_code
+              website_name
+              weight_unit
+              welcome
+            }
+          }
+        `
+      })
+    });
+    const { data } = await res.json();
+
+    expect(data).toEqual(STORE_CONFIG_MOCK_RESP);
+  });
+});

packages/api-client/__tests__/mockData/api/storeConfig.ts

@@ -0,0 +1,58 @@
+const STORE_CONFIG_MOCK_RESP = {
+  storeConfig: {
+    allow_guests_to_write_product_reviews: '1',
+    allow_items: null,
+    allow_order: null,
+    base_currency_code: 'USD',
+    catalog_default_sort_by: 'position',
+    category_fixed_product_tax_display_setting: 'FPT_DISABLED',
+    cms_home_page: 'home',
+    cms_no_cookies: 'enable-cookies',
+    cms_no_route: 'no-route',
+    configurable_thumbnail_source: 'parent',
+    copyright: 'Copyright © 2013-present Magento, Inc. All rights reserved.',
+    default_description: null,
+    default_display_currency_code: 'USD',
+    default_keywords: null,
+    default_title: 'Magento Commerce',
+    grid_per_page: 12,
+    grid_per_page_values: '12,24,36',
+    head_shortcut_icon: null,
+    header_logo_src: null,
+    is_default_store: true,
+    is_default_store_group: true,
+    list_mode: 'grid-list',
+    list_per_page: 10,
+    list_per_page_values: '5,10,15,20,25',
+    locale: 'en_US',
+    logo_alt: null,
+    logo_height: null,
+    logo_width: null,
+    magento_wishlist_general_is_enabled: '1',
+    minimum_password_length: '8',
+    no_route: 'cms/noroute/index',
+    product_fixed_product_tax_display_setting: 'FPT_DISABLED',
+    product_reviews_enabled: '1',
+    required_character_classes_number: '3',
+    root_category_uid: 'Mg==',
+    sales_fixed_product_tax_display_setting: 'FPT_DISABLED',
+    store_code: 'default',
+    store_group_code: 'main_website_store',
+    store_group_name: 'Main Website Store',
+    store_name: 'Default Store View',
+    store_sort_order: 0,
+    timezone: 'America/Chicago',
+    title_prefix: null,
+    title_separator: '-',
+    title_suffix: null,
+    use_store_in_url: false,
+    website_code: 'base',
+    website_name: 'Main Website',
+    weight_unit: 'lbs',
+    welcome: 'Default welcome msg!',
+  },
+};
+
+export {
+  STORE_CONFIG_MOCK_RESP,
+};

packages/api-client/__tests__/setup/handlers.ts

@@ -0,0 +1,12 @@
+import { graphql } from 'msw';
+import {STORE_CONFIG_MOCK_RESP} from './../mockData/api/storeConfig'
+
+const magento = graphql.link('https://magento2-instance.vuestorefront.io/graphql');
+
+export const handlers = [
+  magento.query('storeConfig', (req, res, ctx) => res(
+    ctx.data({
+      data: STORE_CONFIG_MOCK_RESP,
+    }),
+  )),
+];

packages/api-client/__tests__/setup/request.ts

@@ -0,0 +1,11 @@
+import fetch from 'cross-fetch';
+
+const request = ({ body }) => fetch('https://magento2-instance.vuestorefront.io/graphql', {
+  method: 'POST',
+  headers: {
+    'Content-Type': 'application/json',
+  },
+  body,
+});
+
+export default request;

packages/api-client/__tests__/setup/server.ts

@@ -0,0 +1,4 @@
+import { setupServer } from 'msw/node';
+import { handlers } from './handlers';
+
+export const server = setupServer(...handlers)

packages/api-client/jest.config.js

@@ -1,13 +1,71 @@
-const baseConfig = require('../../jest.base.config');
-
+/* eslint-disable unicorn/prefer-module */
 module.exports = {
-  ...baseConfig,
-  transform: {
-    ...baseConfig.transform,
-    '\\.(gql|graphql)$': 'jest-transform-graphql',
+  globals: {
+    __DEV__: true,
+  },
+  coverageReporters: [
+    'lcov',
+  ],
+  coverageThreshold: {
+    global: {},
   },
-  setupFilesAfterEnv: ['./__tests__/setup.ts'],
+  coveragePathIgnorePatterns: [
+    '/node_modules/',
+    '.d.ts$',
+    '/__mocks__/',
+  ],
+  coverageDirectory: './coverage/',
   moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/$1',
+    '^~/(.*)$': '<rootDir>/$1',
     'api-client(.*)$': '<rootDir>$1',
   },
+  testEnvironment: 'jsdom',
+  transform: {
+    '^.+\\.(ts)$': 'ts-jest',
+    '^.+\\.js$': 'babel-jest',
+  },
+  transformIgnorePatterns: [
+    'node_modules',
+    '<rootDir>/node_modules',
+  ],
+  testMatch: [
+    '<rootDir>/**/__tests__/**/*spec.[jt]s?(x)',
+  ],
+  watchPlugins: [
+    'jest-watch-typeahead/filename',
+    'jest-watch-typeahead/testname',
+    [
+      'jest-watch-toggle-config',
+      {
+        setting: 'verbose',
+      },
+    ],
+    [
+      'jest-watch-toggle-config',
+      {
+        setting: 'collectCoverage',
+      },
+    ],
+    [
+      'jest-watch-toggle-config',
+      {
+        setting: 'notify',
+      },
+    ],
+    [
+      'jest-watch-toggle-config',
+      {
+        setting: 'bail',
+      },
+    ],
+  ],
+  collectCoverageFrom: [
+    '<rootDir>/src/**/*.ts',
+  ],
+  moduleFileExtensions: [
+    'js',
+    'json',
+    'ts',
+  ],
 };

packages/api-client/jest.setup.ts

@@ -0,0 +1,11 @@
+import { server } from './__tests__/setup/server';
+
+// Establish API mocking before all tests.
+beforeAll(() => server.listen());
+
+// Reset any request handlers that we may add during the tests,
+// so they don't affect other tests.
+afterEach(() => server.resetHandlers());
+
+// Clean up after the tests are finished.
+afterAll(() => server.close());

packages/api-client/package.json

@@ -38,6 +38,7 @@
     "dotenv": "^12.0.1",
     "graphql-tools": "^8.2.0",
     "jest-transform-graphql": "^2.1.0",
+    "msw": "^0.36.4",
     "typescript": "^4.5.4",
     "webpack": "4.46.0"
   },