add circleci tests

Author: jpavon

.circleci/config.yml

@@ -0,0 +1,30 @@
+version: 2
+jobs:
+  test-template:
+    docker:
+      - image: circleci/node:8.11.3-browsers
+    working_directory: ~/template
+    steps:
+      - checkout
+      - run: npm pack
+      - run: npx create-react-app ~/template/test-template --scripts-version=/home/circleci/template/jpavon-react-scripts-ts-0.6.6.tgz
+      - run: cd ~/template/test-template && yarn test
+
+  test-kitchensink:
+    docker:
+      - image: circleci/node:8.11.3-browsers
+    working_directory: ~/kitchensink
+    steps:
+      - checkout
+      - run: npm pack
+      - run: E2E_TEST='true' npx create-react-app ~/kitchensink/test-kitchensink --scripts-version=/home/circleci/kitchensink/jpavon-react-scripts-ts-0.6.6.tgz --internal-testing-template=/home/circleci/kitchensink/fixtures/kitchensink
+      - run: cd ~/kitchensink/test-kitchensink && yarn test
+      - run: cd ~/kitchensink/test-kitchensink && yarn e2e:dev
+      - run: cd ~/kitchensink/test-kitchensink && yarn e2e:build
+
+workflows:
+  version: 2
+  tests:
+    jobs:
+      - test-template
+      - test-kitchensink

fixtures/kitchensink/.babelrc

@@ -1,4 +1,3 @@
 {
-  "presets": ["react-app"],
   "plugins": ["babel-plugin-transform-es2015-modules-commonjs"]
 }

fixtures/kitchensink/.env

@@ -1,3 +1,5 @@
 REACT_APP_X = x-from-original-env
 REACT_APP_ORIGINAL_1 = from-original-env-1
 REACT_APP_ORIGINAL_2 = from-original-env-2
+REACT_APP_SHELL_ENV_MESSAGE = shell
+BROWSER=none

fixtures/kitchensink/.template.dependencies.json

@@ -1,13 +1,17 @@
 {
   "dependencies": {
-    "babel-register": "6.22.0",
-    "babel-plugin-transform-es2015-modules-commonjs": "6.22.0",
-    "babel-polyfill": "6.20.0",
-    "chai": "3.5.0",
-    "jsdom": "9.8.3",
-    "mocha": "3.2.0",
+    "@babel/plugin-transform-modules-commonjs": "7.0.0-beta.46",
+    "@babel/polyfill": "7.0.0-beta.46",
+    "@babel/register": "7.0.0-beta.46",
+    "bootstrap": "4.1.0",
     "normalize.css": "7.0.0",
+    "@types/prop-types": "15.5.3",
     "prop-types": "15.5.6",
-    "test-integrity": "1.0.0"
+    "test-integrity": "2.0.1",
+    "start-server-and-test": "1.5.0",
+    "serve": "9.2.0",
+    "puppeteer": "1.5.0",
+    "jest": "23.3.0",
+    "jest-puppeteer": "3.2.1"
   }
 }

fixtures/kitchensink/integration/env.test.js

@@ -0,0 +1,125 @@
+const expectSelectorToHaveColor = async (page, selector, style) => {
+  await page.waitForSelector(selector);
+  const selectorColor = await page.evaluate((providedSelector) => {
+    const el = document.querySelector(providedSelector);
+    const computedStyle = window.getComputedStyle(el);
+    return computedStyle.getPropertyValue('color');
+  }, selector);
+  expect(selectorColor).toBe(style);
+};
+
+const expectImageToLoad = async (page, selector) => {
+  await page.waitForSelector(selector);
+  const imageLoaded = await page.evaluate((providedSelector) => {
+    const el = document.querySelector(providedSelector);
+    return el.complete && el.naturalHeight !== 0;
+  }, selector);
+  expect(imageLoaded).toBeTruthy();
+};
+
+const isProduction = process.env.TEST_URL === 'http://localhost:5000'
+
+describe('integration', () => {
+  beforeAll(async () => {
+    await page.goto(process.env.TEST_URL);
+  });
+
+  it('FileEnvVariables', async () => {
+    if (isProduction) {
+      await expect(page).toMatch('production');
+    } else {
+      await expect(page).toMatch('development');
+    }
+  });
+
+  it('CssInclusion', async () => {
+    await expectSelectorToHaveColor(
+      page,
+      '#feature-css-inclusion',
+      'rgb(219, 112, 147)'
+    );
+  });
+
+  it('CssModuleInclusion', async () => {
+    await expectSelectorToHaveColor(
+      page,
+      '[class*="cssModulesInclusion"]',
+      'rgb(173, 216, 230)'
+    );
+    await expectSelectorToHaveColor(
+      page,
+      '[class*="cssModulesIndexInclusion"]',
+      'rgb(173, 216, 230)'
+    );
+  });
+
+  it('ImageInclusion', async () => {
+    await expectImageToLoad(page, '#feature-image-inclusion');
+  });
+
+  it('JsonInclusion', async () => {
+    await expect(page).toMatch('This is an abstract.');
+  });
+
+  it('LinkedModules', async () => {
+    await expect(page).toMatch('2.0.0');
+  });
+
+  it('SassInclusion', async () => {
+    await expectSelectorToHaveColor(
+      page,
+      '#feature-sass-inclusion',
+      'rgb(220, 20, 60)'
+    );
+  });
+
+  it('SassModulesInclusion', async () => {
+    await expectSelectorToHaveColor(
+      page,
+      '[class*="sassModulesInclusion"]',
+      'rgb(173, 216, 230)'
+    );
+    await expectSelectorToHaveColor(
+      page,
+      '[class*="sassModulesIndexInclusion"]',
+      'rgb(173, 216, 230)'
+    );
+  });
+
+  it('ScssInclusion', async () => {
+    await expectSelectorToHaveColor(
+      page,
+      '#feature-scss-inclusion',
+      'rgb(220, 20, 60)'
+    );
+  });
+
+  it('ScssModulesInclusion', async () => {
+    await expectSelectorToHaveColor(
+      page,
+      '[class*="scssModulesInclusion"]',
+      'rgb(173, 216, 230)'
+    );
+    await expectSelectorToHaveColor(
+      page,
+      '[class*="scssModulesIndexInclusion"]',
+      'rgb(173, 216, 230)'
+    );
+  });
+
+  it('SvgComponent', async () => {
+    await expect(page).toMatch('Svg Title');
+  });
+
+  it('JsxInclusion', async () => {
+    await expect(page).toMatch('Jsx is included.');
+  });
+
+  it('TsxInclusion', async () => {
+    await expect(page).toMatch('Tsx is included.');
+  });
+
+  it('TsInclusion', async () => {
+    await expect(page).toMatch('Ts is included.');
+  });
+});