@madie/madie-design-system 1.0.0

package/test/session/session.test.js

@@ -0,0 +1,221 @@
+import moxios from 'moxios';
+import sinon from 'sinon';
+import { fetchTtl, RefreshSession, LogoutSession } from '../../session';
+
+describe('Session management', () => {
+  describe('Fetch TTL', () => {
+    beforeEach(() => {
+      moxios.install();
+    });
+
+    afterEach(() => {
+      moxios.uninstall();
+    });
+
+    test('handles a successful fetch for time_remaining', (done) => {
+      const exp = 1393286893;
+      const date = new Date(exp * 1000);
+      const remaining = 240000;
+
+      moxios.stubRequest('/api/auth/sessions/ttl', {
+        status: 200,
+        responseText: JSON.stringify({
+          data: {
+            ttl: exp,
+            time_remaining: remaining,
+          },
+        }),
+      });
+
+      fetchTtl('fakeToken').then((expiry) => {
+        expect(expiry).toBe(remaining);
+        done();
+      });
+    });
+
+    test('handles backward-compat fetch for TTL', (done) => {
+      const exp = 1393286893;
+      const date = new Date(exp * 1000);
+
+      moxios.stubRequest('/api/auth/sessions/ttl', {
+        status: 200,
+        responseText: JSON.stringify({
+          data: {
+            ttl: exp,
+          },
+        }),
+      });
+
+      fetchTtl('fakeToken').then((expiry) => {
+        expect(expiry.getTime()).toBe(date.getTime());
+        done();
+      });
+    });
+
+    test('throws an error on 400', (done) => {
+      moxios.stubRequest('/api/auth/sessions/ttl', {
+        status: 400,
+        responseText: JSON.stringify({
+          error: 'error text',
+        }),
+      });
+
+      fetchTtl('fakeToken').catch((error) => {
+        expect(error.response.status).toBe(400);
+        done();
+      });
+    });
+  });
+
+  describe('Logout session', () => {
+    beforeEach(() => {
+      moxios.install();
+    });
+
+    afterEach(() => {
+      moxios.uninstall();
+    });
+
+    test('Handles a successful logout', (done) => {
+      window.document.cookie = 'qpp_auth_token=testing';
+
+      moxios.stubRequest('/user/session-logout', {
+        status: 200,
+        responseText: 'Hello',
+      });
+
+      let onFulfilled = sinon.spy();
+      let onFailed = sinon.spy();
+
+      Promise.resolve(LogoutSession(window))
+        .then(() => {
+          expect(onFulfilled.called).toBe(true);
+          expect(onFailed.called).toBe(false);
+        })
+        .catch((error) => {
+          done();
+        });
+    });
+
+    test('Handles a 400 Response on logout', (done) => {
+      window.document.cookie = 'qpp_auth_token=testing';
+
+      moxios.stubRequest('/user/session-logout', {
+        status: 400,
+        responseText: 'Hello',
+      });
+
+      let onFulfilled = sinon.spy();
+      let onFailed = sinon.spy();
+
+      Promise.resolve(LogoutSession(window))
+        .then(() => {
+          expect(onFulfilled.called).toBe(false);
+          expect(onFailed.called).toBe(true);
+        })
+        .catch((error) => {
+          done();
+        });
+    });
+
+    test('Handles a 401 Response on logout', (done) => {
+      window.document.cookie = 'qpp_auth_token=testing';
+
+      moxios.stubRequest('/user/session-logout', {
+        status: 401,
+        responseText: 'Hello',
+      });
+
+      let onFulfilled = sinon.spy();
+      let onFailed = sinon.spy();
+
+      Promise.resolve(LogoutSession(window))
+        .then(() => {
+          expect(onFulfilled.called).toBe(false);
+          expect(onFailed.called).toBe(true);
+        })
+        .catch((error) => {
+          done();
+        });
+    });
+  });
+
+  describe('Refresh session', () => {
+    beforeEach(() => {
+      moxios.install();
+    });
+
+    afterEach(() => {
+      moxios.uninstall();
+    });
+
+    test('Handles a successful refresh', () => {
+      window.document.cookie = 'qpp_auth_token=testing';
+
+      moxios.stubRequest('/api/auth/sessions/refresh', {
+        status: 200,
+        responseText: 'Hello',
+      });
+
+      let onFulfilled = sinon.spy();
+      let onFailed = sinon.spy();
+
+      Promise.resolve(
+        RefreshSession({
+          onSuccess: onFulfilled,
+          onError: onFailed,
+          window: window,
+        })
+      ).then(() => {
+        expect(onFulfilled.called).toBe(true);
+        expect(onFailed.called).toBe(false);
+      });
+    });
+
+    test('Handles a 400 response on refresh', () => {
+      window.document.cookie = 'qpp_auth_token=testing';
+
+      moxios.stubRequest('/api/auth/sessions/refresh', {
+        status: 400,
+        responseText: 'Hello',
+      });
+
+      let onFulfilled = sinon.spy();
+      let onFailed = sinon.spy();
+
+      Promise.resolve(
+        RefreshSession({
+          onSuccess: onFulfilled,
+          onError: onFailed,
+          window,
+        })
+      ).then(() => {
+        expect(onFulfilled.called).toBe(false);
+        expect(onFailed.called).toBe(true);
+      });
+    });
+
+    test('Handles a 401 response on refresh', () => {
+      window.document.cookie = 'qpp_auth_token=testing';
+
+      moxios.stubRequest('/api/auth/sessions/refresh', {
+        status: 401,
+        responseText: 'Hello',
+      });
+
+      let onFulfilled = sinon.spy();
+      let onFailed = sinon.spy();
+
+      Promise.resolve(
+        RefreshSession({
+          onSuccess: onFulfilled,
+          onError: onFailed,
+          window,
+        })
+      ).then(() => {
+        expect(onFulfilled.called).toBe(false);
+        expect(onFailed.called).toBe(true);
+      });
+    });
+  });
+});

