Added autoprefixer test, improved basic example test

frozenSolid · May 26, 2023 · 64ed77c · 64ed77c
1 parent d9a1667
commit 64ed77c
Show file tree

Hide file tree

Showing 7 changed files with 133 additions and 1 deletion.
diff --git a/test/integration/fixtures/autoprefixer-test/index.test.js b/test/integration/fixtures/autoprefixer-test/index.test.js
@@ -0,0 +1,28 @@
+'use strict';
+const path = require('path');
+const fs = require('fs');
+
+test('Should have the expected styles', async () => {
+  fs.readdir('./test-project/build/static/css', (err, files) => {
+    if (err) throw err;
+
+    const cssFile = files.find(file => path.extname(file) === '.css');
+    expect(cssFile).not.toBe(0);
+
+    fs.readFile(`./test-project/build/static/css/${cssFile}`, 'utf8', (err, data) => {
+      if (err) throw err;
+      console.log(data);
+    });
+  });
+  // const outputCSS = 
+  // expect(cracoTestText).toBe('CRACO is working!');
+  expect(true).toBe(true);
+});
+
+afterAll(() => {
+  // Stop the local server
+  execSync(`kill $(lsof -t -i:${global.PORT} -a -c node)`, {
+    cwd: __dirname,
+    stdio: 'ignore',
+  });
+});
diff --git a/test/integration/fixtures/autoprefixer-test/test-package-files/craco.config.js b/test/integration/fixtures/autoprefixer-test/test-package-files/craco.config.js
@@ -0,0 +1,44 @@
+const webpack = require('webpack');
+const isDevelopment = false;
+module.exports = {
+  webpack: {
+    configure: (webpackConfig) => {
+      if (!isDevelopment) {
+        const reactRefreshPluginIndex = webpackConfig.plugins.findIndex(
+          (plugin) => plugin.constructor.name === 'ReactRefreshPlugin'
+        );
+
+        if (reactRefreshPluginIndex !== -1) {
+          webpackConfig.plugins.splice(reactRefreshPluginIndex, 1);
+        }
+
+        const babelLoader = webpackConfig.module.rules
+          .find(
+            (rule) =>
+              rule.oneOf &&
+              rule.oneOf.find(
+                (r) => r.loader && r.loader.includes('babel-loader')
+              )
+          )
+          .oneOf.find((r) => r.loader && r.loader.includes('babel-loader'));
+
+        const reactRefreshBabelIndex = babelLoader.options.plugins.findIndex(
+          (plugin) =>
+            plugin && plugin.includes && plugin.includes('react-refresh/babel')
+        );
+
+        if (reactRefreshBabelIndex !== -1) {
+          babelLoader.options.plugins.splice(reactRefreshBabelIndex, 1);
+        }
+      }
+      return webpackConfig;
+    },
+  },
+  style: {
+    postcss: {
+      plugins: [
+        require('autoprefixer')()
+      ]
+    }
+  }
+};
diff --git a/test/integration/fixtures/autoprefixer-test/test-package-files/package.json b/test/integration/fixtures/autoprefixer-test/test-package-files/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "craco-postcss-test",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "web-vitals": "^3.3.1",
+    "autoprefixer": "^10.4.14"
+  },
+  "scripts": {
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/test/integration/fixtures/autoprefixer-test/test-package-files/public/index.html b/test/integration/fixtures/autoprefixer-test/test-package-files/public/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>React App</title>
+    <link rel="stylesheet" href="index.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/test/integration/fixtures/autoprefixer-test/test-package-files/src/index.css b/test/integration/fixtures/autoprefixer-test/test-package-files/src/index.css
@@ -0,0 +1,12 @@
+::placeholder {
+  color: gray;
+}
+
+.image {
+  background-image: url("https://google.com");
+}
+@media (min-resolution: 2dppx) {
+  .image {
+    background-image: url("http://nxetflix.com");
+  }
+}
diff --git a/test/integration/fixtures/autoprefixer-test/test-package-files/src/index.js b/test/integration/fixtures/autoprefixer-test/test-package-files/src/index.js
@@ -0,0 +1,13 @@
+/* global __CUSTOM_GLOBAL_CONSTANT__ */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <div className="container">
+      <h1>Hi!</h1>
+    </div>
+  </React.StrictMode>,
+  document.getElementById('root')
+);
diff --git a/test/integration/fixtures/basic-integration-test/index.test.js b/test/integration/fixtures/basic-integration-test/index.test.js
@@ -19,7 +19,7 @@ beforeAll(async () => {
   });
 });
 
-test('Should have the expected styles', async () => {
+test('Should have the expected custom craco variable name', async () => {
   await page.goto(global.URL, { waitUntil: 'domcontentloaded' }); //todo: make the url changeble
 
   const cracoTestText = await page.$eval(