-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Set up split toggle console UI (#234)
closes #233 Co-authored-by: loiswells97 <loiswells97@users.noreply.github.com> Co-authored-by: Lois Wells <lois.wells@raspberrypi.org> Co-authored-by: Lois Wells <88904316+loiswells97@users.noreply.github.com> Co-authored-by: Patrick Cherry <patch0@users.noreply.github.com>
- Loading branch information
5 people
committed
Oct 21, 2022
1 parent
c97b093
commit a1d1c5f
Showing
12 changed files
with
464 additions
and
45 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
35 changes: 35 additions & 0 deletions
35
src/components/Editor/Runners/PythonRunner/OutputViewToggle.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import React from "react"; | ||
| import { useDispatch, useSelector } from "react-redux"; | ||
| import { SplitViewIcon, TabbedViewIcon } from "../../../../Icons"; | ||
| import { setIsSplitView } from "../../EditorSlice"; | ||
|
|
||
| import './OutputViewToggle.scss'; | ||
|
|
||
| const OutputViewToggle = () => { | ||
|
|
||
| const isSplitView = useSelector((state) => state.editor.isSplitView) | ||
| const codeRunTriggered = useSelector((state) => state.editor.codeRunTriggered) | ||
| const drawTriggered = useSelector((state) => state.editor.drawTriggered) | ||
| const dispatch = useDispatch() | ||
|
|
||
| const switchToTabbedView = () => { | ||
| dispatch(setIsSplitView(false)) | ||
| } | ||
|
|
||
| const switchToSplitView = () => { | ||
| dispatch(setIsSplitView(true)) | ||
| } | ||
|
|
||
| return ( | ||
| <div className = {`output-view-toggle`} disabled = {codeRunTriggered || drawTriggered}> | ||
| <button className = {`output-view-toggle__button output-view-toggle__button--tabbed${isSplitView ? "" : " output-view-toggle__button--active"}` } disabled = {codeRunTriggered || drawTriggered} onClick={switchToTabbedView}> | ||
| <TabbedViewIcon /> | ||
| </button> | ||
| <button className = {`output-view-toggle__button output-view-toggle__button--split${isSplitView ? " output-view-toggle__button--active" : ""}`} disabled = {codeRunTriggered || drawTriggered} onClick={switchToSplitView}> | ||
| <SplitViewIcon /> | ||
| </button> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default OutputViewToggle |
74 changes: 74 additions & 0 deletions
74
src/components/Editor/Runners/PythonRunner/OutputViewToggle.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| @import '../../../../colours.scss'; | ||
|
|
||
| .output-view-toggle { | ||
| display: inline-flex; | ||
| margin: auto var(--spacing-1) auto auto; | ||
| align-items: center; | ||
| border-radius: 5px; | ||
|
|
||
| &__button { | ||
| padding: var(--spacing-half) var(--spacing-1) var(--spacing-half) var(--spacing-1); | ||
| cursor: pointer; | ||
|
|
||
| &:disabled { | ||
| cursor: inherit; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .--light { | ||
| .output-view-toggle { | ||
| background-color: $editor-light-light-grey; | ||
| &__button { | ||
| svg { | ||
| fill: $editor-mid-grey; | ||
| } | ||
| &--active { | ||
| background-color: $editor-light-grey; | ||
| border-radius: 5px; | ||
| svg { | ||
| fill: $editor-black; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .--dark { | ||
| .output-view-toggle { | ||
| background-color: $editor-dark-dark; | ||
| &__button { | ||
| svg { | ||
| fill: $editor-mid-grey; | ||
| } | ||
| &--active { | ||
| background-color: $editor-grey; | ||
| border-radius: 5px; | ||
| svg { | ||
| fill: $editor-white; | ||
| } | ||
| } | ||
| &:disabled { | ||
| svg { | ||
| fill: $editor-grey; | ||
| } | ||
| } | ||
| &--active:disabled { | ||
| svg { | ||
| fill: $editor-mid-grey; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .--light .output-view-toggle__button:disabled { | ||
| svg { | ||
| fill: $editor-mid-light-grey; | ||
| } | ||
| &.output-view-toggle__button--active { | ||
| svg { | ||
| fill: $editor-mid-grey; | ||
| } | ||
| } | ||
| } |
151 changes: 151 additions & 0 deletions
151
src/components/Editor/Runners/PythonRunner/OutputViewToggle.test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,151 @@ | ||
| import React from "react"; | ||
| import { fireEvent, render, screen } from "@testing-library/react" | ||
| import { Provider } from 'react-redux'; | ||
| import configureStore from 'redux-mock-store'; | ||
| import OutputViewToggle from "./OutputViewToggle"; | ||
| import { setIsSplitView } from "../../EditorSlice"; | ||
|
|
||
| describe('When in tabbed view', () => { | ||
| beforeEach(() => { | ||
| const middlewares = [] | ||
| const mockStore = configureStore(middlewares) | ||
| const initialState = { | ||
| editor: { | ||
| isSplitView: false, | ||
| } | ||
| } | ||
| const store = mockStore(initialState); | ||
| render(<Provider store={store}><OutputViewToggle /></Provider>); | ||
| }) | ||
|
|
||
| test('Tabbed view button is active', () => { | ||
| expect(screen.getAllByRole('button')[0]).toHaveClass('output-view-toggle__button--tabbed output-view-toggle__button--active') | ||
| }) | ||
|
|
||
| test('Split view button is not active', () => { | ||
| expect(screen.getAllByRole('button')[1]).toHaveClass('output-view-toggle__button--split') | ||
| expect(screen.getAllByRole('button')[1]).not.toHaveClass('output-view-toggle__button--active') | ||
| }) | ||
| }) | ||
|
|
||
| describe('When in split view', () => { | ||
| beforeEach(() => { | ||
| const middlewares = [] | ||
| const mockStore = configureStore(middlewares) | ||
| const initialState = { | ||
| editor: { | ||
| isSplitView: true, | ||
| } | ||
| } | ||
| const store = mockStore(initialState); | ||
| render(<Provider store={store}><OutputViewToggle /></Provider>); | ||
| }) | ||
|
|
||
| test('Split view button is active', () => { | ||
| expect(screen.getAllByRole('button')[1]).toHaveClass('output-view-toggle__button--split output-view-toggle__button--active') | ||
| }) | ||
|
|
||
| test('Tabbed view button is not active', () => { | ||
| expect(screen.getAllByRole('button')[0]).toHaveClass('output-view-toggle__button--tabbed') | ||
| expect(screen.getAllByRole('button')[0]).not.toHaveClass('output-view-toggle__button--active') | ||
| }) | ||
| }) | ||
|
|
||
| test('Clicking tabbed view icon switches to tabbed view', () => { | ||
| const middlewares = [] | ||
| const mockStore = configureStore(middlewares) | ||
| const initialState = { | ||
| editor: {} | ||
| } | ||
| const store = mockStore(initialState); | ||
| render(<Provider store={store}><OutputViewToggle /></Provider>); | ||
| fireEvent.click(screen.getAllByRole('button')[0]) | ||
| const expectedActions = [setIsSplitView(false)] | ||
| expect(store.getActions()).toEqual(expectedActions); | ||
| }) | ||
|
|
||
| test('Clicking split view icon switches to tabbed view', () => { | ||
| const middlewares = [] | ||
| const mockStore = configureStore(middlewares) | ||
| const initialState = { | ||
| editor: {} | ||
| } | ||
| const store = mockStore(initialState); | ||
| render(<Provider store={store}><OutputViewToggle /></Provider>); | ||
| fireEvent.click(screen.getAllByRole('button')[1]) | ||
| const expectedActions = [setIsSplitView(true)] | ||
| expect(store.getActions()).toEqual(expectedActions); | ||
| }) | ||
|
|
||
| describe('When in a code run is triggered', () => { | ||
| beforeEach(() => { | ||
| const middlewares = [] | ||
| const mockStore = configureStore(middlewares) | ||
| const initialState = { | ||
| editor: { | ||
| codeRunTriggered: true, | ||
| } | ||
| } | ||
| const store = mockStore(initialState); | ||
| render(<Provider store={store}><OutputViewToggle /></Provider>); | ||
| }) | ||
|
|
||
| test('Tabbed view button is disabled', () => { | ||
| expect(screen.getAllByRole('button')[0]).toHaveClass('output-view-toggle__button--tabbed') | ||
| expect(screen.getAllByRole('button')[0]).toBeDisabled() | ||
| }) | ||
|
|
||
| test('Split view button is disabled', () => { | ||
| expect(screen.getAllByRole('button')[1]).toHaveClass('output-view-toggle__button--split') | ||
| expect(screen.getAllByRole('button')[1]).toBeDisabled() | ||
| }) | ||
| }) | ||
|
|
||
| describe('When in a draw run is triggered', () => { | ||
| beforeEach(() => { | ||
| const middlewares = [] | ||
| const mockStore = configureStore(middlewares) | ||
| const initialState = { | ||
| editor: { | ||
| drawTriggered: true, | ||
| } | ||
| } | ||
| const store = mockStore(initialState); | ||
| render(<Provider store={store}><OutputViewToggle /></Provider>); | ||
| }) | ||
|
|
||
| test('Tabbed view button is disabled', () => { | ||
| expect(screen.getAllByRole('button')[0]).toHaveClass('output-view-toggle__button--tabbed') | ||
| expect(screen.getAllByRole('button')[0]).toBeDisabled() | ||
| }) | ||
|
|
||
| test('Split view button is disabled', () => { | ||
| expect(screen.getAllByRole('button')[1]).toHaveClass('output-view-toggle__button--split') | ||
| expect(screen.getAllByRole('button')[1]).toBeDisabled() | ||
| }) | ||
| }) | ||
|
|
||
| describe('When in neither a code run nor a draw run is triggered', () => { | ||
| beforeEach(() => { | ||
| const middlewares = [] | ||
| const mockStore = configureStore(middlewares) | ||
| const initialState = { | ||
| editor: { | ||
| codeRunTriggered:false, | ||
| drawTriggered: false, | ||
| } | ||
| } | ||
| const store = mockStore(initialState); | ||
| render(<Provider store={store}><OutputViewToggle /></Provider>); | ||
| }) | ||
|
|
||
| test('Tabbed view button is enabled', () => { | ||
| expect(screen.getAllByRole('button')[0]).toHaveClass('output-view-toggle__button--tabbed') | ||
| expect(screen.getAllByRole('button')[0]).not.toBeDisabled() | ||
| }) | ||
|
|
||
| test('Split view button is enabled', () => { | ||
| expect(screen.getAllByRole('button')[1]).toHaveClass('output-view-toggle__button--split') | ||
| expect(screen.getAllByRole('button')[1]).not.toBeDisabled() | ||
| }) | ||
| }) |
Oops, something went wrong.