package/test-setup.js

@@ -0,0 +1,9 @@
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import 'regenerator-runtime/runtime';
+
+configure({ adapter: new Adapter() });
+
+const fetch = require('node-fetch');
+
+global.fetch = fetch;

package/webpack.config.js

@@ -0,0 +1,147 @@
+const path = require('path');
+const webpack = require('webpack');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const pkg = require('./package.json');
+const entry = ['./index.js'];
+
+const _module = {
+  rules: [
+    {
+      enforce: 'pre',
+      test: /\.(js|jsx)?$/,
+      loader: 'eslint-loader',
+      exclude: /node_modules/,
+    },
+    {
+      test: /\.(js|jsx)?$/,
+      loader: 'babel-loader',
+      exclude: /node_modules/,
+    },
+    {
+      test: /\.scss$/,
+      use: [
+        {
+          loader: MiniCssExtractPlugin.loader,
+        },
+        'css-loader',
+        {
+          loader: 'sass-loader',
+          options: {
+            sassOptions: {
+              includePaths: ['styles'],
+            },
+          },
+        },
+        'sass-loader',
+      ],
+      exclude: /node_modules/,
+    },
+    {
+      test: /\.(ttf|eot|woff|otf|woff2)$/,
+      loader: 'file-loader',
+      options: {
+        name: 'fonts/[name].[ext]',
+      },
+    },
+    {
+      test: /\.svg$/,
+      use: [
+        'raw-loader',
+        {
+          loader: 'svgo-loader',
+          options: {
+            plugins: [
+              { removeTitle: true },
+              { convertColors: { shorthex: false } },
+              { convertPathData: false },
+            ],
+          },
+        },
+      ],
+    },
+  ],
+};
+
+const plugins = [
+  new MiniCssExtractPlugin({
+    filename: 'default.css',
+  }),
+  // copy styles, images, fonts from shared directory
+  new CopyWebpackPlugin([
+    {
+      from: path.join(__dirname, '..', 'shared', 'styles'),
+      to: path.resolve(__dirname, 'styles'),
+    },
+    {
+      from: path.join(__dirname, '..', 'shared', 'images'),
+      to: path.resolve(__dirname, 'images'),
+      force: true,
+    },
+    {
+      from: path.join(__dirname, '..', 'shared', 'fonts'),
+      to: path.resolve(__dirname, 'fonts'),
+      force: true,
+    },
+  ]),
+  new webpack.DefinePlugin({
+    'process.env': {
+      NODE_ENV: JSON.stringify('production'),
+    },
+  }),
+  new webpack.DefinePlugin({
+    buildVersion: JSON.stringify(pkg.version),
+  }),
+];
+
+const resolve = {
+  extensions: ['.js', '.jsx', '.json', '.svg', '*'],
+  alias: {
+    react: 'preact/compat',
+    'react-dom': 'preact/compat',
+  },
+};
+
+const optimization = {
+  minimizer: [new TerserPlugin()],
+};
+
+const defaultConfig = (env, argv) => {
+  return {
+    mode: 'production',
+    entry,
+    output: {
+      library: 'QPPStyle',
+      libraryTarget: 'umd',
+      filename: 'index.js',
+      path: path.resolve(__dirname, 'dist'),
+    },
+    devtool: env.production === 'true' ? 'source-map' : 'eval-source-map',
+    module: _module, // module is already defined
+    plugins,
+    resolve,
+    optimization,
+  };
+};
+
+const browserConfig = (env, argv) => {
+  return {
+    mode: 'production',
+    entry,
+    output: {
+      libraryTarget: 'var',
+      library: 'QPPStyle',
+      filename: 'browser.js',
+      path: path.resolve(__dirname, 'dist'),
+    },
+    devtool: env.production === 'true' ? 'source-map' : 'eval-source-map',
+    module: _module, // module is already defined
+    plugins,
+    resolve,
+    optimization,
+  };
+};
+
+module.exports = [defaultConfig, browserConfig];

