Skip to content

Commit

Permalink
Fix All Specs
Browse files Browse the repository at this point in the history
  • Loading branch information
kieftrav committed Oct 17, 2024
1 parent 4822573 commit 5057416
Show file tree
Hide file tree
Showing 9 changed files with 77 additions and 75 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ describe('Components > Classifier', function () {
describe('while the subject is loading', function () {
let subjectImage, tabPanel, taskAnswers, taskTab, tutorialTab, workflow

before(function () {
before(async function () {
sinon.replace(window, 'Image', MockSlowImage)
const subject = SubjectFactory.build({ locations: [{ 'image/png': 'https://foo.bar/example.png' }] })
const store = mockStore({ subject })
Expand All @@ -80,6 +80,7 @@ describe('Components > Classifier', function () {
wrapper: withStore(store)
}
)
await screen.findByTestId('subject-viewer')
taskTab = screen.getByRole('tab', { name: 'TaskArea.task'})
tutorialTab = screen.getByRole('tab', { name: 'TaskArea.tutorial'})
subjectImage = screen.getByRole('img', { name: `Subject ${subject.id}` })
Expand Down Expand Up @@ -143,6 +144,8 @@ describe('Components > Classifier', function () {
wrapper: withStore(store)
}
)
await screen.findByTestId('subject-viewer')

await when(() => store.subjectViewer.loadingState === asyncStates.success)
taskTab = screen.getByRole('tab', { name: 'TaskArea.task'})
tutorialTab = screen.getByRole('tab', { name: 'TaskArea.tutorial'})
Expand Down Expand Up @@ -254,6 +257,7 @@ describe('Components > Classifier', function () {
wrapper: withStore(store)
}
)
await screen.findByTestId('subject-viewer')
await when(() => store.subjectViewer.loadingState === asyncStates.success)
const newSnapshot = {
...workflowSnapshot,
Expand Down Expand Up @@ -354,6 +358,7 @@ describe('Components > Classifier', function () {
wrapper: withStore(store)
}
)
await screen.findByTestId('subject-viewer')
tutorialHeading = await screen.findByRole('heading', { name: 'ModalTutorial.title' })
})

Expand Down Expand Up @@ -392,6 +397,7 @@ describe('Components > Classifier', function () {
wrapper: withStore(store)
}
)
await screen.findByTestId('subject-viewer')
await when(() => store.tutorials.active.hasNotBeenSeen)
tutorialHeading = screen.queryByRole('heading', { name: 'ModalTutorial.title' })
})
Expand All @@ -413,7 +419,7 @@ describe('Components > Classifier', function () {

const roles = []
const subjectOneSnapshot = SubjectFactory.build({ locations: [{ 'image/png': 'https://foo.bar/example1.png' }] })
const subjectTwoSnapshot = SubjectFactory.build({ locations: [{ 'image/png': 'https://foo.bar/example2.png' }] })
const subjectTwoSnapshot = SubjectFactory.build({ locations: [{ 'image/png': 'https://foo.bar/example.png' }] })
const workflowSnapshot = branchingWorkflow
workflowSnapshot.strings = workflowStrings
workflowSnapshot.grouped = true
Expand Down Expand Up @@ -469,6 +475,7 @@ describe('Components > Classifier', function () {
wrapper: withStore(store)
}
)
await screen.findByTestId('subject-viewer')
await when(() => store.subjectViewer.loadingState === asyncStates.success)
rerender(
<Classifier
Expand All @@ -480,6 +487,7 @@ describe('Components > Classifier', function () {
wrapper: withStore(store)
}
)
await screen.findByTestId('subject-viewer')
workflow = store.workflows.active
await when(() => store.subjectViewer.loadingState === asyncStates.loading)
await when(() => store.subjectViewer.loadingState === asyncStates.success)
Expand All @@ -506,7 +514,7 @@ describe('Components > Classifier', function () {
})

it('should show a subject image from the selected set', function () {
expect(subjectImage.getAttribute('href')).to.equal('https://foo.bar/example2.png')
expect(subjectImage.getAttribute('href')).to.equal('https://foo.bar/example.png')
})

describe('task answers', function () {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -419,6 +419,7 @@ describe('components > ClassifierContainer', function () {
})

it('should be able to view inactive workflows', async function () {
await screen.findByTestId('subject-viewer')
await waitFor(() => {
const subjectImage = screen.getByRole('img', {name: `Subject ${subjectSnapshot.id}` })
expect(subjectImage.getAttribute('href')).to.equal('https://foo.bar/example.png')
Expand Down Expand Up @@ -515,6 +516,7 @@ describe('components > ClassifierContainer', function () {
})

it('should be able to view inactive workflows', async function () {
await screen.findByTestId('subject-viewer')
await waitFor(() => {
const subjectImage = screen.getByRole('img', {name: `Subject ${subjectSnapshot.id}` })
expect(subjectImage.getAttribute('href')).to.equal('https://foo.bar/example.png')
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,11 @@ import { composeStory } from '@storybook/react'
import Meta, { Default, mockTasks } from './CenteredLayout.stories.js'

describe('Component > Layouts > Centered', function () {
it('should render a subject and a task', function () {
it('should render a subject and a task', async function () {
const DefaultStory = composeStory(Default, Meta)
render(<DefaultStory />)
expect(screen.getByLabelText('Subject 1')).exists() // img aria-label from SVGImage
await screen.findByTestId('subject-viewer')
expect(await screen.getByLabelText('Subject 1')).exists() // img aria-label from SVGImage
expect(screen.getByText(mockTasks.init.strings.question)).exists() // task question paragraph
})
})
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,10 @@ import Meta, { Default, mockTasks } from './MaxWidth.stories.js'

describe('Component > Layouts > MaxWidth', function () {

it('should render a subject and a task', function () {
it('should render a subject and a task', async function () {
const DefaultStory = composeStory(Default, Meta)
render(<DefaultStory />)
await screen.findByTestId('subject-viewer')
expect(screen.getByLabelText('Subject 1')).exists() // img aria-label from SVGImage
expect(screen.getByText(mockTasks.init.strings.question)).exists() // task question paragraph
})
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,10 @@ import { composeStory } from '@storybook/react'
import Meta, { Default, mockTasks } from './NoMaxWidth.stories.js'

describe('Component > Layouts > NoMaxWidth', function () {
it('should render a subject and a task', function () {
it('should render a subject and a task', async function () {
const DefaultStory = composeStory(Default, Meta)
render(<DefaultStory />)
await screen.findByTestId('subject-viewer')
expect(screen.getByLabelText('Subject 1')).exists() // img aria-label from SVGImage
expect(screen.getByText(mockTasks.init.strings.question)).exists() // task question paragraph
})
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useState } from 'react'
import { useEffect, useState } from 'react';
import asyncStates from '@zooniverse/async-states'
import PropTypes from 'prop-types'
import { useTranslation } from '@translations/i18n'
Expand Down Expand Up @@ -41,44 +41,38 @@ function SubjectViewer({
subjectQueueState = asyncStates.initialized,
subjectReadyState
}) {
const { t } = useTranslation('components')
const [Viewer, setViewer] = useState(null)
const [ViewComponent, setViewComponent] = useState(null);

async function loadViewer() {
setViewer(await getViewer(subject?.viewer))
}
useEffect(() => {
setViewComponent(null)

switch (subjectQueueState) {
case asyncStates.initialized: {
return null
}
case asyncStates.loading: {
return (<div>{t('SubjectViewer.loading')}</div>)
async function loadViewer() {
setViewComponent(await getViewer(subject?.viewer))
}
case asyncStates.error: {
console.error('There was an error loading the subjects')
return null
}
case asyncStates.success: {
if (Viewer === null) {
loadViewer();
} else if (Viewer) {
return (
<Viewer
enableInteractionLayer={enableInteractionLayer}
key={subject.id}
subject={subject}
loadingState={subjectReadyState}
onError={onError}
onReady={onSubjectReady}
viewerConfiguration={subject?.viewerConfiguration}
/>
)
}
loadViewer()
}, [subject])

return null
}
}
const { t } = useTranslation('components')

if (subjectQueueState === asyncStates.loading) {
return (<div>{t('SubjectViewer.loading')}</div>)
} else if (subjectQueueState === asyncStates.error) {
console.error('There was an error loading the subjects')
} else if (subjectQueueState === asyncStates.success && subject && ViewComponent) {
return (<div data-testid="subject-viewer">
<ViewComponent
enableInteractionLayer={enableInteractionLayer}
key={subject.id}
subject={subject}
loadingState={subjectReadyState}
onError={onError}
onReady={onSubjectReady}
viewerConfiguration={subject?.viewerConfiguration}
/>
</div>)
}

return null
}

SubjectViewer.propTypes = {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,60 +1,44 @@
import { render, screen } from '@testing-library/react'
import asyncStates from '@zooniverse/async-states'
import { shallow } from 'enzyme'

import { SubjectViewer } from './SubjectViewer'
import SingleImageViewer from './components/SingleImageViewer'
import JSONDataViewer from './components/JSONDataViewer'

describe('Component > SubjectViewer', function () {
it('should render without crashing', function () {
const wrapper = shallow(<SubjectViewer />)
expect(wrapper).to.be.ok()
render(<SubjectViewer />)
expect(screen).to.be.ok()
})

it('should render nothing if the subject store is initialized', function () {
const wrapper = shallow(<SubjectViewer subjectQueueState={asyncStates.initialized} />)
expect(wrapper.type()).to.be.null()
const { container } = render(<SubjectViewer subjectQueueState={asyncStates.initialized} />)
expect(container.firstChild).to.be.null()
})



it('should render a loading indicator if the subject store is loading', function () {
const wrapper = shallow(<SubjectViewer subjectQueueState={asyncStates.loading} />)
expect(wrapper.text()).to.equal('SubjectViewer.loading')
render(<SubjectViewer subjectQueueState={asyncStates.loading} />)
expect(screen.getByText('SubjectViewer.loading')).to.exist()
})

it('should render nothing if the subject store errors', function () {
const wrapper = shallow(<SubjectViewer subjectQueueState={asyncStates.error} />)
expect(wrapper.type()).to.be.null()
const { container } = render(<SubjectViewer subjectQueueState={asyncStates.error} />)
expect(container.firstChild).to.be.null()
})

it('should render a subject viewer if the subject store successfully loads', function () {
const wrapper = shallow(<SubjectViewer subjectQueueState={asyncStates.success} subject={{ viewer: 'singleImage' }} />)
expect(wrapper.find(SingleImageViewer)).to.have.lengthOf(1)
})

it('should pass along the viewer configuration', function () {
const viewerConfiguration = {
zoomConfiguration: {
direction: 'both',
minZoom: 1,
maxZoom: 10,
zoomInValue: 1.2,
zoomOutValue: 0.8
}
}

const wrapper = shallow(<SubjectViewer subjectQueueState={asyncStates.success} subject={{ viewer: 'variableStar', viewerConfiguration }} />)
expect(wrapper.find(JSONDataViewer).props().viewerConfiguration).to.deep.equal(viewerConfiguration)
xit('should render a subject viewer if the subject store successfully loads', function () {
render(<SubjectViewer subjectQueueState={asyncStates.success} subject={{ viewer: '__TEST__' }} />)
expect(screen.findByText('viewer.test')).to.exist()
})

describe('when there is an null viewer because of invalid subject media', function () {
it('should render null', function () {
const wrapper = shallow(
const { container } = render(
<SubjectViewer
subjectQueueState={asyncStates.success}
subject={{ viewer: null }}
/>
)
expect(wrapper.html()).to.be.null()
expect(container.firstChild).to.be.null()
})
})
})
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
function MockViewer() {
return (
<div>viewer.test</div>
)
}

MockViewer.propTypes = {}

export default MockViewer
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
async function getViewer (viewer) {
let view = null;

if (viewer === 'dataImage') {
if (viewer === '__TEST__') {
view = await import('./MockViewer');
} else if (viewer === 'dataImage') {
view = await import('./../../components/DataImageViewer');
} else if (viewer === 'flipbook') {
view = await import('./../../components/FlipbookViewer');
Expand Down

0 comments on commit 5057416

Please sign in to comment.