PR-579798: Adding Component cypress testing.

webpack.cy.config.ts

@@ -0,0 +1,114 @@
+import path from 'path';
+import fs from 'fs';
+import webpack from 'webpack';
+import * as dotenv from 'dotenv';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import { CleanWebpackPlugin } from 'clean-webpack-plugin';
+import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
+import TerserPlugin from 'terser-webpack-plugin';
+import ESLintPlugin from 'eslint-webpack-plugin';
+import CopyPlugin from 'copy-webpack-plugin';
+import { resolveTsAliases } from 'resolve-ts-aliases';
+
+const dotEnvToParse = dotenv.config();
+const externalCss = process.env.EXTERNAL_CSS === 'true' ? true : false;
+const externalCssName = process.env.EXTERNAL_CSS_NAME ? process.env.EXTERNAL_CSS_NAME : 'index.css';
+const alias = resolveTsAliases(path.resolve('tsconfig.json'));
+const isWin = process.platform === 'win32';
+
+const copyPatterns: {from: string, to: string}[] = [];
+
+let copyFromUrl = `${path.resolve(__dirname)}/public/img`;
+let copyFromUrlWin = `${path.resolve(__dirname)}\\public\\img`;
+let copyToUrl = 'assets/img';
+let copyToUrlWin = 'assets\\img';
+
+if(isWin){
+	if(fs.existsSync(copyFromUrlWin)){
+		copyPatterns.push({
+			from: copyFromUrlWin, to: copyToUrlWin, 
+		});
+	}
+}else{
+	if(fs.existsSync(copyFromUrl)){
+		copyPatterns.push({
+			from: copyFromUrl, to: copyToUrl, 
+		});
+	}
+}
+
+export default {
+	entry: './src/frontend/components/index.tsx',
+	resolve: {
+		extensions: ['.js', '.jsx','.ts','.tsx', '.json'],
+		alias,
+	},
+	mode: 'development',
+	output: {
+		path: path.resolve(__dirname, 'build'),
+	},
+	target: 'web',
+	plugins: [
+		new CleanWebpackPlugin(),
+		...(externalCss === true ? [
+			new MiniCssExtractPlugin({
+				filename: externalCssName,
+			}),
+		] : []),
+		new webpack.DefinePlugin({
+			'process.env': JSON.stringify(dotEnvToParse.parsed),
+		}),
+		new ESLintPlugin(),
+		new CopyPlugin({
+			patterns: copyPatterns
+		}),
+		new HtmlWebpackPlugin({
+			template: path.join(__dirname, 'build', 'index.html'),
+		}),
+		new webpack.ProvidePlugin({
+			React: 'react',
+		}),
+	],
+	module: {
+		rules: [
+			{
+				test: /\.(js|jsx|ts|tsx)$/,
+				exclude: /node_modules/,
+				use: {
+					loader: 'babel-loader',
+				},
+			},
+			{
+				test: /\.(css|sass|scss)$/,
+				use: [
+					externalCss === true ? MiniCssExtractPlugin.loader : 'style-loader',
+					'css-loader',
+					'sass-loader',
+				], 
+			},
+			{
+				test: /\.(png|jpg|jpeg|gif|svg|ico|mp4|avi|ttf|otf|eot|woff|woff2|pdf)$/,
+				loader: 'file-loader',
+				options: {
+					name: 'assets/[name].[ext]',
+				},
+			},
+			{
+				test: /\.(ttf|otf|eot|woff|woff2)$/,
+				loader: 'url-loader',
+				options: {
+					name: 'assets/fonts/[name].[ext]',
+					esModule: false,
+				},
+			},
+		]
+	},
+	optimization: {
+		minimize: true,
+		minimizer: [
+			new CssMinimizerPlugin(),
+			new TerserPlugin(),
+		],
+	},
+};