Fix swatches selection, add support for basic auth

.gitignore

@@ -1,4 +1,4 @@
-magepack.build.js
+magepack.config.js
 
 # Created by https://www.gitignore.io/api/osx,node,windows,visualstudiocode
 # Edit at https://www.gitignore.io/?templates=osx,node,windows,visualstudiocode

cli.js

@@ -19,6 +19,8 @@ program
     .requiredOption('--cms-url <url>', 'CMS page URL.')
     .requiredOption('--category-url <url>', 'Category page URL.')
     .requiredOption('--product-url <url>', 'Product page URL.')
+    .option('-u, --auth-username <user>', 'Basic authentication username.')
+    .option('-p, --auth-password <password>', 'Basic authentication password.')
     .option('-d, --debug', 'Enable logging of debugging information.')
     .action((config) => {
         if (config.debug) {

lib/generate/authenticate.js

@@ -0,0 +1,20 @@
+const logger = require('../utils/logger');
+
+/**
+ *
+ * @param {Page} page Puppeteer Page object instance.
+ * @param {string} username Basic auth username.
+ * @param {string} password Basic auth password.
+ */
+const authenticate = async (page, username, password) => {
+    if (username && password) {
+        logger.debug('Authenticating with given user and password.');
+
+        await page.authenticate({
+            username,
+            password,
+        });
+    }
+};
+
+module.exports = authenticate;

lib/generate/collector/category.js

@@ -1,6 +1,7 @@
 const merge = require('lodash.merge');
 
 const logger = require('../../utils/logger');
+const authenticate = require('../authenticate');
 const collectModules = require('../collectModules');
 
 const baseConfig = {
@@ -15,15 +16,23 @@ const baseConfig = {
  * @param {BrowserContext} browserContext Puppeteer's BrowserContext object.
  * @param {object} configuration Generation configuration object.
  * @param {string} configuration.categoryUrl URL to the category page.
+ * @param {string} configuration.authUsername Basic auth username.
+ * @param {string} configuration.authPassword Basic auth password.
  */
-const category = async (browserContext, { categoryUrl }) => {
+const category = async (
+    browserContext,
+    { categoryUrl, authUsername, authPassword }
+) => {
     const bungleConfig = merge({}, baseConfig);
 
     const bundleName = bungleConfig.name;
 
     logger.info(`Collecting modules for bundle "${bundleName}".`);
 
     const page = await browserContext.newPage();
+    console.log(authUsername, authPassword);
+    await authenticate(page, authUsername, authPassword);
+
     await page.goto(categoryUrl, {
         waitUntil: 'networkidle0',
     });

lib/generate/collector/checkout.js

@@ -3,6 +3,7 @@
 const merge = require('lodash.merge');
 
 const logger = require('../../utils/logger');
+const authenticate = require('../authenticate');
 const collectModules = require('../collectModules');
 
 const baseConfig = {
@@ -17,24 +18,40 @@ const baseConfig = {
  * @param {BrowserContext} browserContext Puppeteer's BrowserContext object.
  * @param {object} configuration Generation configuration object.
  * @param {string} configuration.productUrl URL to the product page.
+ * @param {string} configuration.authUsername Basic auth username.
+ * @param {string} configuration.authPassword Basic auth password.
  */
-const checkout = async (browserContext, { productUrl }) => {
+const checkout = async (
+    browserContext,
+    { productUrl, authUsername, authPassword }
+) => {
     const bundleConfig = merge({}, baseConfig);
 
     const bundleName = bundleConfig.name;
 
     logger.info(`Collecting modules for bundle "${bundleName}".`);
 
     const page = await browserContext.newPage();
+
+    await authenticate(page, authUsername, authPassword);
+
     await page.goto(productUrl, { waitUntil: 'networkidle0' });
 
     // Select option for every swatch if there are any.
-    const swatches = await page.$$('#product_addtocart_form .swatch-attribute');
-    for (let swatchIndex = 1; swatchIndex <= swatches.length; swatchIndex++) {
-        await page.click(
-            `#product_addtocart_form .swatch-attribute:nth-child(${swatchIndex}) .swatch-option:not([disabled])`
-        );
-    }
+    await page.evaluate(() => {
+        Array.from(
+            document.querySelectorAll(
+                '.product-options-wrapper .swatch-attribute'
+            )
+        ).forEach((swatch) => {
+            const swatchOption = swatch.querySelector(
+                '.swatch-option:not([disabled])'
+            );
+            swatch.querySelector('.swatch-input').value =
+                swatchOption.getAttribute('option-id') ||
+                swatchOption.getAttribute('data-option-id');
+        });
+    });
 
     await Promise.all([
         page.waitForNavigation({ waitUntil: 'networkidle0' }),

lib/generate/collector/cms.js

@@ -1,6 +1,7 @@
 const merge = require('lodash.merge');
 
 const logger = require('../../utils/logger');
+const authenticate = require('../authenticate');
 const collectModules = require('../collectModules');
 
 const baseConfig = {
@@ -15,15 +16,20 @@ const baseConfig = {
  * @param {BrowserContext} browserContext Puppeteer's BrowserContext object.
  * @param {object} configuration Generation configuration object.
  * @param {string} configuration.cmsUrl URL to the CMS page.
+ * @param {string} configuration.authUsername Basic auth username.
+ * @param {string} configuration.authPassword Basic auth password.
  */
-const cms = async (browserContext, { cmsUrl }) => {
+const cms = async (browserContext, { cmsUrl, authUsername, authPassword }) => {
     const bundleConfig = merge({}, baseConfig);
 
     const bundleName = bundleConfig.name;
 
     logger.info(`Collecting modules for bundle "${bundleName}".`);
 
     const page = await browserContext.newPage();
+
+    await authenticate(page, authUsername, authPassword);
+
     await page.goto(cmsUrl, { waitUntil: 'networkidle0' });
 
     merge(bundleConfig.modules, await collectModules(page));

lib/generate/collector/product.js

@@ -1,6 +1,7 @@
 const merge = require('lodash.merge');
 
 const logger = require('../../utils/logger');
+const authenticate = require('../authenticate');
 const collectModules = require('../collectModules');
 
 const baseConfig = {
@@ -15,15 +16,23 @@ const baseConfig = {
  * @param {BrowserContext} browserContext Puppeteer's BrowserContext object.
  * @param {object} configuration Generation configuration object.
  * @param {string} configuration.productUrl URL to the product page.
+ * @param {string} configuration.authUsername Basic auth username.
+ * @param {string} configuration.authPassword Basic auth password.
  */
-const product = async (browserContext, { productUrl }) => {
+const product = async (
+    browserContext,
+    { productUrl, authUsername, authPassword }
+) => {
     const bundleConfig = merge({}, baseConfig);
 
     const bundleName = bundleConfig.name;
 
     logger.info(`Collecting modules for bundle "${bundleName}".`);
 
     const page = await browserContext.newPage();
+
+    await authenticate(page, authUsername, authPassword);
+
     await page.goto(productUrl, { waitUntil: 'networkidle0' });
 
     merge(bundleConfig.modules, await collectModules(page));

magepack.config.js

@@ -282,6 +282,14 @@ module.exports = [
                 'Magento_Catalog/js/product/view/product-ids',
             'Magento_Catalog/js/product/view/product-ids-resolver':
                 'Magento_Catalog/js/product/view/product-ids-resolver',
+            'Magento_Catalog/js/product/view/product-info':
+                'Magento_Catalog/js/product/view/product-info',
+            'Magento_Catalog/js/product/view/product-info-resolver':
+                'Magento_Catalog/js/product/view/product-info-resolver',
+            'Magento_ConfigurableProduct/js/catalog-add-to-cart-mixin':
+                'Magento_ConfigurableProduct/js/catalog-add-to-cart-mixin',
+            'Magento_ConfigurableProduct/js/product/view/product-info-resolver':
+                'Magento_ConfigurableProduct/js/product/view/product-info-resolver',
             'Magento_Cookie/js/require-cookie':
                 'Magento_Cookie/js/require-cookie',
             'Magento_Wishlist/js/add-to-wishlist':
@@ -309,6 +317,10 @@ module.exports = [
                 'Magento_Catalog/js/product/view/product-ids',
             'Magento_Catalog/js/product/view/product-ids-resolver':
                 'Magento_Catalog/js/product/view/product-ids-resolver',
+            'Magento_Catalog/js/product/view/product-info':
+                'Magento_Catalog/js/product/view/product-info',
+            'Magento_Catalog/js/product/view/product-info-resolver':
+                'Magento_Catalog/js/product/view/product-info-resolver',
             'Magento_Catalog/js/product/view/provider':
                 'Magento_Catalog/js/product/view/provider',
             'Magento_Catalog/js/related-products':
@@ -317,6 +329,10 @@ module.exports = [
                 'Magento_Catalog/js/validate-product',
             'Magento_Catalog/product/view/validation':
                 'Magento_Catalog/product/view/validation',
+            'Magento_ConfigurableProduct/js/catalog-add-to-cart-mixin':
+                'Magento_ConfigurableProduct/js/catalog-add-to-cart-mixin',
+            'Magento_ConfigurableProduct/js/product/view/product-info-resolver':
+                'Magento_ConfigurableProduct/js/product/view/product-info-resolver',
             'Magento_Cookie/js/require-cookie':
                 'Magento_Cookie/js/require-cookie',
             'Magento_InstantPurchase/js/view/instant-purchase':
@@ -345,6 +361,7 @@ module.exports = [
             'Magento_Wishlist/js/add-to-wishlist':
                 'Magento_Wishlist/js/add-to-wishlist',
             'fotorama/fotorama': 'fotorama/fotorama',
+            'mage/gallery/gallery': 'mage/gallery/gallery',
             'magnifier/magnifier': 'magnifier/magnifier',
             'magnifier/magnify': 'magnifier/magnify',
             'text!Magento_InstantPurchase/template/confirmation.html':
@@ -353,6 +370,7 @@ module.exports = [
                 'Magento_InstantPurchase/template/instant-purchase.html',
             'text!Magento_Theme/templates/breadcrumbs.html':
                 'Magento_Theme/templates/breadcrumbs.html',
+            'text!mage/gallery/gallery.html': 'mage/gallery/gallery.html',
         },
     },
     {
@@ -365,6 +383,10 @@ module.exports = [
                 'Magento_Catalog/js/product/view/product-ids',
             'Magento_Catalog/js/product/view/product-ids-resolver':
                 'Magento_Catalog/js/product/view/product-ids-resolver',
+            'Magento_Catalog/js/product/view/product-info':
+                'Magento_Catalog/js/product/view/product-info',
+            'Magento_Catalog/js/product/view/product-info-resolver':
+                'Magento_Catalog/js/product/view/product-info-resolver',
             'Magento_Checkout/js/action/create-billing-address':
                 'Magento_Checkout/js/action/create-billing-address',
             'Magento_Checkout/js/action/create-shipping-address':
@@ -457,6 +479,10 @@ module.exports = [
                 'Magento_CheckoutAgreements/js/model/agreements-assigner',
             'Magento_CheckoutAgreements/js/model/set-payment-information-mixin':
                 'Magento_CheckoutAgreements/js/model/set-payment-information-mixin',
+            'Magento_ConfigurableProduct/js/catalog-add-to-cart-mixin':
+                'Magento_ConfigurableProduct/js/catalog-add-to-cart-mixin',
+            'Magento_ConfigurableProduct/js/product/view/product-info-resolver':
+                'Magento_ConfigurableProduct/js/product/view/product-info-resolver',
             'Magento_Customer/js/model/address-list':
                 'Magento_Customer/js/model/address-list',
             'Magento_Customer/js/model/customer':