package/webpack.config.react.js

@@ -0,0 +1,86 @@
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+
+const _module = {
+  rules: [
+    {
+      test: /\.(js|jsx)?$/,
+      exclude: /node_modules/,
+      use: {
+        loader: 'babel-loader',
+      },
+    },
+    {
+      test: /\.scss$/,
+      use: [
+        {
+          loader: MiniCssExtractPlugin.loader,
+        },
+        'css-loader',
+        {
+          loader: 'sass-loader',
+          options: {
+            sassOptions: {
+              includePaths: ['styles'],
+            },
+          },
+        },
+        'style-loader',
+      ],
+      exclude: /node_modules/,
+    },
+    {
+      test: /\.(ttf|eot|woff|otf|woff2)$/,
+      loader: 'file-loader',
+      options: {
+        name: 'fonts/[name].[ext]',
+      },
+    },
+    {
+      test: /\.svg$/,
+      use: [
+        'raw-loader',
+        {
+          loader: 'svgo-loader',
+          options: {
+            plugins: [
+              { removeTitle: true },
+              { convertColors: { shorthex: false } },
+              { convertPathData: false },
+            ],
+          },
+        },
+      ],
+    },
+  ],
+};
+
+const optimization = {
+  minimizer: [new TerserPlugin()],
+};
+
+const plugins = [
+  new MiniCssExtractPlugin({
+    filename: 'default.css',
+  }),
+];
+
+module.exports = {
+  mode: 'production',
+  entry: './components/index.js',
+  output: {
+    filename: 'index.js',
+    path: path.resolve(__dirname, 'dist/react'),
+    library: '',
+    libraryTarget: 'umd',
+  },
+  devtool: 'source-map',
+  module: _module,
+  plugins,
+  resolve: {
+    extensions: ['.js', '.jsx', '.json', '.svg', '*'],
+  },
+  optimization,
+  externals: { react: 'react' },
+};