From 1258902c355ab90d496135f3f9984cf0b3927dde Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Mon, 30 Aug 2021 01:32:29 +0000 Subject: [PATCH] fix(extension): fix code editor styles (#817) --- extension/jest.config.js | 3 +++ extension/src/browser/extension/window/index.tsx | 2 +- extension/test/__mocks__/styleMock.ts | 1 + extension/webpack/base.config.js | 2 +- packages/devui/.storybook/preview.tsx | 1 - packages/devui/jest.config.js | 3 +++ packages/devui/src/Editor/Editor.tsx | 9 +++++++++ packages/devui/src/presets.ts | 12 ------------ packages/devui/tests/__mocks__/styleMock.ts | 1 + packages/redux-devtools-app/jest.config.js | 3 +++ packages/redux-devtools-app/src/index.tsx | 1 - .../redux-devtools-app/test/__mocks__/styleMock.ts | 1 + .../jest.config.js | 3 +++ .../test/__mocks__/styleMock.ts | 1 + 14 files changed, 27 insertions(+), 16 deletions(-) create mode 100644 extension/test/__mocks__/styleMock.ts delete mode 100644 packages/devui/src/presets.ts create mode 100644 packages/devui/tests/__mocks__/styleMock.ts create mode 100644 packages/redux-devtools-app/test/__mocks__/styleMock.ts create mode 100644 packages/redux-devtools-inspector-monitor-test-tab/test/__mocks__/styleMock.ts diff --git a/extension/jest.config.js b/extension/jest.config.js index a56b83cd..b70a7b3e 100644 --- a/extension/jest.config.js +++ b/extension/jest.config.js @@ -2,4 +2,7 @@ module.exports = { setupFilesAfterEnv: ['/test/setup.js'], testPathIgnorePatterns: ['/examples'], testEnvironment: 'jsdom', + moduleNameMapper: { + '\\.css$': '/test/__mocks__/styleMock.ts', + }, }; diff --git a/extension/src/browser/extension/window/index.tsx b/extension/src/browser/extension/window/index.tsx index d583cbbf..f108fbb5 100644 --- a/extension/src/browser/extension/window/index.tsx +++ b/extension/src/browser/extension/window/index.tsx @@ -7,9 +7,9 @@ import { StoreState } from '@redux-devtools/app/lib/reducers'; import App from '../../../app/containers/App'; import configureStore from '../../../app/stores/windowStore'; import getPreloadedState from '../background/getPreloadedState'; +import { MonitorMessage } from '../../../app/middlewares/api'; import '../../views/window.pug'; -import { MonitorMessage } from '../../../app/middlewares/api'; const position = location.hash; let preloadedState: PreloadedState; diff --git a/extension/test/__mocks__/styleMock.ts b/extension/test/__mocks__/styleMock.ts new file mode 100644 index 00000000..ff8b4c56 --- /dev/null +++ b/extension/test/__mocks__/styleMock.ts @@ -0,0 +1 @@ +export default {}; diff --git a/extension/webpack/base.config.js b/extension/webpack/base.config.js index b7151873..f6ce54a5 100644 --- a/extension/webpack/base.config.js +++ b/extension/webpack/base.config.js @@ -77,7 +77,7 @@ const baseConfig = (params) => ({ ]), { test: /\.css?$/, - use: ['style-loader', 'raw-loader'], + use: ['style-loader', 'css-loader'], }, { test: /\.pug$/, diff --git a/packages/devui/.storybook/preview.tsx b/packages/devui/.storybook/preview.tsx index 47b89177..a117e8cf 100644 --- a/packages/devui/.storybook/preview.tsx +++ b/packages/devui/.storybook/preview.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { Container } from '../src'; import { listSchemes, listThemes } from '../src/utils/theme'; -import '../src/presets'; export const parameters = { actions: { argTypesRegex: '^on[A-Z].*' }, diff --git a/packages/devui/jest.config.js b/packages/devui/jest.config.js index 0d26c6e5..1db14ea5 100644 --- a/packages/devui/jest.config.js +++ b/packages/devui/jest.config.js @@ -2,4 +2,7 @@ module.exports = { preset: 'ts-jest', setupFilesAfterEnv: ['/tests/setup.ts'], testEnvironment: 'jsdom', + moduleNameMapper: { + '\\.css$': '/tests/__mocks__/styleMock.ts', + }, }; diff --git a/packages/devui/src/Editor/Editor.tsx b/packages/devui/src/Editor/Editor.tsx index 5ea7af44..587e184c 100644 --- a/packages/devui/src/Editor/Editor.tsx +++ b/packages/devui/src/Editor/Editor.tsx @@ -6,6 +6,15 @@ import { Base16Theme } from 'base16'; import { defaultStyle, themedStyle } from './styles'; import { Theme } from '../themes/default'; +import 'codemirror/mode/javascript/javascript'; +import 'codemirror/addon/fold/foldgutter'; +import 'codemirror/addon/fold/foldcode'; +import 'codemirror/addon/fold/brace-fold'; + +import '../../fonts/index.css'; +import 'codemirror/lib/codemirror.css'; +import 'codemirror/addon/fold/foldgutter.css'; + const EditorContainer = styled.div( '' as unknown as TemplateStringsArray, ({ theme }: { theme: Theme }) => diff --git a/packages/devui/src/presets.ts b/packages/devui/src/presets.ts deleted file mode 100644 index 1799b658..00000000 --- a/packages/devui/src/presets.ts +++ /dev/null @@ -1,12 +0,0 @@ -/* eslint-disable global-require */ - -import 'codemirror/mode/javascript/javascript'; -import 'codemirror/addon/fold/foldgutter'; -import 'codemirror/addon/fold/foldcode'; -import 'codemirror/addon/fold/brace-fold'; - -if (process.env.NODE_ENV !== 'test') { - require('../fonts/index.css'); - require('codemirror/lib/codemirror.css'); - require('codemirror/addon/fold/foldgutter.css'); -} diff --git a/packages/devui/tests/__mocks__/styleMock.ts b/packages/devui/tests/__mocks__/styleMock.ts new file mode 100644 index 00000000..ff8b4c56 --- /dev/null +++ b/packages/devui/tests/__mocks__/styleMock.ts @@ -0,0 +1 @@ +export default {}; diff --git a/packages/redux-devtools-app/jest.config.js b/packages/redux-devtools-app/jest.config.js index 257086bf..a1f53444 100644 --- a/packages/redux-devtools-app/jest.config.js +++ b/packages/redux-devtools-app/jest.config.js @@ -2,4 +2,7 @@ module.exports = { preset: 'ts-jest', setupFilesAfterEnv: ['/test/setup.ts'], testEnvironment: 'jsdom', + moduleNameMapper: { + '\\.css$': '/test/__mocks__/styleMock.ts', + }, }; diff --git a/packages/redux-devtools-app/src/index.tsx b/packages/redux-devtools-app/src/index.tsx index 52641595..36e03131 100644 --- a/packages/redux-devtools-app/src/index.tsx +++ b/packages/redux-devtools-app/src/index.tsx @@ -1,4 +1,3 @@ -import 'devui/lib/presets'; import React, { Component } from 'react'; import { Provider } from 'react-redux'; import { Store } from 'redux'; diff --git a/packages/redux-devtools-app/test/__mocks__/styleMock.ts b/packages/redux-devtools-app/test/__mocks__/styleMock.ts new file mode 100644 index 00000000..ff8b4c56 --- /dev/null +++ b/packages/redux-devtools-app/test/__mocks__/styleMock.ts @@ -0,0 +1 @@ +export default {}; diff --git a/packages/redux-devtools-inspector-monitor-test-tab/jest.config.js b/packages/redux-devtools-inspector-monitor-test-tab/jest.config.js index 257086bf..a1f53444 100644 --- a/packages/redux-devtools-inspector-monitor-test-tab/jest.config.js +++ b/packages/redux-devtools-inspector-monitor-test-tab/jest.config.js @@ -2,4 +2,7 @@ module.exports = { preset: 'ts-jest', setupFilesAfterEnv: ['/test/setup.ts'], testEnvironment: 'jsdom', + moduleNameMapper: { + '\\.css$': '/test/__mocks__/styleMock.ts', + }, }; diff --git a/packages/redux-devtools-inspector-monitor-test-tab/test/__mocks__/styleMock.ts b/packages/redux-devtools-inspector-monitor-test-tab/test/__mocks__/styleMock.ts new file mode 100644 index 00000000..ff8b4c56 --- /dev/null +++ b/packages/redux-devtools-inspector-monitor-test-tab/test/__mocks__/styleMock.ts @@ -0,0 +1 @@ +export default {};