Skip to content

Commit f9fe7a0

Browse files
git-nandorgit-nandor
committed
refactor(many): remove karma-cli and test-utils, fix cypress config and cleanup test-related codes
1 parent 1b4e1ae commit f9fe7a0

File tree

207 files changed

+88
-14362
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

207 files changed

+88
-14362
lines changed

cypress.config.ts renamed to cypress.config.cjs

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,10 @@
2121
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
2222
* SOFTWARE.
2323
*/
24-
import { defineConfig } from 'cypress'
24+
const { defineConfig } = require('cypress')
25+
const webpackConfig = require('./cypress/webpack.config.cjs')
2526

26-
// TODO figure out why this isn't working:
27-
// import webpackConfig from '@instructure/ui-webpack-config'
28-
// eslint-disable-next-line @instructure/no-relative-imports
29-
import webpackConfig from './packages/ui-karma-config/lib/legacyBaseWebpackConfig'
30-
31-
export default defineConfig({
27+
module.exports = defineConfig({
3228
numTestsKeptInMemory: 1,
3329
defaultCommandTimeout: 10000,
3430
pageLoadTimeout: 120000,

‎cypress/component/Menu.cy.tsx‎

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -60,16 +60,15 @@ describe('<Menu/>', () => {
6060
cy.get('[role="menu"]')
6161
.should('not.be.focused')
6262
.and('have.attr', 'tabIndex', '0')
63-
64-
cy.get('[role="menuitem"]').eq(0)
63+
64+
cy.get('[role="menuitem"]')
65+
.eq(0)
6566
.should('be.focused')
6667
.and('have.attr', 'tabIndex', '-1')
6768

6869
cy.focused().realPress('ArrowDown')
6970

70-
cy.get('[role="menuitem"]').eq(1)
71-
.should('be.focused')
72-
71+
cy.get('[role="menuitem"]').eq(1).should('be.focused')
7372
})
7473

7574
it('should apply offset values to Popover', () => {
@@ -246,9 +245,9 @@ describe('<Menu/>', () => {
246245
cy.contains('Flyout').click()
247246
cy.get('body').should('not.contain', 'Flyout Menu Item')
248247
cy.contains('Flyout').click()
248+
cy.contains('Flyout Menu Item').should('be.visible')
249249
cy.contains('Flyout Menu Item')
250-
.should('be.visible')
251-
cy.contains('Flyout Menu Item').closest('[role="menuitem"]')
250+
.closest('[role="menuitem"]')
252251
.should('be.focused')
253252
})
254253

@@ -266,7 +265,8 @@ describe('<Menu/>', () => {
266265
cy.contains('Flyout').focus()
267266
cy.focused().realPress('ArrowRight').wait(100)
268267
cy.contains('Flyout Menu Item').should('exist')
269-
cy.contains('Flyout Menu Item').closest('[role="menuitem"]')
268+
cy.contains('Flyout Menu Item')
269+
.closest('[role="menuitem"]')
270270
.should('be.focused')
271271
})
272272

@@ -281,11 +281,15 @@ describe('<Menu/>', () => {
281281
</Menu>
282282
)
283283

284-
cy.contains('Flyout').focus()
285-
cy.focused().realPress('Space').wait(100)
286-
cy.contains('Flyout Menu Item').should('exist')
287-
cy.contains('Flyout Menu Item').closest('[role="menuitem"]')
288-
.should('be.focused')
284+
cy.contains('Flyout').should('be.visible').focus().should('have.focus')
285+
286+
cy.focused().realPress('Space')
287+
288+
cy.contains('Flyout Menu Item').should('exist').and('be.visible')
289+
290+
cy.contains('Flyout Menu Item')
291+
.closest('[role="menuitem"]')
292+
.should('have.focus')
289293
})
290294

291295
it(`should show and focus flyout menu on enter keyDown`, () => {
@@ -302,7 +306,8 @@ describe('<Menu/>', () => {
302306
cy.contains('Flyout').focus()
303307
cy.focused().realPress('Enter').wait(100)
304308
cy.contains('Flyout Menu Item').should('exist')
305-
cy.contains('Flyout Menu Item').closest('[role="menuitem"]')
309+
cy.contains('Flyout Menu Item')
310+
.closest('[role="menuitem"]')
306311
.should('be.focused')
307312
})
308313

@@ -319,7 +324,8 @@ describe('<Menu/>', () => {
319324

320325
cy.contains('Flyout').focus()
321326
cy.focused().realHover().wait(100)
322-
cy.contains('Flyout Menu Item').closest('[role="menuitem"]')
327+
cy.contains('Flyout Menu Item')
328+
.closest('[role="menuitem"]')
323329
.should('be.focused')
324330
})
325331
})

‎cypress/webpack.config.cjs‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
const path = require('path')
2+
3+
module.exports = {
4+
mode: 'development',
5+
resolve: {
6+
extensions: ['.ts', '.tsx', '.js'],
7+
fallback: {
8+
fs: false,
9+
module: false,
10+
path: false,
11+
process: false
12+
}
13+
},
14+
module: {
15+
rules: [
16+
{
17+
test: /\.(tsx?|js)$/,
18+
exclude: /node_modules/,
19+
use: 'babel-loader'
20+
}
21+
]
22+
}
23+
}

‎docs/contributor-docs/dev-commands.md‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,17 @@ order: 3
88

99
This is a quick developer reference for common Instructure UI repository commands. All should be run from the repository root. Make sure you run `npm install` first, as many of these commands will require you to have `lerna` dependencies installed before they will work.
1010

11-
| Command | Description |
12-
| ----------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
13-
| `npm run bootstrap` | Clean all node modules and build output, reinstall dependencies, create fresh build including regenerating design tokens and type declaration files. |
14-
| `npm run dev` | Run a local instance of the documentation app in dev mode. Docs will be served at `http://0.0.0.0:9090` |
15-
| `npm run start` | Run a local instance of the documentation app in production mode. The urls where the docs are being served will be included in the output of this command. |
16-
| `npm run build` | Run the build command for all Instructure UI packages. Similar to bootstrap, but without the cleaning steps, installation of dependencies, and without the token and type generation. |
17-
| `npm run build:watch` | Identical to `npm run build` but will watch for changes. Note: this command is rarely necessary to use. If you are running `npm run dev`, the docs app will already be watching for any changes for components. |
18-
| `npm run build -- --scope <package-name>` | Identical to `npm run build` but scoped to a single package. For example, to run the command only for the `ui-badge` package, you would do `npm run build -- --scope @instructure/ui-badge` |
19-
| `npm run build:watch -- --scope <package-name>` | Identical to `npm run build:watch` but scoped to a single package. For example, to run the command only for the `ui-badge` package, you would do `npm run build:watch -- --scope @instructure/ui-badge` |
20-
| `npm run build:ts` | Create type declaration files using `tsc` (TypeScript compiler). |
21-
| `npm run test` | Run all Instructure UI tests in production mode. Tests will be run in a headless instance of chrome. |
22-
| `npm run test:watch` | Run all Instructure UI tests in dev mode. Tests run this way will actually launch a browser and will also give you the option to debug. |
23-
| `npm run test -- --scope <package-name>` | Identical to `npm run test` but scoped to a single package. For example, to run the command only for the `ui-avatar` package you would do `npm run test -- --scope @instructure/ui-avatar` |
24-
| `npm run test:watch -- --scope <package-name>` | Identical to `npm run test:watch` but scoped to a single package. For example, to run the command only for the `ui-avatar` package you would do `npm run test:watch -- --scope @instructure/ui-avatar` |
11+
| Command | Description |
12+
| --------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
13+
| `npm run bootstrap` | Clean all node modules and build output, reinstall dependencies, create fresh build including regenerating design tokens and type declaration files. |
14+
| `npm run dev` | Run a local instance of the documentation app in dev mode. Docs will be served at `http://0.0.0.0:9090` |
15+
| `npm run start` | Run a local instance of the documentation app in production mode. The urls where the docs are being served will be included in the output of this command. |
16+
| `npm run build` | Run the build command for all Instructure UI packages. Similar to bootstrap, but without the cleaning steps, installation of dependencies, and without the token and type generation. |
17+
| `npm run build:watch` | Identical to `npm run build` but will watch for changes. Note: this command is rarely necessary to use. If you are running `npm run dev`, the docs app will already be watching for any changes for components. |
18+
| `npm run build -- --scope <package-name>` | Identical to `npm run build` but scoped to a single package. For example, to run the command only for the `ui-badge` package, you would do `npm run build -- --scope @instructure/ui-badge` |
19+
| `npm run build:watch -- --scope <package-name>` | Identical to `npm run build:watch` but scoped to a single package. For example, to run the command only for the `ui-badge` package, you would do `npm run build:watch -- --scope @instructure/ui-badge` |
20+
| `npm run build:ts` | Create type declaration files using `tsc` (TypeScript compiler). |
21+
| `npm run test:vitest` | Run all Instructure UI component-level unit tests in a jsdom environment. |
22+
| `npm run test:vitest-watch [ComponentName]` | Run all tests of the selected component in wach mode. |
23+
| `npm run cy:component` | Run all Instructure UI component-level Cypress tests in a real browser environment. |
24+
| `npm run cy:component -- --spec "cypress/component/[ComponentName].cy.tsx"` | Run specific component test file. |

‎eslint.config.mjs‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,6 @@ const NODE_PACKAGES = [
6060
'browserslist-config-instui',
6161
'ui-babel-preset',
6262
'ui-codemods',
63-
'ui-karma-config',
6463
'ui-stylelint-config',
6564
'ui-scripts',
6665
'ui-webpack-config',
@@ -83,8 +82,7 @@ const finalConfig = tseslint.config(
8382
"/regression-test/**",
8483
"/coverage/**",
8584
"**/stylelint.config.js",
86-
"**/babel.config.js",
87-
"karma.conf.js"
85+
"**/babel.config.js"
8886
]
8987
},
9088
eslint.configs.recommended,

‎karma.conf.js‎

Lines changed: 0 additions & 29 deletions
This file was deleted.

0 commit comments

Comments
 (0)